本文原文由作者“司徒正美”發(fā)布于公眾號“前端你別鬧”，即時通訊網(wǎng)收錄時有改動，感謝原作者的分享。
1、引言
1990 年，第一個Web瀏覽器的誕生；1991 年，WWW誕生，這標(biāo)志著前端技術(shù)的開始。
在這將近20年的前端發(fā)展史中，我們經(jīng)歷了從最早的純靜態(tài)頁面，到JavaScript跨時代的誕生；從PC端到移動端；從依賴后端到前端可自由打包開發(fā)；從早期的網(wǎng)景Navigator瀏覽器到現(xiàn)在各家瀏覽器百花齊放……
我們經(jīng)歷了前端的洪荒時代、Prototype時代、jQuery時代 、后jQuery時期、三大框架割據(jù)時代，這其中均是由國外開發(fā)者主導(dǎo)，直到如今的小程序時代，才是中國開發(fā)者獨創(chuàng)的。
這是漫長的技術(shù)儲備下的成果，最終促成了良好的技術(shù)成長收獲。期間的前端發(fā)展之路，崎嶇艱難。
（本文同步發(fā)布于：http://www.52im.net/thread-2719-1-1.html）
2、相關(guān)文章
3、洪荒時代（1990~1994年）
在1990~1994年期間，前端界發(fā)生的大事有：WWW（World Wide Web）的誕生、瀏覽器的誕生、JavaScript的誕生，沒有專業(yè)的前端，頁面全是由后端開發(fā)的。
1990年，萬維網(wǎng)之父蒂姆·伯納斯-李（Tim Berners-Lee）在NeXT電腦上發(fā)明了第一個Web瀏覽器。
▲ 互聯(lián)網(wǎng)之父——伯納斯·李（Tim Berners-Lee）
1991年8月6日，Tim在alt.hypertext新聞組貼出了一份關(guān)于World Wide Web的簡單摘要，這標(biāo)志了Web頁面在Internet上的首次登場。
1990年12月25日，羅伯特·卡里奧在CERN（即位于日內(nèi)瓦的歐洲原子核研究會）和蒂姆·伯納斯·李一起成功通過Internet實現(xiàn)了HTTP代理與服務(wù)器的第一次通訊（有關(guān)HTTP的詳細(xì)介紹，請見《網(wǎng)絡(luò)編程懶人入門(六)：深入淺出，全面理解HTTP協(xié)議》）。蒂姆·伯納斯·李(Tim Berners-Lee)爵士作為萬維網(wǎng)(World Wide Web，簡稱WWW或互聯(lián)網(wǎng))的發(fā)明者，被尊稱為互聯(lián)網(wǎng)之父。蒂姆·伯納斯·李建立的第一個網(wǎng)站(也是世界上第一個網(wǎng)站)是http://info. cern. ch/，它于1991年8月6日上網(wǎng)(即北京時間8月7日)。
最早的Web主要被一幫科學(xué)家們用來共享和傳遞信息，全世界的Web服務(wù)器也就幾十臺。由于僅是用來傳遞信息，從可視化方式或從傳遞數(shù)量上看，僅比電報強(qiáng)一點點。
當(dāng)時還沒有JavaScript，用的是純靜態(tài)的頁面。
1993年，CGI（Common Gateway Interface）出現(xiàn)了，人們可以在后端動態(tài)生成頁面。
Perl由于跨操作系統(tǒng)和易于修改的特性成為CGI的主要編寫語言。當(dāng)然，CGI也支持其他支持標(biāo)準(zhǔn)輸入輸出和環(huán)境變量的語言編寫，比如Shell腳本、C/C++語言，只要符合接口標(biāo)準(zhǔn)即可。
但顯然，頁面的內(nèi)容更新完全由后端生成，這帶來一個明顯的缺憾：每次更新都要整頁刷新，加上早期的網(wǎng)速情況，這個操作是非常慢的。因此針對這情況，人們從多方面著手改進(jìn)：編寫語言的升級、瀏覽器的升級、HTML的升級。
1994年，網(wǎng)景公司成立，發(fā)布了第一款商業(yè)瀏覽器Navigator。自從這款瀏覽器面世后，微軟推出IE瀏覽器。雖說有競爭才有發(fā)展，但這也埋下了JavaScript分裂的種子。
▲ 1994 年，網(wǎng)景瀏覽器的截圖
同年，PHP誕生。PHP能將動態(tài)的內(nèi)容嵌入到HTML中，提升了編寫頁面的效率與可讀性，其性能也比一般的CGI高。PHP的界定符、循環(huán)語句等的發(fā)明，深刻影響了后來的ASP、JSP，乃致后來的JavaScript前端模板引擎。
1994年10月，W3C小組也成立了，他們負(fù)責(zé)HTML的發(fā)展路徑，其宗旨是通過促進(jìn)通用協(xié)議的發(fā)展。
待這一切就緒后， JavaScript于1995年誕生了。
傳聞，網(wǎng)景工程師布蘭登·艾克（Brendan Eich）只花了10天時間設(shè)計出 JavaScript 語言，近乎上帝七日創(chuàng)造世界那么高效。但也因為工期太短的緣故，導(dǎo)致許多瑕疵，因此一直被正統(tǒng)程序員所嫌棄，直到Ajax的出世，才讓人們找到理由忍受它的畸形。早期的瀏覽器都配有一個選項，用來禁止JavaScript語言運行。
蘭登·艾克（Brendan Eich）:
艾奇不僅是Mozilla的聯(lián)合創(chuàng)始人，還是JavaScript技術(shù)的創(chuàng)始人。自1998年起，他開始深度參與Mozilla各方面的發(fā)展工作，包括Firefox瀏覽器和Thunderbird的研發(fā)。2005年，艾奇被任命為Mozilla公司的首席技術(shù)官。
JavaScript主要語言特征：
1）借鑒C語言的基本語法；
2）借鑒Java語言的數(shù)據(jù)類型和內(nèi)存管理；
3）借鑒Scheme語言，將函數(shù)提升到"第一等公民"（first-class citizen）的地位；
4）借鑒Self語言，使用基于原型（Prototype）的繼承機(jī)制。
時下，靜態(tài)語言大行其道，類與接口被證明是構(gòu)建大工程的最佳實踐，人們想不出沒有類的語言如何編寫業(yè)務(wù)。因此當(dāng)時的微軟也打造了另一門運行于瀏覽器的語言——VBScript。
如果繼續(xù)細(xì)探JavaScript的能力，你會發(fā)現(xiàn)它早期真的非常空洞，一門沒有靈魂的語言，沒有包管理機(jī)制，也沒有像Java與C++那樣的打輔助用的SDK，內(nèi)置的方法也屈指可數(shù)。比如說數(shù)組方法，早期只有push、pop、shift、unshift、splice、slice、sort、reverse、concat、join等操作。動態(tài)調(diào)用方面，F(xiàn)unction的apply、call操作還沒有出現(xiàn)！
早年的偷懶，導(dǎo)致后來不得不補(bǔ)課：到了2019年，數(shù)組上的原型方法，是原來3倍。
除了方法缺乏，還有性能問題，大家討論用eval還是Function，用哪種循環(huán)方式，用parseInit還是~~，就是為了那一點點的性能提升。例如jsperf.com，就是一個專門研究JavaScript性能的網(wǎng)站。
因此JavaScript誕生后，其兩大任務(wù)就是完善語言特性與提高性能。這兩座大山分別由著名的prototype.js與jQuery來搬掉。
在搬掉之前，前端界還有一個曲折實踐——第一次瀏覽器戰(zhàn)爭，并由其發(fā)展而來UA嗅深技術(shù)。
4、瀏覽器戰(zhàn)爭（1994~2005年）
瀏覽器戰(zhàn)爭一共打了三場，IE瀏覽器vs網(wǎng)景瀏覽器、IE瀏覽vs火狐瀏覽器、IE瀏覽器vs谷歌瀏覽器。
第一場瀏覽器之戰(zhàn)打得尤其激烈。
微軟的IE瀏覽器發(fā)布于1994年，但此時的網(wǎng)景已經(jīng)占領(lǐng)絕對優(yōu)勢。微軟在落后的情況，反編譯Netscape的源碼，推出IE與JScript。但是由于Bug非常多，大家不愿意為IE開發(fā)網(wǎng)站，因此發(fā)掘出UA，專門過濾掉IE瀏覽器。
UA即Navigator.userAgent ，是用一個字符串來記錄用戶當(dāng)前運行在什么操作系統(tǒng)與瀏覽器中。
當(dāng)時IE3的UA是這樣的：
Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
程序判斷UA信息，假如發(fā)現(xiàn)當(dāng)前運行的環(huán)境是IE瀏覽器的話，就提示用戶用網(wǎng)景瀏覽器打開。因此微軟不得不讓自己的UA盡量偽裝成網(wǎng)景的UA，欺騙用于檢測UA的腳本，達(dá)到IE瀏覽器可以跑這些網(wǎng)站的目的。
最終，第一次瀏覽器之戰(zhàn)以微軟勝利，Netscape被美國在線收購，而落下帷幕。
第一次瀏覽器戰(zhàn)爭年代非常久遠(yuǎn)了，但其結(jié)局告訴我們，其實技術(shù)強(qiáng)弱并不重要。那時技術(shù)保護(hù)并沒有這么重視，否則微軟的行為可能會被告（谷歌的openSDK僅抄襲幾十行代碼，被Oracle公司訴訟賠88億）。
第一次瀏覽器戰(zhàn)爭帶來了一個問題：盡管當(dāng)時有ECMA-262（JavaScript規(guī)范文檔）與W3C（HTML與CSS的規(guī)范文檔），微軟卻沒有照規(guī)范來實現(xiàn)JavaScript、HTML與CSS，導(dǎo)致前端兼容問題的誕生。所以CSS Hack、瀏覽器判定、特性偵測，這些技術(shù)就應(yīng)運而生。
這個時代最著名的人物是Dean Edwrad，他是最早的近乎完美解決事件綁定的兼容性大神，其addEvent()內(nèi)置于jQuery最早的版本中。jQuery的作者John Resig看到其超強(qiáng)的技藝，最后放棄推出大而全的框架，專攻選擇器引擎。
John Resig：
John Resig是jQuery的創(chuàng)始人和技術(shù)領(lǐng)袖，目前在Mozilla擔(dān)任JavaScript工具開發(fā)工程師。著有《Pro JavaScript Techniques》（即《精通JavaScript》）等經(jīng)典JavaScript書籍。
Dean Edwrad的IE7.js、IE8.js是早期處理瀏覽器兼容的良藥，可以說是一切Polyfill的起源。他寫了大量的Hack， 比如在IE如何測量元素的寬高，許多操作DOM的兼容。
這時期太早，中國基本沒有參與這次瀏覽器戰(zhàn)爭。
5、Prototype時期（2005~2009年）
Prototype是Sam Stephenson寫的一個非常優(yōu)雅的JavaScript基礎(chǔ)類庫。他是Ruby的大牛，因此Prototype的許多方法名都是來自Ruby界。
Sam Stephenson最大的貢獻(xiàn)是發(fā)掘了Prototype與創(chuàng)造了Function.prototype.bind，在數(shù)組上也寫了一大堆方法，其中許多被標(biāo)準(zhǔn)化了。
同期的MooTools也是Prototype掛方法，當(dāng)時，大家還在前端論壇為這個爭吵。還有前端工程師喜歡在當(dāng)時很出名的前端聚集地——藍(lán)色理想（現(xiàn)淪為設(shè)計師網(wǎng)站）上，討論如何扒腳本、分享彈層、日歷等小組件的技術(shù)，這在當(dāng)時已經(jīng)是非常了不起的事。
Prototype當(dāng)時還解決兩大問題：動畫特效與Ajax請求。動畫特效是由Scriptaculous提供，我們現(xiàn)在所熟知的各種緩動函數(shù)，各種特效的命名與大致的運行形態(tài)，都是由Scriptaculous確定下來的。
在早期，谷歌就開始使用iframe實現(xiàn)頁面刷新。
2005 年2月，杰西·詹姆士·賈瑞特（Jesse James Garrett）發(fā)表了一篇名為《Ajax：一種Web應(yīng)用程序開發(fā)的新方法》的文章后，Ajax被挖掘出，大家才開始重視起這技術(shù)的應(yīng)用。
杰西·詹姆士·賈瑞特（Jesse James Garrett）：
杰西·詹姆士·賈瑞特是一名用戶體驗設(shè)計領(lǐng)域的設(shè)計師、網(wǎng)頁體驗設(shè)計公司Adaptive Path的創(chuàng)辦人，是AJAX技術(shù)術(shù)語的命名者。
例如IE下的ActiveXObject("Microsoft.XMLHTTP")，這是IE創(chuàng)建Ajax引擎的。假如當(dāng)時有工程師開發(fā)出一個核心庫，如果不包含Ajax的封裝，便不好意思發(fā)布出來。
▲ 一些Ajax書藉
當(dāng)時前端開發(fā)模式是選擇一個核心庫，找一些組件，或者扒別人的腳本進(jìn)行開發(fā)。
Prototype的源碼挺好理解的，代碼量也少，只有5000多行，里面的每個方法也很易扒出來，因此一些大公司總有高手能創(chuàng)造自己的Prototype。
但前端開發(fā)還是離不開后端，因為前端沒有模塊機(jī)制，當(dāng)時我們需要用PHP進(jìn)行打包。
打包是雅虎34條軍規(guī)之一，可以減少請求數(shù)。打包的同時也可以進(jìn)行混淆，防止代碼小偷來窺探。
N年前，前端面試必問的題目：
▲ 模塊化的雛型， 在注釋中標(biāo)注它的依賴
這個時期，還沒有前后端分離，可國內(nèi)一些帶著深厚后端背景的高手已經(jīng)入場。
6、jQuery 時期（2009~2012年）
2006年，jQuery發(fā)布，它當(dāng)時的競爭對手很多：Dojo、Prototype、ExtJS、MooTools。
所以那時jQuery的宣傳口號僅能說是它的性能上升了100%、200%、300%。直到2009年，Sizzle選擇器引擎研發(fā)成功，jQuery才取得壓倒性的優(yōu)勢。
當(dāng)時前端界首要面對的是瀏覽器兼容性問題，jQuery在處理DOM兼容上真是知微見著, 發(fā)掘出大量的DOM/BOM兼容方案（例如Dean Edwrad的addEvent()， IE的px轉(zhuǎn)換方案，domReady的doScroll方案，globalEval的兼容方案等）
jQuery也打破了前端開發(fā)者的編程思維，之前是按照后端的開發(fā)思路來的：做一個業(yè)務(wù)就先封裝一個類，有了這個類后，再想辦法傳入一個DOM，然后再通過類方法操作DOM。而jQuery是DOM為中心，開發(fā)者可以選一個或多個DOM，變成jQuery對象，然后進(jìn)行鏈?zhǔn)讲僮鳌．?dāng)時為了改變用戶的思維，國內(nèi)的高手寫了不少文章來引導(dǎo)大家。
其次，開發(fā)者們已開始注重前后端分離，并要求不能污染Object原型對象，不能污染window全局變量。這樣，jQuery只占用兩個全局變量。
再次，jQuery非常輕量級，采用Dean Edwards編寫的Packer壓縮后， 大小不到30KB。并且里面實現(xiàn)得非常精妙，以令人瞠目的手段解決各種兼容痼疾。
為了學(xué)習(xí)這些技巧，高手們翻了一遍遍jQuery的源碼，所以網(wǎng)上有大量關(guān)于其源碼詳解的書藉。甚至前端工程師在面試時也會被考到j(luò)Query的源碼實現(xiàn)，這樣，jQuery在國內(nèi)更加流行。
jQuery的流行間接帶來以下的發(fā)展：
1）促使人們對CSS1~CSS3選擇器的學(xué)習(xí)；
2）促進(jìn)了瀏覽器原生選擇器引擎document.querySelectorAll、Element.matches的誕生；
3）提高人們對domReady（DOMContentLoaded事件）的認(rèn)識；
4）促進(jìn)了Promise與requestAnimateFrame 的誕生；
5）最重要的是降低前端門檻，讓更多人進(jìn)入這行業(yè)，前端工程師的隊伍越來越壯大。
這樣的話，不斷涌現(xiàn)出優(yōu)秀的工程師，他們創(chuàng)造了大量jQuery插件與UI庫。為后jQuery時代，人們研發(fā)前端模塊加載、統(tǒng)一異步機(jī)制、 打造大型MVC框架， 甚至伸向后端，接管打包腳本而發(fā)明Node.js，來騰出大量時間。
這個時期涌現(xiàn)了大量jQuery-like的庫，其中最著名的是Zepto.js。Zepto的出現(xiàn)也標(biāo)志著我們進(jìn)入移動互聯(lián)網(wǎng)時代。那時配套出的著名庫還有iScroll、fastclick、Lazy Load、Modernizr、fullPage。
jQuery的鏈?zhǔn)讲僮黠L(fēng)靡一時，也帶來許多問題，當(dāng)Ajax出現(xiàn)依賴時，就不可避免就出現(xiàn)回調(diào)地獄。因此針對這方面的討論，誕生Deffered與Promise。有關(guān)回調(diào)地獄的討論，在后來講Node.js異步處理時，將會再一次熱烈地討論。因此太陽下沒有新事，我們總是遇到相似的問題。
jQuery如此多的選擇器也法維護(hù)，隨著越來越多人涌現(xiàn)這行業(yè)，頁面的交互也越來越復(fù)雜，從Web Page向Web App進(jìn)化，新的趨勢帶來新的開發(fā)方式。
7、后jQuery時期（2012~2016年）
這時期以RequireJS的誕生為起點，以RN的出現(xiàn)結(jié)束。同時解決了前端的模塊定義問題，模塊打包問題（通過Node.js），JavaScript不依靠其他語言創(chuàng)造了一套自己的工具鏈。
jQuery的出現(xiàn)讓前端工程師開發(fā)更加輕松，假如工程師想實現(xiàn)一個功能，現(xiàn)搜索出一個jQuery插件來實現(xiàn)。那時候大家在前端網(wǎng)站就整天介紹jQuery插件，很少討論一些底層的實現(xiàn)。
前端工程師通常編寫一個頁面，會引入十多個乃至幾十個jQuery插件，頁面上塞滿了Script標(biāo)簽。眾所周知，瀏覽器是單線程，Script的加載，會影響到頁面的解析與呈現(xiàn)，導(dǎo)致著名的白屏問題（當(dāng)時前端用力過猛，body中的所有東西都是動態(tài)生成的）。
jQuery另一個問題是全局污染，由于插件的質(zhì)量問題，或者開發(fā)的素質(zhì)問題，這已經(jīng)是IIEF模塊或命名空間等傳統(tǒng)手段無法解決了。
于是一些優(yōu)秀的前端工程師們決定向后端取經(jīng)，引入模塊機(jī)制。早期，這種模塊機(jī)制在Dojo、EXT這些框架中都是內(nèi)置的，但是顯然說服不了另一個框架的用戶用對方的模塊機(jī)制，于是有人立志要統(tǒng)一這種模塊定義方式，成立了CommonJS。
但不料，CommonJS內(nèi)部也有派系，誰也說不服對方。終于有一個人忍不住自己獨立開發(fā)出RequireJS，其模塊規(guī)范即為AMD。AMD最大的優(yōu)勢是它支持各種插件，且簡單明了，并且提供shim機(jī)制加載以非AMD規(guī)范編寫的JavaScript代碼。
但在CommonJS誕生很久一段時間后，在后端的Node.js出現(xiàn)時才有用武之地。而國內(nèi)，則流行另一種規(guī)范風(fēng)格，背靠阿里的大旗，有人推出了SeaJS，號稱其規(guī)范為CMD。其實無論國內(nèi)還是國外，都產(chǎn)生許多模塊加載器，但最后還是被淘汰了，規(guī)范一個就夠了，不宜過多。
但是前端工程師的創(chuàng)造力就是這么驚人，從無到有，再到泛濫成災(zāi)，一年足矣。這可能與前端代碼是開源的原因。最后有人統(tǒng)一了前兩種規(guī)范（AMD、Node.js模塊），同時還支持老式的“全局”變量規(guī)范。
自此，JavaScript開發(fā)模式煥然一身了，大家只要在代碼外面包一層就可以全世界通用，不用擔(dān)心全局污染的問題。
其次，jQuery開發(fā)者需要解決大段HTML的生成問題，之前jQuery有$.html, $.append, $before等方法，可以將一大段符合HTML結(jié)構(gòu)的字符串轉(zhuǎn)換成DOM再插入到頁面上。
但現(xiàn)在我們想分離出來，讓HTML獨立到不同的文件中，然后插數(shù)據(jù)，這就是前端模板。前端模板的情況與模板規(guī)范一樣，從沒有到多如芝麻的境地。這時篩選一個好用且性能高的模板是一件讓前端工程師頭疼的問題，那時網(wǎng)上有許多評測文章來介紹它們。
前端模板技術(shù)可以用一個公式來描述：
HTML = template(vars)
有了前端模板后，又誕生了前端路由，基于它們，人們發(fā)明一個新詞匯SPA。作為這個時代的尾聲，來自Ruby界的高手Ryan Dahl發(fā)明了Node.js。前端工程師們歡呼：可以不用傳統(tǒng)的后端就能自己寫一個網(wǎng)站了！
▲ Node 之父 Ryan Dahl
Node.js的發(fā)展就不詳述上，很快它就冒出海量模塊、路由、狀態(tài)管理、數(shù)據(jù)庫、MVC框架都有了。這時，前端就缺自己的MVC框架了。Node.js轉(zhuǎn)眼就十歲生日了。
著名的MEAN架構(gòu)，是JavaScript全棧開發(fā)的先鋒。當(dāng)時涌現(xiàn)了大量的MVC與MVVM框架。最先火起來的是Backbone.js，使用純正的MVC模型， Backbone.js是jQuery最后的支持者，它強(qiáng)依賴于jQuery。
Backbone.js的作者還搞了另一套編譯語言CoffeeScript, 里面的箭頭函數(shù)、類機(jī)制、 解構(gòu)賦值等語法糖都深深影響了后來的ES6。
接著下來是谷歌的Angular，微軟的Knockout.js，蘋果的Ember.js這三個MVVM框架，MVVM就是比MVC多一個數(shù)據(jù)綁定功能，但這數(shù)據(jù)綁定功能是非常難實現(xiàn)。Knockout是使用函數(shù)代替屬性的技巧實現(xiàn)，它的設(shè)計影響到后來的Mobx；Ember.js是基于Object.defineProperty；Angular是將函數(shù)體轉(zhuǎn)譯成setter()、getter()函數(shù)。
大公司的介入，對個人開發(fā)者影響是很大，畢竟大家都愛迷信大公司，因此局面一下子就穩(wěn)定下來。大公司還帶來了全新的開發(fā)模式，早期都是找一個核心庫，再搜刮一大堆插件，然后自己寫業(yè)務(wù)代碼，最后后端打包。
大公司將后端開發(fā)經(jīng)驗挪用過來，用Node.js開發(fā)了一套CLI，里面包含了腳手架生成， 打包腳本、語法風(fēng)格檢測、環(huán)境變量插入，代碼復(fù)雜度檢測，代碼提交時自動跑單元測試， 圖片與JS壓縮等功能。ESLint、JSLint、JSHint、CSS Lint、 htmllint等就是那時期出現(xiàn)的。
但CLI的出現(xiàn)導(dǎo)致了前端的分裂，以前大家都使用jQuery，但自CLI幫你建好項目的那一刻起，就將你劃歸某一子陣營，你是Angular？Ember.js？還是jQuery？對了，jQuery沒有大公司支撐的陣營被快速邊緣化。
對于個人開發(fā)者，他們是沒有能力開發(fā)這么功能完備的CLI，于是出現(xiàn)了Code Climate、Travis CI、CircleCI這樣的平臺。它們的出現(xiàn)標(biāo)志著jQuery小作坊時代的終結(jié)了。
▲ CircleCI官網(wǎng)
前端開發(fā)者也出現(xiàn)分化：有些人轉(zhuǎn)向后端，出現(xiàn)了CNode的門戶網(wǎng)站。另外一些人開始搞工程化。一時間出現(xiàn)上百種構(gòu)建工具，出名的有Grunt、Gulp、FIS3、webpack、 Rollup、npm-script。
你方唱罷我登場，這些構(gòu)建工具均會經(jīng)歷時代的考驗，如大浪淘沙般，最后存活得僅為寥寥。
因此在這場工程化的盛宴中，注定把許多低層次的jQueryer淘汰掉。jQueryer在空閑之余培育出的前端模板、前端路由、MVC框架、模塊加載器、Node.js構(gòu)建工具，卻不料最終成為它自己的挖墓人。
jQuery的時代一去不返了，再沒有人關(guān)心拖了N年的Bootstrap 4終于發(fā)布了，沒有人知道jQuery3.5的瘦身計劃，也沒有人問jQuery的源碼，漸漸地，大家不關(guān)注jQuery的工具鏈了。
8、三大框架割據(jù)時代（2016~至今）
React是突然爆發(fā)的，雖然它是與Angular是同時期發(fā)布，但因為JSX怪異的語法讓人們遠(yuǎn)離它。此時已經(jīng)進(jìn)入移動互聯(lián)網(wǎng)的中期，大公司都有自己的App，或者基于原生，或者基于Hybird（詳見：《盤點主流移動端跨平臺UI技術(shù)：實現(xiàn)原理、技術(shù)優(yōu)劣、橫向?qū)Ρ鹊?/a>》、《最火移動端跨平臺方案盤點：React Native、weex、Flutter》）。
Hybird是用WebView加載一個網(wǎng)站或一個SPA。
由于原生成本太貴，需要招兩套班子，一套安卓的，一套iOS的；而Hybird則一直存在性能問題。于是在2017年，F(xiàn)acebook推出了React Native（RN）。
RN的性能不比原生差多少，比Hybird能好些， 其次使用JSX開發(fā)界面比原生的快；RN 只需要低成本的前端開發(fā)人員就能上手了。中國國內(nèi)經(jīng)過瀑布流（圖片導(dǎo)購）、團(tuán)購、P2P、區(qū)塊鏈等全新商業(yè)模式的開發(fā)浪潮后，前端人員數(shù)量大增。現(xiàn)在，他們只要稍微培訓(xùn)就可以轉(zhuǎn)型為App開發(fā)。
在開發(fā)RN的過程中，人們開始了解React一系列的優(yōu)勝之處。比如JSX背后的虛擬DOM技術(shù)，雖然事實證明虛擬DOM不會帶來性能的巨大優(yōu)勢，但保證了你怎么寫其性能不會太差。
React為了引入JSX，必須需要引入編譯，這又間接促成Babel與webpack的壯大。尤其是Babel， 讓我們在很舊的瀏覽器中使用非常新的語法，甚至一些還沒有定案的語法。React從14升級到React 15，強(qiáng)制使用class語法，讓這個推了好久的語法糖終于大規(guī)模落地。
之前如果JavaScript想使用類，只能自己模擬類，由于沒有官方的實現(xiàn)，只能任由各優(yōu)秀工程師發(fā)揮。而普通人想用好類，需要了解很復(fù)雜的Prototype機(jī)制。
現(xiàn)在只用幾個新關(guān)鍵字就可以得到這一切。
如果對比Python 2與Python 3間的升級，JavaScript實在太辛運了！針對CSS邏輯功能過弱的問題，我們也有了新的解決方案：Less、Sass、PostCSS與CSS Modules！
谷歌在發(fā)布Angular的同時，也發(fā)布了一個叫Polymer的框架，那時它想推廣一種叫Web Components的瀏覽器自定義組件技術(shù)。這其實是微軟在IE5就玩剩的HTC技術(shù)的升級版。雖然它沒有火起來，但它將Script、Style、Template三種內(nèi)容混在一個文件的設(shè)計，啟發(fā)一個留美華人，再結(jié)合當(dāng)時的Backbone.js、Angular等設(shè)計，Vue.js橫空出世。目前，這是國人最成功的前端框架了。
尤雨溪：
尤雨溪是Vue.js框架的作者，HTML5版Clear的打造人。尤雨溪畢業(yè)于上海復(fù)旦附中，在美國完成大學(xué)學(xué)業(yè)，本科畢業(yè)于Colgate University，后在Parsons設(shè)計學(xué)院獲得Design & Technology藝術(shù)碩士學(xué)位，現(xiàn)任職于紐約Google Creative Lab。
除此之外，國人也弄了好幾套迷你React框架與迷你Vue框架。這有點像jQuery時代，大家瘋狂做迷你jQuery框架一樣。
總的來說，最有創(chuàng)造力的是React團(tuán)隊，做出狀態(tài)管理器、CSS-in-JS、Flow靜態(tài)類型檢查、devTool、Fetch、前后端同構(gòu)、Fiber、suspend、并發(fā)渲染等名詞層出不窮。其中，狀態(tài)管理器擁有上百套， CSS-in-JS也擁有上百套，F(xiàn)low則讓前端嘗鮮到接口編程的好處，間接推動TypeScript發(fā)展。這三大框架無法比拼個一二出來：Vue.js有國人的擁躉，React與Angular有大公司光環(huán)。
三大框架的纏斗從PC領(lǐng)域擴(kuò)展到移動端：React有RN， Vue.js有Weex，Angular有ionic。想當(dāng)年我們?yōu)榱思嫒轂g覽器，攢了一大堆瀏覽器偵探的Hack，全部貶值為垃圾了。
在這時期，一種全新的后端渲染崛起，稱之為前后同構(gòu)，既擁有早期SEO的功效，又能復(fù)用大量的業(yè)務(wù)邏輯。隨著國內(nèi)移動互聯(lián)網(wǎng)的發(fā)展，獲客成本提高，各種有效的商業(yè)模式都進(jìn)入紅海，但只有頭部用戶能賺到錢，馬太效應(yīng)越來越嚴(yán)重，純粹的技術(shù)解決方案已經(jīng)無法滿足商業(yè)訴求了。
9、小程序時代（2017~至今）
小程序時代與三大框架的時代幾乎重合，但是出自不同一批人，決戰(zhàn)的平臺也不一樣。
一直以來前端技術(shù)都是由國外開發(fā)者主導(dǎo)的，即便是Vue.js也是由美國的華人創(chuàng)造的。但是國內(nèi)外的技術(shù)更新是存在代差，國內(nèi)通常延期兩三年，這個時間差可以讓一些模仿者得以生存（如SeaJS、FIS、avalon）。但隨著封閉的時間越來越長，國內(nèi)肯定也會誕生自己的專有物種。小程序就是其中之一。
小程序的出現(xiàn)有著明顯的商業(yè)訴求，因為馬太效應(yīng)，一些超大流量的App誕生了。這些大流量App集成了許多功能，但顯然公司再多員工，也無法所有功能全是自己弄，于是產(chǎn)生小程序這種“外包”的手段。
小程序是國內(nèi)前端技術(shù)的一次厚積薄發(fā)：底層運行的迷你React的虛擬DOM， 內(nèi)置組件是使用Web Component，API來源于Hybird的橋方法，打包使用webpack，調(diào)試臺是Chrome console的簡化版， WXML、WXSS的語法高亮也應(yīng)該是webpack或VS Code的插件， 模塊機(jī)制是Node.js的CommonJS……其中最值得一提的是微信開發(fā)者工具，以后開發(fā)者工具成了各種小程序/快應(yīng)用的標(biāo)配。
但微信小程序一開始的復(fù)用能力非常弱，沒有類繼承，不能使用npm, 不支持Less、Sass， 因此基于它的轉(zhuǎn)譯框架就應(yīng)運而生。第一代轉(zhuǎn)譯框架是wept、WePY、mpvue，它們無一例外是Vue風(fēng)格的。因為WXML的模板指令與Vue非常相似，只是改一下就能兼容。當(dāng)時也出現(xiàn)了一個MINA的框架，聽說是微信團(tuán)隊開發(fā)的，可以單獨架起Node.js后端，讓小程序運于瀏覽器中，方便做單元測試。
第一代轉(zhuǎn)譯框架主要是基于Template標(biāo)簽實現(xiàn)組件機(jī)制，自定義組件機(jī)制是以后的事了。這就造成了利用第一代轉(zhuǎn)譯框架編寫的小程序項目很難升級。那時候是個人開發(fā)者的天堂，這些框架都是某一大牛獨力開發(fā)的。
第二代轉(zhuǎn)譯框架是大公司主導(dǎo)的，因為需要兼容的小程序越來越多，百度、支付寶、字節(jié)跳動、小米、華為等公司都推出自己的小程序和快應(yīng)用。個人開發(fā)者很難憑個人力量去開發(fā)轉(zhuǎn)譯框架，這時候各大團(tuán)隊紛紛推出自己的輪子：如京東的Taro、滴滴的Chameleon、網(wǎng)易的Megalo、去哪兒網(wǎng)的nanachi、百度的Okam等。
在這個時期，Angular顯然落伍了，一是Angular升級太快，國內(nèi)的高手還沒有消化好，新一版的Angular又發(fā)布了。二是國內(nèi)缺乏迷你Angular的輪子，導(dǎo)致龐大的Angular無法塞進(jìn)小程序中。
國外谷歌發(fā)布了Flutter跨平臺轉(zhuǎn)譯框架，但是它的編寫語言是Dart，它也無法跨界到小程序中。
未來不僅國內(nèi)一線巨頭爭奪小程序，二三線的巨頭也可能會加入小程序的混戰(zhàn)中，例如有人稱360也在打造自己的小程序平臺。小程序這種新的流量變現(xiàn)模式深刻地影響了國內(nèi)的互聯(lián)網(wǎng)布局。
10、結(jié)束語
當(dāng)初JavaScript被誤解為最糟糕的語言，時至今日它是最流行的語言：GitHub 60%的開源項目都是與JavaScript有關(guān)。
以前，從事這行業(yè)的人被稱為頁面仔，現(xiàn)在他們的起薪有的比PHP、JAVA、C++等后端還高。甚至有人說，“任何可以使用JavaScript來編寫的應(yīng)用，最終會由JavaScript編寫。”
我們前端開發(fā)者觸及的領(lǐng)域不僅僅是瀏覽器，還可以做后端，做桌面端，做手機(jī)端，做小程序端，前端開發(fā)者的性價比越來越高，越來越重要。可謂是時代造英雄。
筆者有幸成為前端開發(fā)者大隊伍中的一員，也堅信我們前端開發(fā)者以后的路會越來越寬，越來越好走。
附錄：有關(guān)Web即時通訊技術(shù)的文章
Web即時通訊新手入門貼：
《新手入門貼：詳解Web端即時通訊技術(shù)的原理》
Web端即時通訊技術(shù)盤點請參見：
《Web端即時通訊技術(shù)盤點：短輪詢、Comet、Websocket、SSE》
關(guān)于Ajax短輪詢：
找這方面的資料沒什么意義，除非忽悠客戶，否則請考慮其它3種方案即可。
有關(guān)Comet技術(shù)的詳細(xì)介紹請參見：
更多WebSocket的詳細(xì)介紹請參見：
有關(guān)SSE的詳細(xì)介紹文章請參見：
《SSE技術(shù)詳解：一種全新的HTML5服務(wù)器推送事件技術(shù)》
更多WEB即時通訊文章請見：
http://www.52im.net/forum.php?mod=collection&action=view&ctid=15
（本文同步發(fā)布于：http://www.52im.net/thread-2719-1-1.html）