Google新的Web UI库：Polymer

今年的Google I/O大会，绝对是一场为开发者所准备的盛会，发布多个软件产品与服务，并且主要以发布平台和服务为主，比如让Android开发者称赞的Android Studio、推出Google Play Game服务、对地图进行重大升级等。而在Web平台领域，Google则发布了最新的Web UI库Polymer。

Polymer基于Shadow DOM、Custom Elements、MDV等最新浏览器特性，代表了下一代Web框架的方向：一切皆组件、尽量减少代码量、尽量减少框架限制。由加盟Google的原Palm webOS开发团队打造。

 

架构图

快速入门

1.把项目拷贝到解决方案的根目录文件夹中，参考 Get the code。

[js]  view plain copy

1. git clone git://github.com/Polymer/polymer.git --recursive  

2.启动Web服务器

3.在主页面引用polymer.js

[js]  view plain copy

1. <script src="Polymer/polymer.js"></script>  

4.阅读 开始指南

5.学习如何使用Polymer内核快速搭建Web组件

6.玩转toolkit-ui示例（必须在Web服务器上运行）

7.加入mailing list，提问并且得到相应地回复。

Polymer内核

Polymer内核代码由polymer.js这个文件提供，其提供了一个薄层代码来表示Polymer选项，并且提供了所有组件使用的糖。

1. 组件声明

   Web组件声明代码如下所示：

   [js]  view plain copy

   1. <element name="tag-name">  
   2. <template>  
   3. <!-- shadow DOM here -->  
   4. </template>  
   5. <script>  
   6. // lifecycle setup here  
   7. </script>  
   8. </element>  

   在该组件中添加Polymer.register生命周期来初始化组件的<script>块，如下所示：

   [js]  view plain copy

   1. <font face="Menlo, Monaco, monospace, sans-serif"><element name="tag-name">  
   2.   <template>  
   3.     <!-- shadow DOM here -->  
   4.   </template>  
   5.   <script>  
   6.     Polymer.register(this);  
   7.   </script>  
   8. </element></font>  

2. 元素初始化

   第一个参数Polymer.register是引用到<element>元素里的，因为脚本在element标记里运行，所以参数就设为“this”。

   你可以提供第二个对象参数到Polymer.register里去定义对象原型，在下面的代码里，该组件初始化了一个message属性和ready方法。

   [js]  view plain copy

   1. Polymer.register(this, {  
   2. message: "Hello!",  
   3. ready: function() {  
   4. // component is ready now, we can do stuff  
   5. }  
   6. });  

目前，Polymer还处于初期阶段，它和其他框架一样，尽可能地拥抱HTML。它的目标是通过使用像Custom Elements和Shadow DOM这些新兴的Web标准的少量独立polyfill发展Web平台。此外，应用于移动平台也是其中的核心目标之一。Polymer开发团队正在研究响应式组件，让其可以正确无误地在台式机、平板电脑、手机上进行自动化配置。

当然，Polymer的诞生也意味着Google现在有三个相互竞争的Web应用开发库：Polymer、Dart（也具有UI开发功能）和AngularJS。

对于Polymer，开发者有哪些话要说呢？让我们一起来看下：

清风一二两：Palm webOS用另一种方式重生？

三合一赵：Enyo的Google版~换汤不换药~

刘晗的微博：在HTML领域离标准太远自己搞一套，出路不大。特别是像这种绑定机制，貌似理念是MVC，但MVC这种东西做简单页面还行。

eldude：声明性质、封装、数据绑定、属性和事件驱动API这些都是数量级的，要比现有JavaScript/HTML UI组件简单。

neilk：这个框架看起来非常酷，但“built by Google”有点用词不当，像Closure或Angular、Polymer等这些都Google内部使用的技术，在经过千锤百炼后才像面向公众，因此称作 "technologies by Googlers"更为合适。

相关资料

Polymer主页： http://www.polymer-project.org/

项目主页上的FAQ描述比较清晰： http://www.polymer-project.org/faq.html 

架构图： http://www.polymer-project.org/images/architecture-diagram.svg?20130516

GitHub： https://github.com/polymer/polymer