作者 | Nefe Emadamerho-Atori

譯者 | 許學文

策劃 | 丁曉昀

希臘哲學傢赫拉克利特認為，變化是生命中唯一不變的東西。這句話適用於我們的個人生活、行業和職業領域。

尤其是前端開發領域，新技術、開發趨勢、庫和框架不斷湧現，變化並不陌生。最近發生的一些事件正在改變開發人員構建網站和 Web 應用的方式，其中包括支持服務器端渲染的 Angular 17 發佈、Next.js v14 發佈以及 TypeScript 采用增加。

雖然跟上前端生態系統的變化可能具有挑戰性，但作為專業人士，保持技能的更新有助於我們開展工作。想知道明年前端領域會發生什麼變化嗎？那就請繼續閱讀吧。

趨勢一：新的樣式解決方案和組件庫將持續湧現

在 Web 網站樣式方案的選擇上，開發人員可謂是富得流油。除了大量的基於 Angular、React 和 Vue 的組件庫之外，還有 40 種以上的 CSS 框架 和 40 種以上的 CSS-in-JS 庫 可以選擇。

2023 年，我們看到了諸如 Shadcn UI、Ark UI、Panda CSS 和 StyleX（來自 Meta）等新發佈的樣式解決方案。除此之外，還有 Lemon Squeezy 開源的 React UI 庫 Wedges，該庫在本文撰寫的前幾天才剛剛發佈。

隨著開發人員和開源社區不斷分享他們在 UI 設計和網站構建上的獨特方法，將來我們有望看到更多的網站樣式解決方案的出現。

除了新的樣式解決方案會不斷發佈之外，未來以下這些方面也值得我們期待：

1. 現有解決方案的持續更新。
2. CSS-in-JS 解決方案將被拋棄，因為該方案不僅會增加運行時開銷、構建包的大小，還無法很好地與 SSR 配合使用。
3. Open Props 將取代 Tailwind CSS 的寶座。根據 《2023 年 CSS 現態》 這篇文章的數據，開發人員對 Tailwind CSS 的興趣值從 2022 年的 50.1% 下降到了 2023 年的 47%。與此同時，Open Props 的關註度從 2022 年的不到 10% 上升到了 2023 年的 60%。

趨勢二：利用 AI 來增強開發流程

毫不誇張地說，生成式 AI 已經在全球的許多行業中掀起了風暴。它也將徹底改變 Web 開發的現狀和眾多開發人員構建網站的方式。

Vercel 發佈的 v0 就是一個活生生的例子，它是一個基於提示詞生成用戶界面的工具。例如，我們可以通過提示詞讓 v0 創建一個電子商務風格的 dashboard 頁面。下圖就是 v0 的輸出結果。

除了 v0，Vercel 在推動 AI 的應用落地上也是不遺餘力。他們發佈了 AI SDK ，幫助開發者輕松構建 AI 驅動的應用程序。目前該 SDK 每周的 npm 下載量已超過 85000 次，這也是人們在 Vercel 上註冊和創建 API 應用程序的原因之一（譯註：在 Vercel 上，基於其提供的 AI 能力可以很輕松的創建 AI 驅動的應用）。

雖然人工智能不會搶走我們的飯碗，但越來越多的開發人員正將其整合到開發流程中。根據 Retool 的 《2023 年 AI 現狀》 報告，自 2022 年以來，57% 的開發人員減少了對 Stack Overflow 的使用，甚至有 10% 的開發人員因為有了 ChatGPT 和 GitHub Copilot 而不再使用 Stack Overflow。

除了越來越多的開發人員將通過 AI 來簡化開發流程之外，預計會有更多的公司將 AI 集成到自己的產品中，GitHub 的 Copilot 和 Sourcegraph 的 AI 編碼助手 Cody 都是很好的例子。

趨勢三：SSR 和 SSG 兩種框架之間的競爭將會愈演愈烈

近期，服務器端渲染（SSR）和靜態網站生成（SSG）這兩種渲染方法，因在 SEO 和性能方面的優勢而備受關註。隨著越來越多的開發人員和企業出於 SEO 和性能方面的需求而采用 SSR 和 SSG 渲染方案，支持這兩類渲染方式的框架之間的競爭將會愈演愈烈。

