Yo Polymer – Whirlwind 網頁元件工具導覽

Web 元件將改變您對網頁版應用程式建構作業的既有認知。網頁將首次提供低階 API,讓我們不僅能自行建立 HTML 標記,還能封裝邏輯和 CSS。不再需要全域樣式表混亂或樣板程式碼!在這個新世界中,所有事物都是元素。

DotJS 的演講中,我會介紹 Web 元件提供的功能,以及如何使用新式工具建構這些元件。我將介紹 Yeoman,這是一種工具工作流程,可透過 Polymer 簡化網頁應用程式的建立作業。Polymer 是一種 polyfill 程式庫,可讓您在現今新式瀏覽器中,使用 Web 元件開發應用程式。

建立自訂元素及安裝他人建立的元素

這場演講將介紹以下內容:

  • 關於組成 Web 元件的四種不同規格:自訂元素範本Shadow DOMHTML 匯入
  • 如何使用 Bower 定義自訂元素,以及安裝其他人建立的元素
  • 減少編寫 JavaScript 的時間,將更多心力投注在建構網頁
  • 使用新型前端工具 (Yeoman),搭配 generator-polymer 使用 Polymer 建構應用程式架構
  • Polymer 如何大幅改變建立網路元件的方式。

舉例來說,如要安裝 Polymer 的 Web Component polyfill 和程式庫本身,您可以執行這一行程式碼:

bower install --save Polymer/platform Polymer/polymer

這會新增 bower_components 資料夾,並新增上述套件。--save 會將這些項目新增至應用程式的 bower.json 檔案。

日後如果想安裝 Polymer 的摺疊式元素,可以執行以下操作:

bower install --save Polymer/polymer-ui-accordion

然後匯入至應用程式:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

為了節省時間,您可以使用 Yeoman 執行這項操作,藉此建立新版 Polymer 應用程式的結構,並提供所需的所有依附元件、程式碼和工具,以便對應用程式進行最佳化:

yo polymer

額外操作說明

我還錄製了 30 分鐘的額外內容,帶您瞭解我在演講中展示的 Polymer Jukebox 應用程式。

獎勵影片涵蓋的內容:

  • 「一切皆元素」的咒語意義
  • 如何使用 Bower 安裝 Polymer 的平台 polyfill 和元素
  • 使用 Yeoman 產生器和子產生器為 Jukebox 應用程式建立專案架構
  • 瞭解透過模板架構出來的平台功能
  • 如何將 Angular 應用程式功能移植到 Polymer。

我們也會使用 Yeoman 子產生器來建構新的 Polymer 元素,例如為元素 foo 建立常用程式碼:

yo polymer:element foo

系統會提示我們是否要自動匯入元素、是否需要建構函式,以及其他偏好設定。

兩場演講中展示的應用程式最新來源已在 GitHub 上架。我已進一步重構,讓程式碼更井然有序,也更容易閱讀。

應用程式預覽畫面:

Yo Polymer 應用程式預覽

延伸閱讀

總而言之,Polymer 是 JavaScript 程式庫,可讓 Web 元件在新型網路瀏覽器中運作,直到這些元件原生實作為止。現代化工具可協助您改善工作流程,您也可以在開發自己的代碼時試試 Yeoman 和 Bower。

以下是幾篇值得一看的相關文章: