谷歌 Web 开发技术变迁史与踩坑史
馨苑•2015/05/28 16:28
嘿，各位开发者们，你们是否好奇谷歌如何一步步重塑Web开发格局？欢迎来到「NEXT Collections | Google I/O」系列的开篇！NEXT Collections是NEXT用户基于产品集的干货分享专栏。在Google I/O期间，我们汇聚了NEXT用户中的Google工程师和国内Android顶尖开发者，为你揭秘谷歌最硬核的技术内幕与观点碰撞。
本文作者CJ是谷歌八年的资深工程师，现回国创办在线协作文档「一起写」，这篇文章正是他与geek范同事们在「一起写」上协作完成的。点击NEXT产品集「Google开源项目」，一键获取文中所有技术与开源资源。
过去十几年，Web开发技术从纯HTML一路演进到CGI、PHP/JSP/ASP、Ajax、Rails、Node.js，如今已步入成熟期。去年Google I/O，谷歌推出Web开发最佳实践手册；今年，「The Next Generation of Mobile Web」仍是核心议题。但你知道吗？这些成果背后，是谷歌无数次试错与迭代的结晶。今晚Google I/O开幕前，就让我带你穿越时空，回顾从Desktop到Mobile时代，谷歌Web技术的激荡变迁与那些惊心动魄的踩坑瞬间。
| Gmail与Google Map：两次颠覆世界的狂欢
回想早期Web开发，无非是HTML、CSS、JavaScript三件套。许多新手会不屑地说：“切，这算什么编程？C++才是真本事！”大错特错！写C++只需一门语言，而Web应用得驾驭三种语言，它们以神秘且缺乏文档的方式纠缠在一起，加上某些浏览器厂商的“助攻”，导致99%的应用仅是简单网页加零星逻辑，远难取代桌面软件。
就在这时，英雄登场！2004年愚人节，谷歌发布Gmail，当时邮箱容量仅10MB-20MB，谷歌却豪言提供1GB且无限增长——全球瞬间疯狂！但更震撼的是，Gmail让你感觉像在用桌面应用，而非传统网页。毫无疑问，Gmail是Web开发的里程碑，首个大规模部署的Ajax应用。
紧接着2005年情人节，Google Map横空出世，世界再次沸腾！地图可随意拖拽缩放，网页竟能如此酷炫，让千禧年泡沫时期的网站相形见绌。幕后功臣包括澳大利亚人Lars Rasmussen和美国人Bret Taylor，他们的故事后续揭晓。
| 重写Gmail：代码涅槃重生
开发Map和Gmail时，谷歌工程师意识到高度结构化JavaScript库的紧迫性。逻辑日益复杂，代码膨胀，旧架构难以支撑。于是，谷歌工程师做出经典决策：推倒重来！
一场伟大的Gmail重构拉开序幕，最终诞生了今日的Gmail。过程中，抽象出独立而强大的JavaScript库——Google Closure。Closure不仅是工具，更是一种方法论与情怀，远非jQuery可比。它倡导像写Java一样写JavaScript，明确类、成员变量、继承等面向对象概念。Closure大幅提升谷歌内部开发效率，催生大量复杂Ajax应用。
| 聪明人扎堆的产物：奇葩技术GWT
谷歌有个“痛点”：聪明人太多，管理难！Gmail重写如火如荼时，另一团队悄然打造GWT（Google Web Toolkit）。这技术堪称奇葩：输入Java代码，输出JavaScript，宛如吃草产奶！目标与Closure一致——让程序员用Java思维写Web应用，但更极端，连JavaScript都省了。原理简单：编译器将Java转为JavaScript。致命缺陷浮现：调试编译器生成的代码何其痛苦！虽有无数的调试技巧涌现，却治标不治本。GWT最大优势在于标准化控件（如输入框、选择框）的快速开发，正因如此，它至今存活，因为谷歌最赚钱的广告系统前端就用GWT打造。看，编程语言也拼爹啊！
2007-2008年看似平静，谷歌却暗度陈仓，通过关键收购为Google Docs奠基。
2009年，雪藏已久的Closure库终于开源，同时推出Closure Compiler。别以为它只是jQuery压缩工具——Closure Compiler能真正理解JavaScript类型！借助JsDoc注释，你可将JavaScript当作强类型语言编写，并由编译器查错。在它面前，jQuery被无情碾压。随后几年，谷歌陆续发布Closure模板语言和样式表编译器，实现HTML+JS+CSS全链路工具化，内部项目广泛采用。
与此同时，GWT小组也没闲着，一边优化广告系统，一边憋出大招——Google Wave。没错，Wave正是用GWT编写，其创始人正是地图项目的Lars。
| 广告系统再重构：AngularJS的闪电革命
2011-2012年I/O，Web主题围绕GWT和Closure展开，直至2013年暗流涌动。谷歌内部悄然孵化颠覆性框架——AngularJS（简称Angular）。它以HTML标签尖括号命名，彻底革新客户端MVC架构。与传统服务端MVC不同，Angular在浏览器中动态解析数据绑定，单页应用开发变得轻而易举，甚至无需手写JavaScript即可实现双向同步。尽管条框繁琐遭人诟病，但它迅速成为企业招聘标准，程序员们疯狂用Angular重构旧系统，包括那个最赚钱的广告前端。有人甚至预言：Angular就是早期HTML6！
| 异类语言崛起：Dart的孤勇征程
这里必须提异类语言Dart，由V8首席工程师Lars Bak业余发明。他为突破JavaScript弱类型限制，提升Web性能，毅然设计全新语言——Dart。先科普其兄弟V8：Chrome凭借V8引擎的JIT技术，碾压IE和Firefox的解释执行，推动整个Web平台进化。Node.js/io.js等均衍生于V8，造就前后端统一语言生态。
Dart借鉴Java语法，支持面向对象、泛型等特性，虚拟机性能强悍，且可编译为JavaScript兼容无Dart VM环境。但Dart自诞生便饱受争议，被指分裂Web，且无其他浏览器厂商支持。2015年初，谷歌取消Chrome内置Dart VM计划，但这非死刑——Dart仍在大型Web项目中提升开发效率与代码质量。
纵观全局，Web开发呈现两大趋势：一是脚本语言层面优化代码质量与效率；二是通过Web标准推出模块化组件，降低开发门槛。
谈及第二点，不得不提谷歌项目Polymer。其口号“此刻驾驭Web平台未来”绝非虚言。Polymer是实现Web Component的库，而Web Component是W3C下一代HTML标准，堪称根正苗红。Polymer的进展直接映射HTML标准的演化，期待本次I/O上谷歌的更新！
「NEXT Collections | Google I/O」系列持续更新，敬请关注。你是否也是Googler或Android开发者？有话要吐槽？想加入谷歌工程师与Android大牛的线下激辩？速邮xinyuan@36kr.com！文章作者的新项目「一起写」正招募geek范同事，简历直投CEO邮箱：c@yiqixie.com。
原创文章，作者：馨苑
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
作者
欢迎专心练剑的产品人和技术宅来聊：xinyuan@36kr.com ：）
文章评论(3)
相关问答
web开发技术有哪些?
1.前端开发技术:-HTML(超文本标记语言):用于定义网页的结构和内容。-CSS(层叠样式表):用于定义网页的样式和布局。-JavaScript:一...1.前端开发技术:...
web开发需要哪些技术?
Web开发需要多种技术,包括但不限于以下几个方面:HTML/CSS/JavaScript:这是前端开发的基础,用于构建网页的结构、样式和交互。服务端语言:如Node.js、Python...
web开发技术有哪两大类?
Web开发技术可以分为前端开发和后端开发两大类。前端开发是指构建用户直接与之交互的界面,通常使用HTML、CSS和JavaScript等技术,负责呈现内容、实现用户交互...
Web开发技术为何如此多样?-ZOL问答
有人使用Dreamweaver来设计纯静态的HTML页面,通过自定义模板进行开发,操作起来相对轻松;也有人仍在使用PHP、JSP或ASP,以表格布局的方式来构建网站,这类站点在搜...
Web项目开发，常用技术栈大盘点-ZOL问答
在现代软件开发领域,技术栈的选择对项目的成功至关重要。以下是各个领域的常用技术:前端开发前端技术主要用于构建用户界面和交互逻辑,常见的技术包括HTML...
web前端开发中需要掌握哪些技术?
不得不说,想要入行Web前端的门槛并不高。Web前端开发的前期是网页制作,简单的ps和dw就可以制作网页,后来为了更好的用户体验,应用于企业,那么就需要掌握基...不...
web开发技术一般不用于完成哪种应用?
一般不用于需要客户端处理太多任务的应用,因为web方式客户端只有浏览器。一般不用于需要客户端处理太多任务的应用,因为web方式客户端只有浏览器。
Web开发敏捷之道--应用Rails进行敏捷Web开发(第三版)-OSCH...
Web开发敏捷之道--应用Rails进行敏捷Web开发(第三版)Rails第八章任务C:创建购物车8.3小节运行该实例报如下错误,不知道什么原因引起?请赐教。N...
如何系统学习Web前端开发技术?-ZOL问答
想要掌握Web前端开发,必须有一套系统而清晰的学习路径。没有计划地盲目学习,不仅效率低,还容易半途而废。因此,制定一个科学合理的学习路线至关重要。首先...
Web后端开发技术方面要学什么?
Web后端开发技术方面需要学习以下技术:1.编程语言:Web后端开发需要使用一种编程语言,例如Java、Python、PHP、Ruby、Node.js等,其中Java和Python是比较常用...