2017年前端領(lǐng)域的6個(gè)發(fā)展趨勢

    以廣州網(wǎng)站建設(shè)為主的訊博網(wǎng)絡(luò)看來，就前端主流技術(shù)框架的發(fā)展而言，過去的幾年里發(fā)展極快，在填補(bǔ)原有技術(shù)框架空白和不足的同時(shí)也漸漸趨于成熟。未來前端在已經(jīng)趨向成熟的技術(shù)方向上面將會(huì)慢慢穩(wěn)定下來，并進(jìn)入技術(shù)迭代優(yōu)化階段，例如語言標(biāo)準(zhǔn)、前端框架等。但這并不代表前端領(lǐng)域技術(shù)就此穩(wěn)定了，因?yàn)樾碌募夹g(shù)方向已經(jīng)出現(xiàn)，并在等待著下一個(gè)風(fēng)口的到來。那么什么是下一個(gè)風(fēng)口？虛擬現(xiàn)實(shí)？人工智能？或者其它的？不管未來如何，就前端應(yīng)用開發(fā)方向來講，MVVM、Virtual DOM和同構(gòu)的技術(shù)解決方案依然會(huì)延續(xù)發(fā)展一段時(shí)間。而且這段時(shí)間內(nèi)前端框架技術(shù)的變化將不會(huì)像原來一樣具有顛覆性。
    當(dāng) MVVM、Virtual DOM或同構(gòu)等技術(shù)實(shí)踐都有很成熟高效的框架和方案去實(shí)現(xiàn)了。那么對于移動(dòng)端應(yīng)用，前端要重點(diǎn)發(fā)展的下一步可能就是MNV的原生NativeView開發(fā)，例如使用通用的MNV前端技術(shù)實(shí)現(xiàn)方案來降低移動(dòng)端Native和前端Web交互的開發(fā)成本，讓前端既可以通過Native編譯開發(fā)出穩(wěn)定的原生應(yīng)用外殼，也可用來開發(fā)快速迭代、高性能的移動(dòng)端MNV*應(yīng)用，最終形成一套移動(dòng)端上高效率的前端開發(fā)生態(tài)體系。
另一方面，新領(lǐng)域的Web化思路也會(huì)給前端帶來新的技術(shù)革新和發(fā)展機(jī)遇，例如Web VR（Virtual Reality，虛擬現(xiàn)實(shí)）、物聯(lián)網(wǎng)（Physical Web，顧名思義，就是將物體連入網(wǎng)絡(luò)的一種理念）Web化或者網(wǎng)站人工智能等，這些方向的開發(fā)者早已躍躍欲試，目前國外也能找到少數(shù)這樣的應(yīng)用站點(diǎn)。
    經(jīng)過近幾年的發(fā)展，現(xiàn)代前端已經(jīng)發(fā)展到跨端、跨界面的革新階段，目前主流以基于MVVM、Virtual DOM、移動(dòng)端MNV*思路和前后端同構(gòu)技術(shù)進(jìn)行開發(fā)的項(xiàng)目居多，實(shí)現(xiàn)的方向也多種多樣，這些我們前面對應(yīng)的章節(jié)也均有講到。當(dāng)然除了這些，關(guān)于未來，還有一些我們前端工程師需要了解的，那我們就一起來看下未來前端具體可能會(huì)發(fā)展成怎樣的呢。
