聚合物宣告式、封裝、可重複使用的元件

Polymer 是通往 Web 元件未來願景的閘道之一。我們想讓使用者輕鬆使用及建立自訂元素。過去一年來，該團隊持續針對不斷演變的規格，努力開發一組 polyfill。除此之外，我們建立了便利的糖果程式庫，讓您更輕鬆地建構網頁元件。最後，我們正在打造一套可在應用程式中重複使用的 UI 和公用程式元素。在 2013 年 Chrome 開發人員高峰會中，我深入探索 Polymer 的不同部分，以及我們「美好的事物」背後的運作理念曼德拉。

簡報：http://html5-demos.appspot.com/static/cds2013/index.html

「所有內容都是元素」(從 <select> 到自訂元素)

投影片：http://html5-demos.appspot.com/static/cds2013/index.html#6

90 年代打造網頁是一蹴可幾的事，卻能發揮強大的影響力。我們只需要一些元素。最強大的部分是什麼？一切都是宣告式元素。無論是建立頁面、新增表單控制項，還是建立「應用程式」，而不必編寫 JavaScript

取下 <select> 元素。元素內建大量功能，只需宣告即可：

  • 可透過 HTML 屬性自訂
  • 使用預設 UI 顯示子項 (例如 <option>)，但可透過屬性設定。
  • 適用於其他情境，例如「<form>」
  • 有 DOM API：屬性和方法
  • 出現有趣的事物時觸發事件

**網頁元件可提供相關工具，回到現在的網頁開發流程。其中一個可讓我們建立新元素，以及 <select>，但專為 2014 年的用途而設計。舉例來說，如果現在問世 睡了，那應該就會是 HTML 標記 (範例)：

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
               params='{"alt":"json"}'></polymer-ajax>

或者資料繫結至 queryMatches 屬性的回應式元素：

<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…

這正是我們在 Polymer 中採取的做法。與其建構單體式 JavaScript 網頁應用程式，我們改為建立可重複使用的元素。隨著時間的推移，整個應用程式會超出一起組合較小的元素。一個元素可以做為一個元素：

<my-app></my-app>

運用 Polymer 獨具的醬料建構網頁元件

投影片：http://html5-demos.appspot.com/static/cds2013/index.html#37

Polymer 中提供數種便利性，可讓你建立以網頁元件為基礎的應用程式：

  • 宣告式元素註冊：<polymer-element>
  • 宣告式繼承：<polymer-element extends="...">
  • 宣告式雙向資料繫結：<input id="input" value="{{foo}}">
  • 宣告式事件處理常式：<button on-click="{{handleClick}}">
  • 已發布的房源：xFoo.bar = 5 <-><x-foo bar="5">
  • 資源觀察：barChanged: function() {...}
  • 預設為 PointerEvents / Pointer 小工具

這項原則在於撰寫 Polymer 元素的故事，需要編寫的程式碼越少越好 ;)

網頁元件：網頁開發的未來

投影片：http://html5-demos.appspot.com/static/cds2013/index.html#26

如果我沒有向大家透露 Web 元件背後的標準，我一定會重心。畢竟，Polymer 是以這些不斷演進的基礎 API 為基礎

我們正處於網路開發領域的這個非常興奮的領域。與網路平台新增的其他功能不同，組成網頁元件的 API 不至於質疑或面向使用者。只用於提升開發人員的工作效率。這四個主要 API 本身都很實用，但相輔相成！

  1. Shadow DOM - 樣式和 DOM 封裝
  2. 自訂元素 - 定義新的 HTML 元素。為他們提供含有屬性和方法的 API。
  3. 「HTML 匯入」是 CSS、JS 和 HTML 套件的發布模型。
  4. 範本 - 適當的 DOM 範本，用於定義標記的內嵌標記區塊稍後蓋

如要進一步瞭解 API 的基本概念，請前往 ebidel.github.com/webcomponents。