年度回顾：2013年前端技术盘点

转这篇文章的目的是想提醒自己原来在年初时自己想到的CSS隔离已经有新技术在实现了（shadow Dom），只不过我当初的解决方案是CSS命名空间（声明了命名空间的话就不受外部CSS 影响，这简直和shadow Dom异曲同工【可见关注常见问题就能有长远眼光】，同时也在想当时W3C为何不留这个接口？让CSS统治整个页面长达10年之久，所以有条件的话可以回顾下HTML整体架构设计的发展变化，也许对软件架构有些帮助）。

年度回顾：2013年前端技术盘点

本文曾发表于2013年12月《程序员》，原文作者：berg。 

2013年，尽管前端技术在无线领域受到了挫折，但这无法减缓其发展势头。在基础技术方面，规范和标准的发展、浏览器的快速演进为将来的Web应用打好了根基；随着网站规模的进一步变大，交互变得更复杂，大家更关注用新的开发模式来解决问题；更重要的是，经过多年积累，在前端工程实践上我们有了丰富的成果。本文将从多个角度介绍今年前端技术的发展，其中会穿插若干对前端发展的思考。 

方兴未艾的规范和标准 

自从HTML5推出后，W3C和各大浏览器厂商都在加紧推动规范发展和实现，尤其是手机浏览器对规范的支持程度，已成为国内浏览器宣传的卖点。对于W3C的正式规范，大多数都已经被现代浏览器实现，而我们更应关注快速发展中的Working Draft规范。它们不仅对实际开发有帮助，更重要的是它们代表了Web未来的发展方向。 

Web Components规范定义了未来的HTML组件，其中最重要的部分是Shadow DOM和Custom Element，除此之外还包括HTML模板、HTML imports和Decorators。Shadow DOM能将组件的代码和使用者的代码彻底分离，通过在文档渲染时插入一颗DOM子树，但这子树并不在主DOM树中，因而外部的CSS无法直接影响Shadow DOM中的元素；当然，Shadow DOM能提供事件API、Javascript API、CSS API供外部控制。Custom Element则允许开发者自定义HTML标签，让页面更语义化的同时，还能为元素加入属性和方法，以提供特定的功能供外部调用。 

WebDriver规范和 Selenium 2 WebDriver 自动化测试框架 API 十分类似，它取代了嵌入到被测Web应用中的Javascript，由浏览器直接支持的WebDriver，避免了Javascript安全模型的限制，还能利用操作系统级的调用来模拟用户输入。Firefox、IE、Opera 和 Chrome 都对其有一定支持，也能通过 WebDriver 完成 Android 和 iPhone 的移动web应用测试。 

Webapp Working Group今年很活跃，前文提到的 Web Components 规范就是来自这个小组。它们今年的进展还包括 Push API、Streams API、UI Events 等规范。 

W3C去年还成立了System Applications Working Group，目标是定义运行环境、安全模型和相关的API用来构建能与原生应用匹敌的web应用。他们在今年提出了一系列规范，其中比较重要的有：用来定义和引用Webapp的App URI规范；能定期唤醒应用的Web Alarms API；和系统短信服务通讯的Messaging API。 

W3C所有规范都会公开发布，在 http://w3.org 上可以找到各个工作组的当前进展，你也可以订阅他们的邮件组。 

除了W3C规范，另一个重点是 ECMAScript 6 的规范草案。今年草案更新了9个版本，按计划，正式版本将在年底发布，我们每天都在编写的Javascript代码即将发生巨大的变化。ECMAScript 6 在保证向下兼容的前提下，提供大量新特性，使 JavaScript 能用来编写更复杂的应用，今年重大的更新包括箭头函数、对象代理、Symbol对象，还对之前提出的Class、Modules等特性做了一些调整。部分特性在Firefox和Chrome的较新版本中都获得了支持，Google也推出了一个traceur-compiler，能将ECMAScript 6的代码编译成ECMAScript 5在普通浏览器中运行，你可以自行尝试。 

