HTML5正式定稿，ECMAScript 6 規(guī)范從紙上走到現(xiàn)實(shí)

? ? 2014年10月28日，W3C宣布HTML5正式定稿為標(biāo)準(zhǔn)，這不僅僅標(biāo)志著歷經(jīng)8年的標(biāo)準(zhǔn)紛爭(zhēng)告一段落，也代表著HTML5這個(gè)名詞會(huì)逐步洗去鉛華，其技術(shù)真正融入到Web開發(fā)的每個(gè)角落，就像當(dāng)年Ajax一樣，當(dāng)大家不再大張旗鼓鼓吹概念和商業(yè)炒作時(shí)，正是其成熟時(shí)代到來了。HTML5規(guī)范和以前最大區(qū)別是讓W(xué)eb最基礎(chǔ)架構(gòu)從Web Page升級(jí)到Web Application，正符合主流互聯(lián)網(wǎng)從桌面端遷移到移動(dòng)端的趨勢(shì)，是移動(dòng)互聯(lián)網(wǎng)終端碎片化的一劑良方。在移動(dòng)智能終端性能和網(wǎng)絡(luò)速度到達(dá)消費(fèi)者需求時(shí)，將會(huì)是Mobile Web大展跨平臺(tái)神威時(shí)，這從網(wǎng)絡(luò)基礎(chǔ)設(shè)施領(lǐng)先的韓國(guó)應(yīng)用從純Native到大量采用Hybrid形式就可以看出一些端倪。?

? ? ?HTML5在尚未定稿前已有了大量實(shí)踐，以至于其定稿之日也是成熟之時(shí)，同樣下一代的JavaScript標(biāo)準(zhǔn)ECMAScript 6雖尚未定稿，但瀏覽器端Chrome和Firefox等新版本已實(shí)現(xiàn) ES 6 的部分語法（Promise、Generators等），同樣在服務(wù)器端，Node v0.11 最新版本也已支持部分核心 ES 6 語法。這些 ES 6 新特性，大大地提升了開發(fā)者的效率。在 Node.js 中，已經(jīng)有了非常優(yōu)秀的基于 ES 6 特性的新框架，并已開始廣泛地運(yùn)用在生產(chǎn)環(huán)境中。隨著 Regenerator、6to5等轉(zhuǎn)換工具的出現(xiàn)，在前端使用 ES 6 的新特性也完全不是問題，這將大大提高整個(gè)JavaScript開發(fā)群體的效率，讓大規(guī)模應(yīng)用Nodejs的時(shí)代更快到來。

HTML和ECMAScript是前端開發(fā)的基石，其快速升級(jí)和革新意味著這個(gè)領(lǐng)域面臨的挑戰(zhàn)和旺盛的生命力

YUI 停止開發(fā)，小而美的mv*庫的流行

? ? ? 2014年8月29日，Yahoo宣布停止開發(fā)YUI，如Julien在該博文所說，這幾年前端行業(yè)越來越活躍，新技術(shù)和工具層出不窮，對(duì)于大而厚的基礎(chǔ)庫越來越不適應(yīng)業(yè)務(wù)的發(fā)展需求。與此同時(shí)，單頁應(yīng)用技術(shù)符合Web應(yīng)用化的趨勢(shì)，一方面隨著業(yè)務(wù)越來越復(fù)雜，前端API能力越來越強(qiáng)，數(shù)據(jù)和展現(xiàn)結(jié)合也越來越緊密，另一方面，Mobile的發(fā)展對(duì)Web人機(jī)交互體驗(yàn)有更高要求，效果上要交互體驗(yàn)極致到Native的程度，性能上要前端庫的高效且粒度及靈活性精細(xì)化，這也是類似reactjs等新型mv*庫開始流行的一個(gè)原因。

