Web 元件將改變您對網頁版應用程式建構作業的既有認知。網頁將首次提供低階 API,讓我們不僅能自行建立 HTML 標記,還能封裝邏輯和 CSS。不再需要全域樣式表混亂或樣板程式碼!在這個新世界中,所有事物都是元素。
在 DotJS 的演講中,我會介紹 Web 元件提供的功能,以及如何使用新式工具建構這些元件。我將介紹 Yeoman,這是一種工具工作流程,可透過 Polymer 簡化網頁應用程式的建立作業。Polymer 是一種 polyfill 程式庫,可讓您在現今新式瀏覽器中,使用 Web 元件開發應用程式。
建立自訂元素及安裝他人建立的元素
這場演講將介紹以下內容:
- 關於組成 Web 元件的四種不同規格:自訂元素、範本、Shadow DOM 和 HTML 匯入。
- 如何使用 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 上架。我已進一步重構,讓程式碼更井然有序,也更容易閱讀。
應用程式預覽畫面:
延伸閱讀
總而言之,Polymer 是 JavaScript 程式庫,可讓 Web 元件在新型網路瀏覽器中運作,直到這些元件原生實作為止。現代化工具可協助您改善工作流程,您也可以在開發自己的代碼時試試 Yeoman 和 Bower。
以下是幾篇值得一看的相關文章: