JavaScript和Node.js簡史,前端未來走向何方?

本文最初發佈於 Medium 網站,經原作者授權由 InfoQ 中文站翻譯並分享。

起源,瀏覽器大戰和交互式 Web

早年間的 Web 沒有任何交互行爲,那時的互聯網實際上只是通過 FTP 之類的計算機網絡協議顯示文本文件而已。

本地網絡,也就是學校等組織的內部網絡最後合併在了一起,形成了互相聯結的網絡,那就是互聯網。

隨着時間推移,Web 通過 DNS、HTTP 等新協議不斷擴展,且開始用上了 HTML;隨着個人計算機和 Web 瀏覽器的推廣,中產階級也開始接入了互聯網。Mosaic 瀏覽器的創造者創建了一種名爲“LiveScript”的語言,於 1995 年發佈。

發佈 3 個月後,它被 重命名爲“JavaScript”,爲的是蹭在高級程序員中流行的 Java 語言(和 JS 完全不同,毫無關係的語言)的熱度。

結果微軟故技重施,又一次從別人的產品中竊取了源代碼,併發布了自己的產品版本——使用“JScript”的 Internet Explorer(此處僅代表作者個人觀點)。瀏覽器大戰開始了,戰爭的結局是 Mosaic 等瀏覽器敗給了 Internet Explorer。但是 JS 和其他腳本語言一樣仍然存在多個分支。這些分支都是爲了解決爲瀏覽器提供(超鏈接和頁面重載之外的)交互行爲 這個問題。

爲其提供動力的語言和引擎

https://www.slideshare.net/RednaxelaFX/implement-js-krystalmok20131110

如果你想了解有關 JS 引擎和語言背後代碼的更多信息,請看一看 Kris Mok 做的這份很棒的演示。不像我,他實際上構建了一個 JavaScript 引擎……

通過腳本對瀏覽器行爲進行標準化

標準化腳本語言的第一次嘗試是 1997 年的 ECMAScript。(ES-1)是 歐洲計算機制造商協會(ECMA) 制訂的規範。但是,由於不同的實現、互相競爭的編程語言和人們的自負心態等等因素,真正的標準化直到 2009 年纔開始成爲現實。在此期間,(失敗的)ES-4 提案(由 Mozilla 等組織主導)曾試圖推廣一些更傳統的編程概念,如類、模塊等。

因爲有人擔憂 ES4 會“破壞 Web”,以及允許 客戶端動態內容 的 AJAX(異步 JavaScript 和 XML)的誕生,這個標準被放棄了。受多種因素影響,jQuery 於 2006 年創建,主要是爲 JavaScript 和 AJAX 的各種實現提供跨瀏覽器支持。ES-5 於 2009 年發佈,最終成爲了今天大多數人仍在引用的 JavaScript 事實標準。

這裏要明確指出一點,實際上 ES-4 中提議的所有特性之後都將在 ES-6 中實現,例如類、生成器(generator)和迭代器(iterator)、解構賦值(destructuring assignment),以及最重要的模塊系統。唯一 缺少 的特性就是各種 類型的重新實現

Node.js 和 JavaScript 模塊系統的誕生

2009 年誕生的 serverJS 旨在爲 JavaScript 提供模塊系統,後來它被重命名爲 commonJS。它的目標是“在 Web 瀏覽器之外爲 JavaScript 建立模塊生態系統約定”。它可能與某些失敗的 ES4 提案有關係。

Ryan Dahl 兩年前討論的內容。

https://youtu.be/jo_B4LTHi3I

同年晚些時候,RyanDahl 以此爲基礎創建了 Node.js。這是一個 JavaScript 運行時環境,使用了 Chrome V8 引擎和 libuv 等技術,並於 2009 年 5 月發佈。

這種運行時環境使 JavaScript 幾乎可以運行在任何位置,只要安裝了這個環境即可。

Node.js 徹底改變了 JS 語言,並幫助後者慢慢向編程語言靠攏,而逐漸擺脫了腳本語言的影子。在這一過程中有幾件事很關鍵:分別是異步代碼的回調(當時 JS 中已經有這個特性了)和模塊系統(被拒絕的一個 ES4 提案),允許通過 require() 和 export 導入和導出多個文件;模塊系統的特性最終催生了一個包管理器 NPM,它後來成爲了最大的開源軟件來源之一。Node.js API 還帶有一些允許讀取 / 寫入文件的基本方法(例如 FS)和一種基礎的 HTTP 方法,在創建一個簡單服務器時它們都是必不可少的。

Node.js 發佈之後,圍繞這個運行時環境及其主要的包管理器 npm 的生態系統迅速發展壯大。在 grunt、gulp、webpack 等工具的幫助下,瀏覽器端和 Node 端的庫都更容易發佈、分發和互聯了。

