瀏覽器裏的黑天鵝：不可預知的前端變革點

時間 2019-11-16

原文原文鏈接

『黑天鵝』是這樣的事件：難以預測、衝擊性大，而且能馬後炮地過後分析。少數的黑天鵝事件幾乎能解釋這個世界上發生的全部事情。難道前端領域的演化也不是按部就班，而是黑天鵝式的嗎？讓咱們換一種角度回顧一下歷史吧…javascript

不可預知的黑天鵝

審視一下你周圍的環境，回顧自你出生以來周圍發生的重大事件、技術變革和發明，把它們與人們此前關於它們的預期相比較，而後看一下它們中有多少是在預料之中的？看看你本身的生活，你的職業選擇、你與配偶的邂逅、你被迫離開故土、你面臨的背叛、你忽然的致富或潦倒，這些事有多少是按照計劃發生的？html

——《黑天鵝》前端

許多史書、傳記都以一種決定論的視角來闡述歷史演化的必然性，但實際上對於生存在當時的芸芸衆生而言，歷史上的巨大變革點每每在某個平凡的日子裏忽然地發生，沒有一點點防備也沒有一絲顧慮。好比，當年一位準備離休當教授的江南老人，怎麼就忽然去了北京呢？java

個人這個經歷就是到了上海，到了 89 年的年初的時候，我在想我估計是快要離休了，我想我應該去當教授……我絕對不知道，我做爲一個上海市委書記怎麼把我選到北京去了。react

——👓jquery

技術的發展一樣存在着高度的跳躍性和不肯定性。在幾年甚至幾十年一遇的時間節點上，會誕生出全新的技術，而後纔是一段段的平穩增加。而且，新技術的誕生每每並不像 iPhone 發佈會那樣具有強烈的儀式感，而可能只是在平淡乃至質疑中揭開本身的面紗。下面，咱們會把視野進一步聚焦到瀏覽器裏，來看看前端領域中幾個咱們今天再熟悉不過的技術是怎麼誕生的，在當時又引發了什麼反響呢？git

倉促降生的 JavaScript

90 年代中期是個神奇的時間段。在電影工業界，1994 年誕生的三部經典影片《肖申克的救贖》、《這個殺手不太冷》到《阿甘正傳》長期在豆瓣電影 Top 250 中位列前十。而到了 1995 年，三門新生的編程語言在今天更是緊緊佔據 TIBOE 編程語言排行榜中的前十，它們是 Java、PHP 和 JavaScript。程序員

若是說 Java 表達了肖申克監獄的沉重，PHP 暗示了殺手裏昂的危險，那麼 JavaScript 在誕生之初或許體諒了阿甘的智商…多年後 JS 之父 Brendan Eich 在接受採訪時，是這麼表達設計 JS 的初心的：github

咱們準備向使用圖片、插件和 Java applet 等組件構建 Web 內容的 Web 設計師和兼職程序員提供一種『膠水語言』。咱們把 Java 當作高薪程序員使用的『組件語言』，而膠水程序員——即網頁設計師們——就能夠經過一門腳本語言來組裝組件並將交互自動化了。web

因此，在 JS 做者本人看來，他所指望的前端工程師不過是『兼職程序員』和『膠水程序員』（原文 part time programmer / glue programmer）而已，這多少有些一語成讖的味道。爲了讓實現這門語言的提議得到 Netscape 管理層的承認，他在 1995 年 5 月，花了十天實現了一個原型。請注意這個時間節點，由於區區三個月後，Netscape 就以創造 IPO 記錄的姿態上市了。

在公司高速發展的歷史背景下，JS 的不少方面都有趕工的痕跡。在訪談中被問及語言發展過程當中最頭痛的問題時，Brendan 也認可了這一點：

（最棘手的問題）主要是概念驗證的時間難以想象的短，而且在這以後語言設計就必須凍結了。包括實現內建對象在內，我開發解釋器的時間是大概十天。

若是 Brendan 知道這些匆匆凍結的基礎設計會在接下來的 20 多年裏影響百萬級的開發者和十億級的用戶的話，也許他會說服管理層多給他一點時間吧……這麼短的設計時間致使這門語言的基礎設計中存在着一堆歷史緣由留下的技術債，好比語言裏竟然並存了 undefined 和 null 兩種表示『值不存在』的概念：

JavaScript 在設計時應用了 Java 將值區分爲『原始值』和『對象』的作法。它也使用了 Java 表達『不是對象』的值，即 null。而根據 C（而不是 Java）的先例，null 在轉換到數值的時候會成爲 0：

