一文讀懂前端技術演進：盤點Web前端20年的技術變遷史

本文原文由做者「司徒正美」發佈於公衆號「前端你別鬧」，即時通信網收錄時有改動，感謝原做者的分享。

一、引言

1990 年，第一個Web瀏覽器的誕生；1991 年，WWW誕生，這標誌着前端技術的開始。

在這將近20年的前端發展史中，咱們經歷了從最先的純靜態頁面，到JavaScript跨時代的誕生；從PC端到移動端；從依賴後端到前端可自由打包開發；從早期的網景Navigator瀏覽器到如今各家瀏覽器百花齊放……

 

咱們經歷了前端的洪荒時代、Prototype時代、jQuery時代 、後jQuery時期、三大框架割據時代，這其中均是由國外開發者主導，直到現在的小程序時代，纔是中國開發者首創的。

這是漫長的技術儲備下的成果，最終促成了良好的技術成長收穫。期間的前端發展之路，崎嶇艱難。

（本文同步發佈於：http://www.52im.net/thread-2719-1-1.html）

二、相關文章

• 《小程序技術始於微信？來看看移動端小程序技術的前世此生！》
• 《盤點主流移動端跨平臺UI技術：實現原理、技術優劣、橫向對比等》
• 《最火移動端跨平臺方案盤點：React Native、weex、Flutter》
• 《快速瞭解Electron：新一代基於Web的跨平臺桌面技術》

三、洪荒時代（1990~1994年）

在1990~1994年期間，前端界發生的大事有：WWW（World Wide Web）的誕生、瀏覽器的誕生、JavaScript的誕生，沒有專業的前端，頁面全是由後端開發的。

1990年，萬維網之父蒂姆·伯納斯-李（Tim Berners-Lee）在NeXT電腦上發明了第一個Web瀏覽器。

 

▲ 互聯網之父——伯納斯·李（Tim Berners-Lee）

1991年8月6日，Tim在alt.hypertext新聞組貼出了一份關於World Wide Web的簡單摘要，這標誌了Web頁面在Internet上的首次登場。

1990年12月25日，羅伯特·卡里奧在CERN（即位於日內瓦的歐洲原子核研究會）和蒂姆·伯納斯·李一塊兒成功經過Internet實現了HTTP代理與服務器的第一次通信（有關HTTP的詳細介紹，請見《網絡編程懶人入門(六)：深刻淺出，全面理解HTTP協議》）。蒂姆·伯納斯·李(Tim Berners-Lee)爵士做爲萬維網(World Wide Web，簡稱WWW或互聯網)的發明者，被尊稱爲互聯網之父。蒂姆·伯納斯·李創建的第一個網站(也是世界上第一個網站)是http://info. cern. ch/，它於1991年8月6日上網(即北京時間8月7日)。

最先的Web主要被一幫科學家們用來共享和傳遞信息，全世界的Web服務器也就幾十臺。因爲僅是用來傳遞信息，從可視化方式或從傳遞數量上看，僅比電報強一點點。

當時尚未JavaScript，用的是純靜態的頁面。

1993年，CGI（Common Gateway Interface）出現了，人們能夠在後端動態生成頁面。

Perl因爲跨操做系統和易於修改的特性成爲CGI的主要編寫語言。固然，CGI也支持其餘支持標準輸入輸出和環境變量的語言編寫，好比Shell腳本、C/C++語言，只要符合接口標準便可。

但顯然，頁面的內容更新徹底由後端生成，這帶來一個明顯的缺憾：每次更新都要整頁刷新，加上早期的網速狀況，這個操做是很是慢的。所以針對這狀況，人們從多方面着手改進：編寫語言的升級、瀏覽器的升級、HTML的升級。

1994年，網景公司成立，發佈了第一款商業瀏覽器Navigator。自從這款瀏覽器面世後，微軟推出IE瀏覽器。雖然說有競爭纔有發展，但這也埋下了JavaScript分裂的種子。

 

