认识Google Polymer

polymer

Polymer是什么?

Polymer是一个使用Web组件构建Web应用的类库,同时也使用了为Web构建可重用组件的新的HTML 5标准。它是由加盟Google的原Palm webOS开发团队打造,是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。Web Components则提供了一种更彻底的解耦方式,更加方便了UI的开发和模块化,可以说是Polymer的基础之一。Polymer为大部分Web组件技术提供了polyfills功能,它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外,Polymer提供了一系列的部件的例子,其中包括天气、时钟、股票行情和线型图。

鉴于许多Web框架通过暴露JavaScript API来构建用户界面,而构建用户界面实际上就是生成一堆div和spans标记,Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此,与现在的一般依赖某个Javscript框架的HTML组件相比,Web组件希望能减少碎片。

尽管Web组件是一项有趣的新技术,但在浏览器们都支持它们(并且大部分用户都开始使用这些浏览器们)之前,其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills(译者注:polyfills原指一种墙面填料)。polyfill指的是一段代码,它能实现期望最终由浏览器自身实现的功能。如果浏览器本身已经实现了该功能,则polyfill什么都不做。否则,它模拟其实现而不依赖API。例如,webshims库实现了HTML5中各种功能,包括canvas、HTML5表格和在某些尚不支持地理位置定位的浏览器中实现地理位置定位功能。

Polymer的组成

Polymer由以下几层组成:
基础层(Foundation)——platform.js:基本构建块,其中大部分API最终将成为原生浏览器API。
核心层(Core)——polymer.js:基础层实现的辅助工具。
元素层(Elements):包括构建于核心层之上的UI以及非UI组件。

  • 基础层

基础层包括以下技术:

1. DOM Mutation Oberservers和Object.observe():用于监视DOM元素和简单JavaScript对象的改变。该功能可能会在ECMAScript 7中正式标准化。
2. Pointer Events(指针事件):处理鼠标和触摸操作,支持所有的平台。
3. Shadow DOM(阴影DOM):封装元素内的结构和样式,适合自定义元素。
4. Custom Elements(自定义元素):可以自定义HTML5的元素。自定义元素的名字必须包含一个破折号,这是一种简单的命名空间标识,以区别于标准元素。
5. HTML Imports(HTML导入):包自定义元素。这些包可能包含HTML、CSS和JavaScript。
6. Model-Driven Views(模型驱动的视图 – MDV):把数据直接绑定到HTML。
7. Web Animations(Web动画):一套统一的Web动画API。
以上第3-5个API都是Web Components的一部分。很明显,Web Components对Polymer的重要性非同一般。
platform.js的作用在于代替浏览器提供这些API,它在经过充分压缩后仅仅31KB。而根据已公开的信息,我们还知道Polymer的目标之一就在于测试这些未标准化的HTML5 UI API。

  • 核心层和元素层

Polymer框架天生就偏向于本地HTML5。比如使用Polymer框架的面板UI Widget的例子:

<polymer-panels
    on-select="panelSelectHandler"
    selected="{{selectedPanelIndex}}">
</polymer-panels>

其架构是面向组件的,它由HTML5元素组成,一些元素甚至没有用户界面,比如动画是元素,但它没有UI,而是代替点。响应式设计内建了许多Widget,这意味着它们能自适应多种给定的平台,如手机、平板、桌面等。

Polymer具有高度互操作性

Polymer设计得像菜单一样,可以按需选择。得益于Web Components,其元素都具有非常高的互操作性。在I/O大会上我们就看到了这样的例子:Mozilla项目中的元素X-Tag(同样基于Web组件)与Polymer协同得非常好。

Polymer与其它Web框架相比如何?

Polymer并不是为终结其它框架而生,相反,现有的这些框架也可以构建在同样的基础层之上。如果你已经尝试过Ember.js、AngularJS这样的UI框架,一定会发现很多API非常熟悉。AngularJS甚至在 在Twitter上宣布:“Angular将基于Polymer开发widget,这会是一个双赢的方案。”

Polymer究竟意味着什么?

没有人会想要使用框架,我们只是想高效地开发Web UI而已,只不过框架恰恰满足了我们的需求。与之相反,原生HTML却缺乏这些功能:

  • 丰富的widget集。在我看来,Web Components最大的意义莫过于此。得益于Web Components,我们将能轻易获得众多widget,随意使用。
  • 用户界面布局。我对 CSS Grid Layout寄予了厚望,Grid Layout是原生的HTML,自然它也能与Web Component很好地协同工作。
  • widget间的“粘合剂”(比如数据绑定)。

就目前看来,各大框架仍难以互相兼容:各自使用各自的工具链、继承API、widget基础构架等等。本文中描述的开发模式,以及ECMAScript 6中的类与模块,都指明Web开发的未来应该是更高的互操作性。这对Web开发生态系统的益处显而易见。

 

发表评论