> Number(null)
0
> 5 + null
5
複製代碼

而 JavaScript 的第一個版本是沒有異常處理的。這樣一來，一些未定義的變量和缺失的屬性就須要經過一個值來表示。null 原本很適合這個場景，但 Brendan 還想要知足下面兩個條件：

這個值不該該有對應到引用類型的含義，由於它不只僅是對象。
這個值不該該轉換到 0，由於這樣會使得錯誤更加難以發現。

結果，Brendan 加上了 undefined 這個概念來表達另外一種形式下的『值不存在』。它會轉換成 NaN：

> Number(undefined)
NaN
> 5 + undefined
NaN
複製代碼

這就是 JS 中別 (chou) 具 (ming) 一 (zhao) 格 (zhu) 的 undefined 的由來了。這個特性在不少年來給不少開發者帶來了很大的痛苦。好比，一個 bug 在真正產生的那一行經常不會直接報錯，而是會產生一個 undefined 被解釋器接收。而後過了好久，在另外一個地方會產生一個莫名其妙的報錯，告訴你 undefined 下不存在某某屬性，但其實錯誤根本不在這一行，而是在很早以前就發生了！這個特性放在今天來看絕對入不了 PL 界的法眼，不過只給你十天的話，你真的不會選擇這個更容易實現的設計嗎？

固然了，沒有任何一門語言生來就是完美的。然而在瀏覽器這個對前向兼容有着極其嚴苛要求的領域，想作出任何語言特性上的 Breaking Change 都是很是困難的。像下面這個問題就已是一個 feature 而不是 bug 了：

var obj = {}
typeof obj // 'object'
typeof null // 'object'

obj instanceof Object // true
null instanceof Object // false
複製代碼

做爲總結，如今咱們有這些證據來直接或間接地證實 JavaScript 是一個倉促實現的產物：

設計目標定位低端碼農。
金主處於粗放增加階段。
原型迭代花費時間極短。
許多基礎特性實現潦草。

在互聯網這個鏈接超過 30 億人的巨大系統裏，應用層的惟一編程語言倒是一個充滿設計缺陷的趕工做品，實在是一件匪夷所思的事情——這也很好地體現了黑天鵝事件忽然發生而影響深遠的特色。固然，Web 的重要性催生了無數後來者持續的創新，下面咱們會挑選出這些創新中最廣爲人知的幾項，來印證它們的黑天鵝性質。

面基現場的 jQuery

十二年前那個白色相簿的季節，若是你有幸在紐約參加了一場 BarCamp 線下交流會，你能想象到臺上這個叫作 John Resig 的小夥子安利的，連文檔都還沒寫完的新輪子會在全世界超過 70% 的網頁裏運行嗎？

BarCamp 是一種由參與者相互分享的工做坊式會議，其議程內容由參加者提供，主題一般與互聯網、編程、開源相關。換句話說，這是一種小規模的技術交流會。BarCamp 會舉辦不少次，由不少演講者來分享不少不一樣的主題，以 jQuery 的影響力而言，它多是這類活動中誕生的輪子裏最著名的 Big Thing 了。不過，紅極一時的 jQuery 在發佈時，甚至只是做者本人的幾個分享主題中的一個而已。根據 John Resig 本身的陳述，在那場 BarCamp 中他也沒分享什麼別的，大概三件事：

講了一個叫作 ideaShurb 的實時協做應用 Demo。
講了一個叫作 Feed Pile 的新網站產品，用來匯聚熟人的信息流。
講了一個叫作 jQuery 的新輪子，能夠改進用 JS 控制 HTML 的方式。

若是說還有一點什麼成績，就是額外講了一個對社交網絡思考的 PPT，還有提出了一個付費社交的 idea 也是很大的。不過最主要的就是這三件事。

在當時，編寫 JavaScript 意味着不停地在兼容性上踩坑：你須要支持 IE6 和 Firefox，而穀人希的 Chrome 五年後才發佈。jQuery 很快受到了~~膠水程序員~~前端開發者們的廣泛喜好，到今天來自近 300 人的超過 6000 個 commit 記錄證實了它的火熱程度。jQuery 還創建了基金會，有許多志願者繼續維護。

