讓我們透過 Polymer 建構一些應用程式!

過去一年來,Polymer 團隊花了大量時間教導開發人員如何製作自己的元素。這會產生快速成長的生態系統,而 Polymer 的核心元素和紙張元素,以及 Mozilla 團隊所打造的磚石元素,大部分都融入這個生態系統。

隨著開發人員越來越熟悉如何建立自己的元素,並開始思考如何建構應用程式,就會出現一些問題:

  • 您要如何建構應用程式 UI?
  • 如何在不同的狀態之間轉換
  • 哪些是可提升成效的策略?
  • 如何提供離線體驗?

在 Chrome 開發人員高峰會中,我嘗試建立小型聯絡人應用程式,並分析開發過程中所經歷的流程,藉此解答這些問題。以下是我所構思的內容:

結構

將應用程式拆解為可以合併和重複使用的模組化組件,是 Web 元件的中央用戶群。Polymer 的核心* 和紙*元素,可以讓您輕鬆從核心工具列紙圖示按鈕等小碎紙開始著手...

Polymer 協助開發人員快速建構應用程式

...透過組合的力量,將其與任意數量的元素結合,進而建立應用程式 Scaffold。

Polymer 讓 Web 元件更實用

設定好一般 Scaffold 後,即可套用自己的 CSS 樣式,打造品牌專屬的體驗。利用元件執行這項作業的好處是,您可以藉此利用相同的應用程式建構基本功能,創造截然不同的體驗。鷹架設好後,你就可以繼續思考內容。

core-list 是特別適合處理大量內容的元素。

Polymer 讓 Web 元件更實用

core-list 可連結至資料來源 (基本上是物件陣列),而陣列中的每個項目都會蓋掉範本例項。在範本中,您可以運用 Polymer 資料繫結系統的強大功能,快速串連內容。

轉場

設計和實作應用程式的各個部分後,下一個工作就是瞭解如何實際在這兩個部分之間瀏覽。

雖然 core-animated-pages 仍然是實驗性元素,但提供可插入的動畫系統,可用於在應用程式中切換不同狀態。

聚合物報告資訊卡需要改善

但動畫只不過是謎題的一部分,應用程式需要將這些動畫與路由器結合,才能妥善管理網址。

Web 元件轉送的世界分為兩種:命令式與宣告式。您可以根據專案需求,將 core-animated-pages 與任一方法結合使用。

命令式路由器 (例如 Flatiron 的 Director) 可以監聽相符的路徑,然後指示 core-animated-pages 更新所選項目。

聚合物報告資訊卡需要改善

如果需要在路徑比對後和下一節轉換前完成一些工作,這項功能就能派上用場。

另一方面,宣告式路由器 (例如 app-router) 實際上可將轉送和 core-animated-pages 合併為單一元素,因此更有效率地管理兩者。

聚合物報告資訊卡需要改善

如果您想使用更精細的控制,不妨查看類似更精細的轉送程式庫,這項工具可以使用資料繫結將 core-animated-pagescore-animated-pages 結合,或許能同時為您提供這兩個平台的優點。

成效

隨著您的應用程式不斷推陳出新,您必須隨時留意效能瓶頸,尤其是與聯播網相關的所有問題,因為這通常是行動網路應用程式最慢的部分。

有條件地載入 Web 元件 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>

透過 Sense 等工具執行所有 HTML 匯入,可大幅提升網路效能。

聚合物報告資訊卡需要改善

Sense 會將匯入內容串連為單一套件,「大幅」減少應用程式發出的 HTTP 要求數量。

離線

不過,光是建構高效能應用程式並不能解決連線速度極差或完全沒有使用者的困境。也就是說,如果您的應用程式無法在離線狀態下運作,那就不是行動應用程式。您現在可以使用極為協調的應用程式快取來離線資源,但在未來,Service Worker 應該很快就會提升離線開發體驗。

Jake Archibald 最近發布了一本精美的 Service Worker 模式教戰手冊,以下將先說明相關事項,協助你快速上手:

安裝 Service Worker 非常簡單,建立 worker.js 檔案,並在應用程式啟動時註冊該檔案。

聚合物報告資訊卡需要改善

請務必在應用程式的根目錄中找到 worker.js,這樣系統才能攔截來自應用程式任何路徑的要求。

在工作站的安裝處理常式中,我會快取資源 (包括提供應用程式使用的資料) 的載物。

聚合物報告資訊卡需要改善

這可讓應用程式在離線狀態下,為使用者提供至少備用體驗。

開始!

網頁元件是網路平台的一大助力,而且仍在發展階段。隨著越來越多的瀏覽器問世,開發人員社群必須設法找出建構應用程式的最佳做法。上述解決方案只是做為我們開始的起點,但仍然有許多值得學習的地方。一起打造出更優質的應用程式!