2024年引領(lǐng)前端Web開(kāi)發(fā)的七大趨勢(shì)

作者：南玖 2024-03-01 11:10:55

盡管開(kāi)發(fā)者生態(tài)系統(tǒng)中對(duì)于是否使用 TypeScript 的看法不一，但大多數(shù)人都?jí)旱剐缘刂С?TypeScript。事實(shí)上，你更有可能看到公司和開(kāi)源創(chuàng)建者將他們的代碼庫(kù)遷移到 TypeScript。Stripe 就是一個(gè)例子，它將其最大的 JavaScript 代碼庫(kù)（370 萬(wàn)行代碼）遷移到了 TypeScript。

根據(jù)希臘哲學(xué)家赫拉克利特的說(shuō)法，變化是生活中唯一不變的。他的說(shuō)法適用于我們的個(gè)人生活、行業(yè)和專業(yè)領(lǐng)域。

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

雖然跟上前端生態(tài)系統(tǒng)的變化可能具有挑戰(zhàn)性，但保持更新可以幫助我們作為專業(yè)人士。想知道2024年前端領(lǐng)域會(huì)發(fā)生什么嗎？

新的樣式解決方案和組件庫(kù)的出現(xiàn)

當(dāng)談到網(wǎng)站樣式選項(xiàng)時(shí)，開(kāi)發(fā)人員會(huì)被多種選擇寵壞。有超過(guò) 40 個(gè) CSS 框架、超過(guò) 40 個(gè) CSS-in-JS 庫(kù)以及跨 Angular、React 和 Vue 的眾多組件庫(kù)。

2023 年，我們看到了 Shadcn UI、Ark UI、Panda CSS 和 StyleX（來(lái)自 Meta）等新樣式解決方案的發(fā)布。還有Wedges，Lemon Squeezy 的開(kāi)源 React UI 庫(kù)，在撰寫本文時(shí)幾天前才發(fā)布。

隨著開(kāi)發(fā)人員和開(kāi)源創(chuàng)建者提供他們獨(dú)特的方法來(lái)設(shè)計(jì)界面和構(gòu)建網(wǎng)站，我們可以期望看到更多的解決方案出現(xiàn)。

除了新造型解決方案的發(fā)布外，我們還可以期待看到：

對(duì)現(xiàn)有的進(jìn)行了更新。
從 CSS-in-JS 解決方案的轉(zhuǎn)變，因?yàn)樗鼈冊(cè)黾恿诉\(yùn)行時(shí)開(kāi)銷，導(dǎo)致包大小增加，并且不能很好地與 SSR 配合使用。
Open Props 即將爭(zhēng)奪 Tailwind CSS 的王座。根據(jù)2023 年 CSS 狀態(tài)數(shù)據(jù)，開(kāi)發(fā)者對(duì) Tailwind CSS 的興趣從 2022 年的 50.1% 下降到 2023 年的 47%。同時(shí)，OpenProps 的興趣從 2022 年的不到 10% 增長(zhǎng)到 2023 年的 60%。

使用人工智能增強(qiáng)開(kāi)發(fā)流程

毫不夸張地說(shuō)，生成式人工智能席卷了世界和許多行業(yè)。它徹底改變了 Web 開(kāi)發(fā)格局，并改變了構(gòu)建網(wǎng)站的開(kāi)發(fā)人員數(shù)量。

Vercel 的 v0就是一個(gè)例子，它是一個(gè)生成 UI 工具，它接受提示并返回用戶界面。例如，我們可以告訴 v0 創(chuàng)建一個(gè)電子商務(wù)儀表板。下圖顯示了 v0 的輸出。

圖片

除了 v0 之外，Vercel 還推動(dòng)人工智能的采用，并幫助開(kāi)發(fā)人員利用其AI SDK構(gòu)建人工智能驅(qū)動(dòng)的應(yīng)用程序。目前，該 SDK 每周的 npm 下載量超過(guò) 85,000 次，人們注冊(cè) Vercel 的第二個(gè)原因是創(chuàng)建 API 應(yīng)用程序。

雖然人工智能不會(huì)搶走我們的工作，但開(kāi)發(fā)人員越來(lái)越多地將其集成到他們的工作流程中。根據(jù)Retool 的 2023 年 AI 狀況報(bào)告，自 2022 年以來(lái)，57% 的開(kāi)發(fā)人員減少使用 Stack Overflow，10% 的開(kāi)發(fā)人員由于 ChatGPT 和 GitHub Copilot 不再使用它。

除了開(kāi)發(fā)人員使用 AI 來(lái)簡(jiǎn)化開(kāi)發(fā)流程之外，我們還可以期待更多公司將 AI 集成到他們的產(chǎn)品中，例如 GitHub Copilot 和 Sourcegraph 的 AI 編碼助手 Cody。