? ? ? 類似問題在jQuery身上也挑戰(zhàn)很大，過去小而快的優(yōu)點(diǎn)在移動(dòng)時(shí)代已沒有優(yōu)勢(shì)，需要面對(duì)移動(dòng)端新的極致人機(jī)交互體驗(yàn)挑戰(zhàn)。阿里開源框架KISSY正在使其核心模塊粒度更加細(xì)小靈活，對(duì)低級(jí)瀏覽器的兼容拆分，在Mobile等高級(jí)瀏覽器下加載更少的代碼，這是應(yīng)對(duì)這一趨勢(shì)所必須做的改變。前端框架和類庫是為了提升前端開發(fā)的效率和品質(zhì)，當(dāng)人機(jī)交互環(huán)境發(fā)生重大變革時(shí)，這些基礎(chǔ)設(shè)施都必須敢于大膽提早順勢(shì)而變，否則只能被淘汰。

基于Web Components的跨終端組件快速發(fā)展

?2014年通過指令化/聲明式調(diào)用前端組件的形式發(fā)展迅速：比如Angularjs、Reactjs及新晉的vuejs等各種熱議和實(shí)踐，其中一個(gè)特點(diǎn)是Directive的引入。Web Components 規(guī)范將組件定義使用標(biāo)準(zhǔn)化，這種標(biāo)準(zhǔn)化正式跨平臺(tái)跨終端業(yè)務(wù)急需的，為前端開發(fā)方案帶來巨大機(jī)會(huì)。2014年Google IO 上《Polymer and the Web Components revolution》介紹，2014年北京QCON 豆瓣的《DOMO UI》 、百度的《跨終端組件實(shí)戰(zhàn)》，都是基于Web Component的實(shí)踐落地（DOMO UI類似Web Component）。究其背后原因：一方面前端開發(fā)越來越富交互化，組件共享復(fù)用也越來越頻繁，如何高效一致地使用是每個(gè)組件庫需要解決的問題，而Web Commponents的到來讓我們看到了機(jī)會(huì)；另一方面，Mobile的高速發(fā)展，讓前端開發(fā)不僅僅只面對(duì)桌面一個(gè)終端，更要面對(duì)Phone、Pad乃至TV終端，Web和不同的Native開始混用，如何讓Native代碼也能像Web組件一樣方便調(diào)用，就需要引入類似HTML之類得聲明描述組件，而Web Components 正式符合這一特性的原生標(biāo)準(zhǔn)，為組件的跨終端帶來無限想象。面對(duì)消費(fèi)者終端的碎片化，Web Components會(huì)成為跨端UI模塊化協(xié)作的基礎(chǔ)。

? 目前天貓正在構(gòu)建跨終端高品質(zhì)UI體系MUI，從設(shè)計(jì)到客戶端和Web前端一起打造一套UI設(shè)計(jì)規(guī)范和模塊化組件體系覆蓋所有端的天貓業(yè)務(wù)，從iPhone到Android Phone，從iPad到Android Pad，從Mobile Web到Desktop Web，還有TV等，實(shí)現(xiàn)任何標(biāo)準(zhǔn)的UI設(shè)計(jì)都能夠快速覆蓋全站，其背后技術(shù)思想之一就是Web Components。

??

基于Node.js的前后端分離方案流行，同時(shí)社區(qū)和企業(yè)邊協(xié)作邊競(jìng)爭(zhēng)使Node.js在穩(wěn)定服務(wù)和創(chuàng)新發(fā)展中平衡