最近的一個 SSR/SSG 框架之爭的例子是 Tech Twitter 上對比 Next.js 和 Remix 的話題。先是 Kent C. Dodds 發表了一篇題為 "為什麼我不會使用 Next.js "的文章，隨後作為回應，來自 Vercel 的 Lee Robinson 發表了題為 "為什麼我要使用 Next.js "的文章。

在技術選擇方面，沒有放之四海而皆準的工具，隻有最適合工作的工具。不過，就目前情況來看，可以肯定地說，Next.js "擊敗 "了其他競爭對手。

根據 Stack Overflow 2023 年的調查數據，Next.js 是第六大最受歡迎的 Web 框架，超過了分別排在第 21、24 和 30 位的 Nuxt.js、Gatsby 和 Remix。而根據 Stack Overflow 2022 年的調查數據，Next.js 還隻排在第 11 位。隨著時間的推移，Next.js 的受歡迎程度將會越來越高。

憑借對 RSC（React Server Components）的支持、內置圖片和字體優化以及 Server Actions 等功能，我不認為其他 SSR/SSG 框架能在短期內超越它。不過，隨著這些框架的功能不斷迭代和更新，我們預計這場戰鬥將會繼續下去。

此外，我認為 Astro 將成為繼 Next.js 之後的另一個爆款框架。根據 Netlify 的 《2023 年 Web 開發現狀》 報告，Astro 的使用率和滿意度增長最快。最令人印象深刻的是，它的使用率幾乎翻了一番，使用滿意度也從 2022 年的 4.5 上升到 2023 年的 6.8。

下面是 NPM 提供的這些框架的每周下載數據：

1. Next.js：5,037,121
2. Nuxt：571,196
3. Gatsby：316,779
4. SvelteKit：306,599
5. Astro：197,435
6. Quasar：111,975
7. Remix：22,676

趨勢四：前端、後端和全棧開發之間的界限將越來越模糊

在早期的 Web 開發中，開發人員遵循的原則是 "關註點分離 "。因此，前端、後端和全棧開發人員被分配在了不同的系統和領域中。

然而，隨著時間的推移，這些界限變得越來越模糊：

1. Next.js 提供了 路由處理程序（Route Handlers），它允許我們處理 HTTP 請求、從數據庫獲取數據、運行服務器端邏輯以及執行從數據庫獲取數據等任務。
2. React 18 內置了 RSC（React Server Components），該功能允許我們預渲染應用程序，並在服務器端而不是客戶端進行數據庫查詢，從而進一步模糊了兩者之間的界限。這意味著我們可以直接在 React 組件中編寫數據庫查詢功能。
3. Next.js 還發佈了 Server Actions 功能，該功能允許我們直接在客戶端上定義函數操作服務器上的數據。

除了這些發展之外，諸如 Supabase、Appwrite 和 Xata 等後端即服務（BaaS）解決方案的出現和流行，也讓前端開發人員可以更容易地創建全棧應用程序。借助這些新工具和技術，隨著前端開發人員對後端和全棧開發的不斷探索，我們可以期待更多跨領域專業人才的出現。

趨勢五：越來越多的人關註無障礙性

目前有 超過 10 億人 患有這樣或那樣的殘疾，因此在開發過程中，針對無障礙性的設計不能隻是事後才想到的問題。以下是關註無障礙性帶來的一些好處：

1. 使受眾范圍更廣：無障礙網站可供各種殘疾人士使用，從而大大擴展了其潛在的受眾范圍。
2. 增強 SEO：許多針對無障礙性的實踐可以增強 SEO，使其內容排名更靠前，更容易被找到。
3. 有利於合法合規：許多地區的法律都要求網站具有無障礙性，因此創建無障礙性網站有助於避免觸犯法律和招致罰款。
4. 增強用戶體驗：針對無障礙性功能的設計，通常能改善所有用戶的整體體驗，而不僅僅是殘疾用戶。
5. 積極的品牌形象：對無障礙性的承諾體現了社會責任感和包容性，可以對組織的聲譽產生積極影響。

雖然幾十年來 Web 對無障礙性的支持程度有所提高，但距離我們理想中的完全無障礙 Web 還很遙遠。截至 2022 年，隻有 3% 的互聯網支持殘障人士訪問。雖然這一比例低得令人震驚，但我們看到，在無障礙方面，互聯網正在逐漸且穩步地改善。

通過對 100 萬個網頁進行調研，WebAIM 發佈了 《2023 年無障礙性報告》。該報告顯示，越來越多的開發人員和機構開始逐漸意識到了無障礙性的重要性。以下是報告中的一些統計數據：

