Google Polymer以及Web UI框架的未來

作者：佚名 2014-05-26 16:47:32

開發者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）

其中，基礎層使用了以下技術：

DOM Mutation Oberservers和 Object.observe()：用于監視DOM元素和簡單JavaScript對象的改變。該功能可能會在ECMAScript 7中正式標準化。
Pointer Events ：在所有的平臺上以同樣的方式處理鼠標和觸摸操作。
Shadow DOM：將結構和樣式封裝在元素內（比如定制元素）。
Custom Elements：定義自己的HTML5元素。自定義元素的名字中必須包括一個破折號，它的作用類似于命名空間，為了將其與標準元素區分開來。
HTML Imports：封裝自定義元素，包中包括HTML、CSS、JavaScript元素。
Model-Driven Views（MDV）：直接在HTML中實現數據綁定。仍沒有標準化的計劃。
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開發生態系統的益處顯而易見。