微軟的 Edge 瀏覽器團(tuán)隊(duì)正在努力用原生 Web 平臺(tái)組件替換 React UI 組件。我們與團(tuán)隊(duì)負(fù)責(zé)人進(jìn)行了交談。

譯自How Microsoft Edge Is Replacing React With Web Components，作者 Richard MacManus。

當(dāng)微軟 Edge 瀏覽器團(tuán)隊(duì)發(fā)布 WebUI 2.0時(shí)，該項(xiàng)目旨在用原生web components替換 React 組件，其主要目標(biāo)是讓 Edge 瀏覽器對(duì)最終用戶來(lái)說(shuō)更快。核心思想是采用“標(biāo)記優(yōu)先架構(gòu)”將減少產(chǎn)品對(duì) JavaScript 的依賴，這意味著客戶端需要處理的代碼更少，從而為用戶提供更好的體驗(yàn)。

為了了解 WebUI 2.0 項(xiàng)目的進(jìn)展，包括項(xiàng)目的靈感來(lái)源和最終目標(biāo)，我采訪了Andrew Ritz，他是微軟 Edge 基礎(chǔ)團(tuán)隊(duì)的負(fù)責(zé)人。

但首先，讓我們快速澄清一下什么是 web components。社區(qū)網(wǎng)站 WebComponents.org將其描述為“一組 Web 平臺(tái) API，允許您創(chuàng)建新的自定義、可重用、封裝的 HTML 標(biāo)簽，以便在網(wǎng)頁(yè)和 Web 應(yīng)用程序中使用?！?Ritz 在建議自己的團(tuán)隊(duì)如何處理這種 Web 開發(fā)范式時(shí)這樣說(shuō)：“任何時(shí)候你想做一個(gè)新的控件，并且發(fā)現(xiàn)自己正在編寫 JavaScript 代碼，請(qǐng)暫停，停止，與高級(jí)工程師交談，并詢問(wèn)如何用 HTML 和 CSS 解決這個(gè)問(wèn)題？”

為什么微軟 Edge 決定放棄 React？

Ritz 表示，他的團(tuán)隊(duì)的目標(biāo)是在今年年底之前將 Edge 中大約 50% 的現(xiàn)有基于 React 的 Web UI 轉(zhuǎn)換為 web components。

但這個(gè)項(xiàng)目的動(dòng)力是什么？為什么他們決定需要在 Web 界面中遠(yuǎn)離 React？Ritz 解釋說(shuō)，這源于他們觀察到 Edge 瀏覽器“Web 桌面”團(tuán)隊(duì)收到的工作請(qǐng)求——“包括外部請(qǐng)求，以幫助改進(jìn) Chromium 項(xiàng)目，以及內(nèi)部請(qǐng)求?！?/p>

“…我們 [微軟] 采用了 React 框架，并且我們可能以最糟糕的方式使用了 React?！?/p>

– Andrew Ritz，微軟 Edge 基礎(chǔ)團(tuán)隊(duì)合作伙伴總經(jīng)理

后者的一個(gè)例子是 Excel 網(wǎng)頁(yè)應(yīng)用程序，它使用 Canvas 元素。因此，他們必須考慮的一個(gè)問(wèn)題是，“我們?nèi)绾尾拍芴岣?Canvas 的性能？” HTML<canvas>元素用于通過(guò)腳本動(dòng)態(tài)繪制圖形——通常使用 JavaScript 完成。

為了幫助 Web 桌面團(tuán)隊(duì)處理此類請(qǐng)求，Ritz 希望采用更“有主見的方法”，這也將解決 Web 應(yīng)用程序速度慢等問(wèn)題。

“因此，我們開始查看內(nèi)部所有使用 Web 技術(shù)的地方——也就是我們所有的內(nèi)部 Web UI——并意識(shí)到它們的速度真的慢得無(wú)法接受?！?/p>

為什么它們速度慢？答案是：React。

“我們意識(shí)到，我們的性能，尤其是在低端機(jī)器上，非常糟糕——這是因?yàn)槲覀儾捎昧?React 框架，并且我們可能以最糟糕的方式使用了 React?！?/p>

隨著越來(lái)越多的團(tuán)隊(duì)使用 React 來(lái)構(gòu)建 UI，微軟內(nèi)部對(duì) React 的使用隨著時(shí)間的推移不斷增加。因此，該公司最終得到了“一個(gè)巨大的捆綁包，每個(gè)人都依賴它”，Ritz 說(shuō)。這是 Web 應(yīng)用程序之間捆綁包依賴關(guān)系的一團(tuán)糟。

