2024 年 7 個 Web 前端開發(fā)趨勢

作者 | Nefe Emadamerho-Atori

譯者 | 許學(xué)文 策劃 | 丁曉昀

希臘哲學(xué)家赫拉克利特認為，變化是生命中唯一不變的東西。這句話適用于我們的個人生活、行業(yè)和職業(yè)領(lǐng)域。

尤其是前端開發(fā)領(lǐng)域，新技術(shù)、開發(fā)趨勢、庫和框架不斷涌現(xiàn)，變化并不陌生。最近發(fā)生的一些事件正在改變開發(fā)人員構(gòu)建網(wǎng)站和 Web 應(yīng)用的方式，其中包括支持服務(wù)器端渲染的 Angular 17 發(fā)布、Next.js v14 發(fā)布以及 TypeScript 采用增加。

雖然跟上前端生態(tài)系統(tǒng)的變化可能具有挑戰(zhàn)性，但作為專業(yè)人士，保持技能的更新有助于我們開展工作。想知道明年前端領(lǐng)域會發(fā)生什么變化嗎？那就請繼續(xù)閱讀吧。

趨勢一：新的樣式解決方案和組件庫將持續(xù)涌現(xiàn)

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

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

隨著開發(fā)人員和開源社區(qū)不斷分享他們在 UI 設(shè)計和網(wǎng)站構(gòu)建上的獨特方法，將來我們有望看到更多的網(wǎng)站樣式解決方案的出現(xiàn)。

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

1. 現(xiàn)有解決方案的持續(xù)更新。

2. CSS-in-JS 解決方案將被拋棄，因為該方案不僅會增加運行時開銷、構(gòu)建包的大小，還無法很好地與 SSR 配合使用。

3. Open Props 將取代 Tailwind CSS 的寶座。根據(jù) 《2023 年 CSS 現(xiàn)態(tài)》 這篇文章的數(shù)據(jù)，開發(fā)人員對 Tailwind CSS 的興趣值從 2022 年的 50.1% 下降到了 2023 年的 47%。與此同時，Open Props 的關(guān)注度從 2022 年的不到 10% 上升到了 2023 年的 60%。

   趨勢二：利用 AI 來增強開發(fā)流程

毫不夸張地說，生成式 AI 已經(jīng)在全球的許多行業(yè)中掀起了風(fēng)暴。它也將徹底改變 Web 開發(fā)的現(xiàn)狀和眾多開發(fā)人員構(gòu)建網(wǎng)站的方式。

Vercel 發(fā)布的 v0 就是一個活生生的例子，它是一個基于提示詞生成用戶界面的工具。例如，我們可以通過提示詞讓 v0 創(chuàng)建一個電子商務(wù)風(fēng)格的 dashboard 頁面。下圖就是 v0 的輸出結(jié)果。

除了 v0，Vercel 在推動 AI 的應(yīng)用落地上也是不遺余力。他們發(fā)布了 AI SDK ，幫助開發(fā)者輕松構(gòu)建 AI 驅(qū)動的應(yīng)用程序。目前該 SDK 每周的 npm 下載量已超過 85000 次，這也是人們在 Vercel 上注冊和創(chuàng)建 API 應(yīng)用程序的原因之一（譯注：在 Vercel 上，基于其提供的 AI 能力可以很輕松的創(chuàng)建 AI 驅(qū)動的應(yīng)用）。

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

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

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

近期，服務(wù)器端渲染（SSR）和靜態(tài)網(wǎng)站生成（SSG）這兩種渲染方法，因在 SEO 和性能方面的優(yōu)勢而備受關(guān)注。隨著越來越多的開發(fā)人員和企業(yè)出于 SEO 和性能方面的需求而采用 SSR 和 SSG 渲染方案，支持這兩類渲染方式的框架之間的競爭將會愈演愈烈。

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

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

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

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

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

下面是 NPM 提供的這些框架的每周下載數(shù)據(jù)：

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

   趨勢四：前端、后端和全棧開發(fā)之間的界限將越來越模糊

在早期的 Web 開發(fā)中，開發(fā)人員遵循的原則是 "關(guān)注點分離 "。因此，前端、后端和全棧開發(fā)人員被分配在了不同的系統(tǒng)和領(lǐng)域中。

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

1. Next.js 提供了 路由處理程序（Route Handlers），它允許我們處理 HTTP 請求、從數(shù)據(jù)庫獲取數(shù)據(jù)、運行服務(wù)器端邏輯以及執(zhí)行從數(shù)據(jù)庫獲取數(shù)據(jù)等任務(wù)。

2. React 18 內(nèi)置了 RSC（React Server Components），該功能允許我們預(yù)渲染應(yīng)用程序，并在服務(wù)器端而不是客戶端進行數(shù)據(jù)庫查詢，從而進一步模糊了兩者之間的界限。這意味著我們可以直接在 React 組件中編寫數(shù)據(jù)庫查詢功能。

3. Next.js 還發(fā)布了 Server Actions 功能，該功能允許我們直接在客戶端上定義函數(shù)操作服務(wù)器上的數(shù)據(jù)。