這讓開發人員更容易在前端和後端快速建立網站原型。全棧開發人員的門檻一夜之間就消失不見了,所有人現在都可以成爲全棧工程師,因爲它不需要開發人員切換到其他語言上,如 PHP、python、pearl 等。

初創企業的視角

隨着時間的流逝,在種種因素推動下,Node.js 迎來了爆炸式增長和普及。

這個環境讓很多東西學起來都輕鬆多了,因爲你不必像配置 php 和 LAMP 一樣學習如何配置本地 apache 服務器、xampp、配置 vhost 文件。你能想到的幾乎所有需求,在前端或後端都會有一個庫來滿足它,只需一個 npm install 命令即可。

太棒了,只要能正確實現(異步編碼模式),很多場景中服務器都能跑得飛快,並能以最少的內存處理大量併發流量。而且它們的代碼寫起來非常輕鬆。

不管是對新手還是有經驗的開發人員,這都絕對是夢寐以求的生活;尤其是那些每時每刻都在 引領編程潮流的初創企業,更是對 Node.js 情有獨鍾。隨着 Node.js 逐漸走向成熟,人們也看到了它的諸多優勢:高速度、低廉的服務器成本和學習成本,降低潛在的培訓和招聘成本,快速開發原型,加強前端和後端團隊之間的溝通,最重要的是總體薪酬成本下降——因爲一位優秀的全棧工程師可以同時處理前端和後端需求。後者對初創公司來說尤其重要,因爲這意味着更低的股權成本和更少的開銷。

響應式設計和移動應用開發

從 2009 年 Node.js 誕生到 2013 年它迎來爆發的期間,移動電話進化成了智能手機,而應用成爲了初創企業的成敗關鍵。你的軟件要在用戶手中 7x24 待命,爲你建立競爭優勢,甚至可能幫助你擊垮行業中的巨頭,建立一個新的帝國。

媒體查詢(Media Queries)於 2008-2009 年間引入,在 2010 年“響應式設計”一詞出現,以適應隨技術領域和整個社會的革命性變化而產生的需求。隨着響應式設計成爲 Web 設計的主流,新技術也即將誕生,準備顛覆移動應用程序開發行業。

到 2011 年,另一種技術開始興起,這很大程度上是受到了響應式設計理念的影響。Apache Cordova 允許 Web 開發人員使用 HTML、CSS 和 JS 來構建移動應用。在此之前,你必須精通 Android 端的 Java 語言或 iOS 端的 objective C 語言。這些語言不僅很難學習,而且開發環境更難調試(今天也是如此),開發速度也更慢,因爲你必須等待代碼重新編譯。Cordova 提供了一個解決方案,只用一種編程語言(JS)、html(標記)和 CSS(樣式)就可以開發移動應用,而且學習起來更容易。

當然,這種途徑確實存在巨大的缺陷,那就是應用的運行速度比其原生版本要慢許多,因此它並沒有像 Node.js 那樣大受歡迎。2013 年的 Ionic 在它的基礎上進一步發展,此後也不斷進步,並基本取代了 Cordova。但這還不足以挽救微軟的 Windows Phone,因爲沒人爲它的應用商店開發應用……

個人經歷:我叔叔在微軟工作了 20 多年,大部分時間都在用微軟系統的手機。所以我在本文中會對微軟大開嘲諷。2000-2008 年間,當我看到微軟開發的智能手機具備完整的互聯網功能(Windows Mobile 系統)時,我本來是非常驚訝和倍感振奮的。那可是響應式設計誕生的整整 10 年前啊。

在硬件方面,Johnny-Five.io 於 2012 年面世;有了它,你第一次可以利用 JS 的簡潔性以及 Node.js 和 NPM 的強大能力來快速開發硬件原型。

以前需要開發人員使用靜態類型的 OOP 語言的所有領域都受到了影響。

這讓我們開發人員可以使用 Arduino、Tessel 2、Raspberry Pi 以及可以安裝 Node.js 和 johnny-five 的幾乎所有設備來做開發。不僅是機器人,當今很多的物聯網設備都是基於它構建的,它對很多領域都產生了深遠的影響,甚至包括一些並沒有真正意識到 JS 好處或推崇 JS 的領域。

結果,JavaScript 成爲了 最通用、可訪問性最高的編程語言,可以在客戶端(瀏覽器)、服務器、手機 / 平板電腦應用,以及通過 Johnny-Five 的微控制器控制的各種設備上使用。

甚至還有幾個庫可以用來構建 VR 甚至遊戲。

Node Forks 和 ES6 的問題

時間來到了 2014 年,出於各種原因,Node.js 開始出現了一些分支。其中最著名的是 io.js,它最終合併回了 Node.js。其他還有幾個分支這裏就不細談了,它們的消亡背後也有很多因素,包括技術原因(如 promise)、缺乏貢獻者,甚至是出於一些不成熟的個人情緒化原因。