SSR/SSG 框架之戰(zhàn)愈演愈烈

服務(wù)器端渲染 (SSR) 和靜態(tài)站點(diǎn)生成 (SSG) 是最近因其 SEO 和性能優(yōu)勢(shì)而受到關(guān)注的兩種渲染方法。隨著越來(lái)越多的開(kāi)發(fā)人員和企業(yè)根據(jù)需要采用 SSR 和 SSG，支持這些渲染方法的框架之間的霸主之爭(zhēng)仍在繼續(xù)。

SSR/SSG 框架之間競(jìng)爭(zhēng)的一個(gè)例子是最近Tech Twitter上 Next.js 和 Remix 之間的比較。Kent C. Dodds 發(fā)布了一篇題為“為什么我不使用 Next.js ”的文章，Vercel 的 Lee Robinson 以題為“為什么我使用 Next.js ”的文章進(jìn)行了回應(yīng)。

在技術(shù)選擇方面，沒(méi)有一種放之四海而皆準(zhǔn)的工具。只有最適合這項(xiàng)工作的工具。然而，可以肯定地說(shuō)，Next.js 目前“擊敗”了競(jìng)爭(zhēng)對(duì)手。

根據(jù) Stack Overflow 的 2023 年調(diào)查，Next.js 是第六大最受歡迎的 Web 框架，超過(guò) Nuxt.js、Gatsby 和 Remix，分別排名第 21 位、第 24 位和第 30 位。Next.js 的受歡迎程度隨著時(shí)間的推移而不斷增加，在 Stack Overflow 的 2022 年調(diào)查中排名第 11 位。

圖片

憑借 React Server Components 支持、內(nèi)置圖像和字體優(yōu)化以及服務(wù)器操作等功能，我認(rèn)為短期內(nèi)不會(huì)有任何其他 SSR/SSG 框架超越。然而，隨著這些框架獲得新的更新和功能，我們預(yù)計(jì)戰(zhàn)斗會(huì)繼續(xù)下去。

我堅(jiān)信 Astro 會(huì)成為繼 Next.js 之后下一個(gè)爆炸性框架。根據(jù)Netlify 的 2023 年 Web 開(kāi)發(fā)狀況，

Astro 在使用率和滿意度方面表現(xiàn)出最高的增長(zhǎng)。它的使用率幾乎翻了一番，滿意度從 2022 年的 4.5 提高到 2023 年的 6.8，令人印象深刻。

以下是 NPM 有關(guān)這些框架每周下載量的數(shù)據(jù)：

Next.js: 5,037,121
Nuxt: 571,196
Gatsby: 316,779
SvelteKit: 306,599
Astro: 197,435
Quasar: 111,975
Remix: 22,676

前端、后端和全棧開(kāi)發(fā)之間的界限變得更加模糊

在 Web 開(kāi)發(fā)的早期，開(kāi)發(fā)人員堅(jiān)持關(guān)注點(diǎn)分離的原則。前端、后端、全棧開(kāi)發(fā)被分成不同的系統(tǒng)和文件夾。

然而，隨著時(shí)間的推移，界限變得越來(lái)越模糊：

Next.js 提供了Route Handlers，它允許我們處理 HTTP 請(qǐng)求、從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)、運(yùn)行服務(wù)器端邏輯以及執(zhí)行從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)等任務(wù)。
React Server Components (RSC)隨 React 18 一起提供，它允許我們預(yù)渲染應(yīng)用程序并在服務(wù)器而不是客戶端上進(jìn)行數(shù)據(jù)庫(kù)查詢，從而進(jìn)一步模糊了界限。這意味著我們可以直接在 React 組件內(nèi)部編寫數(shù)據(jù)庫(kù)查詢。
Next.js 還發(fā)布了Server Actions，它允許我們定義在客戶端調(diào)用的函數(shù)來(lái)操作服務(wù)器上的數(shù)據(jù)。

除了這些發(fā)展之外，Supabase、Appwrite 和 Xata 等后端即服務(wù) (BaaS) 解決方案的出現(xiàn)和流行使前端開(kāi)發(fā)人員更容易創(chuàng)建全棧應(yīng)用程序。有了這些新的工具和技術(shù)，隨著前端開(kāi)發(fā)人員探索后端和全棧開(kāi)發(fā)，我們可以期待更多跨學(xué)科的專業(yè)人員。

越來(lái)越多的人更加重視無(wú)障礙環(huán)境

由于有超過(guò) 10 億人患有某種形式的殘疾，無(wú)障礙環(huán)境不能成為發(fā)展過(guò)程中的事后考慮。以下是關(guān)注可訪問(wèn)性所帶來(lái)的一些好處：

