谷歌 Web 開發技術變遷史與踩坑史 | NEXT Collections · Google I/O

這是「 NEXT Collections | Google I/O」系列的開篇。NEXT Collections 是NEXT 用戶基于產品集的干貨分享專欄。Google I/O 期間，我們邀請和聚集了 NEXT 用戶中的 Google 工程師、國內 Android 頂尖開發者，為大家分享和呈現關于 Google 的最干貨信息與觀點碰撞。

文章的作者 CJ 是 Google 八年的資深工程師，現回國創辦了在線協作文檔「 一起寫 」，這篇文章也是他與 geek 范的同事們在「 一起寫 」協作完成的。點擊 NEXT 產品集「Google 開源項目」，完整查看文中提到的技術與開源項目。

過去十幾年來, Web 開發技術從最初的純 HTML 到 CGI、PHP / JSP / ASP、Ajax、Rails、Node.js，已經發展到了一個非常成熟的階段。去年的 Google I/O，谷歌開發者中心推出了關于 Web 開發的最佳實踐手冊；而今年的 Google I/O ，「The Next Generation of Mobile Web」依然是其中的一個重要議程。

不過，前人栽樹，后人乘涼。現在大家拷貝的代碼可不是自己從土里自己長出來的，而是技術大牛一行行敲出來。即便是谷歌這樣的互聯網巨鱷，在 Web 開發上也經歷過無數的努力和踩過一個又一個的坑。今晚 Google I/O 正式開啟之前，我就給大家講講這些事兒，聊聊從 Desktop 時代到今天的 Mobile 時代，谷歌 Web 開發技術的變遷、踩過的坑。

| Gmail、Google Map : 世界瘋了兩次

大家知道,最早期的 web 開發指的就是 HTML，CSS，JavaScript，很多剛畢業的學生就會說，“切，會寫 HTML，JS， CSS 不算寫程序, 會寫 C++ 的才算”， 這可大錯特錯了。你們想想，寫一個 C++ 程序只需要會一種語言，寫個 Web 應用得學三種語言，而且這三種語言還以一些神秘的、很多時候還沒有文檔的奇怪方式聯系在了一起，再加上某些西北角的公司在里面再搗搗亂，導致 Web 應用非常的難以維護，直接的后果就是 99% 的應用都是簡單的網頁加上一點點可憐的邏輯，完全無法取代桌面上的應用。

這個時候，英雄出現了。Google 在 2004 年愚人節那天發布了一個叫做 Gmail 的東西，當時 email 的容量只有可憐的 10MB 或者 20MB，Google 突然說提供 1GB 的郵箱并且不斷增長，于是，全世界瘋了。可是在大容量的背后，大家發現原來 Gmail 不僅僅只是大，而且讓你覺得你在使用一個桌面的應用，而不是一個以前傳統的網頁的應用。 所以可以說，Gmail 是 Web 開發的一個里程碑，第一個大規模部署的 Ajax 的應用程序。

緊接下來的一年，也就是 2005 年的情人節前后，Google Map 神奇般地出現了，世界再一次瘋了。所有人都覺得不可思議，原來網頁的程序可以做得那么酷炫，而 2000 年左右科技泡沫鼎盛時期的那些網站是多么的可笑。當時 Map 的組里面有 2 個人很值得一提，一個叫 Lars Rasmussen 的澳大利亞人，一個叫 Bret Taylor 的美國人，后面我們會慢慢的提到。

| 重寫 Gmail

在開發 Map 和 Gmail 的過程中，Google 的工程師逐漸意識到一個高度結構化的JavaScript 庫的重要性。因為邏輯越來越復雜，代碼量越來越多，功能也越堆越多，之前寫得那些代碼已經根本滿足不了不斷變化的需求了。 于是偉大的工程師們做了一個 Googler 經常做的決定：我們重寫吧。

