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

Addy Osmani
Addy Osmani

「網頁元件」將會變更您在建構網頁時知道的一切資訊。第一,網路會有低階 API,除了可以建立自己的 HTML 標記,還封裝邏輯和 CSS。再也不需要使用通用樣式表湯或樣板程式碼!這個充滿勇氣的新世界,就是一切元素,

我在 DotJS 的會談中,詳細介紹了網頁元件的功能,以及如何使用現代化工具建立這類元件。我會向各位說明 Yeoman 的工作流程,運用 Polymer 簡化建立網頁應用程式的過程。Polymer 是一組聚合物和糖,可立即在新型瀏覽器中使用 Web 元件開發應用程式。

建立自訂元素和安裝其他人建立的元素

在這場講座中,您將瞭解以下內容:

  • 關於撰寫網頁元件的四種規格:自訂元素範本Shadow DOMHTML 匯入
  • 如何使用 Bower 定義自己的自訂元素並安裝其他人建立的元素
  • 省下編寫 JavaScript 的時間,將更多心力投入建構網頁
  • 使用新型前端工具 (Yeoman) 運用 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 程式庫,可讓網頁元件在我們等待原生實作的同時,在新版網路瀏覽器中運作。現代的工具可改善運用這些機制的工作流程,因此在開發自家代碼時,也許可以試試看 Yeoman 和 Bower。

另有以下幾篇文章值得一探究竟: