[轉]解讀2014以前端篇：任性的顛覆式改變

http://www.infoq.com/cn/articles/2014-review-front-end-part

2014年，整個IT領域發生了許多深入而又複雜的變化，InfoQ策劃了「解讀2014」年終技術盤點系列文章，但願可以給讀者清晰地梳理出技術領域在這一年的發展變化，回顧過去，繼續前行。

本篇是解讀系列的前端篇，小編邀請到天貓前端團隊的三7、鐵軍、不4、鬼道這四位專家來解讀2014年前端領域最引人注目的幾大熱點。

HTML5正式定稿，ECMAScript 6 規範從紙上走到現實

2014年10月28日，W3C宣佈HTML5正式定稿爲標準，這不只僅標誌着歷經8年的標準紛爭告一段落，也表明着HTML5這個名詞會逐步洗去鉛華，其技術真正融入到Web開發的每一個角落，就像當年Ajax同樣，當你們再也不大張旗鼓鼓吹概念和商業炒做時，正是其成熟時代到來了。HTML5規範和之前最大區別是讓Web最基礎架構從Web Page升級到Web Application，正符合主流互聯網從桌面端遷移到移動端的趨勢，是移動互聯網終端碎片化的一劑良方。在移動智能終端性能和網絡速度到達消費者需求時，將會是Mobile Web大展跨平臺神威時，這從網絡基礎設施領先的韓國應用從純Native到大量採用Hybrid形式就能夠看出一些端倪。

 

相關廠商內容

從Java代碼到機器代碼：如何編寫高度優化的Java程序

遊戲運維之「痛」並快樂—騰訊遊戲運維實踐之路

高德—快速轉型時期的穩定性架構實踐

 

相關贊助商

QCon全球軟件開發大會，2015年10月15-17日，上海光大會展中心國際大酒店。9折報名。

 

HTML5在還沒有定稿前已有了大量實踐，以致於其定稿之日也是成熟之時，一樣下一代的JavaScript標準ECMAScript 6雖還沒有定稿，但瀏覽器端Chrome和Firefox等新版本已實現 ES 6 的部分語法（Promise、Generators等），一樣在服務器端，Node v0.11 最新版本也已支持部分核心 ES 6 語法。這些 ES 6 新特性，大大地提高了開發者的效率。在 Node.js 中，已經有了很是優秀的基於 ES 6 特性的新框架，並已開始普遍地運用在生產環境中。隨着 Regenerator、6to5等轉換工具的出現，在前端使用 ES 6 的新特性也徹底不是問題，這將大大提升整個JavaScript開發羣體的效率，讓大規模應用Nodejs的時代更快到來。

HTML和ECMAScript是前端開發的基石，其快速升級和革新意味着這個領域面臨的挑戰和旺盛的生命力。

YUI 中止開發，小而美的mv*庫的流行

2014年8月29日，Yahoo宣佈中止開發YUI，如Julien在該博文所說，這幾年前端行業愈來愈活躍，新技術和工具層出不窮，對於大而厚的基礎庫愈來愈不適應業務的發展需求。與此同時，單頁應用技術符合Web應用化的趨勢，一方面隨着業務愈來愈複雜，前端API能力愈來愈強，數據和展示結合也愈來愈緊密，另外一方面，Mobile的發展對Web人機交互體驗有更高要求，效果上要交互體驗極致到Native的程度，性能上要前端庫的高效且粒度及靈活性精細化，這也是相似reactjs等新型mv*庫開始流行的一個緣由。

 

相似問題在jQuery身上也挑戰很大，過去小而快的優勢在移動時代已沒有優點，須要面對移動端新的極致人機交互體驗挑戰。阿里開源框架KISSY正在使其核心模塊粒度更加細小靈活，對低級瀏覽器的兼容拆分，在Mobile等高級瀏覽器下加載更少的代碼，這是應對這一趨勢所必須作的改變。前端框架和類庫是爲了提高前端開發的效率和品質，當人機交互環境發生重大變革時，這些基礎設施都必須勇於大膽提前順勢而變，不然只能被淘汰。

基於Web Components的跨終端組件快速發展

 