一個偉大的重寫 Gmail 的計劃逐漸張開了，也就是今天大家看到的 Gmail 的前身。在整個重寫的過程中，一個高度獨立、結構化的 JavaScript 的庫被抽象出，這就是可能很多前端工程師們知道的 Google Closure。用今天的話來說，Closure 不是一個簡單的 JavaScript 的庫，他是一種方法論，一種情懷，所以任何拿 jQuery 和 Closure 相對比的言論都是一種對 Closure 的侮辱。Closure告訴大家，大家應該像寫 java 一樣的去寫 javaScript，分清楚什么是一個類，什么是類的成員變量，什么是成員方法，什么繼承，什么是接口等等...所有你熟悉的面向對象的概念都可以在 Closure 里面找到。Closure 的出現極大地改變 Google 內部寫 JavaScript 的效率，導致復雜的 Ajax 的應用如雨后春筍一樣在 Google 內部迅速出現。

| 聰明人太多的產物：奇葩技術 GWT

如果讓 Google 的工程師們自己找 Google 一個不好的地方，一定有一點，那就是聰明人太多，沒法管理。就在 Gmail 如火如荼重寫的時候，另外一個團隊在悄無聲息的做著另外一個類似的努力去改變 Web 開發，那就是 2006 年發布的 GWT（Google Web Toolkit）。這是一個無比奇葩的技術，程序員寫的代碼是 java，出來的是 JavaScript，就像你吃的是草，擠出來的是奶一樣。這個技術的根本目的和 Closure 是一樣的，就是為了讓程序員用寫 java 的方式去寫 Web 應用，只是他的方式更直接，連 JavaScript 都省了。其實原理也很簡單，就是通過編譯器在編譯階段把 java 轉成了 JavaScript 代碼。可是，這個技術有一個致命的缺點：你想想，要有多麻煩才能在瀏覽器里面調試一堆由編譯器生產的JavaScript 代碼。于是無數的各種附加調試技術出現，告訴大家怎么去簡化 GWT 的調試，但是都沒有解決根本問題。GWT 的最大的好處就是如果你的網頁是由標準的控件組成的，比如輸入框、選擇框、多選等，那么 GWT 會極大的簡化你的代碼量.就是因為這個好處，GWT 一直活到了今天，因為 Google 最賺錢的廣告系統的前端是就是用 GWT 寫的。可見，計算機語言的世界也是看爹的哈哈。

2007，2008 貌似很平靜，Google 也沒發布什么驚人的、大的前端產品和框架。事實上，他們并沒閑著。Google 在那兩年期間做了幾個重要的收購，奠定了后面著名的 Google docs 的基礎。

2009 年，在 Google 內部雪藏了很久的 Closure 庫終于開源了，同時開源的還有一個對應的叫做 Closure Compiler 的東西，一般人理解 Closure Compiler 不就是另外 jQuery Minifier 嘛，其實可沒那么簡單，Closure 的 Compier 是可以真的理解你的 JavaScript 代碼的類型的。通過一個叫 JsDoc 的注釋形式的語法，你可以完全地把  JavaScript 當做是一種強類型的語言來寫，并且有一個編譯器來幫你查錯。在強大的工具面前，jQuery 被無情地碾壓。在接下來幾年，Google又陸陸續續的發布了對應的 Closure 的模板語言，和對應的 Closure Stylesheet 編譯器，于是 Web 的三件套，HTML + JS + CSS 在 Closure 的世界里都有了對應的工具，在 Google 內部,大部分的前端項目也都是基于這套工具來開發的。

與此同時，GWT 的小組也沒閑著，一方面更好的支持 Google 最賺錢的廣告系統前端；一方面默默的憋了一個超級大招 -- 大名鼎鼎的 Google Wave。對，Google Wave 是用 GWT 寫的，Wave 的 founder 就是我們前面提到的 Map 的創始人 Lars 。

| 又把最賺錢的廣告系統重寫了一遍

