iT邦幫忙

鐵人檔案

2014 iT 邦幫忙鐵人賽
回列表

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

Web 開發元件化有其優勢與應用場景。Polymer 是 Google 推出支援Web Compoent標準的框架,雖然 AngularJS 有 directive,但在這點上Polymer其實更為全面且出色,而且今年率先支援 Material Design元件,就讓筆者做中學來分享開發實戰吧~

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 1

Polymer 簡介

開發Web前端,應該很常聽到 AngularJS,Google一推出就造成轟動。但是較少人知道Google去年也推出了Polymer,由於這算是比較前瞻性的東西...

2014-09-21 ‧ 由 martyshu 分享
DAY 2

Polymer 安裝

今日目標: 完成本機Polymer安裝 雖然我們可以藉由雲端工具淺嚐Polymer開發,例如JSBin、CodePen等,或是可直接拖拉Polymer元件的EZ...

2014-09-22 ‧ 由 martyshu 分享
DAY 3

Polymer 淺嚐元件使用

今日目標: 了解與使用GoogleMap元件 今天就來感受一下使用元件的快感,昨天雖然裝完Polymer核心和Marterial元件後,已經有數十個元件可以使用...

2014-09-23 ‧ 由 martyshu 分享
DAY 4

Polymer 元件應用

今日目標: 完成 GoogleMap + MarterialDesign 元件互動 今天就來感受一下Polymer的template與data-binding的...

2014-09-24 ‧ 由 martyshu 分享
DAY 5

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

今日目標: 動手打造自己專屬的HTML標籤 [線上執行範例] [程式碼] google-map-x3 這HTML標籤可以同時顯示三個不同地圖面貌,分別街道+衛星...

2014-09-25 ‧ 由 martyshu 分享
DAY 6

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

今日目標: 了解元件包裝原始碼 延續昨天範例,接下來說明元件 完整程式碼 [線上範例] 第1行是載入polymer基本元件與polymer核心程式 第2行是載...

2014-09-26 ‧ 由 martyshu 分享
DAY 7

Model、View 同步的各種方式 (⅓)

今日目標: 了解Model與Template 的多種綁定方式 瀏覽器根據DOM結構繪製畫面的長相,所以只要改變DOM就能更新View,而資料則是放在Model裏...

2014-09-27 ‧ 由 martyshu 分享
DAY 8

Model、View 同步的各種方式 (⅔)

今日目標: 了解Model與Template 的多種綁定方式 接續昨天例子,接下來我們進一步將template repeat , model 封裝到元件中 綁定...

2014-09-28 ‧ 由 martyshu 分享
DAY 9

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

今日目標: 了解Model與Template 的多種綁定方式 Material Design 重裝上陣 今天將水果籃結合了最潮的 Google Material...

2014-09-29 ‧ 由 martyshu 分享
DAY 10

用RWD讓悟空變身

今日目標: 學習 Template auto-binding + core-media-query 元件 今天我們要整合底下三樣素材, 目標就是讓悟空可以隨著螢...

2014-09-30 ‧ 由 martyshu 分享