2014年經過指令化/聲明式調用前端組件的形式發展迅速：好比Angularjs、Reactjs及新晉的vuejs等各類熱議和實踐，其中一個特色是Directive的引入。Web Components 規範將組件定義使用標準化，這種標準化正式跨平臺跨終端業務急需的，爲前端開發方案帶來巨大機會。2014年Google IO 上《Polymer and the Web Components revolution》介紹，2014年北京QCON 豆瓣的《DOMO UI》 、百度的《跨終端組件實戰》，都是基於Web Component的實踐落地（DOMO UI相似Web Component）。究其背後緣由：一方面前端開發愈來愈富交互化，組件共享複用也愈來愈頻繁，如何高效一致地使用是每一個組件庫須要解決的問題，而Web Commponents的到來讓咱們看到了機會；另外一方面，Mobile的高速發展，讓前端開發不只僅只面對桌面一個終端，更要面對Phone、Pad乃至TV終端，Web和不一樣的Native開始混用，如何讓Native代碼也能像Web組件同樣方便調用，就須要引入相似HTML之類得聲明描述組件，而Web Components 正式符合這一特性的原生標準，爲組件的跨終端帶來無限想象。面對消費者終端的碎片化，Web Components會成爲跨端UI模塊化協做的基礎。

目前天貓正在構建跨終端高品質UI體系MUI，從設計到客戶端和Web前端一塊兒打造一套UI設計規範和模塊化組件體系覆蓋全部端的天貓業務，從iPhone到Android Phone，從iPad到Android Pad，從Mobile Web到Desktop Web，還有TV等，實現任何標準的UI設計都可以快速覆蓋全站，其背後技術思想之一就是Web Components。

基於Node.js的先後端分離方案流行，同時社區和企業邊協做邊競爭使Node.js在穩定服務和創新發展中平衡

1989年3月12日，Tim Berners-Lee創立了WWW（Word Wide Web），Web的迅猛發展成爲Internet上最重要的內容承載方式，以致於不少人會認爲Web就是Internet。億萬互聯網用戶催生無數的Web開發者和巨無霸網站，Web的規模化促使了先後端的分工，因而2001年雅虎有了全世界第一個前端工程師職位，此時前端專一於HTML、CSS和JavaScript，後端專一於業務和數據，而數據（Data）和展示（View）結合部分因爲成本較低和技術難度不高而分工模糊，大部分狀況下這部分工做依舊是後端工程師在負責。2007年iPhone誕生，互聯網全面向移動快速進化，各類系統和硬件配置的Phone和Pad興起使得用戶訪問互聯網的終端碎片化，致使互聯網產品都須要一套數據（Data）多個展示（View），因此Data和View結合的技術難度和成本劇增使得這部分工做必須從後端向前端轉移，前端負責客戶端和服務端全部的View及View相關的Control，後端負責業務邏輯和數據並以API服務的方式向前輸出，這樣先後端完全分離，對於產品開發而言前端只須要控制View和標準化的Data服務，不存在後端了。

先後端分離技術的難點是在服務端的前端，這個領域一直被後端開發語言和思想所統治，對於原本就很稀缺的前端工程師在技能和工做量上提出過高的要求，致使進展不順利，直到Node.js橫空出世。Node.js出現，不只讓前端工程師終於有能力本身爲本身打造提升工做效率的工具，讓前端工程師發揮程序上的想象力，也讓先後端分離有了更好的選擇，因此整個業界很是多公司在這方面嘗試，有些甚至嘗試使用Node.js徹底取代後端語言，好比Java。目前還處於風起雲涌的初期，因此即便在同一個公司如阿里巴巴內部都不少相似嘗試，好比淘寶的Midway、支付寶的iChair和天貓的Wormhole等，主因是難點並不在於Node.js技術自己，而在於和原有業務服務體系對接和運維能力上，因此切入點不少且難以標準化，先多點嘗試相互競爭，後續在基於實際方案的基礎上進行合併統一是咱們目前的思路。天貓的首頁已經構建在Node.js上，不只經受了2014雙11的考驗且性能表現優異，目前正在把這個方案應用到天貓全部活動和頻道頁面，到2015雙11會有至關多的流量運行在Node.js上，那將是激動人心的時刻。

