【转】谈谈Google Polymer以及Web UI框架的将来

原文转自：http://www.csdn.net/article/2013-05-27/2815450-google-polymer

摘要：开发者Axel Rauschmayer在本身的博客上详解了Google Polymer的设计理念与组成架构，深得Polymer开发者的认同。他认为Polymer这样高互操做性的设计才应该是Web开发的将来。

虽然今年的Google I/O也已结束，但会上揭晓的新技术、新工具仍然让开发者兴奋不已。其中Web开发方面尤以Ploymer和Web Components为重。

Polymer由加盟Google的原Palm webOS开发团队打造，是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。Web Components则提供了一种更完全的解耦方式，更加方便了UI的开发和模块化，能够说是Polymer的基础之一。

开发者Axel Rauschmayer在本身的博客上详解了Polymer的设计理念与组成架构，深得Polymer开发者sjmiles（Scott J. Miles）的认同。CSDN编译以下：

在刚刚结束的Google I/O 2013中，Google发布了一个新的Web UI框架——Polymer，彷佛为全部Web UI框架指明了发展方向。

1. Polymer

Polymer由如下几层组成：

 

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

1.1 基础层（platform.js）

 

其中，基础层使用了如下技术：

 

1. DOM Mutation Oberservers和 Object.observe()：用于监视DOM元素和简单JavaScript对象的改变。该功能可能会在ECMAScript 7中正式标准化。
2.  Pointer Events ：在全部的平台上以一样的方式处理鼠标和触摸操做。
3. Shadow DOM：将结构和样式封装在元素内（好比定制元素）。
4. Custom Elements：定义本身的HTML5元素。自定义元素的名字中必须包括一个破折号，它的做用相似于命名空间，为了将其与标准元素区分开来。
5. HTML Imports：封装自定义元素，包中包括HTML、CSS、JavaScript元素。
6. Model-Driven Views（MDV）：直接在HTML中实现数据绑定。仍没有标准化的计划。
7. Web Animations：统一Web动画实现API。

 

以上第3-5个API都是Web Components的一部分。很明显，Web Components对Polymer的重要性非同通常。

platform.js的做用在于代替浏览器提供这些API，它在通过充分压缩后仅仅31KB。而根据已公开的信息，咱们还知道Polymer的目标之一就在于测试这些未标准化的HTML5 UI API。

1.2 核心层和元素层

Polymer自己很是像原生的HTML5：“attributes in, events out”。以UIwidget（widget）polymer-panels为例：

 

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

 

能够看出其结构很是“面向组件（component-oriented）”，全部组件都是HTML元素。有的元素自己并不提供UI，好比animations元素并不提供UI，可是你能够将它与UI元素相关联，实现动画效果。此外，Polymer的不少widget中都内建了响应式设计，也就是说，他们会依平台的不一样变化成最适合的形状。

1.3 互操做性

Polymer设计得像菜单同样，能够按需选择。得益于Web Components，其元素都具备很是高的互操做性。在I/O大会上咱们就看到了这样的例子：Mozilla项目中的元素X-Tag（一样基于Web组件）与Polymer协同得很是好。

1.4 何时可使用Polymer？

Polymer目前还是一个Alpha预览版，所以不建议在公共项目中使用。可是，做为一个开源项目，你能够随时使用它的代码。

1.5 Polymer与其它Web框架相好比何？

Polymer并非为终结其它框架而生，相反，现有的这些框架也能够构建在一样的基础层之上。若是你已经尝试过Ember.js、AngularJS这样的UI框架，必定会发现不少API很是熟悉。AngularJS甚至在在Twitter上宣布：”Angular将基于Polymer开发widget，这会是一个共赢的方案。“

2. 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开发生态系统的益处显而易见。

相关资源

若是你想更深刻地了解Polymer，能够访问如下网址：

 

• Google I/O 2013中的演讲：
• “Web Components: A Tectonic Shift for Web Development”——Eric Bidelman
• “Web Components in Action”——Matthew McNulty, Alex Komoroske（基于上面的演讲，还提到了Polymer）
• HTML5 Rocks上关于Web Component的文章。
• Polymer项目主页： polymer-project.org

 

原文连接： 2ality