1. 新標(biāo)準(zhǔn)的進(jìn)化與穩(wěn)定
前端新標(biāo)準(zhǔn)和草案在不斷更新，HTML、CSS、JavaScript標(biāo)準(zhǔn)也在漸漸完善，盡管這些新的規(guī)范最終會(huì)淘汰舊標(biāo)準(zhǔn)的使用，新的項(xiàng)目也會(huì)以最新的標(biāo)準(zhǔn)作為開發(fā)依據(jù)，但要完全停止舊標(biāo)準(zhǔn)的使用并完成企業(yè)級舊項(xiàng)目的升級，依然需要一段時(shí)間。例如原有CoffeeScript的項(xiàng)目不可能一次性的做出遷移重構(gòu)，但我們的項(xiàng)目仍需要維護(hù)，我們不能脫離實(shí)際項(xiàng)目去談技術(shù)，這就需要一段時(shí)間來慢慢修改；再如Web Component現(xiàn)在也不會(huì)馬上作為唯一標(biāo)準(zhǔn)大力推廣。但可以肯定的是，新的語言或技術(shù)標(biāo)準(zhǔn)一定會(huì)被推廣使用，只是還需要時(shí)間。
同時(shí)基于標(biāo)準(zhǔn)也會(huì)出現(xiàn)一些衍生的腳本語法和規(guī)范來適應(yīng)特定的應(yīng)用場景，這些非標(biāo)準(zhǔn)的規(guī)范除了解決具體業(yè)務(wù)技術(shù)問題之外，極有可能進(jìn)化成下個(gè)標(biāo)準(zhǔn)的一部分或被新的標(biāo)準(zhǔn)借鑒。例如CoffeeScript雖然最終沒有形成JavaScript開發(fā)標(biāo)準(zhǔn)，但EcmaScript 6卻借鑒了其中很多優(yōu)秀的特性；或者目前生成Virtual DOM的衍生腳本語法，未來也是有可能被列入到JavaScript標(biāo)準(zhǔn)當(dāng)中的。
經(jīng)過大版本的更新穩(wěn)定，目前前端三層結(jié)構(gòu)實(shí)現(xiàn)已經(jīng)形成了HTML5、CSS3、EcmaScript 6+標(biāo)準(zhǔn)規(guī)范結(jié)合的階段，后面標(biāo)準(zhǔn)的新變化也會(huì)越來越小，至少迄今為止，我們無法預(yù)見HTML6的到來、CSS4的特性目前也令人擔(dān)憂、EcmaScript 7的特性更新也并不明顯，這都顯示出，目前前端項(xiàng)目實(shí)踐規(guī)范將會(huì)相對穩(wěn)定一段較長的時(shí)間，后面的修改不會(huì)像之前一樣具有顛覆性，這也是技術(shù)標(biāo)準(zhǔn)發(fā)展到一定成熟階段會(huì)發(fā)生的事情。
2. 應(yīng)用開發(fā)技術(shù)趨于穩(wěn)定并將等待下一次革新
從前端應(yīng)用開發(fā)框架上來看，先后經(jīng)歷了DOM API、MVC、MVP、MVVM、Virtual DOM、MNV*階段，逐步解決了前端開發(fā)效率、設(shè)計(jì)模式、DOM交互性能的問題。
這些問題處理完成后，相關(guān)的框架也會(huì)進(jìn)入穩(wěn)定發(fā)展、版本有序迭代的時(shí)期。也就是說前端的交互框架不會(huì)像以前那樣變化頻繁，相對于之前前端框架的頻繁更換到現(xiàn)在主流框架的穩(wěn)定升級，我們可以看出這點(diǎn)。但目前前端可能還有一件需要去做的事情，那就是使用前端技術(shù)棧獨(dú)立開發(fā)Native應(yīng)用的能力，如果做到這點(diǎn)，前端開發(fā)者就可以結(jié)合MNV開發(fā)模式獨(dú)立進(jìn)行Native應(yīng)用開發(fā)并快速實(shí)現(xiàn)高性能的移動(dòng)端應(yīng)用了。因?yàn)槟壳暗腗NV框架的設(shè)計(jì)實(shí)現(xiàn)依然依賴已有少數(shù)幾個(gè)成熟Native應(yīng)用的運(yùn)行環(huán)境，還做不到在通用的APP上用前端技術(shù)棧直接調(diào)用移動(dòng)設(shè)備原生API。
但如果前端技術(shù)棧具備了通用的Native開發(fā)能力，技術(shù)上也就意味著，JavaScript腳本（或是衍生的其它腳本）可以將任何一個(gè)普通的移動(dòng)端應(yīng)用編譯打成為Native包，并能使用MNV*模式直接與移動(dòng)設(shè)備原生API進(jìn)行交互。目前也有框架實(shí)現(xiàn)在做這方面的嘗試，但還不是很理想，仍需要更多的改進(jìn)完善。但無論如何，前端技術(shù)棧的Native開發(fā)實(shí)現(xiàn)技術(shù)必將成為前端的下一個(gè)實(shí)踐核心。
3. 持續(xù)不斷的技術(shù)工具探索
前端技術(shù)效率和性能的提升當(dāng)然不是僅靠前端框架都能解決的，還需要其他各方面輔助工具的支持，例如高效的調(diào)試工具、構(gòu)建自動(dòng)化工具、自動(dòng)發(fā)布部署工具等。所以未來前端發(fā)展過程中各種高效工具的探索仍會(huì)不斷地出現(xiàn)，來解決特定場景下的問題，最后進(jìn)行一個(gè)優(yōu)勝劣汰的過程。
4. 瀏覽器平臺新特性的應(yīng)用
就瀏覽器端應(yīng)用而言，以Chrome為代表的瀏覽器版本和特性發(fā)展迭代極其迅速，經(jīng)過多版本的迭代，瀏覽器上已經(jīng)可以實(shí)現(xiàn)較多的增強(qiáng)和實(shí)用特性，例如Web Component、Service Worker、IndexDB、WebAssembly、WebRTC、EcmaScript 6+的支持等等，但由于瀏覽器的種類和版本的多樣性，我們還不能在業(yè)務(wù)中直接推廣使用這些新的特性，但這些卻仍然給了我們很多未來技術(shù)實(shí)現(xiàn)的可能，并且未來較多技術(shù)也會(huì)在這些新特性的基礎(chǔ)上優(yōu)化或改進(jìn)產(chǎn)生。
5. 更優(yōu)化的前端技術(shù)開發(fā)生態(tài)
貫穿瀏覽器、服務(wù)端和移動(dòng)端，前端正朝著多端、多技術(shù)實(shí)現(xiàn)的方向發(fā)展。這意味著前端這套技術(shù)棧能做的事情可能更多，涉及的平臺更廣，但作為整套技術(shù)開發(fā)生態(tài)的一部分，每一項(xiàng)技術(shù)的出現(xiàn)都必不可少的要去考慮開發(fā)效率、維護(hù)成本、性能、擴(kuò)展性這幾個(gè)方面的問題，所以尋找并發(fā)展更優(yōu)的開發(fā)生態(tài)體系仍是前端未來的大方向，對于新技術(shù)的出現(xiàn)，我們也會(huì)從下面幾個(gè)方面去評價(jià)它的意義。
 ·開發(fā)效率。通常提高開發(fā)效率的方式就是使用開發(fā)框架。例如DOM編程框架的實(shí)現(xiàn)，簡化了腳本API的使用、提高了代碼復(fù)用性，選擇好的框架常常能夠讓我們的工作事半功倍。
 ·維護(hù)成本。使用框架提高了項(xiàng)目的開發(fā)效率，但卻并不能解決代碼維護(hù)性的問題。這就需要借助合適的模式來管理項(xiàng)目開發(fā)的代碼，降低項(xiàng)目的維護(hù)成本，例如提取公共業(yè)務(wù)基礎(chǔ)庫、模塊化、組件化等。目前可能最佳的實(shí)踐就是組件化了，讓業(yè)務(wù)模塊的實(shí)現(xiàn)和管理有章可循，同時(shí)這也是Web標(biāo)準(zhǔn)未來發(fā)展的需要。
 ·性能。從前端開發(fā)框架的演進(jìn)來說，可以總結(jié)為先專注于解決前端的開發(fā)效率問題，然后解決前端的交互性能問題，再去嘗試打通Native開發(fā)的能力。所以性能將作為未來評價(jià)任何一個(gè)框架或技術(shù)優(yōu)劣性的重要標(biāo)準(zhǔn)而存在，同時(shí)性能也將是一個(gè)無法避開的永久性話題。
 ·擴(kuò)展性。其實(shí)擴(kuò)展性不只是講框架的方便定制和擴(kuò)展特性，還要做到能與原來的技術(shù)框架相兼容并解耦合。很實(shí)際的場景，例如要使用某個(gè)新技術(shù)對原有的業(yè)務(wù)做改造，我們不可能馬上就替換掉所有的業(yè)務(wù)模塊，那么就不能因?yàn)樾略黾拥募夹g(shù)框架實(shí)現(xiàn)而導(dǎo)致舊的模塊運(yùn)行出現(xiàn)問題。所以在新技術(shù)的應(yīng)用中，除了保證原有業(yè)務(wù)層的擴(kuò)展兼容，實(shí)現(xiàn)功能的平滑過渡也是一個(gè)必須考慮的問題。
