前端之變（五）：王者歸來

本周繼續就前端之變闡述自己的思考，

這是本系統的第五篇，前四篇為：

1. 前端之變（一）：技術的變與不變
2. 前端之變（二）：不變的前端
3. 前端之變（三）：變革與突破
4. 前端之變（三）：進擊的前端

前面幾篇文章我已經分析過前端的變化了，豪無疑問，前端的變化是"質變"而非"量變"，它不是遞進式的出現一個新的技術語言或框架，從根本上說它是一種模式顛覆性的取代另一種模式，

本篇我就來探討與分析一下，究竟是誰給前端帶來了如此巨大的改變，前端這些年究竟發生了什么事情？

我還是從前端的發展歷史開始說起吧.

前端發展史

上面這個圖用時間線的方式濃縮的講述了前端重要技術的一個發展史，這個圖中有幾個比較重要的時間點：

• 2006年 JQuery發布
• 2008年 Chrome&V8發布
• 2009年 NodeJS發布,同年ES5發布
• 2012年 Typescript發布
• 2013年 React發布
• 2014年 Vue發布

這幾個節點是值得參考的時間點，

如同我在前面的文章所闡述的，JQuery與React,Vue完全不能類比，

JQuery是『前』前端時代最有名的框架，而React與Vue則是『后』前端時代最有名的框架，它們之間的差異并不屬于量變這種程度，完全是質變，

那很顯然的，呼之欲出的，2008年v8引擎的發布與2009年NodeJS的發布這兩個技術，是導致前端發生翻天覆地改變的原因所在，

v8引擎

v8引擎是一個JavaScript引擎，它是Chrome帶來的一個開源的引擎，

JavaScript引擎是做什么用的？如果用一句話來形容，就是

將JavaScript翻譯成作業系統CPU能"讀懂"的代碼

在2021年的現在，這玩意并不多，主流的就下面幾個：

• Chrome的v8引擎
• Mozilla的SpiderMonkey引擎
• Apple的JavaScriptCore引擎

另外，搞React Native的程式員可能都知道Hermes這個東西，它也是引擎的一種了，

事實上，能做引擎的少之又少，這個東西的復雜度超乎想象，可能與作業系統相提并論了，據說v8引擎有上百萬行代碼，

v8引擎是C++實作，它的大致原理就是將JS代碼翻譯成機器代碼，然后交由CPU去執行，

chrome的v8引擎是給自己的用的，因為瀏覽器的一個非常重要的作業就是要解釋與執行JS，所以最開始v8引擎就是chrome用來給瀏覽器用的，

這本來沒什么，但是2009年NodeJS的出現，打破了v8引擎只用在瀏覽器中的做法，

NodeJS的橫空出世

2009年,NodeJS出現了，官網對它自己的定義及描述是：

Node.js? 是一個基于 Chrome V8 引擎 的 JavaScript 運行時，

關于NodeJS到底是個什么東西，我簡單的畫了個它的架構圖:

從這個架構圖上可以很明顯的看到，它用上了v8引擎，

先簡單講下這些東西是什么:

libuv

一個異步事件回圈的C庫，它在運行時負責一個事件回圈（Event Loop）、一個執行緒池、檔案系統 I/O、DNS 相關和網路 I/O，以及一些其他重要功能，

c-ares、crypto (OpenSSL)、zlib等

提供了對系統底層功能的訪問，包括網路、壓縮、加密等，

Bindings

橋接層，負責JavaScript與C，C++打交道的

C/C++ Addons

允許你添加額外的C或C++庫，但你要為它們寫Addons，這樣JS才能呼叫它們，

事實上，如果我們不看v8與JS，就會發現，這完全是一個C/C++的環境，對吧，這也是為什么NodeJS能跨平臺的原因所在，因為C/C++是支持所有系統的，

v8引擎呢？

一個C/C++的環境為什么可以用JS來撰寫代碼？

我前面講過chrome的v8引擎就是負責將JS代碼翻譯成機器代碼，這就是為什么NodeJS需要v8引擎的原因所在，因為有了這個引擎，你才能用NodeJ撰寫服務器端的代碼，呼叫系統底層API，諸如網路，檔案等，

有心栽花花不開

最開始NodeJS的出現，其實本意并不是來優化或改變前端編碼的，它最開始的本意可能在于：

在傳統的Java之外，提供一個新的后端編碼解決方案

我們都知道，在服務器端編碼語言中，一直是Java占據優勢地位，Java是跨平臺的語言，是源于JVM這個虛擬機實作的，

NodeJS的出現很顯然提供了另一種方案，它與Java有很大的差別

• 它不是使用Java,而是使用更具大眾性的JavaScript語言來撰寫后端代碼
• 它不是Java那種執行緒阻塞式的，而是基于異步+事件回圈的實作，這種實作比執行緒阻塞式的高效多了，
• 更重要的是，它似乎統一了前后端編碼，前后端編碼再不是兩群不同的難以溝通與交流的人，而是用著同一種語言的一群人，