從 jQuery 的例子裏咱們可以看到，一個變革性技術的起點能夠有多麼小。jQuery 並非某個公司或組織推動的項目，做者本人在當時更沒有 all-in 開發（John Resig 本人仍是一位創業者和浮世繪研究者，在基金會成立後基本上退出了項目的維護）。而回到今天，如今咱們還有誰知道 ideaShurb 和 Feed Pile 呢？咱們很是有理由相信，做者本人必定但願他分享的這三個項目都能作起來，然而最後留下來乃至改變上百萬人工做方式的，只有 jQuery 這一個。在今天，有許多文章有着『當時的 Web 面臨着兼容性問題，因此 jQuery 的出現是歷史的必然』這樣的觀點。不過只要你瞭解了它的誕生過程，就會發現黑天鵝的偶然性和不肯定性纔是這些項目中惟一的共性。

在這一節的最後，讓咱們懷念一下當時的 jQuery 首頁吧。那時候天仍是藍的，水仍是綠的，北京的房價還只要 8000 一平……

飽受質疑的 React

當咱們開源 React 的時候，最先收到的反應是有疑問的。

在 React 開源一週年之際，其官方博客上輕描淡寫的一句話背後，是其誕生之初社區廣泛性的質疑。讓咱們看看 Reddit 上的人們最先對於 React 開源的消息是如何迴應的吧：

讀了他們的文檔，我都根本不知道最簡單的示例是想幹嗎。

只有我以爲這個看起來又亂又笨重嗎（還有個新語法要學）？這個比起 Angular 來有什麼好處嗎？

Facebook 的庫能給 Facebook 用，不表明它適合其餘人。

臥槽好嚇人，爲何會想在代碼里加 更多的 標記呢？

有那麼一秒鐘我在想今天是否是 4 月 1 號。它破壞了太多約定了，註定拉仇恨。我歡迎多樣性，不過這個看起來確定很差。

把 HTML、XML 和 JavaScript 混在一塊兒的作法讓我感受回到了 JSP 的年代。當你在一個文件裏存在五種語言和語法的時候，判斷光標位置是哪一種語言都是一個 NP 難的問題。算了吧，除非真有啥區別，要否則我仍是用 Angular。

HTML 混在 JavaScript 裏？不了謝謝。

看起來花了十個億啊。

醜。

Reddit 上最熱門的幾十條評論中，幾乎有 90% 以上都是負面意見。有意思的是，恰好在這一年，知乎上對阿里雲王堅博士的評價也是一邊倒的差評。

在公開的資料中咱們能知道的是，React 最先是 JS 版的 XHP（這是一種 Facebook 的 PHP 方言），因爲 XHP 和客戶端 JS 代碼混編的不便，一名工程師向經理申請到了六個月時間來把它徹底遷移到 JavaScript 上。時至今日，它已經有了幾萬個 react-xxx 周邊插件、近萬 commit 和上千貢獻者，是前端社區中的超級巨星。

React 表明的就是另外一種類型的技術創新了。它的確打破了不少『最佳實踐』和思惟定式，也帶來了很是多的爭議，但它背後的理念和範式的確引領了前端社區的一輪技術進步。在這個例子中最有意思的地方在於，一個 2013 年的~~膠水程序員~~前端開發者初次接觸它的時候，90% 以上的第一印象是『這 TM 什麼玩意』，沒錯，那時的主流民意也以爲比特幣太貴了…在預測將來的能力上，咱們常常錯得離譜卻還自覺得是。

關於 React，最後還有一個細節很值得一提：它是本文中惟一一個沒有明確做者的輪子。咱們都知道 React 是 Facebook 公司的產物，但那個申請到六個月時間造輪子的工程師是誰呢？React 的全部新消息都是經過 Facebook 官方博客發佈的、源碼裏的 AUTHORS 是字母排序的、react-basic 的初始設計文檔也沒有做者的提交記錄…咱們最後仍是找到了這位大牛 Jordan W 的 Github，不過和 React 團隊裏羣星璀璨的網紅們比起來，他卻連照片都不放一張…結合國內前端社區關於 Vue 和 Angular 的大撕逼與 React 的爭議性，咱們彷佛能夠理解做者隱姓埋名的苦衷了…

生逢其時的 Vue

上文的介紹的這些輪子，都有着本身牛逼閃閃的地方：JavaScript 使得瀏覽器中的富交互行爲成爲可能、jQuery 發明的 DSL 大大簡化了 DOM 操做、React 的編程範式顛覆了開發者的思惟模式…而到了 Vue 這裏，咱們卻很難找到一個『好用』以外，它在技術上的顛覆性閃光點。不過，既然它的熱度在國內已經蓋過 React，它也定然有本身的獨特之處。