Node.js開始大規模使用和其逐漸成熟完善且社區很是有活力關係密切，但從七月初開始，Node.js 核心開發者與 Node 社區核心參與者認爲 Joyent 管理下的 Node 開發進展太慢，且對於社區的需求響應不及時，開始與 Joyent 公司進行談判，但願將 Node 源碼從 Joyent 公司拿出來，放到 Linux 基金會下基於社區來進行維護。最終事件以 Node.js 核心開發者 fork 了 Node 源碼，重命名爲 io.js 結束。2015年1月13日，io.js發佈 1.0 版本，同時，node 也將發佈 0.12 版本。 這事件對 Node 社區影響很是之大。首先，形成Node 源碼的開發工做停滯了三個月左右，其次，io.js 開發活躍程度已經大於 Node.js，且io.js 和 Node.js 的開發理念不一樣必然致使以後二者會漸行漸遠，但從長遠角度來看，競爭雖然帶來陣痛但有利於更好的產品出現。

2014 年初，Node.js 當時項目掌門人從 Joyent 離職，基於 npm 創立了 npm, Inc，開始致力於 Node.js 的包管理平臺開發和維護。以前 npm 屬於社區維護性質，服務不夠穩定，隨着 Node 社區的發展壯大，npm 服務的穩定性愈來愈重要，所以 npm, Inc 的成立保障了維繫 Node 社區最重要的基礎服務設施的穩定性。 2014 年末， npm, Inc 發佈新官網，同時從新定義 npm, Inc 爲 JavaScript 的包管理工具和平臺。此時 npm 已經擁有了接近 12 萬個模塊，超越了 maven 成爲了最大的包管理中心。 隨着模塊數量的急劇增長，企業使用 npm 的需求也愈來愈高，npm, Inc 開始將目標瞄準了企業版 npm 市場，如今處於邀請公司試用期。而早在2014年中，阿里巴巴內部的私有 npm 服務已經很是完善，如今已經有每個月超過 300 萬次的下載，服務於全公司的 JavaScript 程序員。因此，社區驅動了創新和快速發展，企業會推進服務穩定和健壯，二者相互協做和競爭會讓整個生態更有旺盛的生命力。

Native定義爲前端的一部分，並開始深刻融合

2007年1月9日，iPhone誕生，帶來了整我的機交互領域的顛覆式創新，對於前端技術也有了顛覆式改變，初期甚至到了討論Web is dead的地步，加速Web世界的危機感和積極向移動端轉型，同時隨着Phone和Pad的嚴重碎片化和整個互聯網都從桌面轉向了移動，直接致使移動應用內容的規模化和多元化及鏈接和整合整個世界，愈來愈發現僅僅靠Native自己是不夠的，須要Web和Native結合起來纔可以知足極致人機交互和規模化聯通世界的要求，好比微信其實就是這方面的表率。前端的工做就是爲人機交互的UI提供工程化方案，當整個互聯網向移動轉移時，原來的Web體系和工程方案已不適用了，這就是爲何YUI會倒下，而HTML和JavaScript要快速地推出革新版本，一樣Web Components必須知足移動終端碎片化的模塊化方案才能高速發展，而Node.js的流行剛好迎合上先後端分離前端工程師須要掌控服務端前端的趨勢。這一些也僅僅是剛剛開始，TV和Watch等愈來愈多碎片化的終端進入到平常生活，前端的挑戰也剛剛開始且史無前例，這是最好的時代。Web是桌面時代人機交互技術方案的王者，但在移動智能終端時代目前沒法及時知足新興的人機交互能力。這很是相似Ajax到來時，HTML + CSS已經沒法很好地知足人機交互UI開發的須要，前端要快速掌握JavaScript同樣，移動互聯網時代，Web前端工程師須要快速掌握Native開發能力成爲跨終端的前端開發工程師，這不是拋棄Web轉向Native，而是把Web和Native結合起來，就像當年HTML + CSS + JavaScript結合起來產生巨大的威力同樣。這不是1+1 = 2，而是1+1>2的問題，不是簡單的技術領域擴充，而是真正的人機交互技術深刻探索，前端技術方案歷來都不是由穩定的單一技術所能解決的。如今Native開發規模愈來愈大已開始在探索相似Web的View發佈機制和模塊化依賴關係管理等等，而Web也正在探索弱網絡或不肯定網絡性能、內存管理及硬件調用的技術方案，二者結合（Hybrid）對於咱們的大規模平臺化業務來講是事半功倍的正確方向。