? ? ?1989年3月12日，Tim Berners-Lee創(chuàng)立了WWW（Word Wide Web），Web的迅猛發(fā)展成為Internet上最重要的內(nèi)容承載方式，以至于很多人會(huì)認(rèn)為Web就是Internet。億萬互聯(lián)網(wǎng)用戶催生無數(shù)的Web開發(fā)者和巨無霸網(wǎng)站，Web的規(guī)模化促使了前后端的分工，于是2001年雅虎有了全世界第一個(gè)前端工程師職位，此時(shí)前端專注于HTML、CSS和JavaScript，后端專注于業(yè)務(wù)和數(shù)據(jù)，而數(shù)據(jù)（Data）和展現(xiàn)（View）結(jié)合部分由于成本較低和技術(shù)難度不高而分工模糊，大部分情況下這部分工作依舊是后端工程師在負(fù)責(zé)。2007年iPhone誕生，互聯(lián)網(wǎng)全面向移動(dòng)快速進(jìn)化，各種系統(tǒng)和硬件配置的Phone和Pad興起使得用戶訪問互聯(lián)網(wǎng)的終端碎片化，導(dǎo)致互聯(lián)網(wǎng)產(chǎn)品都需要一套數(shù)據(jù)（Data）多個(gè)展現(xiàn)（View），所以Data和View結(jié)合的技術(shù)難度和成本劇增使得這部分工作必須從后端向前端轉(zhuǎn)移，前端負(fù)責(zé)客戶端和服務(wù)端所有的View及View相關(guān)的Control，后端負(fù)責(zé)業(yè)務(wù)邏輯和數(shù)據(jù)并以API服務(wù)的方式向前輸出，這樣前后端徹底分離，對(duì)于產(chǎn)品開發(fā)而言前端只需要控制View和標(biāo)準(zhǔn)化的Data服務(wù)，不存在后端了。

? ? ?前后端分離技術(shù)的難點(diǎn)是在服務(wù)端的前端，這個(gè)領(lǐng)域一直被后端開發(fā)語言和思想所統(tǒng)治，對(duì)于本來就很稀缺的前端工程師在技能和工作量上提出太高的要求，導(dǎo)致進(jìn)展不順利，直到Node.js橫空出世。Node.js出現(xiàn)，不僅讓前端工程師終于有能力自己為自己打造提高工作效率的工具，讓前端工程師發(fā)揮程序上的想象力，也讓前后端分離有了更好的選擇，所以整個(gè)業(yè)界非常多公司在這方面嘗試，有些甚至嘗試使用Node.js完全取代后端語言，比如Java。目前還處于風(fēng)起云涌的初期，所以即使在同一個(gè)公司如阿里巴巴內(nèi)部都很多類似嘗試，比如淘寶的Midway、支付寶的iChair和天貓的Wormhole等，主因是難點(diǎn)并不在于Node.js技術(shù)本身，而在于和原有業(yè)務(wù)服務(wù)體系對(duì)接和運(yùn)維能力上，所以切入點(diǎn)很多且難以標(biāo)準(zhǔn)化，先多點(diǎn)嘗試相互競(jìng)爭(zhēng)，后續(xù)在基于實(shí)際方案的基礎(chǔ)上進(jìn)行合并統(tǒng)一是我們目前的思路。天貓的首頁已經(jīng)構(gòu)建在Node.js上，不僅經(jīng)受了2014雙11的考驗(yàn)且性能表現(xiàn)優(yōu)異，目前正在把這個(gè)方案應(yīng)用到天貓所有活動(dòng)和頻道頁面，到2015雙11會(huì)有相當(dāng)多的流量運(yùn)行在Node.js上，那將是激動(dòng)人心的時(shí)刻。

? ? ?Node.js開始大規(guī)模使用和其逐漸成熟完善且社區(qū)非常有活力關(guān)系密切，但從七月初開始，Node.js 核心開發(fā)者與 Node 社區(qū)核心參與者認(rèn)為 Joyent 管理下的 Node 開發(fā)進(jìn)展太慢，且對(duì)于社區(qū)的需求響應(yīng)不及時(shí)，開始與 Joyent 公司進(jìn)行談判，希望將 Node 源碼從 Joyent 公司拿出來，放到 Linux 基金會(huì)下基于社區(qū)來進(jìn)行維護(hù)。最終事件以 Node.js 核心開發(fā)者 fork 了 Node 源碼，重命名為 io.js 結(jié)束。2015年1月13日，io.js發(fā)布 1.0 版本，同時(shí)，node 也將發(fā)布 0.12 版本。 這事件對(duì) Node 社區(qū)影響非常之大。首先，造成Node 源碼的開發(fā)工作停滯了三個(gè)月左右，其次，io.js 開發(fā)活躍程度已經(jīng)大于 Node.js，且io.js 和 Node.js 的開發(fā)理念不同必然導(dǎo)致之后兩者會(huì)漸行漸遠(yuǎn)，但從長(zhǎng)遠(yuǎn)角度來看，競(jìng)爭(zhēng)雖然帶來陣痛但有利于更好的產(chǎn)品出現(xiàn)。