因為上述幾個優勢，使得NodeJS在初期，非常受到贊賞，這也是NodeJS的目標所在，它期望自己成為后端編程語言，

前些年我所在的公司有一段時間，也有使用的NodeJS來撰寫一些服務的后臺的案例，

當然，至少在這個方面，意圖能取代Java，成為后端的主流編程語言上，NodeJS并未成功，

后續我會就這一點闡述下我的思考，

無心插柳柳成蔭

從前端的發展時間線上來看，NodeJS的出現最開始對前端本身的影響與沖擊并不大，所以直到NodeJS出現4年之后的2013年，React才姍姍到來，

至少最開始的幾年時間，能撰寫后端服務器代碼的NodeJS對前端開發并無太多實際意義，前端人員還是寫著JS，用著JQuery,仍然在JS+HTML+CSS中打轉，

NodeJS這種能使用JS與原生作業系統原生互動的能力，在后端的發展上，雖然沒有對Java造成有效的沖擊，但它卻帶來了一個可能最開始自己也沒有意料到的結果：

它顛覆了前端的編碼方式

如我在前面所述，在『前』前端階段，前端編碼一直在JS+HTML+CSS中打轉，不管chrome的v8引擎多么高效，性能多么好，它也只是輔助瀏覽器更高效的執行與決議JS而已，它并沒有為JS帶來任何與原生作業系統互動的能力，

而這種JS能與原生作業系統進行互動，諸如讀寫本地檔案系統，網路等的能力，對于前端進入『后』前端階段，是至關重要的，

想像一下，如果沒有這種與原生系統互動的能力，今天前端的主流的一些技術與工具，沒有存在的可能性：

• React，依賴這種能力將JSX翻譯成JS
• less,sass這些編程式css，沒有辦法翻譯成css
• 前端的包管理npm，沒有讀寫本地檔案系統的能力，所謂的依賴管理壓根無從談起
• typescript將不復存在，v8引擎難道認得ts？是由tsc將ts翻譯成js檔案，瀏覽器才能識別

事實上，只要你稍微想下，今天你在前端編碼的幾乎所有技術，都依賴于這種與原生作業系統互動的能力而存在，

NodeJS作為一種語言，顯式的意圖是與Java在后端領域競爭，無疑未有成功，但它做為一種隱式的支持，支撐了前端技術的革命性的變更，卻是大獲成功，

所以，在2021年，當一個程式員下載與安裝NodeJS的時候，很大可能他并不是想用NodeJS撰寫一個后端服務，而是為了撰寫前端的代碼而已，

這才是NodeJS現今最真實的處境，它在前端的作用遠超它在后端的作用，

王者的歸來

所以，沒有任何疑問，對于前端來說，NodeJS是當之無愧的王者，

在『后』前端階段，任何一個主流技術都可以有替代方案：

• 你可以不喜歡React,去選擇Vue,
• 你也可以在typescript與javascript中任選一種你喜歡的，
• 你也可以在less,sass,css自由的切換，沒有哪一種是限定你不得不使用的，

唯有nodejs，是你無法選擇的，不管你用的什么，你都得下載與安裝nodejs這個東西，依賴這個環境，

它沒有讓你去撰寫后端程式，甚至可能你在前端編碼中都意識不到它的存在，但它對你所使用的現在前端幾乎主流所有技術都是不可或缺的，

除非，只有一種可能，

你再次退回到『前』前端階段，去使用JQuery，使用單純的HTML，用css來控制樣式，這并不是不可以，就算是在2021年，你依然可以這樣做，

你覺得這會有價值么，無論你持有什么立場，心中都明白，這并不是一種選擇，這就是一種退化，

我們已不可能再回到那個『前』前端階段了，

引領式變革

前端的改變不僅僅是影響到自己，一些優秀的框架，它不僅僅是借鑒其它端優勢的理念，在一些方面甚至走的比其它端更遠，做的更好，

以致于其它端又要回過頭來，向前端的理念學習，

比如前端的宣告式UI就是一個例子

我在這幾年撰寫移動原生開發，與2020年撰寫前端開發，在UI上給我的感覺是截然不同的做法，

移動端主流仍然是命令式UI編程，而React已經是宣告式UI編程

很顯然，宣告式UI編程更勝一籌，所以現在無論是android的jetpack,還是iOS的swift ui，都在向react學習，也都是宣告式UI編程的方式了，雖然這些還未成為移動端的主流，但往宣告式UI發展也是移動端不可逆轉的趨勢，

下一篇，我將繼續探索與分析前端之變，講述前端引領式的變革 – 前端之變（六）: 從命令式UI到宣告式UI