整理分享30天文章與範例，從入門、進階、範例等循序漸進方式介紹，讓開發者能一窺Polymer全貌、快速入門

=

一、入門篇

官網使用介紹

使用介紹有 30秒、5分鐘、30分鐘長度任君挑選 [Link]

直接做給你看~

熱騰騰剛出爐的影片~從最基本開始講起，什麼是Polymer一直講到建立自己的自訂標籤，並且分享使用Bower建立開發環境

不搞笑、不誇張，就一步一步寫程式秀給你看 [Link]

點閱率最高的Polymer + WebComponents講解，由傳教士Eric親自主講 [Link]

Polymer 簡介

Polymer是什麼? 概念解釋 - WebComponent , 組裝式開發 , 封裝技術細

Polymer 淺嚐元件使用

拿GoogleMap元件當例子，一步步說明如何使用GoogleMap元件，講解程式碼，提到 attributeChanged callback 方法

Polymer 自定HTML標籤-GoogleMap三重奏(上) (下)

將GoogleMap包裝成新元件，拖拉時可同時顯示 (路況、衛星、混合)三種地圖，這範例展示如何reuse既有元件，開發出新元件。並說明開發Polymer元件的規範，也初步介紹ShadowDOM

Model、View 同步的各種方式 (⅓) **** (2/3) **** (3/3)

這篇從零開始包裝成新元件，說明將最簡單的html結構 (水果圖片) 包裝成元件，並暴露屬性給外部控制、並且提供資料雙向綁定

鐵人賽分享徽章又不見了? 沒關係，有產生器

鐵人賽分享徽章功能時好時壞，所以寫一個例子，如何使用Polymer開發出分享徽章產生器，有介紹到 content 插入點，以及如何在元件內部使用

=

二、進階篇

Template 介紹 & Shadow DOM 介紹

Shadow DOM Visualizer & Styling Web Components with Polymer

打造鐵人卡片元件

除了一步步介紹如何開發鐵人卡片元件外，也說明WebComponent組成的規範，其中對Shadow DOM進行了初步的說明，並提供進一步學習Shadow DOM的優良資源

=

三、範例篇

Material Design 元件使用

Material Design - Ripple效果

介紹Material Design中的Ripple效果，撰寫一些效果範例了解Ripple的屬性與應用。最後寫一個簡單的img ripple元件做展示

Material Design - 可捲動標題面板

介紹Material Design - 可捲動標題面板，說明該面板的元件組成與結構，並探討元件包裝的困難，以及怎麼包裝才恰當

Material Design - 對話框

介紹Material Design - 對話框元件，除了解Material Design對話框有何特別之處與如何使用外，進一步深入了解開發對話框元件開發者的巧思

Material Design - 案例研究(HTML結構)

使用Polymer官網的官方範例 計算機App，細部拆解HTML結構，了解什麼是組裝式開發的思維

Material Design - 自適應(RWD)鍵盤，有這種事?

使用計算計App中的按鍵、顯示元件，組裝出可自適應式鍵盤元件，充分享受元件Reuse所帶來的生產力

=

四、工具&資源

Polymer工具介紹

Setting up Bower and Polymer

Polymer 安裝

介紹Polymer本機必備工具 git+github , nodejs , sublime, bower...並完成本機環境建置

最終還是要打包

元件一多，瀏覽器載入速度就會受影響，介紹Polymer官網推薦的打包工具Vulcanize來幫忙打成一包，並且使用Yeoman來進行開發元件的環境設定與管理

我所知道的元件聖殿、傳教士、軍火庫

介紹學習Polymer過程所參考的資源與軍火庫(元件庫)

=

五、樂趣篇

用RWD讓悟空變身

介紹WebComponent其中一個規範 <template> ，搭配polymer提供的屬性 is="auto-binding"，就可以讓既有網頁中使用templatex實現自動雙向資料綁定。另外再加上Polymer元件 <core-media-query> 提供簡單實現RWD網頁的方式

來點實際應用 - 出英文考題 (加上評分)

結合HTML5語音API，開發出單字輸入元件，可判斷輸入單字是否正確
這是練英聽最基礎的單字元件，介紹如何從頭完成開發與運用。

****

自己的英文自己救~結合VoiceTube

使用先前的 "單字輸入元件"、"句子元件"，還有Google的youtube元件，並進一步結合 VoiceTube龐大的影音、中英文句子，開發出可實際應用的WebApp

用 JavaScript 實現人臉追蹤

站在巨人肩膀，介紹強大的視覺處理元件(可追蹤人臉、指定顏色)，輕鬆開發出酷炫應用

打造鐵人賽積分排行榜 (應用篇)

鐵人賽官網使用AngularJS開發，和後端交互很多都是單純的JSON資料，所以有了資料，搭配D3就可以用Polymer開發出不同面貌的應用。在開發這例子過程中，學習如何包裝D3元件，使用Polymer元件 <core-ajax> 解析與抓取鐵人賽官網資料，最後組裝出此應用。

AngularJS 的後宮佳麗 (上) **** (下)

介紹如何在AngularJS框架中使用Polymer元件，並進一步探討Polymer包裝元件擁有的優勢，支援Shadow DOM，真正實現元件封裝

Using Angular with Polymer elements length 9:34

=

附錄 - 各武將元件出場一覽表

Polymer core

<core-ajax>

<core-media-query>

<core-scroll-header-panel>

Material Design

<paper-tab>

<paper-button>

<paper-ripple>

<paper-dialog>

Custom Element

<itironman-card>

<d3-flare>

<x-word>

<x-sentence>

<voice-tube>

Google Web Components

<google-youtube>

<google-map>

~完~