? ? ?2014 年初，Node.js 當(dāng)時(shí)項(xiàng)目掌門人從 Joyent 離職，基于 npm 創(chuàng)立了?npm, Inc，開始致力于 Node.js 的包管理平臺(tái)開發(fā)和維護(hù)。之前 npm 屬于社區(qū)維護(hù)性質(zhì)，服務(wù)不夠穩(wěn)定，隨著 Node 社區(qū)的發(fā)展壯大，npm 服務(wù)的穩(wěn)定性越來越重要，因此 npm, Inc 的成立保障了維系 Node 社區(qū)最重要的基礎(chǔ)服務(wù)設(shè)施的穩(wěn)定性。 2014 年底， npm, Inc 發(fā)布新官網(wǎng)，同時(shí)重新定義 npm, Inc 為 JavaScript 的包管理工具和平臺(tái)。此時(shí) npm 已經(jīng)擁有了接近 12 萬個(gè)模塊，超越了 maven 成為了最大的包管理中心。 隨著模塊數(shù)量的急劇增加，企業(yè)使用 npm 的需求也越來越高，npm, Inc 開始將目標(biāo)瞄準(zhǔn)了企業(yè)版 npm 市場(chǎng)，現(xiàn)在處于邀請(qǐng)公司試用期。而早在2014年中，阿里巴巴內(nèi)部的私有 npm 服務(wù)已經(jīng)非常完善，現(xiàn)在已經(jīng)有每月超過 300 萬次的下載，服務(wù)于全公司的 JavaScript 程序員。所以，社區(qū)驅(qū)動(dòng)了創(chuàng)新和快速發(fā)展，企業(yè)會(huì)推動(dòng)服務(wù)穩(wěn)定和健壯，兩者相互協(xié)作和競(jìng)爭(zhēng)會(huì)讓整個(gè)生態(tài)更有旺盛的生命力。

? ?

Native定義為前端的一部分，并開始深入融合

