前端領域變化不斷,明年前端又會掀起什麼樣的腥風血雨?

游客2024-07-06 02:13:48

希臘哲學家赫拉克利特認為,改變是生命中唯一不變的。這句話適用於我們的個人生活、產業和職業領域。

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

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

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

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

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

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

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

現有解決方案的持續更新。

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

Open Props 將取代CSS 的寶座。根據《2023 年CSS 現態》 這篇文章的數據,開發人員對CSS 的興趣值從2022 年的50.1% 下降到了2023 年的47%。同時,Open Props 的關注度從2022 年的不到10% 上升到了2023 年的60%。

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

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

發布的v0 就是一個活生生的例子,它是一個基於提示詞產生使用者介面的工具。例如,我們可以透過提示詞讓v0 建立一個電子商務風格的頁面。下圖就是v0 的輸出結果。

除了v0, 在推動AI 的應用落地上也是不遺餘力。他們發布了AI SDK ,幫助開發者輕鬆建立AI 驅動的應用程式。目前該SDK 每週的npm 下載量已超過85000 次,這也是人們在上註冊和創建API 應用程式的原因之一(譯註:在上,基於其提供的AI 能力可以輕鬆的創建AI 驅動的應用)。

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

除了越來越多的開發人員將透過AI 來簡化開發流程之外,預計會有更多的公司將AI 整合到自己的產品中, 的和的AI 編碼助理Cody 都是很好的例子。

趨勢三:SSR 與SSG 兩種框架的競爭將會愈演愈烈

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

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

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

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

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

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

以下是NPM 提供的這些框架的每週下載資料:

Next.js:5,037,121

Nuxt:571,196

:316,779

:306,599

Astro:197,435

:111,975

Remix:22,676

趨勢四:前端、後端與全端開發之間的界線將越來越模糊

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

然而,隨著時間的推移,這些界線變得越來越模糊:

Next.js 提供了路由處理程序(Route ),它允許我們處理HTTP 請求、從資料庫取得資料、執行伺服器端邏輯、執行從資料庫取得資料等任務。

React 18 內建了RSC(React ),該功能允許我們預先渲染應用程序,並在伺服器端而不是客戶端進行資料庫查詢,從而進一步模糊了兩者之間的界限。這意味著我們可以直接在React 元件中編寫資料庫查詢功能。

Next.js 也發布了功能,該功能允許我們直接在客戶端上定義函數操作伺服器上的資料。

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