除了這些發(fā)展之外，諸如 Supabase、Appwrite 和 Xata 等后端即服務(wù)（BaaS）解決方案的出現(xiàn)和流行，也讓前端開發(fā)人員可以更容易地創(chuàng)建全棧應(yīng)用程序。借助這些新工具和技術(shù)，隨著前端開發(fā)人員對后端和全棧開發(fā)的不斷探索，我們可以期待更多跨領(lǐng)域?qū)I(yè)人才的出現(xiàn)。

趨勢五：越來越多的人關(guān)注無障礙性

目前有 超過 10 億人 患有這樣或那樣的殘疾，因此在開發(fā)過程中，針對無障礙性的設(shè)計不能只是事后才想到的問題。以下是關(guān)注無障礙性帶來的一些好處：

1. 使受眾范圍更廣：無障礙網(wǎng)站可供各種殘疾人士使用，從而大大擴展了其潛在的受眾范圍。

2. 增強 SEO：許多針對無障礙性的實踐可以增強 SEO，使其內(nèi)容排名更靠前，更容易被找到。

3. 有利于合法合規(guī)：許多地區(qū)的法律都要求網(wǎng)站具有無障礙性，因此創(chuàng)建無障礙性網(wǎng)站有助于避免觸犯法律和招致罰款。

4. 增強用戶體驗：針對無障礙性功能的設(shè)計，通常能改善所有用戶的整體體驗，而不僅僅是殘疾用戶。

5. 積極的品牌形象：對無障礙性的承諾體現(xiàn)了社會責(zé)任感和包容性，可以對組織的聲譽產(chǎn)生積極影響。

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

通過對 100 萬個網(wǎng)頁進行調(diào)研，WebAIM 發(fā)布了 《2023 年無障礙性報告》。該報告顯示，越來越多的開發(fā)人員和機構(gòu)開始逐漸意識到了無障礙性的重要性。以下是報告中的一些統(tǒng)計數(shù)據(jù)：

1. 自 2022 年以來，ARIA 代碼的使用率增長了 29%，自 2019 年以來增長了近四倍。

2. 100 萬個主頁中有 80% 使用了 ARIA，比 2022 年的 74.6% 有所提高。

3. 89.8% 的主頁采用了有效的 HTML5 doctype，比 2022 年的 86.1% 和 2021 年的 79.1% 都有所增加。

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

趨勢六：VS Code 將繼續(xù)占據(jù)最受歡迎 IDE 的寶座

VS Code 于 2019 年發(fā)布，現(xiàn)已成長為最受歡迎的代碼編輯器之一，可與 Vim、IntelliJ 和 Webstorm 等 IDE 相媲美。Stack Overflow 2023 年的調(diào)查數(shù)據(jù)顯示，VS Code 仍然是最受開發(fā)人員歡迎的 IDE。軟件之家的 2022 年前端現(xiàn)狀調(diào)查 也顯示，VS Code 是開發(fā)人員最喜愛的代碼編輯器，占比達到了 74.4%。

為什么開發(fā)人員會喜歡 VS Code？以下是一些原因：

1. 它支持 100 多種語言。

2. 它擁有一個龐大的插件市場。諸如 Live Server、React、Next.js Snippets、Live Sass Compiler 以及 HTML End Tag Labels 等最受歡迎的 VS Code 擴展，前端開發(fā)人員應(yīng)該都是耳熟能詳 。

3. 它具有高度可定制性。

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

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

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

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

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

下圖是來自 2022 年前端現(xiàn)狀調(diào)查，該調(diào)查顯示了開發(fā)人員對 TypeScript 未來的看法。

結(jié)論：為你的 2024 做好準備

隨著新技術(shù)、新框架和新趨勢的出現(xiàn)，前端開發(fā)領(lǐng)域也在不斷演變。雖然適應(yīng)快節(jié)奏的變化可能非常有挑戰(zhàn)性，但緊跟最新趨勢可以促進你的職業(yè)發(fā)展，使你的技能與時俱進。

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

1. 嘗試使用 Ark UI、Open Props 和 Shadcn UI 等新的樣式解決方案并熟悉它們。

2. 學(xué)習(xí)如何將 GitHub Copilot 等人工智能工具集成到日常開發(fā)工作流程中。

3. 如果還沒有，請開始學(xué)習(xí) SSR/SSG 框架。可以考慮從 Astro 或 Next.js 開始。

4. 探索使用 Xata 和 Supabase 等 BaaS 平臺構(gòu)建全棧應(yīng)用程序。

5. 在你參與的每個項目中都使自己成為無障礙性的倡導(dǎo)者。

6. 成為 VS Code 專家，學(xué)習(xí)可提高工作效率的插件。

7. 開始學(xué)習(xí) TypeScript。它很可能會在開發(fā)領(lǐng)域存在一段時間。

原文地址：

https://www.frontendmentor.io/articles/7-frontend-web-development-trends-for-2024-qtBD0H0hY3