React 框架終于成熟了

React 在 MVC 中經(jīng)常被稱為“V”，它既受益又受困于缺乏固執(zhí)己見的框架。多年過去了，我們還沒有看到這個(gè)行業(yè)在一個(gè)堆棧、體系結(jié)構(gòu)或工具鏈上聯(lián)合起來。盡管這種靈活性無疑有助于其普及，但 2021 年可能是我們最終看到此類框架走向成熟的一年。

[[380726]]

在過去的一年里，Vercel 公司繼續(xù)在 React 領(lǐng)域占據(jù)主導(dǎo)地位，不斷完善其框架，Next.js 以及他們自成一套的服務(wù)，同時(shí)推出了一個(gè)電子商務(wù)初學(xué)者工具包和一個(gè)分析工具：

• https://nextjs.org/commerce
• https://nextjs.org/analytics

并舉辦了他們最大的虛擬會(huì)議。雖然 Next 已經(jīng)出現(xiàn)了很長(zhǎng)一段時(shí)間，造好輪子并經(jīng)過了很久的實(shí)踐，但功能大而全的方式并不適用于所有人(譯者注，原文 batteries-included，這個(gè)詞語源自 Python 語言，指官方發(fā)行版 CPython 自帶了相當(dāng)齊全的軟件庫，拿來就可以直接寫程序，一般不需要再去安裝額外的庫，類似買一個(gè)電動(dòng)玩具里面自帶了電池一樣，拆開后簡(jiǎn)單裝配即可使用)，但是去年最終發(fā)布的 v10，穩(wěn)定性出人意料，最終采用了子路徑路由：

https://www.nextjs.cn/docs/advanced-features/i18n-routing

[[380727]]

Vercel 公司正努力通過他們最新的主題演講來宣傳產(chǎn)品，包括“drops”。

https://nextjs.org/blog/next-10

今年，新的閉源 React 框架 Remix 悄無聲息地推出了“支持者預(yù)覽版”。Remix 由社區(qū)中的兩位大牛 Jackson 和 Florence 創(chuàng)建，他們成名于 React Router，采取了不同于 Next 的方法——既有商業(yè)模式(每年收取一筆不多的許可費(fèi))也有體系概念(Remix 是一個(gè)產(chǎn)品，而不是一個(gè)平臺(tái))。Remix 承諾將利用更傳統(tǒng)的技術(shù)，比如積極的 Http 緩存，重新關(guān)注基本網(wǎng)頁，而不是傾向于靜態(tài)頁面生成。

https://remix.run/features

現(xiàn)在還為時(shí)過早——Remix 要到明年才能正式推出——而且不太可能實(shí)現(xiàn)像 Ember 這樣的一體化工具。盡管如此，在這個(gè)長(zhǎng)期停滯不前的領(lǐng)域看到事態(tài)發(fā)展還是讓人耳目一新。

DOM 容器查詢

(譯者注，這里的容器是頁面 DOM 容器，不是另一個(gè)完全不相干的 docker 容器)對(duì)容器查詢的需求已經(jīng)達(dá)到了狂熱的程度。隨著谷歌最終宣布他們的原型計(jì)劃，2021 年可能是我們第一次看到。

https://groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI/m/wrJb-unhAgAJ?pli=1

與此同時(shí)，越來越多地采用固有的網(wǎng)頁設(shè)計(jì)：

https://www.browserlondon.com/blog/2019/08/19/should-we-still-be-selling-responsive-web-design

結(jié)合 CSS 的 min/max/clamp 和 JS 的 ResiveObserver 等 API，提供了更好的“偽裝”方法。這類實(shí)現(xiàn)越來越多(甚至可能是危險(xiǎn)的?)在過去的幾個(gè)月里，很難想象這種趨勢(shì)會(huì)在明年停止。

譯者注，ResiveObserver 是一個(gè)試驗(yàn)特性，類似 document.onresize，ResiveObserver 可以監(jiān)聽到 Element 的內(nèi)容區(qū)域或 SVGElement 的邊界框改變。避免了在自身回調(diào)中調(diào)整大小，從而觸發(fā)無限回調(diào)和循環(huán)依賴。僅通過在后續(xù)幀中處理 DOM 中更深層次的元素來實(shí)現(xiàn)這一點(diǎn)。詳見：

https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

我希望我們能看到更聰明的方法來接近容器的第一個(gè)設(shè)計(jì)，如 Mathias 的 Raven 和 Heydon 的 Watched Box。

WASM 爆炸