更廣泛的受眾范圍：無(wú)障礙網(wǎng)站可供各種殘障人士使用，從而顯著擴(kuò)大了潛在受眾。
改進(jìn)的搜索引擎優(yōu)化：許多可訪問(wèn)性實(shí)踐改進(jìn)了搜索引擎優(yōu)化，幫助內(nèi)容排名更高并且更容易找到。
法律合規(guī)性：許多地區(qū)都有要求網(wǎng)絡(luò)可訪問(wèn)性的法律，因此創(chuàng)建可訪問(wèn)的網(wǎng)站有助于避免法律后果和罰款。
增強(qiáng)的用戶體驗(yàn)：輔助功能通常可以改善所有用戶的整體用戶體驗(yàn)，而不僅僅是殘障人士。
積極的品牌形象：對(duì)無(wú)障礙的承諾體現(xiàn)了社會(huì)責(zé)任和包容性，對(duì)組織的聲譽(yù)產(chǎn)生積極影響。

雖然網(wǎng)絡(luò)的可訪問(wèn)性在過(guò)去幾十年中得到了改善，但我們距離實(shí)現(xiàn)完全可訪問(wèn)的網(wǎng)絡(luò)還很遠(yuǎn)。截至 2022 年，只有3% 的互聯(lián)網(wǎng)可供殘疾人使用。雖然這個(gè)百分比低得驚人，但我們看到可訪問(wèn)性方面正在逐步但穩(wěn)定地改進(jìn)。

WebAIM 對(duì) 100 萬(wàn)個(gè)網(wǎng)頁(yè)進(jìn)行的 2023 年可訪問(wèn)性報(bào)告的數(shù)據(jù)顯示，更多的開(kāi)發(fā)人員和組織正在意識(shí)到可訪問(wèn)性的重要性。以下是報(bào)告中的一些統(tǒng)計(jì)數(shù)據(jù)：

自 2022 年以來(lái)，ARIA 代碼使用量增加了 29%，自 2019 年以來(lái)幾乎翻了兩番
100 萬(wàn)個(gè)主頁(yè)中有 80% 使用 ARIA，較 2022 年的 74.6% 有所增加
89.8% 的主頁(yè)具有有效的 HTML5 文檔類型，高于 2022 年的 86.1% 和 2021 年的 79.1%

來(lái)自Software House 的 2022 年 Frontrend 狀態(tài)數(shù)據(jù)顯示，63% 的開(kāi)發(fā)者預(yù)測(cè)可訪問(wèn)性將在未來(lái)幾年受到歡迎；見(jiàn)下圖。越來(lái)越多的開(kāi)發(fā)者和企業(yè)在可訪問(wèn)性方面加倍努力，我們預(yù)計(jì)在 webAIM 的 2024 年報(bào)告中會(huì)看到更少的可訪問(wèn)性訴訟和更容易訪問(wèn)的網(wǎng)站。

圖片

VS Code 仍然是頂級(jí)代碼編輯器

VS Code 于 2019 年發(fā)布，現(xiàn)已發(fā)展成為最受歡迎的代碼編輯器之一，可與 Vim、IntelliJ 和 Webstorm 等 IDE 相媲美。Stack Overflow 2023 年調(diào)查數(shù)據(jù)顯示，VS Code 仍然是最受開(kāi)發(fā)者歡迎的 IDE。來(lái)自Software House 2022 年前端狀況的數(shù)據(jù)還顯示，VS Code 是最受開(kāi)發(fā)者喜愛(ài)的代碼編輯器，占 74.4%。

為什么開(kāi)發(fā)者喜歡 VS Code？以下是一些原因：

它支持 100 多種語(yǔ)言。
它有一個(gè)巨大的擴(kuò)展市場(chǎng)。前端開(kāi)發(fā)人員應(yīng)該了解的一些最流行的 VS Code 擴(kuò)展包括 Live Server、React 和 Next.js Snippets、Live Sass Compiler 和 HTML End Tag Labels。
它是高度可定制的。

VS Code 用戶可以證明系統(tǒng)提示他們安裝最新更新的頻率。鑒于其當(dāng)前的發(fā)展速度和軌跡，我們預(yù)計(jì) VS Code 將獲得新功能，并在 2024 年及以后保持其領(lǐng)先 IDE 的地位。

圖片

結(jié)論：為 2024 年定位自己

隨著新技術(shù)、框架和趨勢(shì)的出現(xiàn)，前端開(kāi)發(fā)環(huán)境不斷發(fā)展。雖然適應(yīng)快節(jié)奏的變化可能具有挑戰(zhàn)性，但了解最新趨勢(shì)可以促進(jìn)你的職業(yè)發(fā)展并保持你的技能與時(shí)俱進(jìn)。

根據(jù)我們?cè)诒疚闹薪榻B的趨勢(shì)，以下是為 2024 年做好準(zhǔn)備的一些方法：