2019 年 I/O 大會 Web 元件
在 2019 年 Google I/O 大會上,Polymer Project 與 Caridy Patiño 的 Kevin Schaaf 暢談 Web 元件的狀態。
網頁元件的熱門程度如何?
如果你今天用過網路,或許也用過網頁元件。根據我們的計數,目前所有網頁載入約佔網頁載入量的 5% 到 8% 之間會使用一或多個網頁元件。因此,網路元件是過去五年內最成功的全新網路平台功能之一。
您可以在常用的網站 (例如 YouTube 和 GitHub) 找到網頁元件。許多用 AMP 製作的新聞和發布網站也會使用這種 Cookie,AMP 元件也是網路元件。而許多企業也會採用網路元件。
什麼是網頁元件?
那麼網頁元件是什麼?網頁元件規格提供一組低階 API,可讓您擴充瀏覽器內建的 HTML 代碼組合。網頁元件提供以下功能:
- 建立元件的常用方法 (使用標準 DOM API)。
- 接收和傳送資料的常見方式 (使用屬性/事件)。
因此除了標準介面外,這些標準並未說明元件實際實作方式:
- 用來建立 DOM 的轉譯引擎。
- 如何根據屬性或屬性變更自行更新。
換句話說,網頁元件會告訴瀏覽器製作元件的「時機」和「位置」,但與「做法」無關。
作者可以選擇功能化的轉譯模式 (例如 React),藉此建構網頁元件,也可以使用 Angular 或 Vue 等宣告式範本。身為作者,您可以自由選擇在元件內使用的技術,同時保有互通性。
網頁元件有哪些優點?
網路元件和專屬元件系統之間的主要差異在於互通性。由於其標準介面,您可以在任何使用內建元素 (例如 <input>
或 <video>
) 的地方使用網頁元件。
因為這類廣告能以真實的 HTML 表示,而且可以透過所有熱門架構呈現。因此,您可以在不限定單一架構的情況下,在更多類型的應用程式中更廣泛地使用元件。
由於元件介面為標準版本,因此運用不同程式庫實作的網頁元件,可以在同一個頁面上混用。這項資訊可協助您更新技術堆疊,確保應用程式與時俱進。您不必逐一更換架構,而是一次更新一個元件,不必在架構之間大幅更改。
誰在使用網頁元件?
因此,基於上述所有原因,網頁元件實際上在各種使用情境下都能獲得極大的成功。以下三種用途特別受歡迎:內容網站、設計系統和企業應用程式。
內容網站
網頁元件是循序漸進的完美技術,因為許多 CMS 系統都可將網頁元件以標準 HTML 格式輸出。
AMP 就是很好的例子,您可以瞭解網頁元件如何快速輕鬆地排入發布產業的基礎架構中,以便提供內容。
設計系統
越來越多的公司開始利用設計系統統一自己的呈現方式,這一套元件和指南能定義公司網站和應用程式的常見外觀和風格。網頁元件也非常適合在這裡。
設計人員通常需要與許多團隊討論,在 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 年底會突然跳轉。這項異動會影響所有網路平台功能的統計資料,日後也能產生更準確的評估結果。