“這是一種糟糕的體驗(yàn)，尤其是在低成本、低端機(jī)器上，”Ritz 說(shuō)?！拔覀兛吹絾?dòng)時(shí)間長(zhǎng)達(dá)數(shù)秒，而這本該是本地化的。這真是，你知道，令人震驚?！?/p>

Edge Web UI

Ritz 說(shuō)，Edge 本身有 50 到 100 個(gè) Web UI，“每個(gè) UI 都像一個(gè)小的 Web 應(yīng)用程序。” 在 Web UI 2.0 項(xiàng)目開始之前，大約三分之二的 Edge Web UI 是用 React 構(gòu)建的。有趣的是，Edge 團(tuán)隊(duì)最初使用 React 的目的是為了與 Chrome 區(qū)分開來(lái)。

“該團(tuán)隊(duì)在將 Edge 移植到 Chromium 的過(guò)程中，決定，好吧，我們需要添加一些 UI 區(qū)別——與 Chrome 不同——因此，在這個(gè)過(guò)程中，他們進(jìn)行了這種大規(guī)模的 React 轉(zhuǎn)換?！?/p>

因此，當(dāng)前的 Web UI 2.0 項(xiàng)目在某種程度上是對(duì) Edge 上完成的原始開發(fā)工作的回溯。

Ritz 的工程團(tuán)隊(duì)負(fù)責(zé)其中一個(gè) React Web UI：“瀏覽器擴(kuò)展”。當(dāng)您使用 Edge 時(shí)，它可以通過(guò)點(diǎn)擊瀏覽器欄中的心形圖標(biāo)激活，這會(huì)打開一個(gè)側(cè)邊欄。然后，它成為測(cè)試平臺(tái)，用于查看使用 web components 替換 React 組件可以為該 UI 帶來(lái)哪些性能改進(jìn)。

Edge 瀏覽器要點(diǎn)（右側(cè)）

Web Components 太難了嗎？

最近，社交媒體上又爆發(fā)了一場(chǎng)關(guān)于 Web 組件與框架組件的爭(zhēng)論。SolidJS JavaScript 框架的創(chuàng)建者Ryan Carniato發(fā)表了一篇博文，標(biāo)題頗具挑釁意味，名為“Web 組件并非未來(lái)”。他的主要觀點(diǎn)是，像 SolidJS 這樣的框架在某些情況下比 Web 組件能做更多的事情，而且更容易實(shí)現(xiàn)。他將 Web 組件斥為“徹頭徹尾的妥協(xié)”。

針對(duì) Carniato 的觀點(diǎn)，Shoelace的創(chuàng)建者 Cory LaViska 反駁道，Web 組件提供了穩(wěn)定性和互操作性。

“真正發(fā)布軟件的人已經(jīng)厭倦了框架的不斷變化，”LaViska 寫道?！八麄儏捑肓松蟼€(gè)月寫的代碼現(xiàn)在已經(jīng)過(guò)時(shí)了。他們想要穩(wěn)定性。他們希望知道他們今天構(gòu)建的東西明天還能用?！?/p>

LaViska 還指出，Web 組件并非能做到框架組件的所有功能，“因?yàn)樗鼈兪腔ゲ僮髟氐母图?jí)實(shí)現(xiàn)”。

這是一種在社交媒體上無(wú)休止地進(jìn)行的開發(fā)者辯論——它現(xiàn)在已經(jīng)從每日信息流中消失了，但你可以肯定它會(huì)在一個(gè)月或兩個(gè)月后卷土重來(lái)。無(wú)論如何，我問(wèn) Andrew Ritz 他的工程團(tuán)隊(duì)是如何適應(yīng) Web 組件的，以及它們是否像一些批評(píng)者聲稱的那樣難以部署。

“我們的方法實(shí)際上是說(shuō)，讓我們盡可能多地使用內(nèi)置的結(jié)構(gòu)，”他回答道。“所以盡可能多地使用瀏覽器中存在的內(nèi)置元素，這樣做并沒有那么糟糕?！?/p>

“……努力使 Web 組件表現(xiàn)良好確實(shí)是一個(gè)問(wèn)題。”

– Ritz

