2014 年 Chrome 開發人員高峰會 - Let's 使用 Polymer 建構一些應用程式

過去一年來,Polymer 團隊花費許多時間教導開發人員如何建立自己的元素。這造成了一個快速成長的生態系統,大部分將 Polymer 的 Core 和 Paper 元素融入其中,而 Mozilla 團隊所開發的 Brick 元素也包含在內。

隨著開發人員更加熟悉如何自行建立元素,開始思考如何建構應用程式,我們也產生了以下問題:

  • 您應如何建構應用程式的 UI?
  • 如何轉換不同的狀態?
  • 有哪些提高成效的策略?
  • 你該如何提供離線體驗?

在 Chrome 開發人員高峰會期間,我試著打造一個小型聯絡人應用程式,並分析自己當初建構應用程式的過程,藉此回答這些問題。以下是我提出的疑問:

結構

將應用程式拆分為可組合及重複使用的模組化元件,是網頁元件的集中租戶。Polymer 的核心「*」和「迴紋針」元素可讓您輕鬆從紙板工具列紙圖示按鈕等小碎片著手。

Polymer 有助開發人員更快建構應用程式

而透過組合的強大功能,只要將這些元素與任意數量的元素結合在一起,就可以建立應用程式鷹架。

Polymer 讓網頁元件更甜蜜

有了一般 Scaffold 之後,您可以套用自己的 CSS 樣式,將其打造為品牌專屬的體驗。使用元件達成這項目標的好處,就是可以使用相同的應用程式建構基本功能,創造截然不同的體驗。有了 Scaffold,你就能開始思考內容。

一個特別適合處理大量內容的元素,就是 core-list

Polymer 讓網頁元件更甜蜜

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

轉場

根據應用程式設計和實作的各部分,下一個工作將探索如何實際瀏覽這些內容。

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

Polymer 報告資訊卡需要改善

但動畫只剩下一半,應用程式需要將這些動畫與路由器結合,才能妥善管理網址。

網頁元件轉送世界分為兩種版本:命令式和宣告式。視專案需求而定,將 core-animated-pages 與這兩種方法結合可能會有效。

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

Polymer 報告資訊卡需要改善

如果你在某條路線達成後且需要在下個部分完成轉換後執行一些作業,這項功能就能派上用場。

另一方面,宣告式路由器 (例如 app-router) 實際上可將轉送和 core-animated-pages 合併為單一元素,因此這兩者的管理變得更加精簡。

Polymer 報告資訊卡需要改善。

如果您想進行更精細的控制,不妨查看類似更多轉送的程式庫,並且透過資料繫結core-animated-pages結合使用資料繫結,盡可能提供這兩種方式的最佳選擇。

效能

隨著您的應用程式逐漸成熟,您必須留意效能瓶頸,尤其是與網路相關聯的事物,因為這是行動網頁應用程式最慢的部分。

有條件地載入 Web Component polyfills 是輕而易舉的效能。

Polymer 報告資訊卡需要改善

如果平台已具備完整支援,不用支付所有費用!在新版 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 匯入作業,也會使網路獲得顯著提升。

Polymer 報告資訊卡需要改善。

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

離線

然而,僅建構高效能的應用程式並無法解決使用者連線不多或連線能力不足的問題。換句話說,如果您的應用程式無法離線運作,那就不是行動應用程式。現在您可以使用緊密對齊的應用程式快取來離線您的資源,但希望未來,Service Worker 應該很快就能讓離線開發體驗變得更好了。

Jake Archibald 最近發表了一本精彩的服務工作人員模式食譜,但我可以讓您快速上手:

Service Worker 的安裝作業十分容易。建立 worker.js 檔案,並在應用程式啟動時註冊該檔案。

Polymer 報告資訊卡需要改善

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

在工作站的安裝處理常式中,我要快取資源船載 (包括啟動應用程式的資料)。

Polymer 報告資訊卡需要改善

這樣一來,當使用者在離線狀態下存取應用程式時,就能至少為使用者提供備用體驗。

加油!

網頁元件是網路平台新增的一大要素,目前也依然處於繁雜階段。隨著瀏覽器進入更多瀏覽器,開發人員社群將站在開發人員社群,找出架構應用程式的最佳做法。上述解決方案能幫助我們踏出第一步,但目前仍有許多需要學習的資訊。繼續打造更優質的應用程式!