【轉】談談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