Ritz 指出，Edge 開發(fā)人員可以使用微軟自己的Fluent UI 框架，該框架包含 React 組件和 Web 組件（以及其他類型的組件，例如針對(duì) iOS 和 Android 的移動(dòng)端組件）。但他承認(rèn)，即使使用公司范圍內(nèi)的框架來(lái)實(shí)現(xiàn) Web 組件也并非易事。

“有些情況下，[一個(gè)] 內(nèi)置控件需要大量的工作——你知道，它在 polyfill 上很重，或者類似的東西——我們永遠(yuǎn)、永遠(yuǎn)不會(huì)需要。所以努力使它們表現(xiàn)良好確實(shí)是一個(gè)問(wèn)題。”

在 Ritz 所謂的 Web 組件“開發(fā)敏捷性”（其他人可能稱之為“開發(fā)者體驗(yàn)”）方面，他說(shuō)“我們實(shí)際上看到了一些相當(dāng)不錯(cuò)的改進(jìn)”。例如，能夠?qū)Ｗ⒂?HTML 和 CSS 意味著開發(fā)人員和設(shè)計(jì)師之間能夠更好地協(xié)調(diào)——因?yàn)樗麄兪褂玫氖窍嗤恼Z(yǔ)言。

“通過(guò)我們[開發(fā)人員]專注于使用 HTML 和 CSS，我們實(shí)際上消除了整個(gè)翻譯層，這樣就不用有人[在開發(fā)團(tuán)隊(duì)中]去處理線框圖并將其轉(zhuǎn)換為其他東西。[…] 因此，這[曾經(jīng)]是我們開發(fā)人員生產(chǎn)力的一個(gè)巨大障礙，而我們消除了整個(gè)循環(huán)?！?/p>

關(guān)于 Web 組件的廣泛采用

可以公平地說(shuō)，微軟的瀏覽器團(tuán)隊(duì)比一般的 Web 開發(fā)團(tuán)隊(duì)更容易實(shí)現(xiàn) Web 組件。除了可以使用微軟的 Fluent UI 框架之外，Edge 團(tuán)隊(duì)還在構(gòu)建一個(gè)軟件產(chǎn)品，該產(chǎn)品只需要滿足一個(gè)瀏覽器的需求：它自己的瀏覽器。而幾乎所有其他 Web 開發(fā)團(tuán)隊(duì)都必須確保他們的產(chǎn)品可以在各種不同的瀏覽器上使用：從 Chrome 到 Edge，再到 Safari、Firefox 等等。

“我們可能更容易一些，因?yàn)槲覀兛梢哉f(shuō)我們只依賴 Edge 來(lái)處理本地事務(wù)，”Ritz 這樣解釋道?！斑@可以看作是[現(xiàn)代]最新 Web 的真實(shí)體現(xiàn)。而網(wǎng)站所有者——天哪，他們可能被迫支持 Safari 或者其他不支持我們想要使用的一半結(jié)構(gòu)的東西……這會(huì)帶來(lái)復(fù)雜性?！?/p>

“如果我們能說(shuō)服微軟內(nèi)部一些較大的非 Web 組件網(wǎng)站遷移過(guò)來(lái)，那將是一個(gè)很好的證明。”

– Ritz

也就是說(shuō)，微軟的意圖是將一些 WebUI 2.0 包作為開源發(fā)布——以及一套“Web 平臺(tái)模式”。然而，Ritz 指出，許多外部開發(fā)人員可能不想完全按照相同的方式做事——例如，許多開發(fā)人員會(huì)想要選擇與 Fluent UI 不同的樣式框架。但至少，Ritz 的團(tuán)隊(duì)將能夠?yàn)槠渌颂峁皩W(xué)習(xí)模式”。

一個(gè)中間步驟可能是嘗試說(shuō)服其他微軟 Web 產(chǎn)品遷移到 Web 組件?！拔也恢牢④浧渌块T會(huì)怎么做，”Ritz 說(shuō)?！拔覀儯‥dge 團(tuán)隊(duì)）想把我們的房子打掃干凈，比如 […] 一個(gè)公共庫(kù)等等。但我認(rèn)為，如果我們能說(shuō)服微軟內(nèi)部一些更大的非 Web 組件網(wǎng)站遷移過(guò)來(lái)，這將是一個(gè)很好的證明。”

但他補(bǔ)充說(shuō)，他們對(duì)外部合作伙伴持開放態(tài)度，以幫助引領(lǐng)后 React 時(shí)代的發(fā)展。

“如果我們能找到一個(gè)有意義的外部合作伙伴，他們?cè)敢馀c我們合作——我們當(dāng)然會(huì)很高興。”