在過去一年中，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 的安裝處理常式中，我快取大量資源 (包括支援應用程式的資料)。
這樣一來，如果使用者在離線狀態下存取應用程式，應用程式至少能提供備用體驗。
繼續前進！
網頁元件是網頁平台的重要新增元素，但仍處於初期階段。隨著這些元素在更多瀏覽器中推出，開發人員社群將負責找出應用程式結構的最佳做法。上述解決方案可讓我們掌握起點，但仍有許多地方需要學習。繼續打造更優質的應用程式吧！