First Step Tutorials Demo

Responsive Web

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時，一定要記得這點。

Service Workers

從 Service Worker API 節錄：

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.

Promise

網頁裡，我們可以利用 Javascript promise 進行非同步的運算，而且非同步運算的結果可以串聯起來依序處理。使用非同步的運算，可以減少使用者等候的時間，讓網頁更能處理(more responsive)使用者的輸入。

要了解 Promise 的基本概念可以看google developer與mozilla developer。

這裡有最初淺的例子，利用 Promise 非同步下載圖檔，視圖檔下載是否成功而進行後續的處理。