▲ 1994 年，網景瀏覽器的截圖

同年，PHP誕生。PHP能將動態的內容嵌入到HTML中，提高了編寫頁面的效率與可讀性，其性能也比通常的CGI高。PHP的界定符、循環語句等的發明，深入影響了後來的ASP、JSP，乃致後來的JavaScript前端模板引擎。

 

1994年10月，W3C小組也成立了，他們負責HTML的發展路徑，其宗旨是經過促進通用協議的發展。

待這一切就緒後， JavaScript於1995年誕生了。

傳聞，網景工程師布蘭登·艾克（Brendan Eich）只花了10天時間設計出 JavaScript 語言，近乎上帝七日創造世界那麼高效。但也由於工期過短的緣故，致使許多瑕疵，所以一直被正統程序員所嫌棄，直到Ajax的出世，才讓人們找到理由忍受它的畸形。早期的瀏覽器都配有一個選項，用來禁止JavaScript語言運行。

蘭登·艾克（Brendan Eich）:

 

艾奇不只是Mozilla的聯合創始人，仍是JavaScript技術的創始人。自1998年起，他開始深度參與Mozilla各方面的發展工做，包括Firefox瀏覽器和Thunderbird的研發。2005年，艾奇被任命爲Mozilla公司的首席技術官。

 

JavaScript主要語言特徵：

1）借鑑C語言的基本語法；

2）借鑑Java語言的數據類型和內存管理；

3）借鑑Scheme語言，將函數提高到"第一等公民"（first-class citizen）的地位；

4）借鑑Self語言，使用基於原型（Prototype）的繼承機制。

時下，靜態語言大行其道，類與接口被證實是構建大工程的最佳實踐，人們想不出沒有類的語言如何編寫業務。所以當時的微軟也打造了另外一門運行於瀏覽器的語言——VBScript。

若是繼續細探JavaScript的能力，你會發現它早期真的很是空洞，一門沒有靈魂的語言，沒有包管理機制，也沒有像Java與C++那樣的打輔助用的SDK，內置的方法也屈指可數。好比說數組方法，早期只有push、pop、shift、unshift、splice、slice、sort、reverse、concat、join等操做。動態調用方面，Function的apply、call操做尚未出現！ 

早年的偷懶，致使後來不得不補課：到了2019年，數組上的原型方法，是原來3倍。

除了方法缺少，還有性能問題，你們討論用eval仍是Function，用哪一種循環方式，用parseInit仍是~~，就是爲了那一點點的性能提高。例如jsperf.com，就是一個專門研究JavaScript性能的網站。

所以JavaScript誕生後，其兩大任務就是完善語言特性與提升性能。這兩座大山分別由著名的prototype.js與jQuery來搬掉。

在搬掉以前，前端界還有一個曲折實踐——第一次瀏覽器戰爭，並由其發展而來UA嗅深技術。

四、瀏覽器戰爭（1994~2005年）

瀏覽器戰爭一共打了三場，IE瀏覽器vs網景瀏覽器、IE瀏覽vs火狐瀏覽器、IE瀏覽器vs谷歌瀏覽器。

第一場瀏覽器之戰打得尤爲激烈。

微軟的IE瀏覽器發佈於1994年，但此時的網景已經佔領絕對優點。微軟在落後的狀況，反編譯Netscape的源碼，推出IE與JScript。可是因爲Bug很是多，你們不肯意爲IE開發網站，所以發掘出UA，專門過濾掉IE瀏覽器。

UA即Navigator.userAgent ，是用一個字符串來記錄用戶當前運行在什麼操做系統與瀏覽器中。

當時IE3的UA是這樣的：

Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)

程序判斷UA信息，假如發現當前運行的環境是IE瀏覽器的話，就提示用戶用網景瀏覽器打開。所以微軟不得不讓本身的UA儘可能假裝成網景的UA，欺騙用於檢測UA的腳本，達到IE瀏覽器能夠跑這些網站的目的。