? ? ?2007年1月9日，iPhone誕生，帶來了整個(gè)人機(jī)交互領(lǐng)域的顛覆式創(chuàng)新，對(duì)于前端技術(shù)也有了顛覆式改變，初期甚至到了討論Web is dead的地步，加速Web世界的危機(jī)感和積極向移動(dòng)端轉(zhuǎn)型，同時(shí)隨著Phone和Pad的嚴(yán)重碎片化和整個(gè)互聯(lián)網(wǎng)都從桌面轉(zhuǎn)向了移動(dòng)，直接導(dǎo)致移動(dòng)應(yīng)用內(nèi)容的規(guī)模化和多元化及連接和整合整個(gè)世界，越來越發(fā)現(xiàn)僅僅靠Native本身是不夠的，需要Web和Native結(jié)合起來才能夠滿足極致人機(jī)交互和規(guī)模化聯(lián)通世界的要求，比如微信其實(shí)就是這方面的表率。前端的工作就是為人機(jī)交互的UI提供工程化方案，當(dāng)整個(gè)互聯(lián)網(wǎng)向移動(dòng)轉(zhuǎn)移時(shí)，原來的Web體系和工程方案已不適用了，這就是為什么YUI會(huì)倒下，而HTML和JavaScript要快速地推出革新版本，同樣Web Components必須滿足移動(dòng)終端碎片化的模塊化方案才能高速發(fā)展，而Node.js的流行恰好迎合上前后端分離前端工程師需要掌控服務(wù)端前端的趨勢(shì)。這一些也僅僅是剛剛開始，TV和Watch等越來越多碎片化的終端進(jìn)入到日常生活，前端的挑戰(zhàn)也剛剛開始且前所未有，這是最好的時(shí)代。Web是桌面時(shí)代人機(jī)交互技術(shù)方案的王者，但在移動(dòng)智能終端時(shí)代目前無法及時(shí)滿足新興的人機(jī)交互能力。這非常類似Ajax到來時(shí)，HTML + CSS已經(jīng)無法很好地滿足人機(jī)交互UI開發(fā)的需要，前端要快速掌握J(rèn)avaScript一樣，移動(dòng)互聯(lián)網(wǎng)時(shí)代，Web前端工程師需要快速掌握Native開發(fā)能力成為跨終端的前端開發(fā)工程師，這不是拋棄Web轉(zhuǎn)向Native，而是把Web和Native結(jié)合起來，就像當(dāng)年HTML + CSS + JavaScript結(jié)合起來產(chǎn)生巨大的威力一樣。這不是1+1 = 2，而是1+1>2的問題，不是簡(jiǎn)單的技術(shù)領(lǐng)域擴(kuò)充，而是真正的人機(jī)交互技術(shù)深入探索，前端技術(shù)方案從來都不是由穩(wěn)定的單一技術(shù)所能解決的。現(xiàn)在Native開發(fā)規(guī)模越來越大已開始在探索類似Web的View發(fā)布機(jī)制和模塊化依賴關(guān)系管理等等，而Web也正在探索弱網(wǎng)絡(luò)或不確定網(wǎng)絡(luò)性能、內(nèi)存管理及硬件調(diào)用的技術(shù)方案，兩者結(jié)合（Hybrid）對(duì)于我們的大規(guī)模平臺(tái)化業(yè)務(wù)來說是事半功倍的正確方向。

? ? ? ?ArchSummit2014深圳大會(huì)，手淘 Android 負(fù)責(zé)人無鋒分享的手淘 android 架構(gòu)《手機(jī)淘寶的客戶端架構(gòu)探索之路》中提到“像 Web 一樣輕盈的 Native App！”。可見從Native同學(xué)的角度已開始考慮向Web融合，而在天貓我們定義：前端 ＝ Web + Native，目前天貓已有10%的Web前端同學(xué)擁有Native開發(fā)的能力，預(yù)計(jì)不到2015年中會(huì)擴(kuò)大到50%。雖然目前已有大量的Hybrid應(yīng)用和使用類PhoneGAP的混合開發(fā)，但Native和Web的深入融合遠(yuǎn)遠(yuǎn)不夠，尤其是發(fā)布能力和大規(guī)模協(xié)作的能力上，以及對(duì)于組件、性能等方面的相互協(xié)作。之前一直討論Native和Web孰優(yōu)孰劣，誰取代誰，但經(jīng)過2014相信更多人已意識(shí)到這是個(gè)偽命題，真正評(píng)判一項(xiàng)技術(shù)的價(jià)值是在業(yè)務(wù)場(chǎng)景中，選擇合適且面向未來的技術(shù)最重要，需要思考如何用技術(shù)為用戶和業(yè)務(wù)帶來價(jià)值，天貓也正在前進(jìn)的路上，隨著越來越多人同時(shí)掌握Web和Native，兩者的協(xié)作會(huì)更加深入和相互發(fā)展，并作為整個(gè)前端的范疇?zhēng)砀嗟募夹g(shù)突破、效率提升和極致體驗(yàn)，而原來的Web前端工程師也會(huì)進(jìn)行技能升級(jí)，勇敢地打破自我的壁壘擁抱移動(dòng)端，尤其是Native技術(shù)，前端 ＝ Web + Native。真正成為跨終端的前端工程師。

對(duì)于天貓前端而言，在新的一年里，Mobile會(huì)變革為主場(chǎng)，主要有三個(gè)很明確的方向：跨終端組件、大規(guī)模Node、Native 和 Web 融合。

