CSDN 編者按】這是一篇由 Ryan Carniato 于2023年12月29日發表的關于「2024年JavaScript 框架發展趨勢」的文章。作者認為 2023 年是 JavaScript 框架發展的重要一年，預計 2024 年將繼續看到更大的變化，其中包括服務器優先、混合路由、邊緣網絡和人工智能等方面的發展。此外，2024年可能會繼續加強框架的成熟化趨勢。作者對于簡化方案，如 Astro 和 HTMX，仍然持樂觀態度，并期待框架能夠更好地履行其承諾，專注于提供更有力的解決方案，減少復雜性。
作者 | Ryan Carniato 責編 | 夢依丹
歲末年初，恰逢年度總結時刻。不少開發者也在積極參加 CSDN 舉行的年度征文活動——2023年，我的編程之旅。曬出自己過去一年的技術成就與所在領域的技術變化，GET 到的新功能、新技術等。
近日，知名前端愛好者，SolidJS UI 庫作者，同時也是 MarkoJS 核心團隊的成員 Ryan Carniato 撰寫了《進入2024 的 JavaScript 框架》，本文總結了 JavaScript 框架在 2023 年的技術趨勢與 2024 年的預期變化。
以下為譯文：
對于 JavaScript 框架來說，2023 年是相當重要的一年。新技術終于展示出了它們的實用性，而舊框架也在卷土重來。如果你沒注意到的話，可能就錯過了一個相當重大的轉變。我預計，2024 年將繼續帶來更大的變化。這一次的重點不再是新技術，而是對現有技術的改進和完善。基礎已經打下，我們有更多的內容可以實現和呈現給用戶。如果要為過去幾年選擇一個主題，那就是"服務器優先"。這個觀點一直備受爭議，但無可否認。短短幾年前，人們都在談論漸進式 Web 應用和離線優先的概念。但是，這種討論幾乎銷聲匿跡。https://twitter.com/htmx_org/status/1725241732260847914相反，HTMX 以其犀利的觀點，解釋了為什么 JavaScript 是一個錯誤。Astro 也毫不掩飾地接管了內容站點開發。甚至 React 核心團隊也接受了服務器的簡潔性，正如 Dan Abramov 在演講中所強有力表達的那樣，他探討了如果 React 一直以服務器為優先會怎樣。那么，我們曾經鐘愛的單頁面應用（Single Page App）在這么短的時間里經歷了什么？它現在是否還存在，我們現在是生活在多頁面應用（Multi-Page App）和只有服務器渲染的 HTML 時代嗎？去年，我也寫了一篇類似的文章，探討 JavaScript 框架的發展趨勢。那篇文章所提到的三大技術趨勢成了過去一年討論的重點。
自從 SolidJS 和 Vue 開始采用反應性原語之后，Preact 和 Qwik 緊隨其后，這種趨勢在 2023 年變得更加強勁。https://github.com/angular/angular/discussions/49090
在二月，Angular 團隊也宣布采用了這一技術。該消息在社交媒體上引起了很大的轟動。不僅如此，這也是導致 Angular 引起重大關注的幾個因素之一。有人甚至稱之為 Angular 的復興。而且，這是過去幾年來 React 團隊首次加入了這場爭論，因為人們開始紛紛問道：“React 何時會采用 Signal 呢？”關于這個問題，我在下面的文章中寫了更詳細的回答（還附有與 Dan Abramov 在中評論的討論）。不過，簡單來說，React 團隊對 Signal 這種 API 并不太感興趣，他們更期待的是「Forget」編譯器，因為它能起到類似的作用。當然，Signal 的應用并沒有到此結束。谷歌的 Web 組件框架 Lit 發布了原生支持信號的 Lit 3。Rich Harris 則透露了 Svelte 的未來發展方向，他們基于 Signal 的新「Runes」將成為即將發布的 Svelte 5 中主要的響應式來源。到 2023 年底，Signal 已經成為大多數前端 JavaScript 框架的重要組成部分。服務器端路由在過去一年中變得越來越重要。從 2022 年底開始，這種模式逐漸被人們所接受，比如使用 React Server Components 和 Astro 的 View Transition API 集成。 它的基本原則是，在初始頁面加載后，服務器端的渲染不應影響客戶端的導航，而客戶端的導航也不應意味著我們需要發送所有的 JavaScript 來渲染那些可以在服務器端靜態渲染的頁面部分。需要注意的是，不同的解決方案產生的效果也不同，這一領域仍在發展之中。我們正在進入一個全新的領域，它既不是傳統的單頁應用程序，也不是傳統的多頁站點。我們需要了解新的權衡和概念。而且，我們還遠沒有解決所有的問題。
邊緣函數似乎是顯而易見的成功案例之一。將服務器靠近最終用戶來大大減少延遲。使用更輕量級的運行時，可以大大減少冷啟動時間。如果說 2023 年有什么不同的話，那就是邊緣技術發展的一年。我們一開始非常熱情。畢竟，Cloudflare 發布了邊緣數據庫，我們所有喜歡的提供商都開始提供邊緣函數，我們最喜歡的框架也添加了開箱即用的支持。供應商已經成立了一個名為 WinterCG 的委員會，來討論平臺的標準化問題。未來就在眼前。
我們最終意識到，即使在這些邊緣函數中，某些 Node API 也是必不可少的。你可以感謝或討厭 Next 和 Vercel 將 AsyncLocalStorage 推廣到每個運行時，但我們需要它。 我們還意識到，邊緣數據庫對于所有應用程序來說永遠是不夠的。即使有流媒體，服務器水瀑仍然真實存在且影響很大。是的，即使使用 React Server Components 也是如此。但這確實推進了我去年提出的目標，即使用分布式部署進行整體創作。我們看到服務器函數（server$，使用 server）甚至像工作器函數這樣的變體在年初就出現了，表明我們可以分布我們部署 API 的方式，被 Solid、Qwik 和 Next 采用。 到年底，Next 14 發布了新的實驗性部分預渲染，允許單個請求從邊緣提供靜態內容，同時通過代理到更靠近數據庫的無服務器函數，所有內容都被流式傳輸，以提供類似于邊緣的體驗，而無需在那里部署整個應用程序。看到一些獨創性提供了兩全其美的解決方案，真是令人敬畏。https://twitter.com/rickhanlonii/status/1722704383064842280
我已經講了很多關于 Signals 的內容，但真正的好處還沒有顯現出來。JavaScript 中已經有了類似 Signals 的細粒度原始函數 15 年了，那為什么是現在呢？https://twitter.com/t3dotgg/status/1730711700805140908
預計 JavaScript 框架將進一步整合 Signal 機制，例如 Vue Vapor 和 Svelte 5 中的新反應性模型。既然服務器端渲染框架已經得到了很大的支持，那么下一個合理的發展方向就是繼續探索如何最大限度地發揮這種新功能的作用。標準的制定比較慢，WinterCG 也需要一些時間，但這并不會阻止發展的勢頭。 為了實現差異化，我預計框架和基礎設施提供商將面臨提供獨特功能的壓力，而這些功能可能僅在特定平臺上可用。雖然 2023 年看到了各提供商在提供類似功能方面的平等化趨勢，例如在基本靜態和函數托管之外提供鍵值存儲 Blob 等功能，但我認為在提供獨特價值方面的競爭將會加劇。 框架的作用是保持一致的創作體驗和思維模型，同時尋找利用新功能的方法。這與 21 世紀初的瀏覽器大戰類似，未來還有很多發展空間。去年，從框架的角度來看，談論人工智能還為時尚早。明年可能也是如此。但它已經漸漸出現在我們的視野中。代碼遷移和生成工具都是很好的想法，但它們與多年來使用的可視化無代碼或低代碼編輯器面臨著同樣的問題。人與機器的交互界面仍然至關重要。畢竟，代碼是一個活生生的存在。它隨著時間的推移不斷生長和維護。在過去的一年里，與其他框架的作者交流時，我們發現人工智能引起了周圍人的極大興趣。https://twitter.com/aidenybai/status/1737616282210738650
人工智能正在回答一個長久以來的問題，那就是為什么你的應用程序運行緩慢。
對開發工具的影響只是其中一方面。我們還越來越多地看到實時性能被融入到框架中。這不僅指的是用于持久化后端的 Websockets。元框架中的 API 已經發展到超越簡單的 JSON，實現了完全流式的跨網絡 JavaScript 執行，這在 SolidStart、Qwik 和 Next 中通過“服務器函數”實現。現在，我們可以很容易地想象出生成技術實時創建你的用戶界面的情景。https://twitter.com/mhevery/status/1722928972789408240
2024 年可能會延續我們在過去幾年看到的成熟趨勢。從 2020 年到 22 年，我們看到了很多新的 JavaScript（和 WASM）框架（Qwik、Million.js、Astro、Next 13、Remix、Hydrogen、SvelteKit、SolidStart、Leptos、Dioxus、HTMX），但去年的情況發生了改變。不再出現大量新的 JavaScript 框架，相比之下相對較少。然而，我們已經找到了解決問題的方法和途徑。現在的關鍵是要充分發揮這些方法和途徑的潛力，將它們應用到實際開發中，取得更好的效果。我不確定我們是否已經成功地解決了復雜性問題，這給像 Astro 或 HTMX 這樣簡化的解決方案帶來了很大的肯定。但我仍然充滿希望。 也許不太可能期望每個人都對“單頁應用程序”的確切定義以及何時使用各種選項達成一致，但這些解決方案每天都變得更加強大，能夠實現它們既定的目標。現在不再懷疑我們熟悉的Web開發將發生變化。即使方向還不完全明確，革命已經來臨。期待與你一同見證這一變革。969后，托德尼爾遜提出超文本的概念，IBM公司的Charkes Goklfard等設計出了通用記語言-GML。到1978年，美國國家標準局一工作組對GML 進行了規范，推出了命名為SGML的通用標記語言。1980年，ISO正式確定SGML為描述各種電子文件結構及內容的國際通用標準。
1990年，Tim Berners-Lee將他設計的初級瀏覽和編輯系統在網上合二為一，創建了一種快速小型的超文本語言來為他的想法服務。他設計了數十種乃至數百種未來使用的超文本格式，并想象智能客戶代理通過服務器在網上進行輕松談判并翻譯文件。它同Macintosh的Claris XTND系統極為相似，不同的是它可以在任何平臺和瀏覽器上運行。
最初的HTML語言以文字格式為基礎，可以用任何編輯器和文字處理器來為網絡創建或轉換文本，僅有不多的幾個標簽。網絡從此迅猛發展，人們開始在網上發布信息。很快人們就開始琢磨在網上放置圖像和圖標。
1993 年，NCSA推出了Mosaic，也就是第一個圖文瀏覽器，從此 Web開始迅速地發展起來。HTML語言也不斷產生新型、功能強大且生動有趣的標簽形式，例如<background>、<frame>、<font>和<blink>等。
但是此時，出現了許多不同的HTML版本，而只有設計者和用戶共有的HTML部分才可以正確的顯示。因此在這段時間，W3C都在激烈爭論名叫HTML3的新技術，該文件概括了所有全新的特性，沒有任何技術支持。出于這種混亂局面的考慮，在 1996年，W3C的HTML Working Group組織編寫了新的規范，從此 HTML 3.2開始發展，它更接近于現實的目標，即提供給內容商和瀏覽器發展商在研究工作中一個公允的參考標準。
1997年12月18日，W3C推薦標準：HTML 4.0，1999年12月24日，W3C推薦標準：HTML 4.01（微小改進）。
到現在為止，HTML已經發展到了HTML5版本，HTML5 技術結合了 HTML4.01 的相關標準并革新，符合現代網絡發展要求，在 2008 年正式發布。HTML5將Web帶入一個成熟的應用平臺，在互聯網平臺上，視頻、音頻、圖像、動畫以及與設備的交互都進行了規范。
下篇：前端入門——html 文字格式、標題與段落
者 | Agazi Mekonnen
譯者 | 明知山
策劃 | Tina
最近，Rising Stars 發布了 JavaScript 生態系統趨勢發展報告，根據 GitHub Stars 展示了 2023 年的一些杰出項目。總的來說，最受歡迎的項目是 shadcn/ui。這是一個可用于創建自定義組件的 UI 組件集。JavaScript 運行時 Bun 仍然保持著良好的發展勢頭，成為第二受歡迎的項目。Excalidraw 是一個手繪風格的開源虛擬白板項目，它也變得日益流行。
自從 shadcn/ui 在 GitHub 上第一次提交以來，到現在已經有一年了。該項目是一個可重用的組件集，可以復制和粘貼到應用程序中用于構建組件。這樣就不用安裝庫了。根據 shadcn/ui FAQ 頁面，其理念是：
… 賦予開發人員對代碼的所有權和控制權，允許他們決定如何構建組件以及采用什么樣式。Shadcn/ui 可以與支持 React 的框架一起使用，比如 Next js、Astro、Remix 和 Gatsby。
Bun 在最受歡迎的項目中排名第二。它是一個 JavaScript 運行時、包管理器、測試運行器和打包器，因其速度、效率和全面的工具包而備受關注。Bun 是用 Zig 編程語言開發的，旨在成為 Node.js 的替代品。
在前端框架列表中，React 繼續保有其在 JavaScript 生態系統中的領先地位。其次，作為一個 JavaScript 庫，Htmx 使開發人員能夠僅僅使用 HTML 來創建交互式 Web 應用程序。它使用新屬性擴展了 HTML，它們可以觸發 HTTP 請求和處理響應數據，從而使開發人員不需要編寫的大量 JavaScript 代碼就可以實現現代 Web 應用程序。
在前端框架中排名第三的是 Svelte。Svelte 是一個基于編譯器的前端框架，利用聲明式語法和反應性來構建高性能、可維護的 Web 應用程序。備受期待的 Svelte 5 有望引入重大改進和諸多新特性，進一步增強開發體驗和應用程序性能。
在 Vue 生態系統中，Vue 2 衰落，在努力升級到 Vue 3 后又獲得了 Nuxt、Vuetify 和 PrimeVue 等框架的支持。Nuxt 被評為最受歡迎的 Vue 框架。
Next.js 在后端 / 全棧類別中依然占據主導地位。Next.js 14 于 2023 年發布，最顯著的變化是 Turbopack Optimizations 縮短了頁面初始加載時間，改進了性能，減少了代碼。Server Actions Stability 現在已經穩定，Partial Prerendering（一種預渲染部分應用程序的技術）作為預覽特性引入。Astro 憑借其創新性的靜態網站生成和動態頁面生成能力攀升至榜單前列。
在移動領域，Expo、Tamagui 和 Nativewind 致力于統一 Web 和本地開發體驗，最大化代碼重用，使其更方便 Web 開發人員使用。React Native 保持了它的主導地位，但其愈加獨樹一幟的解決方案表明了移動開發范式的演變。
原文鏈接：https://www.infoq.cn/article/itmVGcHEvphysb9Ad9F7