最終，第一次瀏覽器之戰以微軟勝利，Netscape被美國在線收購，而落下帷幕。

第一次瀏覽器戰爭年代很是久遠了，但其結局告訴咱們，其實技術強弱並不重要。那時技術保護並無這麼重視，不然微軟的行爲可能會被告（谷歌的openSDK僅抄襲幾十行代碼，被Oracle公司訴訟賠88億）。

 

第一次瀏覽器戰爭帶來了一個問題：儘管當時有ECMA-262（JavaScript規範文檔）與W3C（HTML與CSS的規範文檔），微軟卻沒有照規範來實現JavaScript、HTML與CSS，致使前端兼容問題的誕生。因此CSS Hack、瀏覽器斷定、特性偵測，這些技術就應運而生。

這個時代最著名的人物是Dean Edwrad，他是最先的近乎完美解決事件綁定的兼容性大神，其addEvent()內置於jQuery最先的版本中。jQuery的做者John Resig看到其超強的技藝，最後放棄推出大而全的框架，專攻選擇器引擎。

John Resig：

 

John Resig是jQuery的創始人和技術領袖，目前在Mozilla擔任JavaScript工具開發工程師。著有《Pro JavaScript Techniques》（即《精通JavaScript》）等經典JavaScript書籍。

Dean Edwrad的IE7.js、IE8.js是早期處理瀏覽器兼容的良藥，能夠說是一切Polyfill的起源。他寫了大量的Hack， 好比在IE如何測量元素的寬高，許多操做DOM的兼容。

這時期太早，中國基本沒有參與此次瀏覽器戰爭。

五、Prototype時期（2005~2009年）

Prototype是Sam Stephenson寫的一個很是優雅的JavaScript基礎類庫。他是Ruby的大牛，所以Prototype的許多方法名都是來自Ruby界。

Sam Stephenson最大的貢獻是發掘了Prototype與創造了Function.prototype.bind，在數組上也寫了一大堆方法，其中許多被標準化了。

同期的MooTools也是Prototype掛方法，當時，你們還在前端論壇爲這個爭吵。還有前端工程師喜歡在當時很出名的前端彙集地——藍色理想（現淪爲設計師網站）上，討論如何扒腳本、分享彈層、日曆等小組件的技術，這在當時已是很是了不得的事。

Prototype當時還解決兩大問題：動畫特效與Ajax請求。動畫特效是由Scriptaculous提供，咱們如今所熟知的各類緩動函數，各類特效的命名與大體的運行形態，都是由Scriptaculous肯定下來的。

在早期，谷歌就開始使用iframe實現頁面刷新。

2005 年2月，傑西·詹姆士·賈瑞特（Jesse James Garrett）發表了一篇名爲《Ajax：一種Web應用程序開發的新方法》的文章後，Ajax被挖掘出，你們纔開始重視起這技術的應用。

傑西·詹姆士·賈瑞特（Jesse James Garrett）：

 

傑西·詹姆士·賈瑞特是一名用戶體驗設計領域的設計師、網頁體驗設計公司Adaptive Path的創辦人，是AJAX技術術語的命名者。

例如IE下的ActiveXObject("Microsoft.XMLHTTP")，這是IE建立Ajax引擎的。假如當時有工程師開發出一個核心庫，若是不包含Ajax的封裝，便很差意思發佈出來。

 

▲ 一些Ajax書藉

當時前端開發模式是選擇一個核心庫，找一些組件，或者扒別人的腳本進行開發。

Prototype的源碼挺好理解的，代碼量也少，只有5000多行，裏面的每一個方法也很易扒出來，所以一些大公司總有高手能創造本身的Prototype。

但前端開發仍是離不開後端，由於前端沒有模塊機制，當時咱們須要用PHP進行打包。

打包是雅虎34條軍規之一，能夠減小請求數。打包的同時也能夠進行混淆，防止代碼小偷來窺探。

 

N年前，前端面試必問的題目：

 

