談談Google Polymer以及Web UI框架的未來

雖然今年的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，可以訪問以下網址：

原文連結： 2ality

本文為CSDN編譯整理，未經允許不得轉載，如需轉載請聯繫market#csdn.net(#換成@)