在過去一年中,Polymer 團隊花了許多時間教導開發人員如何建立自己的元素。這項趨勢促使生態系統快速成長,其中很大一部分是因為 Polymer 的 Core 和 Paper 元素,以及 Mozilla 團隊建立的 Brick 元素。
隨著開發人員越來越熟悉如何建立自己的元素,並開始思考如何建構應用程式,就會產生許多問題:
- 您該如何結構化應用程式的 UI?
- 如何轉換不同狀態?
- 有哪些策略可以提升成效?
- 您又該如何提供離線體驗?
針對 Chrome 開發人員大會,我試著透過建構小型聯絡人應用程式,並分析建構過程,來回答這些問題。以下是我提出的解決方案:
結構
將應用程式分割成可組合及重複使用的模組化部分,是網頁元件的核心原則。您可以使用 Polymer 的 core-* 和 paper-* 元素,輕鬆開始使用小型元件,例如 paper-toolbar 和 paper-icon-button。

並透過組合功能,將這些元素與任意數量的元素結合,以建立應用程式架構。

設定通用架構後,您可以套用自己的 CSS 樣式,將其轉換為品牌專屬的體驗。使用元件執行這項操作的好處,在於您可以利用相同的應用程式建構原始元素,創造截然不同的體驗。有了結構架構,您就可以開始思考內容。
core-list
元素特別適合處理大量內容。

core-list
可連結至資料來源 (基本上是物件陣列),並針對陣列中的每個項目,刻印一個範本例項。您可以在範本中運用 Polymer 資料繫結系統的強大功能,快速連結內容。
轉場
應用程式的各個部分都已設計及實作完成,接下來要做的就是瞭解如何實際在各個部分之間切換。
雖然 core-animated-pages
仍屬於實驗性元素,但它提供可插入的動畫系統,可用於在應用程式中轉換不同狀態。

不過,動畫只是問題的一半,應用程式還需要將這些動畫與路由器結合,才能妥善管理網址。
在 Web 元件中,路由分為兩種:命令式和宣告式。視專案需求而定,您可以將 core-animated-pages
與任一方法結合使用。
命令式路由器 (例如 Flatiron 的 Director) 可以監聽相符的路徑,然後指示 core-animated-pages
更新所選項目。

如果您需要在路徑比對成功後,且下一個區段尚未轉換前執行某些工作,這項方法就很實用。
另一方面,宣告式路由器 (例如 app-router) 實際上可以將路由和 core-animated-pages
合併為單一元素,因此管理這兩者會變得更有條理。

如果您想要進一步掌控,可以查看 more-routing 等程式庫,這些程式庫可透過資料繫結與 core-animated-pages
結合,讓您同時享有兩者的優點。
成效
在應用程式成形後,您必須密切留意效能瓶頸,尤其是與網路相關的瓶頸,因為這通常是行動網頁應用程式中最慢的部分。
只要根據條件載入網頁元件 polyfill,就能輕鬆提升效能。

如果平台已提供完整支援服務,就沒有必要付出這些費用!在每個新 webcomponents.js 存放區的版本中,polyfill 也已分割為獨立檔案。如果您想依條件載入部分 polyfill,這個方法就很實用。
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
透過 Vulcanize 等工具執行所有 HTML 匯入作業,也可以大幅提升網路效益。

Vulcanize 會將匯入項目連結為單一套件,大幅減少應用程式發出的 HTTP 要求數量。
離線
不過,光是建構效能良好的應用程式,並無法解決使用者連線不佳或完全無法連線的問題。換句話說,如果您的應用程式無法離線運作,就不是真正的行動應用程式。目前您可以使用備受爭議的應用程式快取離線處理資源,但展望未來,Service Worker 很快就會讓離線開發體驗變得更優質。
Jake Archibald 最近發布了一份出色的服務工作站模式食譜,但我會提供快速入門資訊,讓您快速上手:
安裝服務工作者非常簡單。建立 worker.js
檔案,並在應用程式啟動時註冊該檔案。

請務必將 worker.js
放在應用程式的根目錄中,這樣才能攔截應用程式中任何路徑的請求。
在 worker 的安裝處理常式中,我快取大量資源 (包括支援應用程式的資料)。

這樣一來,如果使用者在離線狀態下存取應用程式,應用程式至少能提供備用體驗。
繼續前進!
網頁元件是網頁平台的重要新增元素,但仍處於初期階段。隨著這些元素在更多瀏覽器中推出,開發人員社群將負責找出應用程式結構的最佳做法。上述解決方案可讓我們掌握起點,但仍有許多地方需要學習。繼續打造更優質的應用程式吧!