▲ 模塊化的雛型， 在註釋中標註它的依賴

這個時期，尚未先後端分離，可國內一些帶着深厚後端背景的高手已經入場。

六、jQuery 時期（2009~2012年）

2006年，jQuery發佈，它當時的競爭對手不少：Dojo、Prototype、ExtJS、MooTools。

因此那時jQuery的宣傳口號僅能說是它的性能上升了100%、200%、300%。直到2009年，Sizzle選擇器引擎研發成功，jQuery才取得壓倒性的優點。

當時前端界首要面對的是瀏覽器兼容性問題，jQuery在處理DOM兼容上真是知微見著, 發掘出大量的DOM/BOM兼容方案（例如Dean Edwrad的addEvent()， IE的px轉換方案，domReady的doScroll方案，globalEval的兼容方案等）

jQuery也打破了前端開發者的編程思惟，以前是按照後端的開發思路來的：作一個業務就先封裝一個類，有了這個類後，再想辦法傳入一個DOM，而後再經過類方法操做DOM。而jQuery是DOM爲中心，開發者能夠選一個或多個DOM，變成jQuery對象，而後進行鏈式操做。當時爲了改變用戶的思惟，國內的高手寫了很多文章來引導你們。

其次，開發者們已開始注重先後端分離，並要求不能污染Object原型對象，不能污染window全局變量。這樣，jQuery只佔用兩個全局變量。

再次，jQuery很是輕量級，採用Dean Edwards編寫的Packer壓縮後， 大小不到30KB。而且裏面實現得很是精妙，以使人瞠目的手段解決各類兼容痼疾。

爲了學習這些技巧，高手們翻了一遍遍jQuery的源碼，因此網上有大量關於其源碼詳解的書藉。甚至前端工程師在面試時也會被考到jQuery的源碼實現，這樣，jQuery在國內更加流行。

 

jQuery的流行間接帶來如下的發展：

1）促令人們對CSS1~CSS3選擇器的學習；

2）促進了瀏覽器原生選擇器引擎document.querySelectorAll、Element.matches的誕生；

3）提升人們對domReady（DOMContentLoaded事件）的認識；

4）促進了Promise與requestAnimateFrame 的誕生；

5）最重要的是下降前端門檻，讓更多人進入這行業，前端工程師的隊伍愈來愈壯大。

這樣的話，不斷涌現出優秀的工程師，他們創造了大量jQuery插件與UI庫。爲後jQuery時代，人們研發前端模塊加載、統一異步機制、 打造大型MVC框架， 甚至伸向後端，接管打包腳本而發明Node.js，來騰出大量時間。

這個時期涌現了大量jQuery-like的庫，其中最著名的是Zepto.js。Zepto的出現也標誌着咱們進入移動互聯網時代。那時配套出的著名庫還有iScroll、fastclick、Lazy Load、Modernizr、fullPage。

jQuery的鏈式操做風靡一時，也帶來許多問題，當Ajax出現依賴時，就不可避免就出現回調地獄。所以針對這方面的討論，誕生Deffered與Promise。有關回調地獄的討論，在後來說Node.js異步處理時，將會再一次熱烈地討論。所以太陽下沒有新事，咱們老是遇到類似的問題。

jQuery如此多的選擇器也法維護，隨着愈來愈多人涌現這行業，頁面的交互也愈來愈複雜，從Web Page向Web App進化，新的趨勢帶來新的開發方式。

七、後jQuery時期（2012~2016年）

這時期以RequireJS的誕生爲起點，以RN的出現結束。同時解決了前端的模塊定義問題，模塊打包問題（經過Node.js），JavaScript不依靠其餘語言創造了一套本身的工具鏈。

jQuery的出現讓前端工程師開發更加輕鬆，假如工程師想實現一個功能，現搜索出一個jQuery插件來實現。那時候你們在前端網站就成天介紹jQuery插件，不多討論一些底層的實現。