6. 前端新領(lǐng)域的出現(xiàn)
除了目前瀏覽器、服務(wù)器、移動(dòng)端上的應(yīng)用開發(fā)技術(shù)變革和探索外，未來前端也會(huì)出現(xiàn)新的應(yīng)用場景。例如VR、物聯(lián)網(wǎng)Web化、Web人工智能等。這些雖然聽著比較遠(yuǎn)，但一旦到來就會(huì)很快被使用，所以前端不僅自身發(fā)展快，推廣使用也極其迅速，例如移動(dòng)互聯(lián)網(wǎng)Web的普及也就兩三年時(shí)間。 近幾年，Web VR和物聯(lián)網(wǎng)Web化的概念漸漸出現(xiàn)，國外甚至出現(xiàn)了以人工智能為支撐的Web應(yīng)用。
首先，物聯(lián)網(wǎng)Web化是隨著傳統(tǒng)軟件管理的web化管理而出現(xiàn)的，目的是為了通過Web手段管理傳統(tǒng)可控的智能設(shè)備，當(dāng)然這里不想去吹捧物聯(lián)網(wǎng)的終極目標(biāo)到底有多美好，只是提出了物聯(lián)網(wǎng)Web化的可能性，可以肯定的一點(diǎn)是，人類目前所有工具類物體的Web化控制都是可能的，只是現(xiàn)在去做有一定的代價(jià)和風(fēng)險(xiǎn)存在，畢竟使用傳統(tǒng)的軟件控制目前沒有遇到大的瓶頸問題。物聯(lián)網(wǎng)未來的發(fā)展其實(shí)就是智能設(shè)備，通過控制這些智能設(shè)備來完成人類不容易完成的事情，如果在智能設(shè)備系統(tǒng)中融入人工智能的控制，這樣的設(shè)備也就可以理解成機(jī)器人了。而物聯(lián)網(wǎng)Web化就是通過Web的媒介來展示和控制這些智能設(shè)備的技術(shù)，盡管目前來看這還相對比較遙遠(yuǎn)。
第二，Web VR方面，目前FireFox和Google Chrome也正在聯(lián)合推廣這一特性來讓瀏覽器支持，相信在瀏覽器端體驗(yàn)VR的時(shí)代也離我們不遠(yuǎn)了。不過就目前而言，軟件服務(wù)的虛擬現(xiàn)實(shí)技術(shù)本身提升空間仍然很大，而且VR涉及的內(nèi)容很廣泛，現(xiàn)在可能涉及最多的也只是VR視頻類，例如還有體感類、環(huán)境類的應(yīng)用場景尚待開發(fā)，不過Web VR的提出無疑也為前端技術(shù)發(fā)展提供了一個(gè)可能的方向，例如目前VR直播也成為了一個(gè)行業(yè)內(nèi)的熱點(diǎn)技術(shù)，而且極有可能成為一種新的媒體內(nèi)容表現(xiàn)形式出現(xiàn)在用戶瀏覽器上。就目前Web端內(nèi)容展示來說，其形式主要包括頁面3D展示和VR展示兩方面，3D展示是指通過3D的畫面來展示要顯示的內(nèi)容，目前瀏覽器上主要以three.js的實(shí)現(xiàn)為代表；而VR展示內(nèi)容則通常是需要通過VR 頭盔來配合完成頁面上閱讀的3D內(nèi)容。所以現(xiàn)有一些例如aframe等Web VR的框架主要是在three.js的基礎(chǔ)上構(gòu)建的。
這段代碼是three.js給的一個(gè)官方例子，它可以創(chuàng)建一個(gè)場景、一個(gè)攝像機(jī)和一個(gè)立方體，并將立方體添加到場景中，然后通過WebGL來完成渲染并展示立方體的動(dòng)畫。對這方面有興趣的讀者可以繼續(xù)去進(jìn)行更深入的研究。
另外，你應(yīng)該聽說過人工智能，不過你可能沒聽過Web和人工智能是怎么結(jié)合的，但是早在2011年就有人提出了Web與人工智能商業(yè)化結(jié)合的可能性，結(jié)合Web端的人機(jī)交互與后臺的機(jī)器學(xué)習(xí)，相信這個(gè)方向未來又將催生一批新的互聯(lián)網(wǎng)企業(yè)。盡管目前國內(nèi)還缺乏它較多的應(yīng)用場景，但在國外已經(jīng)存在基于人工智能支撐的Web應(yīng)用來為人們提供服務(wù)了。 可以認(rèn)為我們又開始進(jìn)入了一個(gè)前端技術(shù)過渡的時(shí)代，現(xiàn)有前端開發(fā)技術(shù)趨漸成熟，新的前端技術(shù)領(lǐng)域躍躍欲試，可以肯定的是物聯(lián)網(wǎng)Web、Web VR和人工智能必定會(huì)成為前端的下一批革命性技術(shù)。我們需要做的，仍是把握技術(shù)發(fā)展趨勢，緊跟領(lǐng)域前進(jìn)的步伐，在漫漫前端道路上繼續(xù)前進(jìn)。