Ouven：2016年結束了，前端技術的發展也將進入到一個新的階段，那么未來又會給我們帶來什么呢？這里就個人發表下意見，歡迎點評。

趨勢系列：

1. UX設計丨《2017年即將流行的9大UX設計趨勢》
2. UI設計丨《趨勢丨8個你需要知道的2017年UI設計流行趨勢》
3. 硅谷設計師的預言丨《2017年，這五條設計趨勢將驚艷整個設計圈》
4. 為什么你不適合看趨勢文丨《自學丨從零基礎新手到高級UI/UX設計師的階段心路分享》

就前端主流技術框架的發展而言，過去的幾年里發展極快，在填補原有技術框架空白和不足的同時也漸漸趨于成熟。未來前端在已經趨向成熟的技術方向上面將會慢慢穩定下來，并進入技術迭代優化階段，例如語言標準、前端框架等。但這并不代表前端領域技術就此穩定了，因為新的技術方向已經出現，并在等待著下一個風口的到來。那么什么是下一個風口？虛擬現實？人工智能？或者其它的？不管未來如何，就前端應用開發方向來講，MVVM、Virtual DOM和同構的技術解決方案依然會延續發展一段時間。而且這段時間內前端框架技術的變化將不會像原來一樣具有顛覆性。

當 MVVM、Virtual DOM或同構等技術實踐都有很成熟高效的框架和方案去實現了。那么對于移動端應用，前端要重點發展的下一步可能就是MNV的原生NativeView開發，例如使用通用的MNV前端技術實現方案來降低移動端Native和前端Web交互的開發成本，讓前端既可以通過Native編譯開發出穩定的原生應用外殼，也可用來開發快速迭代、高性能的移動端MNV*應用，最終形成一套移動端上高效率的前端開發生態體系。

另一方面，新領域的Web化思路也會給前端帶來新的技術革新和發展機遇，例如Web VR（Virtual Reality，虛擬現實）、物聯網（Physical Web，顧名思義，就是將物體連入網絡的一種理念）Web化或者網站人工智能等，這些方向的開發者早已躍躍欲試，目前國外也能找到少數這樣的應用站點。

經過近幾年的發展，現代前端已經發展到跨端、跨界面的革新階段，目前主流以基于MVVM、Virtual DOM、移動端MNV*思路和前后端同構技術進行開發的項目居多，實現的方向也多種多樣，這些我們前面對應的章節也均有講到。當然除了這些，關于未來，還有一些我們前端工程師需要了解的，那我們就一起來看下未來前端具體可能會發展成怎樣的呢。

1. 新標準的進化與穩定

前端新標準和草案在不斷更新，HTML、CSS、JavaScript標準也在漸漸完善，盡管這些新的規范最終會淘汰舊標準的使用，新的項目也會以最新的標準作為開發依據，但要完全停止舊標準的使用并完成企業級舊項目的升級，依然需要一段時間。例如原有CoffeeScript的項目不可能一次性的做出遷移重構，但我們的項目仍需要維護，我們不能脫離實際項目去談技術，這就需要一段時間來慢慢修改；再如Web Component現在也不會馬上作為唯一標準大力推廣。但可以肯定的是，新的語言或技術標準一定會被推廣使用，只是還需要時間。

同時基于標準也會出現一些衍生的腳本語法和規范來適應特定的應用場景，這些非標準的規范除了解決具體業務技術問題之外，極有可能進化成下個標準的一部分或被新的標準借鑒。例如CoffeeScript雖然最終沒有形成JavaScript開發標準，但EcmaScript 6卻借鑒了其中很多優秀的特性；或者目前生成Virtual DOM的衍生腳本語法，未來也是有可能被列入到JavaScript標準當中的。

經過大版本的更新穩定，目前前端三層結構實現已經形成了HTML5、CSS3、EcmaScript 6+標準規范結合的階段，后面標準的新變化也會越來越小，至少迄今為止，我們無法預見HTML6的到來、CSS4的特性目前也令人擔憂、EcmaScript 7的特性更新也并不明顯，這都顯示出，目前前端項目實踐規范將會相對穩定一段較長的時間，后面的修改不會像之前一樣具有顛覆性，這也是技術標準發展到一定成熟階段會發生的事情。