1. 自 2022 年以來，ARIA 代碼的使用率增長了 29%，自 2019 年以來增長了近四倍。
2. 100 萬個主頁中有 80% 使用了 ARIA，比 2022 年的 74.6% 有所提高。
3. 89.8% 的主頁采用了有效的 HTML5 doctype，比 2022 年的 86.1% 和 2021 年的 79.1% 都有所增加。

軟件之傢發佈的 《2022 年前沿技術現狀》 顯示，63% 的開發人員預測無障礙性將在未來幾年內得到普及（見下圖）。越來越多的開發人員和企業正在加倍努力提高其網站的無障礙性，在 WebAIM 2024 年的報告中，我們可以期待對無障礙性的控訴會減少，而支持無障礙性的網站會增加。

趨勢六：VS Code 將繼續占據最受歡迎 IDE 的寶座

VS Code 於 2019 年發佈，現已成長為最受歡迎的代碼編輯器之一，可與 Vim、IntelliJ 和 Webstorm 等 IDE 相媲美。Stack Overflow 2023 年的調查數據顯示，VS Code 仍然是最受開發人員歡迎的 IDE。軟件之傢的 2022 年前端現狀調查 也顯示，VS Code 是開發人員最喜愛的代碼編輯器，占比達到了 74.4%。

為什麼開發人員會喜歡 VS Code？以下是一些原因：

1. 它支持 100 多種語言。
2. 它擁有一個龐大的插件市場。諸如 Live Server、React、Next.js Snippets、Live Sass Compiler 以及 HTML End Tag Labels 等最受歡迎的 VS Code 擴展，前端開發人員應該都是耳熟能詳 。
3. 它具有高度可定制性。

VS Code 的更新速度非常快，用戶被頻繁地提示安裝更新就是證明。鑒於其目前的發展速度和軌跡，我們可以期待 VS Code 在 2024 年及未來將不斷迭代和增加其功能，並且將持續保持其作為頭部 IDE 的地位。

趨勢七：將會有更多人使用 TypeScript

雖然在開發生態系統中對是否使用 TypeScript 的看法依然不統一，但支持 TypeScript 的人占多數。事實上，你會看到更多公司和開源社區將他們的代碼庫遷移到 TypeScript。Stripe 就是一個例子，它將其最大的 JavaScript 代碼庫（約 370 萬行的代碼）遷移到了 TypeScript。

Stack Overflow 的開發者調查顯示，TypeScript 的受歡迎程度已從 2022 年的 34.83% 上升到了 2023 年的 38.87%。TypeScript 的使用已經非常廣泛，以至於許多開發人員的文檔中都設置了用於切換 TypeScript 和 JavaScript 代碼的按鈕。而且，在某些情況下，有些文檔隻提供 TypeScript 代碼。

雖然 TypeScript 不會在短期內超越 JavaScript，甚至可能永遠不會，但我們可以預見，隨著團隊將代碼庫遷移到 TypeScript 或直接使用 TypeScript 來啟動新項目，采用 TypeScript 的情況將會變得越來越多。

下圖是來自 2022 年前端現狀調查，該調查顯示了開發人員對 TypeScript 未來的看法。

結論：為你的 2024 做好準備

隨著新技術、新框架和新趨勢的出現，前端開發領域也在不斷演變。雖然適應快節奏的變化可能非常有挑戰性，但緊跟最新趨勢可以促進你的職業發展，使你的技能與時俱進。

以下是根據本文中介紹的趨勢，我們給出的一些可以為 2024 年做準備的建議：

1. 嘗試使用 Ark UI、Open Props 和 Shadcn UI 等新的樣式解決方案並熟悉它們。
2. 學習如何將 GitHub Copilot 等人工智能工具集成到日常開發工作流程中。
3. 如果還沒有，請開始學習 SSR/SSG 框架。可以考慮從 Astro 或 Next.js 開始。
4. 探索使用 Xata 和 Supabase 等 BaaS 平臺構建全棧應用程序。
5. 在你參與的每個項目中都使自己成為無障礙性的倡導者。
6. 成為 VS Code 專傢，學習可提高工作效率的插件。
7. 開始學習 TypeScript。它很可能會在開發領域存在一段時間。

原文鏈接：
https://www.infoq.cn/article/28AAMVMBA16EXo2ux5QO