ArchSummit2014深圳大會，手淘 Android 負責人無鋒分享的手淘 android 架構《手機淘寶的客戶端架構探索之路》中提到「像 Web 同樣輕盈的 Native App！」。可見從Native同窗的角度已開始考慮向Web融合，而在天貓咱們定義：前端 ＝ Web + Native，目前天貓已有10%的Web前端同窗擁有Native開發的能力，預計不到2015年中會擴大到50%。雖然目前已有大量的Hybrid應用和使用類PhoneGAP的混合開發，但Native和Web的深刻融合遠遠不夠，尤爲是發佈能力和大規模協做的能力上，以及對於組件、性能等方面的相互協做。以前一直討論Native和Web孰優孰劣，誰取代誰，但通過2014相信更多人已意識到這是個僞命題，真正評判一項技術的價值是在業務場景中，選擇合適且面向將來的技術最重要，須要思考如何用技術爲用戶和業務帶來價值，天貓也正在前進的路上，隨着愈來愈多人同時掌握Web和Native，二者的協做會更加深刻和相互發展，並做爲整個前端的範疇帶來更多的技術突破、效率提高和極致體驗，而原來的Web前端工程師也會進行技能升級，勇敢地打破自個人壁壘擁抱移動端，尤爲是Native技術，前端 ＝ Web + Native。真正成爲跨終端的前端工程師。

對於天貓前端而言，在新的一年裏，Mobile會變革爲主場，主要有三個很明確的方向：跨終端組件、大規模Node、Native 和 Web 融合。

跨終端組件MUI： MUI是天貓統一的跨終端UI組件庫，這是設計師、Native開發和Web前端一塊兒協做的全站性質項目。以前已經歷了兩個版本完成了基礎視覺規範和JS組件規範及管理升級機制，新一年的重要方向是：跨終端。目前正在進行的MUI3.0核心是天貓內部稱做FEModule的組件體系，就是一個完整的組件規範（包括樣式、腳本、模板和數據定義），實現前端、後端一致的組件體系，即一個模塊徹底獨立，加上數據便可渲染，模塊既能夠前端渲染又能夠後端渲染。MUI3.0會基於Web components和Native組件融合規範，實現跨終端的組件體系。

大規模Node：首頁在天貓雙11中在穩定性及性能上已經被證明表現出色，同時對於先後端分離核心的數據API定義也有了系統化的規範和工具。新一代渲染引擎Wormhole CDN 3.1全網發佈，支持 feLoader / feModule / 全局頭尾，至此天貓應用、CDN、頻道頁環境的模版渲染環境基本都已經完善，Node.js在天貓承擔更多前端業務的時代已經到來。

Native和Web融合：2014年咱們在技術和組織結構上作了不少突破，尤爲是組織上把Web和Native前端調整爲以業務維度的一個團隊，前端 ＝ Native + Web，持續推進團隊轉型深刻到Native。咱們要把Native的高性能和系統能力同Web的發佈能力和規模協做結合起來，這其中有Native和Web互調的Hybrid API，利用Native的緩存和系統能力把Web的基礎打開速度作到Native同樣的通用方案等等。

智能移動終端帶來人機交互變革不只僅致使了前端開發這個職位須要自我突破革新、從新審視和定義，更致使UI設計師的設計場景發生翻天覆地的變化，從單一的鼠標鍵盤大屏幕變成了多終端的觸屏聲音陀螺儀傳感器等，設計須要更透析這些新的人機交互形式和技術纔可以面向將來。新的一年裏，三七將開始負責天貓的UED團隊，把設計和技術結合起來，就像D2前端技術論壇理念那樣「好的設計驅動技術創新，好的技術給設計無限想象」，MUI3.0就是設計、客戶端開發和Web前端結合的產物，但這只是開始，三七如是說，將來還將繼續顛覆、成長、蛻變。