iT邦幫忙

DAY 30
2

你不能不知道的Polymer開發實戰系列 第 30

Polymer 30天全面解析

整理分享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>

~完~


上一篇
最終還是要打包
系列文
你不能不知道的Polymer開發實戰30

1 則留言

0
oxxo
iT邦研究生 2 級 ‧ 2014-10-20 23:03:50

恭喜 Marty 大大完成挑戰!
精彩的 Polymer 分享真是精采絕倫的啦!
獲益良多,非常感謝!^_^

我要留言

立即登入留言