前端工程師一般編寫一個頁面，會引入十多個乃至幾十個jQuery插件，頁面上塞滿了Script標籤。衆所周知，瀏覽器是單線程，Script的加載，會影響到頁面的解析與呈現，致使著名的白屏問題（當時前端用力過猛，body中的全部東西都是動態生成的）。

jQuery另外一個問題是全局污染，因爲插件的質量問題，或者開發的素質問題，這已是IIEF模塊或命名空間等傳統手段沒法解決了。

因而一些優秀的前端工程師們決定向後端取經，引入模塊機制。早期，這種模塊機制在Dojo、EXT這些框架中都是內置的，可是顯然說服不了另外一個框架的用戶用對方的模塊機制，因而有人立志要統一這種模塊定義方式，成立了CommonJS。

但不料，CommonJS內部也有派系，誰也說不服對方。終於有一我的忍不住本身獨立開發出RequireJS，其模塊規範即爲AMD。AMD最大的優點是它支持各類插件，且簡單明瞭，而且提供shim機制加載以非AMD規範編寫的JavaScript代碼。

 

但在CommonJS誕生好久一段時間後，在後端的Node.js出現時纔有用武之地。而國內，則流行另外一種規範風格，背靠阿里的大旗，有人推出了SeaJS，號稱其規範爲CMD。其實不管國內仍是國外，都產生許多模塊加載器，但最後仍是被淘汰了，規範一個就夠了，不宜過多。

可是前端工程師的創造力就是這麼驚人，從無到有，再到氾濫成災，一年足矣。這可能與前端代碼是開源的緣由。最後有人統一了前兩種規範（AMD、Node.js模塊），同時還支持老式的「全局」變量規範。

自此，JavaScript開發模式煥然一身了，你們只要在代碼外面包一層就能夠全世界通用，不用擔憂全局污染的問題。

其次，jQuery開發者須要解決大段HTML的生成問題，以前jQuery有$.html, $.append, $before等方法，能夠將一大段符合HTML結構的字符串轉換成DOM再插入到頁面上。

但如今咱們想分離出來，讓HTML獨立到不一樣的文件中，而後插數據，這就是前端模板。前端模板的狀況與模板規範同樣，從沒有到多如芝麻的境地。這時篩選一個好用且性能高的模板是一件讓前端工程師頭疼的問題，那時網上有許多評測文章來介紹它們。

前端模板技術能夠用一個公式來描述：

HTML = template(vars)

有了前端模板後，又誕生了前端路由，基於它們，人們發明一個新詞彙SPA。做爲這個時代的尾聲，來自Ruby界的高手Ryan Dahl發明了Node.js。前端工程師們歡呼：能夠不用傳統的後端就能本身寫一個網站了！

 

▲ Node 之父 Ryan Dahl

Node.js的發展就不詳述上，很快它就冒出海量模塊、路由、狀態管理、數據庫、MVC框架都有了。這時，前端就缺本身的MVC框架了。Node.js轉眼就十歲生日了。

 

著名的MEAN架構，是JavaScript全棧開發的先鋒。當時涌現了大量的MVC與MVVM框架。最早火起來的是Backbone.js，使用純正的MVC模型， Backbone.js是jQuery最後的支持者，它強依賴於jQuery。

Backbone.js的做者還搞了另外一套編譯語言CoffeeScript, 裏面的箭頭函數、類機制、 解構賦值等語法糖都深深影響了後來的ES6。

接着下來是谷歌的Angular，微軟的Knockout.js，蘋果的Ember.js這三個MVVM框架，MVVM就是比MVC多一個數據綁定功能，但這數據綁定功能是很是難實現。Knockout是使用函數代替屬性的技巧實現，它的設計影響到後來的Mobx；Ember.js是基於Object.defineProperty；Angular是將函數體轉譯成setter()、getter()函數。

大公司的介入，對我的開發者影響是很大，畢竟你們都愛迷信大公司，所以局面一會兒就穩定下來。大公司還帶來了全新的開發模式，早期都是找一個核心庫，再搜刮一大堆插件，而後本身寫業務代碼，最後後端打包。