和 React 相比，Vue 的亮相能夠說是默默無聞了。在 Hacker News 上，做者 Evan You 初次發佈 Vue 的帖子得到了 54 點數和 26 條評論。做爲對比，React 連換個許可協議都得到了 2280 點數和 498 條評論。

雖然初次發佈時話題性沒有 React 那麼強，可是 Vue 的傳播和口碑卻至關的好，在發佈後的第一週內就得到了 2w+ 的官網瀏覽量和 600+ star。三年之後的今天，它已經幾乎成爲中國開發者業務開發的首選框架了。Vue 興起的過程已經老生常談，在此按下不表。在這一節裏，咱們但願思考的問題是：爲何就在近期，有大量的前端開發者轉向 Vue 呢？爲何 Angular / Avalon / Knockout 這些相似的 MVVM 框架沒有造成這樣的星火燎原之勢呢？

從技術角度上，筆者可以想到幾個『合理』的理由：

轉向 Vue 時國內已經能夠廣泛拋棄 IE8，而 Vue 的實現原理剛好最低支持 IE9。
Angular 1 性能很差，而 Angular 2 的 API 變動很是大。
React 的 JSX 長期被視爲異端，全家桶很差配，中文化支持也沒有 Vue 好。
Knockout 和 Avalon 缺少現代的工程化支持，維護乏力。
……

因此這些理由有道理嗎？它們不過都是純粹的馬後炮而已！這些理由都不過是咱們基於『Vue 很是火』的現實，去正當化『Vue 爲何能火』的合理性而已。毫無疑問，Vue 的框架設計是第一流的，不過，Vue 的普及程度是某些大廠內部框架的幾十倍，是否意味着它的代碼質量就比這些同時期的框架好上這麼多倍呢？咱們無法量化比較這一點。不過，這裏有一個例子能夠做爲類比：

若是你是個音樂愛好者，那麼在沒有唱片的時候，你可能會花錢到本地的劇院花 100 刀聽本地小樂團的音樂會。而在唱片流行後，你能夠只花 10 刀就能聽到世界第一樂團的音樂，這時候你去本地小樂團的音樂會的意願還會同樣強嗎？對於信息資源，存在着很是強的馬太效應，而開源也在編程領域大大增強了這種效應。類比到前端領域裏，種種 React 和 Vue 等框架的替代品有多少真正應用到了生產環境呢？黑天鵝的巨大影響力很大程度上來源於這種『贏家通吃』的集聚效應，而 Vue 則是這個領域中不可多得的勝利者。

到這裏爲止，咱們已經看到了瀏覽器領域裏幾個關鍵技術的誕生，和咱們的想象之間所存在的不一樣：JavaScript 實現得很是草率、jQuery 只是個微小的業餘項目、React 誕生之初飽受質疑、Vue 的設計並無多少顛覆性…然而它們已經不會被歷史遺忘了。因此下一個變革點在哪呢？若是黑天鵝可以被預測，那它就不是黑天鵝了。

後記

人吶就都不知道，本身就不能夠預料。一我的的命運啊，固然要靠自我奮鬥，可是也要考慮到歷史的行程。

行文至此，筆者有了一些額外的想法：文中涉及的開發者毫無疑問都是社區中的精英，但作出巨大貢獻的他們，在技術水平上就必定是最優秀的嗎？我的願意相信，在百萬級的開發者中，必然還存在着許多低調的大牛們，他們的項目所需工做之艱深，所遇到的挑戰之困難不會亞於上面的任何一個項目。不過，黑天鵝只有那麼幾隻，聚光燈的範圍也只有那麼一點，對於絕大多數勤勤懇懇的開發者，黑天鵝的機會都是可遇而不可求的。

因此咱們該有怎麼樣的態度來面對技術演化的黑天鵝性質呢？玉伯 dalao 的簽名很是有借鑑意義：『因上努力，果上隨緣』。達到開發明星項目水平的同窗有不少，但革命性的項目有太多不肯定性，咱們能作的也就是踏實地去學習和進步，而後耐心地等待吧。換句話說，這就是所謂的『且行好事，莫問前程』了。固然了，請不要把這個態度和膠水程序員們問心無愧地編寫增查改刪的業務邏輯混爲一談哦 🙂

鑑於做者對前端的瞭解有限，所以本文只涉及了幾個前端領域中老生常談的例子而已。若是你們有勘誤或更好的想法，歡迎在 Github 或評論中提出，謝謝。