浏览器与协议 

SPDY，这个四年前Google提出的协议，希望能让网络传输更加快速，迄今已经获得了Chrome、Opera(>=12)、Firefox(>=11)、IE(>=11)的支持，当前正在制定的Http/2草案也采用了SPDY协议做为其规范的基础，SPDY通过压缩、多路复用和优先级来缩短加载时间，只需要建立一个TCP连接即可传送网页内容及图片等资源，SPDY的网页服务器还可以主动推送内容。根据Google的测试，SPDY协议比传统的Https协议快30%-40%。 

PNaCl(Portable Native Client) 这个开源项目允许开发者在浏览器内编译C或者C++代码，一次编译就能在各种桌面 Chrome 或 Chrome OS 中运行，无需用户安装，性能和本地原生代码相近。从今年的Chrome 25开始，PNaCl 做到了架构独立，一次编译就能在不同的平台上运行，包括ARM平台。这让web应用程序拥有更多发挥空间。 

Blink已经取代Webkit成为Chromium的新渲染引擎，这是一个Webkit的独立分支。Chromium之前是使用 Webkit 做为其渲染引擎，但由于Chromium在最初就实现了沙盒技术，而Webkit 2之后又开发了一套与Chromium不同的沙盒技术，这样导致了两者的代码复杂度上升，Blink分支可以让 Google 不再顾及对 Webkit 2 的兼容，加快改进速度。与此同时，Google 希望在内核性能上有更大突破，以及快速实现一些W3C的草案，独立的分支会带来更多自由度。对开发者来说，这并不是什么坏事，在 HTML5 规范下，以及标准化组织的推动，两个浏览器不会分裂，只会互相促进。 

各家浏览器都在快速推进草案规范的实现。你可以去 http://caniuse.com/ 详细查询浏览器对各种规范的支持情况。 

语言能力增强仍在继续 

除了规范和标准组织对基础技术的推进，我们还能经由预处理手段对语言能力进行增强。这些增强无需浏览器支持，因而开发者能快速使用这些新特性，更新速度也够快。不过，相对去年来看，今年的势头弱了很多。 

现在流行的CSS预处理语言包括LESS、SASS和Stylus。Less基于Javascript实现，安装和使用都很简单，从去年开始流行，著名的Bootstrap也是基于Less语法构建的；而SASS最初的设计比较难以理解和使用，直到它的语法升级成SCSS后才逐步被广泛接受，它相对Less能力稍强，如循环、变量等，但这也可能带来滥用，基于SASS的CSS框架有 Compass 和 Bourbon；Stylus和LESS很像，但语法更简洁。由于CSS语法的能力限制，这些预处理器能让开发CSS代码变得更简单，而基于它们的CSS框架更是让开发者低成本地搭建页面。 

CoffeeScript和TypeScript这类去年被热捧的 Javascript 预处理语言，今年变得比较冷却，前者的最近更新是六月份的1.6.3版本，相对年初发布的1.5进展不大；后者也迟迟没有推出1.0版。在我看来，这些语言在简化 Javascript 语言的同时，并没有带来更多的便利性，反而他掩盖了语言内部的某些实现，增加了学习和排错成本。 

反倒是Dart在默默地成长。这个以取代 Javascript 为目标，也支持编译成 Javascript 使用的语言，最近刚发布了其1.0版的SDK，这标志着它已具备投入生产的条件。Dart SDK中，除了编程语言，还包括很多工具和核心资源库，以及一个Dart Editor。在最近的压力测试中，不仅是Dart本身的性能高出 Javascript 许多，就连通过它编译成的 Javascript 代码的性能都略微超过原生 Javascript 代码。 

语言的改进并非短短数年就能完成的工作，我们要留有足够的耐心。 

面向未来的框架和库 