大公司將後端開發經驗挪用過來，用Node.js開發了一套CLI，裏面包含了腳手架生成， 打包腳本、語法風格檢測、環境變量插入，代碼複雜度檢測，代碼提交時自動跑單元測試， 圖片與JS壓縮等功能。ESLint、JSLint、JSHint、CSS Lint、 htmllint等就是那時期出現的。

但CLI的出現致使了前端的分裂，之前你們都使用jQuery，但自CLI幫你建好項目的那一刻起，就將你劃歸某一子陣營，你是Angular？Ember.js？仍是jQuery？對了，jQuery沒有大公司支撐的陣營被快速邊緣化。

對於我的開發者，他們是沒有能力開發這麼功能完備的CLI，因而出現了Code Climate、Travis CI、CircleCI這樣的平臺。它們的出現標誌着jQuery小做坊時代的終結了。

 

▲ CircleCI官網

前端開發者也出現分化：有些人轉向後端，出現了CNode的門戶網站。另一些人開始搞工程化。一時間出現上百種構建工具，出名的有Grunt、Gulp、FIS三、webpack、 Rollup、npm-script。 

你方唱罷我登場，這些構建工具均會經歷時代的考驗，如大浪淘沙般，最後存活得僅爲寥寥。

所以在這場工程化的盛宴中，註定把許多低層次的jQueryer淘汰掉。jQueryer在空閒之餘培育出的前端模板、前端路由、MVC框架、模塊加載器、Node.js構建工具，卻不料最終成爲它本身的挖墓人。

jQuery的時代一去不返了，再沒有人關心拖了N年的Bootstrap 4終於發佈了，沒有人知道jQuery3.5的瘦身計劃，也沒有人問jQuery的源碼，漸漸地，你們不關注jQuery的工具鏈了。

八、三大框架割據時代（2016~至今）

React是忽然爆發的，雖然它是與Angular是同時期發佈，但由於JSX怪異的語法讓人們遠離它。此時已經進入移動互聯網的中期，大公司都有本身的App，或者基於原生，或者基於Hybird（詳見：《盤點主流移動端跨平臺UI技術：實現原理、技術優劣、橫向對比等》、《最火移動端跨平臺方案盤點：React Native、weex、Flutter》）。

Hybird是用WebView加載一個網站或一個SPA。

因爲原生成本太貴，須要招兩套班子，一套安卓的，一套iOS的；而Hybird則一直存在性能問題。因而在2017年，Facebook推出了React Native（RN）。

 

RN的性能不比原生差多少，比Hybird能好些， 其次使用JSX開發界面比原生的快；RN 只須要低成本的前端開發人員就能上手了。中國國內通過瀑布流（圖片導購）、團購、P2P、區塊鏈等全新商業模式的開發浪潮後，前端人員數量大增。如今，他們只要稍微培訓就能夠轉型爲App開發。

在開發RN的過程當中，人們開始瞭解React一系列的優勝之處。好比JSX背後的虛擬DOM技術，雖然事實證實虛擬DOM不會帶來性能的巨大優點，但保證了你怎麼寫其性能不會太差。

React爲了引入JSX，必須須要引入編譯，這又間接促成Babel與webpack的壯大。尤爲是Babel， 讓咱們在很舊的瀏覽器中使用很是新的語法，甚至一些尚未定案的語法。React從14升級到React 15，強制使用class語法，讓這個推了很久的語法糖終於大規模落地。

 

以前若是JavaScript想使用類，只能本身模擬類，因爲沒有官方的實現，只能任由各優秀工程師發揮。而普通人想用好類，須要瞭解很複雜的Prototype機制。 

如今只用幾個新關鍵字就能夠獲得這一切。

若是對比Python 2與Python 3間的升級，JavaScript實在太辛運了！針對CSS邏輯功能過弱的問題，咱們也有了新的解決方案：Less、Sass、PostCSS與CSS Modules！

