網路元件:推動網路運作的秘密要素

2019 年 I/O 大會 Web 元件

Arthur Evans

在 2019 年 Google I/O 大會上,Polymer Project 與 Caridy Patiño 的 Kevin Schaaf 暢談 Web 元件的狀態。

如果你今天用過網路,或許也用過網頁元件。根據我們的計數,目前所有網頁載入約佔網頁載入量的 5% 到 8% 之間會使用一或多個網頁元件。因此,網路元件是過去五年內最成功的全新網路平台功能之一。

這張圖表顯示 8% 的網站使用 v1 自訂元素。這個圖顯示 v0 自訂元素的 5% 高點。

您可以在常用的網站 (例如 YouTube 和 GitHub) 找到網頁元件。許多用 AMP 製作的新聞和發布網站也會使用這種 Cookie,AMP 元件也是網路元件。而許多企業也會採用網路元件。

什麼是網頁元件?

那麼網頁元件是什麼?網頁元件規格提供一組低階 API,可讓您擴充瀏覽器內建的 HTML 代碼組合。網頁元件提供以下功能:

  • 建立元件的常用方法 (使用標準 DOM API)。
  • 接收和傳送資料的常見方式 (使用屬性/事件)。

因此除了標準介面外,這些標準並未說明元件實際實作方式:

  • 用來建立 DOM 的轉譯引擎。
  • 如何根據屬性或屬性變更自行更新。

換句話說,網頁元件會告訴瀏覽器製作元件的「時機」和「位置」,但與「做法」無關。

作者可以選擇功能化的轉譯模式 (例如 React),藉此建構網頁元件,也可以使用 Angular 或 Vue 等宣告式範本。身為作者,您可以自由選擇在元件內使用的技術,同時保有互通性。

網頁元件有哪些優點?

網路元件和專屬元件系統之間的主要差異在於互通性。由於其標準介面,您可以在任何使用內建元素 (例如 <input><video>) 的地方使用網頁元件。

因為這類廣告能以真實的 HTML 表示,而且可以透過所有熱門架構呈現。因此,您可以在不限定單一架構的情況下,在更多類型的應用程式中更廣泛地使用元件。

由於元件介面為標準版本,因此運用不同程式庫實作的網頁元件,可以在同一個頁面上混用。這項資訊可協助您更新技術堆疊,確保應用程式與時俱進。您不必逐一更換架構,而是一次更新一個元件,不必在架構之間大幅更改。

誰在使用網頁元件?

因此,基於上述所有原因,網頁元件實際上在各種使用情境下都能獲得極大的成功。以下三種用途特別受歡迎:內容網站、設計系統和企業應用程式。

內容網站

網頁元件是循序漸進的完美技術,因為許多 CMS 系統都可將網頁元件以標準 HTML 格式輸出。

AMP 就是很好的例子,您可以瞭解網頁元件如何快速輕鬆地排入發布產業的基礎架構中,以便提供內容。

設計系統

越來越多的公司開始利用設計系統統一自己的呈現方式,這一套元件和指南能定義公司網站和應用程式的常見外觀和風格。網頁元件也非常適合在這裡。

Material Design 首頁 https://material.io。

設計人員通常需要與許多團隊討論,在 React、Angular 及其他所有架構的基礎上,建構自己的設計系統元件版本,而不是使用一組標準元件。

網頁元件就是答案。我們只需要編寫一次,即可在任何地方執行元件系統,但應用程式團隊仍可自由運用自己選擇的架構

ING、EA 和 Google 等公司都在網頁元件中實作自家公司的設計語言,

Enterprise:Salesforce 的網頁元件

網頁元件也在企業內部也取得相當卓越的進展,成為一套安全且符合未來趨勢的技術,可用於標準化。Salesforce 使用者介面平台架構師 Caridy Patiño,說明他們為何用網頁元件建構使用者介面平台。

Salesforce 是一組應用程式,其中許多都是來自收購的應用程式。每種方法都可以用各自的技術堆疊執行。因為這些元件建置在不同的堆疊上,因此很難讓它們獲得相同的外觀和風格。此外,Salesforce 讓客戶能透過 Salesforce 平台自行建構自訂應用程式。因此,在理想情況下,外部開發人員也應能使用這些元件。

Salesforce 根據自家平台客戶找出了下列一系列需求:

  • 標準解決方案 (而非專屬解決方案) 可讓您更輕鬆地找到經驗豐富的開發人員,並能更快適應新的開發人員規模。
  • 常見的元件模型:因此,自訂任何 Salesforce 應用程式的運作方式都相同。

同時也發現客戶「不喜歡」的部分:

  • 元件和應用程式的破壞性變更。換句話說,您必須確保回溯相容性。
  • 使用舊技術,無法與時俱進。
  • 困在圍牆內的花園中。

我們以網頁元件做為新版 UI 平台的基礎,能夠滿足上述所有需求,最終成果為新的 Lightning Web 元件

開始使用網頁元件

提供許多協助您開始使用網頁元件的方式。

如要建構網頁應用程式,請考慮使用許多現成的網路元件。以下提供幾個例子謹供參考:

  • Google 將自己的 Material Design 系統設計成網頁元件:Material Web 元件
  • 有線元素是一組很酷的網頁元件,擁有令人不安的手繪外觀。
  • 您可以使用 <model-viewer> 等特殊用途的網頁元件,將其置入任何應用程式以新增 3D 內容。

如果你為公司開發設計系統,或想提供可在任何環境中使用的單一元件或程式庫,請考慮使用網頁元件編寫元件。您可以使用內建的網頁元件 API,但這類 API 非常低階,因此有很多程式庫可用,可讓您簡化整個程序。

如要開始建構自己的元件,請參考 Google 開發的網路元件基礎類別 LitElement,其功能與 React 的相似,可提供良好的轉譯體驗。

其他應考慮使用的工具和程式庫:

  • Stencil 是以網頁元件為優先的架構。內含多個熱門架構功能,例如 JSX 和 TypeScript
  • Angular Elements 可讓您將 Angular 元件包裝為網頁元件。
  • Vue.js 網頁元件包裝函式可讓您將 Vue 元件封裝為網頁元件。

其他資源:

  • open-wc.org 提供實用的入門資訊,以及有關建構和開發工具的提示和預設設定。
  • 網站基礎知識提供基本網路元件 API 入門介紹,以及設計網路元件的最佳做法。
  • MDN 提供網路元件 API 的參考文件,以及一些教學課程。\

主頁橫幅由 Jason Tuinstra 在 Unsplash 上。

編輯者附註:更新自訂元素用量圖表,可顯示 chromestatus.com 回報的完整每月用量資料。本文的前一版文章包含按 6 個月精細程度顯示的圖表,且不包含最近幾個月的圖表。原始圖表中的 V0 和 V1 系列已堆疊;現在會以未堆疊的方式顯示這些序列,以消除模稜兩可的情況。由於 chromestatus.com 的資料收集系統有所變更,2017 年底會突然跳轉。這項異動會影響所有網路平台功能的統計資料,日後也能產生更準確的評估結果。