2. 應用開發技術趨于穩定并將等待下一次革新

從前端應用開發框架上來看，先后經歷了DOM API、MVC、MVP、MVVM、Virtual DOM、MNV*階段，逐步解決了前端開發效率、設計模式、DOM交互性能的問題。

這些問題處理完成后，相關的框架也會進入穩定發展、版本有序迭代的時期。也就是說前端的交互框架不會像以前那樣變化頻繁，相對于之前前端框架的頻繁更換到現在主流框架的穩定升級，我們可以看出這點。但目前前端可能還有一件需要去做的事情，那就是使用前端技術棧獨立開發Native應用的能力，如果做到這點，前端開發者就可以結合MNV開發模式獨立進行Native應用開發并快速實現高性能的移動端應用了。因為目前的MNV框架的設計實現依然依賴已有少數幾個成熟Native應用的運行環境，還做不到在通用的APP上用前端技術棧直接調用移動設備原生API。

但如果前端技術棧具備了通用的Native開發能力，技術上也就意味著，JavaScript腳本（或是衍生的其它腳本）可以將任何一個普通的移動端應用編譯打成為Native包，并能使用MNV*模式直接與移動設備原生API進行交互。目前也有框架實現在做這方面的嘗試，但還不是很理想，仍需要更多的改進完善。但無論如何，前端技術棧的Native開發實現技術必將成為前端的下一個實踐核心。

3. 持續不斷的技術工具探索

前端技術效率和性能的提升當然不是僅靠前端框架都能解決的，還需要其他各方面輔助工具的支持，例如高效的調試工具、構建自動化工具、自動發布部署工具等。所以未來前端發展過程中各種高效工具的探索仍會不斷地出現，來解決特定場景下的問題，最后進行一個優勝劣汰的過程。

4. 瀏覽器平臺新特性的應用

就瀏覽器端應用而言，以Chrome為代表的瀏覽器版本和特性發展迭代極其迅速，經過多版本的迭代，瀏覽器上已經可以實現較多的增強和實用特性，例如Web Component、Service Worker、IndexDB、WebAssembly、WebRTC、EcmaScript 6+的支持等等，但由于瀏覽器的種類和版本的多樣性，我們還不能在業務中直接推廣使用這些新的特性，但這些卻仍然給了我們很多未來技術實現的可能，并且未來較多技術也會在這些新特性的基礎上優化或改進產生。

5. 更優化的前端技術開發生態

貫穿瀏覽器、服務端和移動端，前端正朝著多端、多技術實現的方向發展。這意味著前端這套技術棧能做的事情可能更多，涉及的平臺更廣，但作為整套技術開發生態的一部分，每一項技術的出現都必不可少的要去考慮開發效率、維護成本、性能、擴展性這幾個方面的問題，所以尋找并發展更優的開發生態體系仍是前端未來的大方向，對于新技術的出現，我們也會從下面幾個方面去評價它的意義。

• 開發效率。通常提高開發效率的方式就是使用開發框架。例如DOM編程框架的實現，簡化了腳本API的使用、提高了代碼復用性，選擇好的框架常常能夠讓我們的工作事半功倍。
• 維護成本。使用框架提高了項目的開發效率，但卻并不能解決代碼維護性的問題。這就需要借助合適的模式來管理項目開發的代碼，降低項目的維護成本，例如提取公共業務基礎庫、模塊化、組件化等。目前可能最佳的實踐就是組件化了，讓業務模塊的實現和管理有章可循，同時這也是Web標準未來發展的需要。
• 性能。從前端開發框架的演進來說，可以總結為先專注于解決前端的開發效率問題，然后解決前端的交互性能問題，再去嘗試打通Native開發的能力。所以性能將作為未來評價任何一個框架或技術優劣性的重要標準而存在，同時性能也將是一個無法避開的永久性話題。
• 擴展性。其實擴展性不只是講框架的方便定制和擴展特性，還要做到能與原來的技術框架相兼容并解耦合。很實際的場景，例如要使用某個新技術對原有的業務做改造，我們不可能馬上就替換掉所有的業務模塊，那么就不能因為新增加的技術框架實現而導致舊的模塊運行出現問題。所以在新技術的應用中，除了保證原有業務層的擴展兼容，實現功能的平滑過渡也是一個必須考慮的問題。