AngularJS或许是今年成长速度最快的Javascript框架了。它由Google打造，适用于富前端交互的应用，和其他同类框架的不同在于，它遵循着HTML的设计思路，通过声明式语法来赋予HTML更丰富的能力，通过MVVM (Model-View-ViewModel) 模型来解耦应用，最终让大型应用变得清晰、易读。它有强大的数据绑定和依赖注入功能，数据只要发生变化，框架就会自动控制UI重新渲染，这帮我们节省了大量控制代码。除了AngularJS，类似的框架还有KnockOut、EmberJS等。 

Polymer是基于Shadow DOM、Custom Elements、MDV等最新浏览器特性的、用web Component概念构建的类库，在今年的Google I/O大会上发布，适应多种平台，如手机、平板、桌面等。其架构是面向组件的，组件由HTML5标签组成，即使是没有用户界面的元素（如动画）也是如此。传统的类库通过JavaScript API，生成一堆HTML标记来构建用户界面，Web Component是原生浏览器的解决方案，但在浏览器们都支持之前，大部分功能还派不上用场。它能让开发者在浏览器支持新特性前创建自己的web Component，Polymer 使用 Polyfills 达成此目标，Polyfills 指实现期望最终由浏览器实现的代码。如果浏览器本身已经实现了该功能，则Polyfills什么都不做；否则，它模拟实现而不依赖原生API。要注意的是， Polymer 现在仍在Alpha 阶段。 

Bootstrap 框架今年发布了3.0版本，把移动支持放在了首位，并且默认支持响应式设计，在样式上也有一些明显的升级。Bootstrap 大多被一些创业型公司或者内部产品使用，主要看重其快速搭建页面的能力。 

总的来说，框架和库不再停留在过去抹平浏览器差异，或提供基本MVC能力的阶段了，而是面向将来的Web环境，为更复杂的前端应用提供支撑。 

无线应用不再局限于WebApp 

2012年，除了那些强调性能和Native app能力的应用，大家都热衷于尝试使用WebApp作为网站的无线应用解决方案，当时Facebook的移动本地应用还是Hybrid app，直到去年下半年Facebook倒戈，推出原生应用，做为重要的风向标，众多网站纷纷放弃WebApp，改推原生应用。 

WebApp被放弃有三大原因： 

• 性能、流畅度、稳定性远远不如原生应用。由于其运行在浏览器或者Webview容器中，离系统内核的距离更远，这导致使用体验无法赶上原生应用。
• 无法有效利用设备能力，不同的浏览器和平台上提供的能力不同，这让应用需要迁就于能力最差的平台，进一步影响功能和体验。
• 随着应用变复杂，开发成本大大增加，调试成本成倍升高，缘于缺乏开发和调试工具。

总之，今年WebApp变得冷静，相关的库、框架进展都很缓慢。Zepto 在今年五月份发布了1.0版之后就再无动静；Sencha Touch自从去年二月份发布2.0版本以后，后续版本推进速度也较缓慢；PhoneGap的最新3.0版还是在七月份推出的，更新了插件架构，支持iOS 7，同时发布了两组新API（InAppBrowser 和 Globalization API）。 

但如前所述，标准组织仍然在无线基础技术上投入了大量精力，产出了很多新的API和规范，浏览器的能力也在进一步增强，譬如Chrome 30 Beta For Android开始，就开始支持WebGL了；不过iOS 7对Safari的更新很少，令人失望。开发和调试工具也有很大进展，相信在明年，web技术在无线领域能有一次飞跃。当然，还有一些不基于浏览器的无线web应用技术： 

