Polymer

Polymer Library 是甚麼？根據Polymer首頁，

The Polymer library is designed to make it easier and faster for developers to create great, reusable components for the modern web.

• Web components. These standards provide the primitives you need to build new components. You can build your own custom elements using these primitives, but it can be a lot of work.
  Not all browsers support these standards yet, so the web components polyfill library fills the gaps, implementing the APIs in JavaScript.
• The Polymer library. Provides a declarative syntax that makes it simpler to define custom elements. And it adds features like templating, two-way data binding and property observation to help you build powerful, reusable elements with less code.
• Custom elements. If you don’t want to write your own elements, there are a number of elements built withPolymer that you can drop straight into your existing pages. These elements depend on the Polymer library, but you can use the elements without using Polymer directly.

看起來很吸引人，下面是 Polymer 初體驗：

一次性安裝

要使用 Polymer，必須有 Node.js 與 Git，且都必須透過環境變數 Path 讓系統可以找到執行檔。
若沒有 Node.js ，可到 nodejs.org 下載安裝，Node.js  包括了 npm。
若沒有 Git，請到 git-scm.com 下載並進行安裝，git 的執行檔必須放在環境變數 Path 中。


執行指令 bower install --save Polymer/polymer，專案目錄下會產生子目錄 bower_components/，內有專案所需的 Polymer 物品，bower.json 會記錄專案的最新相依狀況。

開始學習

接著，開始寫網頁，下面依照 Quick Tour of Polymer 的教學，製作簡單網頁。

將前述教學中的第一個 index.html, proto-element.html存檔到專案目錄。

在專案目錄下，用指令 polyserve 啟動 Web Server，他會顯示專案根目錄的URL，所謂的專案URL。

用瀏覽器瀏覽專案URL， 就可看到網頁結果。

教學中有 proto-element.html, dom-element.html, picture-frame.html, name-tag.html, configurable-name-tag.html, editable-name-tag.html 等六個 Polymer Element，每一個搭配對應的 index.html，介紹一些 Polymer 的功能。

用 proto-element.html 介紹 Registering elements 與 Lifecycle callbacks。

用 dom-element.html 介紹 Local DOM template。

用 picture-frame.html 介紹 Compose with local DOM(註1)。

用 name-tag.html 介紹 Use data binding。

用 configurable-name-tag.html 介紹 Declare a property。

用 editable-name-tag.html 介紹 Bind to a property(註2)。

註1：在與 picture-frame.html 對應的 index.html 裡，圖檔 p-logo.svg 必須改成自己有的圖檔。

註2：editable-name-tag.html 有使用到 iron-input，它是一個 Polymer Element，必須到 Polymer Catalog 尋找下載，方法如下：
到 Polymer Catalog 網站尋找所要的零件，如 iron-input，點擊該連結，此時左邊欄 bower command 下方的文字方格出現下載所需的指令，本例是 bower install --save PolymerElements/iron-input。在專案目錄中執行它，就完成下載。下載時，它會自動更新bower.json 的內容，要是專案裡的 polymer 物件有更新版的東西出現，只要執行 bower update 就可以了。
註3: Developer Guide 提到，attribute name 與 property name的對應。例如 drawer-width 對應到 drawerWidth，使用 custom element時，一定要記得這點。