谷歌在發佈Angular的同時，也發佈了一個叫Polymer的框架，那時它想推廣一種叫Web Components的瀏覽器自定義組件技術。這實際上是微軟在IE5就玩剩的HTC技術的升級版。雖然它沒有火起來，但它將Script、Style、Template三種內容混在一個文件的設計，啓發一個留美華人，再結合當時的Backbone.js、Angular等設計，Vue.js橫空出世。目前，這是國人最成功的前端框架了。

尤雨溪：

 

尤雨溪是Vue.js框架的做者，HTML5版Clear的打造人。尤雨溪畢業於上海復旦附中，在美國完成大學學業，本科畢業於Colgate University，後在Parsons設計學院得到Design & Technology藝術碩士學位，現任職於紐約Google Creative Lab。

除此以外，國人也弄了好幾套迷你React框架與迷你Vue框架。這有點像jQuery時代，你們瘋狂作迷你jQuery框架同樣。

總的來講，最有創造力的是React團隊，作出狀態管理器、CSS-in-JS、Flow靜態類型檢查、devTool、Fetch、先後端同構、Fiber、suspend、併發渲染等名詞層出不窮。其中，狀態管理器擁有上百套， CSS-in-JS也擁有上百套，Flow則讓前端嚐鮮到接口編程的好處，間接推進TypeScript發展。這三大框架沒法比拼個一二出來：Vue.js有國人的擁躉，React與Angular有大公司光環。

三大框架的纏鬥從PC領域擴展到移動端：React有RN， Vue.js有Weex，Angular有ionic。想當年咱們爲了兼容瀏覽器，攢了一大堆瀏覽器偵探的Hack，所有貶值爲垃圾了。

在這時期，一種全新的後端渲染崛起，稱之爲先後同構，既擁有早期SEO的功效，又能複用大量的業務邏輯。隨着國內移動互聯網的發展，獲客成本提升，各類有效的商業模式都進入紅海，但只有頭部用戶能賺到錢，馬太效應愈來愈嚴重，純粹的技術解決方案已經沒法知足商業訴求了。

九、小程序時代（2017~至今）

小程序時代與三大框架的時代幾乎重合，可是出自不一樣一批人，決戰的平臺也不同。

一直以來前端技術都是由國外開發者主導的，即使是Vue.js也是由美國的華人創造的。可是國內外的技術更新是存在代差，國內一般延期兩三年，這個時間差可讓一些模仿者得以生存（如SeaJS、FIS、avalon）。但隨着封閉的時間愈來愈長，國內確定也會誕生本身的專有物種。小程序就是其中之一。

 

小程序的出現有着明顯的商業訴求，由於馬太效應，一些超大流量的App誕生了。這些大流量App集成了許多功能，但顯然公司再多員工，也沒法全部功能全是本身弄，因而產生小程序這種「外包」的手段。

小程序是國內前端技術的一次厚積薄發：底層運行的迷你React的虛擬DOM， 內置組件是使用Web Component，API來源於Hybird的橋方法，打包使用webpack，調試臺是Chrome console的簡化版， WXML、WXSS的語法高亮也應該是webpack或VS Code的插件， 模塊機制是Node.js的CommonJS……其中最值得一提的是微信開發者工具，之後開發者工具成了各類小程序/快應用的標配。

但微信小程序一開始的複用能力很是弱，沒有類繼承，不能使用npm, 不支持Less、Sass， 所以基於它的轉譯框架就應運而生。第一代轉譯框架是wept、WePY、mpvue，它們無一例外是Vue風格的。由於WXML的模板指令與Vue很是類似，只是改一下就能兼容。當時也出現了一個MINA的框架，據說是微信團隊開發的，能夠單獨架起Node.js後端，讓小程序運於瀏覽器中，方便作單元測試。