Ejecta能让开发者用JavaScript写iOS应用。运行 Ejecta 应用，就像在浏览器中运行 JavaScript代码一样；当然，这里实际上没有浏览器，Ejecta 会编译成原生代码或通过 JavaScript 虚拟机来运行。基于 Ejecta 可以实现丰富的动画、音频效果，甚至做一个游戏。在 Ejecta 中，HTML5 Canvas 2D 和 WebGL API 使用 iOS 原生的 OpenGL 来实现的。而 Audio 是用 OpenAL 实现的. 其他的一些 API（比如touch，accelerometer，localStorage 等等）和在真正的浏览器中表现效果相同。另外，Cocoonjs这个平台功能更强大，不仅能将普通 HTML5 程序编译成WebGL，在各个移动终端上表现极好，还能自动发布到多个应用商店。网站展示了一个Demo，将运行速度只有5 FPS的普通HTML5游戏，编译成能运行至70 FPS的版本。 

Adobe AIR 3 (Adobe Integrated Runtime 3) 自从2011年底就支持 iOS 和 Android 了，由于它主要用于开发游戏，在前端领域反而不够流行。AIR能在桌面、Android、iOS 平台上用原生代码运行（Android中借助运行环境，iOS中直接编译成原生代码），有不少游戏选择了AIR，包括愤怒的小鸟、摩卡幻想、被错过的天堂（台湾收费榜排名第一）等等。愤怒的小鸟是基于 Starling 这个 ActionScript 游戏框架完成开发的，其中所有的显示对象都直接由GPU渲染，性能很高。 

Node.js大放异彩 

经过0.9这个大的 Unstable 版本，Node.js 在今年3月发布了0.10版本，笼罩了整年的开发历程。0.10系列版本大大提高了性能和稳定性，提供了新的 Stream API (Stream2)，Domain 模块也变成了正式特性。Node.js 和 Linux 内核的版本号规律一样，所有的奇数版本都是不稳定版，所有的偶数版本都是稳定版，因此下一个稳定版是0.12版，按照开发计划将会改善 HTTP 实现，0.12之后便会发布1.0正式版。 

现在 Node.js 已经足够稳定，在2012年，Yahoo! 就已经在生产环境中使用了 Node.js，而今年有更多公司将 Node.js 用在生产环境上，比如 Qzone 部署了 Node.js 做为其接入层。从另一个侧面来看，大量云服务都开始支持 Node.js 作为其语言环境，包括百度的BAE、阿里云、Heroku、Azure、Nitrous等等。这都说明了 Node.js 的可靠性和流行度。 

在这样的思路下，出现了不少基于 Node.js 的开发框架：Express、Meteor等。Express 是一个小巧的，用于快速搭建 Node.js Server 的应用框架，它主要在 Node.js 之上扩展了web应用必须的功能，而没有进行二次抽象；Meteor 则是一个功能强大的web应用框架，包括统一的前后端数据API，采用MVVM模型支持响应式编程，实时页面更新技术等，相对 Express 要重得多。 

生产环境使用 Node.js 仍需谨慎，不过 Node.js 用做开发前端的工具和平台就很安全了，很多新开发的开发调试工具都是基于 Node.js 的。 

多样化的调试和开发工具 

浏览器中的调试工具已经趋于成熟。Chrome、 Safari、 Firefox都有很完善并且功能类似的调试工具，就连IE 11提供的调试工具也很不错，功能一度超过其他浏览器。 

Phantomjs是一个基于 Javascript 驱动的命令行 webkit 引擎，也即无界面的 webkit 浏览器。Phontomjs 加载网页后，提供一系列的 Javascript API 给开发者使用，包括控制DOM元素﹑CSS选择器﹑JSON﹑HTML5的Canvas和SVG；由于其拥有完善的 Javascript 解析、页面渲染功能，完全可用它来模拟一个现代浏览器在加载网页时所做的各种事情，运行速度也相当快。它可以很方便地完成各种自动化测试：页面功能回归、屏幕截图、网络测试（通过生成HAR）等，即便是需要登录或者用户操作的场景，Phantomjs 也可以轻松完成。在很多轻量级的测试环境下，Phantomjs 正逐渐取代 Selenium。 

