解讀2014之前端篇：任性的顛覆式改變

2014年，整個IT領域發生了許多深刻而又復雜的變化，InfoQ策劃了“解讀2014”年終技術盤點系列文章，希望能夠給讀者清晰地梳理出技術領域在這一年的發展變化，回顧過去，繼續前行。

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

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

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

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。真正成為跨終端的前端工程師。</p>

  對于天貓前端而言，在新的一年里，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前端結合的產物，但這只是開始，三七如是說，未來還將繼續顛覆、成長、蛻變。

  作者簡介

  本文作者三七是QCon上海2014“沒有后端”專題出品人，不四是該專題講師