WebAssembly 的發(fā)展很緩慢，這在很大程度上是因?yàn)樗珜I(yè)了(“如果需要它，你會(huì)知道的”)。然而，到 2021 年，我們可能會(huì)看到這種轉(zhuǎn)變。

隨著前端開發(fā)人員的角色逐漸向“全棧”領(lǐng)域發(fā)展，我們開始看到更多的工程師采用較低級(jí)別的系統(tǒng)語言，比如 Rust，盡管 Mozilla 裁員后出現(xiàn)了最初的不確定性，但 Rust 目前正受到空前的熱捧：

https://twitter.com/nadavrot/status/1319003839018614784

因此，我們看到了基于 WASM 的解決方案，如 Yew 和 Seed.rs 進(jìn)入前端框架。得益于 Rust 提供的性能和安全性，2021 年很可能是 WASM 出現(xiàn)大規(guī)模繁榮的一年。

https://wingolog.org/archives/2020/10/15/on-binary-security-of-webassembly

我們離這些大公司關(guān)注的熱點(diǎn)還有很長(zhǎng)一段路，但我相信 2021 年采用率會(huì)激增。

快要達(dá)成一致了

(譯者注，原文 monolith，巨石，單一龐大的組織，這里是前端采用的技術(shù)棧可以達(dá)成一致)業(yè)界對(duì)分布式服務(wù)和精心劃分責(zé)任的熱愛仍在繼續(xù)，已經(jīng)超越了后端(比如微服務(wù) https://www.browserlondon.com/blog/2019/07/01/do-you-need-microservices)，并在 2019 年達(dá)到了頂峰，推出了微前端(同樣受到詬病和喜愛的)。Unix 哲學(xué)的體系結(jié)構(gòu)方法繼續(xù)受到限制，至少在技術(shù)報(bào)告和媒體文章領(lǐng)域是如此。

在過去的幾年中，微服務(wù)的廣泛使用使得諸如 Backend For Frontend 之類的模式成為必要，它在每個(gè)客戶機(jī)和為其提供服務(wù)的 API 之間引入了一個(gè)中介。

-BFF 充當(dāng)“粘合劑”，是客戶端的單一聯(lián)系點(diǎn)。這允許使用該服務(wù)的客戶端變得一致(并且非常適合)。

考慮到目前對(duì) JAMStack 的興趣，這一點(diǎn)在 2021 年尤為重要，JAMStack(譯者注，JAMStack 是新興的技術(shù)概念，區(qū)別于以往服務(wù)器端渲染，而是采用 JS 腳本、API 服務(wù)接口、Markup 模版，通常直接使用 CDN 分發(fā)靜態(tài)的頁面，完全不需要渲染頁面，網(wǎng)站的伸縮性、穩(wěn)定性可以得到最大的保障。)最為復(fù)雜，受到服務(wù)依賴的影響：

• https://www.browserlondon.com/blog/2020/04/20/issues-with-jamstack-you-might-need-backend
• https://www.browserlondon.com/blog/2020/09/02/dependency-hell-how-to-avoid-it

有趣的問題，“如何組裝我的 API”的答案是：構(gòu)建一個(gè)。

2021 年會(huì)看到使用 BFF 技術(shù)的有所增加，但如果運(yùn)氣好的話，我們也可能會(huì)看到它逐漸回歸到巨石陣，或者至少會(huì)以更大的“宏觀服務(wù)”：

https://twitter.com/GergelyOrosz/status/1247132806041546754

或諸如城堡之類的妥協(xié)形式緩慢撤退：

https://m.signalvnoise.com/the-majestic-monolith-can-become-the-citadel

毫無疑問，Basecamp 的 DHH，這位“雄偉”巨石最有力的支持者(他最近推出了另一款傳統(tǒng)的網(wǎng)絡(luò)應(yīng)用 Hey)將領(lǐng)導(dǎo)這次行動(dòng)。

總結(jié)

有趣的是，前端最大的發(fā)展方向不太可能是通常的關(guān)注點(diǎn)。早在我們 2019 年的預(yù)測(cè)中，我們就注意到，前端開發(fā)人員的角色正日益向“全棧”轉(zhuǎn)變，已證明這是事實(shí)。甚至我們的框架和工具的發(fā)展也表明了這一點(diǎn)，我們?cè)絹碓疥P(guān)注數(shù)據(jù)獲取、并發(fā)性、安全性和可伸縮性。

這是一個(gè)自然的交匯點(diǎn)，前端工程師面臨著越來越多的“后端”問題，而工具和服務(wù)正變得足夠復(fù)雜，以降低進(jìn)入壁壘。這是一場(chǎng)完美的風(fēng)暴，我希望它能持續(xù)到 2021 年。