6. 前端新領域的出現

除了目前瀏覽器、服務器、移動端上的應用開發技術變革和探索外，未來前端也會出現新的應用場景。例如VR、物聯網Web化、Web人工智能等。這些雖然聽著比較遠，但一旦到來就會很快被使用，所以前端不僅自身發展快，推廣使用也極其迅速，例如移動互聯網Web的普及也就兩三年時間。 近幾年，Web VR和物聯網Web化的概念漸漸出現，國外甚至出現了以人工智能為支撐的Web應用。

首先，物聯網Web化是隨著傳統軟件管理的web化管理而出現的，目的是為了通過Web手段管理傳統可控的智能設備，當然這里不想去吹捧物聯網的終極目標到底有多美好，只是提出了物聯網Web化的可能性，可以肯定的一點是，人類目前所有工具類物體的Web化控制都是可能的，只是現在去做有一定的代價和風險存在，畢竟使用傳統的軟件控制目前沒有遇到大的瓶頸問題。物聯網未來的發展其實就是智能設備，通過控制這些智能設備來完成人類不容易完成的事情，如果在智能設備系統中融入人工智能的控制，這樣的設備也就可以理解成機器人了。而物聯網Web化就是通過Web的媒介來展示和控制這些智能設備的技術，盡管目前來看這還相對比較遙遠。

第二，Web VR方面，目前FireFox和Google Chrome也正在聯合推廣這一特性來讓瀏覽器支持，相信在瀏覽器端體驗VR的時代也離我們不遠了。不過就目前而言，軟件服務的虛擬現實技術本身提升空間仍然很大，而且VR涉及的內容很廣泛，現在可能涉及最多的也只是VR視頻類，例如還有體感類、環境類的應用場景尚待開發，不過Web VR的提出無疑也為前端技術發展提供了一個可能的方向，例如目前VR直播也成為了一個行業內的熱點技術，而且極有可能成為一種新的媒體內容表現形式出現在用戶瀏覽器上。就目前Web端內容展示來說，其形式主要包括頁面3D展示和VR展示兩方面，3D展示是指通過3D的畫面來展示要顯示的內容，目前瀏覽器上主要以three.js的實現為代表；而VR展示內容則通常是需要通過VR 頭盔來配合完成頁面上閱讀的3D內容。所以現有一些例如aframe等Web VR的框架主要是在three.js的基礎上構建的。

這段代碼是three.js給的一個官方例子，它可以創建一個場景、一個攝像機和一個立方體，并將立方體添加到場景中，然后通過WebGL來完成渲染并展示立方體的動畫。對這方面有興趣的讀者可以繼續去進行更深入的研究。

另外，你應該聽說過人工智能，不過你可能沒聽過Web和人工智能是怎么結合的，但是早在2011年就有人提出了Web與人工智能商業化結合的可能性，結合Web端的人機交互與后臺的機器學習，相信這個方向未來又將催生一批新的互聯網企業。盡管目前國內還缺乏它較多的應用場景，但在國外已經存在基于人工智能支撐的Web應用來為人們提供服務了。 可以認為我們又開始進入了一個前端技術過渡的時代，現有前端開發技術趨漸成熟，新的前端技術領域躍躍欲試，可以肯定的是物聯網Web、Web VR和人工智能必定會成為前端的下一批革命性技術。我們需要做的，仍是把握技術發展趨勢，緊跟領域前進的步伐，在漫漫前端道路上繼續前進。

「2016年設計大盤點」

1. HTML 5丨《2016年驚艷朋友圈的十大H5，你被幾個刷過屏？》
2. 流行色丨《2016流行這2種色彩！附優秀網頁設計案例》
3. 秋冬流行色丨《掌握最新色彩趨勢！不得不看的2016年秋冬流行色》

原文地址：imweb.io

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com