跨終端組件MUI： MUI是天貓統(tǒng)一的跨終端UI組件庫，這是設(shè)計(jì)師、Native開發(fā)和Web前端一起協(xié)作的全站性質(zhì)項(xiàng)目。之前已經(jīng)歷了兩個(gè)版本完成了基礎(chǔ)視覺規(guī)范和JS組件規(guī)范及管理升級(jí)機(jī)制，新一年的重要方向是：跨終端。目前正在進(jìn)行的MUI3.0核心是天貓內(nèi)部稱作FEModule的組件體系，就是一個(gè)完整的組件規(guī)范（包括樣式、腳本、模板和數(shù)據(jù)定義），實(shí)現(xiàn)前端、后端一致的組件體系，即一個(gè)模塊完全獨(dú)立，加上數(shù)據(jù)即可渲染，模塊既可以前端渲染又可以后端渲染。MUI3.0會(huì)基于Web components和Native組件融合規(guī)范，實(shí)現(xiàn)跨終端的組件體系。

大規(guī)模Node：首頁在天貓雙11中在穩(wěn)定性及性能上已經(jīng)被證實(shí)表現(xiàn)出色，同時(shí)對(duì)于前后端分離核心的數(shù)據(jù)API定義也有了系統(tǒng)化的規(guī)范和工具。新一代渲染引擎Wormhole CDN 3.1全網(wǎng)發(fā)布，支持 feLoader / feModule / 全局頭尾，至此天貓應(yīng)用、CDN、頻道頁環(huán)境的模版渲染環(huán)境基本都已經(jīng)完善，Node.js在天貓承擔(dān)更多前端業(yè)務(wù)的時(shí)代已經(jīng)到來。

Native和Web融合：2014年我們?cè)诩夹g(shù)和組織結(jié)構(gòu)上做了很多突破，尤其是組織上把Web和Native前端調(diào)整為以業(yè)務(wù)維度的一個(gè)團(tuán)隊(duì)，前端 ＝ Native + Web，持續(xù)推動(dòng)團(tuán)隊(duì)轉(zhuǎn)型深入到Native。我們要把Native的高性能和系統(tǒng)能力同Web的發(fā)布能力和規(guī)模協(xié)作結(jié)合起來，這其中有Native和Web互調(diào)的Hybrid API，利用Native的緩存和系統(tǒng)能力把Web的基礎(chǔ)打開速度做到Native一樣的通用方案等等。

智能移動(dòng)終端帶來人機(jī)交互變革不僅僅導(dǎo)致了前端開發(fā)這個(gè)職位需要自我突破革新、重新審視和定義，更導(dǎo)致UI設(shè)計(jì)師的設(shè)計(jì)場(chǎng)景發(fā)生翻天覆地的變化，從單一的鼠標(biāo)鍵盤大屏幕變成了多終端的觸屏聲音陀螺儀傳感器等，設(shè)計(jì)需要更透析這些新的人機(jī)交互形式和技術(shù)才能夠面向未來。新的一年里，三七將開始負(fù)責(zé)天貓的UED團(tuán)隊(duì)，把設(shè)計(jì)和技術(shù)結(jié)合起來，就像D2前端技術(shù)論壇理念那樣“好的設(shè)計(jì)驅(qū)動(dòng)技術(shù)創(chuàng)新，好的技術(shù)給設(shè)計(jì)無限想象”，MUI3.0就是設(shè)計(jì)、客戶端開發(fā)和Web前端結(jié)合的產(chǎn)物，但這只是開始，三七如是說，未來還將繼續(xù)顛覆、成長(zhǎng)、蛻變。

原文地址：http://www.infoq.com/cn/articles/2014-review-front-end-part

轉(zhuǎn)載于:https://blog.51cto.com/hcc0926/1613623

總結(jié)

以上是生活随笔為你收集整理的解读2014之前端篇：任性的颠覆式改变的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。