2011，2012 的 IO 上，關于 web 開發的主題很多都是基于 GWT 、Closure 展開的，一直風平浪靜地到了 2013 年。但與此同時，Google 內部已出現了一股暗黑勢力，悄悄地開發了一個完全顛覆式的前端框架 -- AngularJS 。它，就是以HTML 標簽起始符形狀命名的 AngularJS，簡稱 Angular。顛覆在哪呢？Google 的 web 前端開發框架基本采用著名的 MVC (Model-View-Controller) 結構，有效地分離數據模型和最后顯示的視圖，使代碼更清晰、更容易維護。早先的 MVC 大都是在服務器端實現的，包括先前提到的 GWT 神器。但是 AngularJS 不一樣，是一個完全在客戶端也就是瀏覽器里的 MVC 框架。這個框架在 HTML 中標注新的屬性，運行時用 JavaScript 動態解析和綁定數據關聯，簡化了 web 應用尤其是單頁應用 (single-page application) 的開發。不少數據雙向同步邏輯甚至不用手工編寫 JavaScript 就能實現了。更重要的是它制定了一整套前端組件的開發規范。雖然各種繁雜的條條框框讓它無論在 Google 內部還是開源社區都備受微詞，但它還是迅速獲得很多企業的青睞，近幾年來以異軍突起之勢成為眾多公司招募前端程序員的一項標準需求。于是瘋狂的程序員們又 瘋了，開始把很多陳舊的系統用 Angular 重寫，包括前面提到了那個最賺錢的廣告系統前端。甚至Angular 一出來的時候就有人預測，Angular 就是早期的 HTML6 。

| 異類語言的誕生

說到這里，不能不提一個異類語言了，叫做 Dart 。這個 Dart 可是出自名門，是由 V8 的首席程序員 Lars Bak 在他工作之余發明的， 他一邊改善 V8 的性能，一邊琢磨如何能突破 JavaScript 語言本身諸如弱類型等限制，讓 web 程序執行速度更上一層樓。他最后決定，干脆擺脫 JavaScript 的束縛，重起爐灶設計一門全新的、為新時代 Web App 專門打造的語言 -- Dart。

在了解 Dart 前，簡單科普一下同父同母的兄弟 V8。 Google 的 Chrome 瀏覽器當年發布時以其遠超 Internet Explorer 和 Firefox的網頁渲染速度震撼了世界。其中一個核心優勢就在于全新的 V8 JavaScript 引擎。當競爭對手還在吭哧吭哧解釋執行 (interpret) 網頁中的腳本時，強大的 V8 引擎采用即時編譯 (JIT) 技術把 JavaScript 的運行速度提升到了一個全新的層次。在之后的幾年里，各家瀏覽器廠商紛紛效仿，推進了整個 Web 平臺的發展。目前深受追捧的 Node.js / io.js 其實也都是 V8 開源后的衍生產品，造就了一個前后端用同一種編程語言的新興開發生態。

Dart 語言借鑒了廣大程序員熟悉的 Java 語法，支持面向對象、單繼承、interface、泛型、非強制的類型標記等語言特性。Dart 的虛擬機在 V8 大牛的打造下性能當然也是超強的。Dart 程序還能被編譯成 JavaScript，運行在沒有 Dart VM 的環境中。

然而，Dart 從發布日起一直倍受爭議和質疑。它被認為是一項分裂 web 之舉，而且長期以來沒有得到任何其他瀏覽器廠商的支持。2015 年初，Google 宣布取消將 Dart VM 綁定在 Chrome 瀏覽器里的計劃。不過這并不是 Dart 的死刑判決。Google 仍然支持并使用 Dart 開發大型 web 應用，因為比起 JavaScript，Dart 更能提高開發效率和保證代碼質量。

綜上，大家可以看到，web 在開發上兩個趨勢，第一個是從腳本語言層面去改善代碼的質量，提高效率，第二是從 web 標準入手，提供更多抽象的模塊化的組件，讓編寫 web 應用更加容易。

而說到第二點，不得不提提 Google 的一個項目叫做 Polymer ，如果你們去 Polymer 的網站，你會發現 Polymer 的口號是「leverage the future of web platform now」。 的確，Polymer 是一個庫用來實現 Web component 的，而 web component 是 W3C 關于下一代  HTML 的一個標準，這可是根正苗紅的一個項目。可以說 Polymer 項目的進展某種程度上就代表了下一代 HTML 標準制定的進展。讓我們一起期待在本次 IO 上 Google 會對 Polymer 做出怎樣的更新吧。

「 NEXT Collections | Google I/O」系列將持續更新，請保持關注。你也是一枚 Googler 或 Android 開發，并且有話要說？對文章觀點有質疑？想加入 Google 工程師和 Android 開發大牛的線下討論？歡迎郵件xinyuan@36kr.com。文章作者的新項目「一起寫」也在招聘 geek 范的同事，歡迎簡歷快遞至 CEO 直聘郵箱： c@yiqixie.com 。

原創文章，作者：馨苑