前端组件化的未来

随着 2013 Google I/O 大会的召开，前端开发者迎来了又一大波技术革新。WebApp 风生水起，在 W3C 最新的规范《Introduction to Web Components》中，带来了一些新的特性：
HTML模板（Templates）
Shadow DOM（[译]什么是Shadow Dom？）
HTML Imports（组件引入）
Custom Elements（自定义元素）
Web Animations
Pointer Events
<style scoped>(范围样式)
Polymer 的曙光

原惠普 Palm webOS 开发团队加盟 Google 后， 带来了全新的 Polymer.js ，它代表了下一代 Web 组件的方向：一切皆组件、尽量减少代码量、尽量减少框架限制。Polymer 正是基于Web Components 打造的一款前端利器，它的架构大致如下：

如何使用它呢？
克隆「polymer-all」到你本地开发目录
git clone git://github.com/Polymer/polymer-all.git --recursive
确保本地服务器已经开启
引入「polymer-all/polymer/polymer.js」到你的页面
<script src="polymer.js"></script>
开始阅读入门指南
学习如何使用 Polymer 快速搭建Web组件
玩转 toolkit-ui 的示例（必须在Web服务器上运行）
加入邮件列表！提出问题等待作者反馈
使用最新版的 Chrome Canny，在 Chrome://flags 中开启「启用实验性 WebKit 功能」
在调试工具设置中可开启「Show Shadow DOM」
打开 http://127.0.0.1/projects-all/projects/Sandbox/ 如果运行正常说明

打开后我们可以看到这样的一个演示工具：

选中一个组件，点击<> 按钮可以查看源代码，包含 Shadow DOM：

Windows 版本的 Chrome 貌似还有些 BUG，右侧功能不能正常使用，用 Mac 的高富帅优越感顿时暴涨啊。

组件的合并，动画事件的绑定，更多好玩的功能等你来发现。

还可以看看 Google I/O 的视频：Web Components in Action – Google I/O 2013（Web 组件在行动）

当然，Polymer.js 目前还处于初期阶段，很多东西还未完善，标准也在不断地修订。同时，应用于移动平台也是 Polymer 的核心目标之一，Sandbox 工具目前支持简单的响应式，后期会添加更多的响应式特性。

其他资料：
Polymer 官网：http://www.polymer-project.org
GitHub 地址：https://github.com/polymer/polymer