第一代轉譯框架主要是基於Template標籤實現組件機制，自定義組件機制是之後的事了。這就形成了利用第一代轉譯框架編寫的小程序項目很難升級。那時候是我的開發者的天堂，這些框架都是某一大牛獨力開發的。

 

第二代轉譯框架是大公司主導的，由於須要兼容的小程序愈來愈多，百度、支付寶、字節跳動、小米、華爲等公司都推出本身的小程序和快應用。我的開發者很難憑我的力量去開發轉譯框架，這時候各大團隊紛紛推出本身的輪子：如京東的Taro、滴滴的Chameleon、網易的Megalo、去哪兒網的nanachi、百度的Okam等。

在這個時期，Angular顯然落伍了，一是Angular升級太快，國內的高手尚未消化好，新一版的Angular又發佈了。二是國內缺少迷你Angular的輪子，致使龐大的Angular沒法塞進小程序中。

國外谷歌發佈了Flutter跨平臺轉譯框架，可是它的編寫語言是Dart，它也沒法跨界到小程序中。

將來不只國內一線巨頭爭奪小程序，二三線的巨頭也可能會加入小程序的混戰中，例若有人稱360也在打造本身的小程序平臺。小程序這種新的流量變現模式深入地影響了國內的互聯網布局。

十、結束語

當初JavaScript被誤解爲最糟糕的語言，時至今日它是最流行的語言：GitHub 60%的開源項目都是與JavaScript有關。

之前，從事這行業的人被稱爲頁面仔，如今他們的起薪有的比PHP、JAVA、C++等後端還高。甚至有人說，「任何可使用JavaScript來編寫的應用，最終會由JavaScript編寫。」

咱們前端開發者觸及的領域不只僅是瀏覽器，還能夠作後端，作桌面端，作手機端，作小程序端，前端開發者的性價比愈來愈高，愈來愈重要。可謂是時代造英雄。

筆者有幸成爲前端開發者大隊伍中的一員，也堅信咱們前端開發者之後的路會愈來愈寬，愈來愈好走。

附錄：有關Web即時通信技術的文章

Web即時通信新手入門貼：
《新手入門貼：詳解Web端即時通信技術的原理》

Web端即時通信技術盤點請參見：
《Web端即時通信技術盤點：短輪詢、Comet、Websocket、SSE》

關於Ajax短輪詢：
找這方面的資料沒什麼意義，除非忽悠客戶，不然請考慮其它3種方案便可。

有關Comet技術的詳細介紹請參見：

• 《Comet技術詳解：基於HTTP長鏈接的Web端實時通訊技術》
• 《WEB端即時通信：HTTP長鏈接、長輪詢（long polling）詳解》
• 《WEB端即時通信：不用WebSocket也同樣能搞定消息的即時性》
• 《開源Comet服務器iComet：支持百萬併發的Web端即時通信方案》

更多WebSocket的詳細介紹請參見：

• 《新手快速入門：WebSocket簡明教程》
• 《WebSocket詳解（一）：初步認識WebSocket技術》
• 《WebSocket詳解（二）：技術原理、代碼演示和應用案例》
• 《WebSocket詳解（三）：深刻WebSocket通訊協議細節》
• 《WebSocket詳解（四）：刨根問底HTTP與WebSocket的關係(上篇)》
• 《WebSocket詳解（五）：刨根問底HTTP與WebSocket的關係(下篇)》
• 《WebSocket詳解（六）：刨根問底WebSocket與Socket的關係》
• 《理論聯繫實際：從零理解WebSocket的通訊原理、協議格式、安全性》
• 《Socket.IO介紹：支持WebSocket、用於WEB端的即時通信的框架》
• 《socket.io和websocket 之間是什麼關係？有什麼區別？》

有關SSE的詳細介紹文章請參見：
《SSE技術詳解：一種全新的HTML5服務器推送事件技術》

更多WEB即時通信文章請見：
http://www.52im.net/forum.php?mod=collection&action=view&ctid=15

（本文同步發佈於：http://www.52im.net/thread-2719-1-1.html）