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）
其中，基礎層使用了以下技術：
- 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開發生態系統的益處顯而易見。
相關資源
如果你想更深入地了解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