到 2015 年,最新的 JavaScript 標準 ECMAScript 6 發佈了,它幾乎實現了原來在 ES4 中計劃的所有內容,只是去掉了一些重大更改,尤其令人矚目的是引入了 let、const 和 symbol,而不是更傳統的局部 / 全局變量和靜態、強類型的聲明。還有,這個方法 不像原來的 ES4 草案那樣 可能會破壞 Web,而是引入了強大的 Babel,並讓開發人員可以將 ES6+ 編譯到 ES5(當時的通行標準),這樣就能立即使用很多新特性了。

所有這些都已由 Node.js 實現。

這些新的 JavaScript 特性包括 ESM,也就是 ECMAScript 模塊(import/export,而不是通過 commonJS 的 require())、async/await、fetch browser API,還有很多 ES4 草案中沒有的特性。其中一些特性還在不同程度上引入了與 Node.js 核心架構的兼容性問題。最值得注意的是,在過去的 5 年中,ESM 標準本身一直就是一個非常現實的問題,它需要根據不同情況來使用第三方包 / 實驗標誌或使用.mjs 文件。

TS的誕生和崛起:對ES4和ES6的迴應?

在水面下還潛藏着另一股力量。TypeScript 於 2012 年誕生,但直到 2014 年,ES6 這一新標準快要發佈的時候它才放出了 1.0 版。

接下來,我會基於自己對歷史和 2020 年當前行業形勢的理解,插入一些個人觀點和判斷。我將嘗試從社會學家和 JavaScript 開發人員的角度,憑藉近五年的經驗對未來做一些預測。

我認爲 JavaScript 在很大程度上是一門殘破的語言,其缺陷本應該在基於它運行的全球經濟與技術體系深刻影響我們的現實社會之前就得到解決。換句話說,他們關於 ES4 提案的觀點可能是正確的……但是現在意識到這一點爲時已晚

最後,我認爲 TypeScript 可以調試語言本身的繼承錯誤,並在快速製作原型和高質量代碼之間取得了良好的平衡等特性確實很棒,而且我迫不及待地想看看 Deno 爲這種語言帶來了哪些新鮮空氣。

Deno 原型的誕生

Deno 於 2018 年首次公佈,Node.js 的創建者 Ryan Dahl 完全基於現代 JS 標準(例如 promise 和 async/await、ESM、類型數組和 TypeScript),從頭開始寫了一個全新的運行時,震撼了整個 JavaScript 世界。

https://youtu.be/M3BM9TB-8yA

由於所有這些歷史原因和其他因素,Ryan Dahl 開始打造全新的事物。在演講中,他談到 Deno 主要是一個“思想實驗”,並表達了他在構建 nodeJS 時留下的遺憾,對 TypeScript 的熱愛以及對 dart 的厭惡。

Deno 1.0

今天,Deno 的 1.0 版本已經穩定下來,準備就緒,可供大家試用。

https://youtu.be/HjdJzNoT_qg

他們在一月份將安裝編譯爲可執行文件,之後到現在它已經足夠穩定了。

https://youtu.be/NHHhiqwcfRM

https://youtu.be/KuaI6mphFNc

以上是來自創作者的一些最新視頻,以供參考。

未來走向?去年我教高中生時就做過一些預測,並告訴他們應該注意三件會改變開發行業的事情:

1、TypeScript 和 Deno

通過它們學習後端知識,並掌握行業(FANG)所需的代碼質量水平。

2、CSSHoudini

事關瀏覽器優化和自定義佈局等等。

3、WebAssembly 和 AssemblyScript

可在服務器、移動應用和 VR 領域提供原生級的優化水平。

換句話說,今天就像是 2009 年的重演,只不過 這次輪到 TypeScript 和它的運行時環境來顛覆行業了

今天的主角是 TypeScript 和 Deno,而不是曾經的 JavaScript 和 Node.js。

相比過去的移動應用和響應式設計,如今可能是 VR/AR 設計界面來掀起新的潮流,因爲在這次全球疫情中,我們學會了利用 5G 和雲遊戲等技術來抵消災難的衝擊。

相比過去我們使用 Cordova、Ionic 或 NativeScript,用一個包裝器來原生編譯運行代碼,今天你可以使用 TypeScript 編寫和調試代碼,然後編譯爲 WebAssembly,也幾乎用不着再操心性能問題了。

有想法或意見嗎?

希望大家能喜歡這篇文章,並且不要把我的一些批評太當真。我真的很想聽聽你的想法!我特別想看看老一代程序員對 JS/ECMA 歷史的看法,因爲我從 2013 年纔開始用它,到了 2015 年纔開始成爲真正的全棧工程師。

宣傳一下我們的 YouTube 頻道,裏面有很多有用的教程,歡迎大家訂閱:

https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw

英文原文

A brief history of JavaScript

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章