PerceptualDiff（简称Pdiff）是一个图像比较工具，用来计算两个图片之间的像素级差异，可以用来比较页面升级前后的渲染结果变化。这个工具会生成一个单色的图像文件，标明了两个图像文件的差异。在功能回归测试上有一定实用性，不过，它要求动态页面在修改前后使用完全相同的数据源来渲染页面做对比，并且 Pdiff 的结果仍然不够友好。 

无线端的网页调试工具也变得丰富和功能强大，Safari率先推出Safari Remote Debugger (>=iOS 6) 以后，Google推出了功能更强大的 Remote Debugging on Android (>=Android 3.2) 工具，Adobe也推出了Adobe Edge Inspect CC，一个跨PC和各个移动平台的调试工具。这些远程调试工具都有基础的检视元素、查看网络连接、监控页面性能等功能，开发者可以方便地在桌面上对移动端的页面进行调试和除错工作。此外，还有 Remote Preview 这样的小工具，能在大量移动设备上同时打开一个页面用来调错。 

Sublime 推出了3.0版本，WebStorm 7也发布了，它们都是值得尝试的本地开发环境。尤其是后者，这是一个专门为前端开发推出的IDE环境，除了常见的IDE支持，还有Live Edit、Debug with Chrome、npm搜索、内置终端等对前端工程师十分友好的功能。此外，LiveReload今年发布了 windows 版，它能监控系统文件的变化，在文件保存时自动刷新web页面。 

这些开发和调试工具看似简单而独立，但它们是构成整个前端生态环境的基础，也是生产力发展的必需要素，越丰富越好。 

前端工程化开始普及 

经过2012年一年的发展，工程化开发的思想今年到处开花结果。前端团队不断发展壮大，传统的作坊式开发已经捉襟见肘，尽管我们拥有大量的优化手段、编译工具，但大家更需要自动化的、可维护性更强的工程化开发方案。工程化的开发实践总是晚于具体技术点的，比如前端性能优化，今年并没有出现太多新鲜的技术点，大家都忙于将已知技术整合入开发流程。 

2010年提出的CommonJS规范，经过几年时间发展，现已趋于稳定。Node.js实现了其中大部分规范，而这些规范也被Web开发者应用到网站开发中，包括RequireJS、SeaJS这些基于模块化规范的模块加载器。这些加载器大同小异，大家尽可以随意选择。 

前端工程化思路不应只局限在 Javascript 层面，需要打通所有前端开发语言，整合全部前端开发流程，才是实实在在的工程化。百度工程师提出了百度前端集成开发解决方案，名为FIS (http://fis.baidu.com)，通过简洁而可靠的开发架构与自动化工具的支持，前端代码在线下开发时高度模块化和易于管理，而在上线前的编译过程又能重组代码，最大化地提升运行性能，这些工作都是自动化完成的。FIS包括三大部分：编译工具、语言能力扩展和静态资源管理，FIS使用Node.js开发，在所有系统平台下都能稳定运行，现已拥有大量第三方插件。 

除了FIS之外，还有Yeoman、Brunch、Hammer for Mac这些编译套件，也能类似地自动编译和构建前端站点。

更广泛的Web应用场景 

Web的天生优势是其开放性，尤其是移动互联网发展至今，一些平台级应用也在逐步走向开放，纷纷采用web作为其载体，包括百度轻应用，微信公众平台，UCWeb的UC+开放平台，Windows 8应用商店，包括 Google 也宣布 Chrome App 最终要到达移动设备中。选择web技术，主要看中的是其无需下载，并能被检索和快速分发的特性，同时平台本身就是巨大的流量入口，开发者也乐于加入到这个平台中来。 

一些传统应用也在逐步采用现代Web技术，如 Google 地图的桌面版、百度地图的手机版都采用了 Canvas 来绘制地图，操作体验和性能都有极大的改善；图形化的可视技术也被广泛地应用在产品中。 

用W3C的指导原则做为全篇的结语再合适不过了：Web for All, Web on Everything。