最新資訊取代 Vue 和 React？25 年碼齡程序員不滿 Web 開(kāi)發(fā)現(xiàn)狀創(chuàng)建新框架 Nue JS，能減少 90% 代碼量！
發(fā)布時(shí)間：2023-09-28 11:08:24
近日，前端開(kāi)發(fā)者 Tero Piirajinen 推出了一個(gè)名為 Nue.js 的極簡(jiǎn)化前端開(kāi)發(fā)工具，并迅速引發(fā)社區(qū)討論。Piirajinen 在 Hacker News 上表示，它是 React、Vue、Next.js、Vite、Svelte 和 Astro 的替代品。
據(jù)悉，Nue 源自德語(yǔ)單詞 neue，與英語(yǔ)中的“new”同義。它能幫助具備 HTML、CSS 和 JavaScript 知識(shí)的開(kāi)發(fā)者構(gòu)建服務(wù)器端組件與響應(yīng)式界面。具體來(lái)說(shuō)，Nue 有三大優(yōu)勢(shì)：改善開(kāi)發(fā)者體驗(yàn)；加快項(xiàng)目進(jìn)度；加快頁(yè)面加載速度。而其最大的亮點(diǎn)在于，它能將用戶界面代碼量控制在其他同類方案的十分之一。
Nue 作者 Piirainen 是一位來(lái)自赫爾辛基的前端開(kāi)發(fā)者，并在開(kāi)源項(xiàng)目、技術(shù)產(chǎn)品和初創(chuàng)企業(yè)中工作了 25 年以上，比較知名的成果包括 Riot.js、Flowplayer 和 jQuery 等。目前，Piirainen 正在獨(dú)力開(kāi)發(fā) Nue.js 項(xiàng)目，并積極尋求更多貢獻(xiàn)者的加入。
Piirajinen 在 Hacker News 上的帖子中提到，過(guò)去 12 個(gè)月以來(lái)，他一直從事項(xiàng)目開(kāi)發(fā)工作，最近還轉(zhuǎn)為全職。他的開(kāi)發(fā)目標(biāo)有兩個(gè)：
1.Nue JS——一個(gè)用于構(gòu)建用戶界面的小型（壓縮后僅為 2.3 kb）JavaScript 庫(kù)。它類似于 React 和 Vue，但去掉了 hooks、effects、props、portals、watchers、injects、suspensions 等各種抽象元素。只要開(kāi)發(fā)者具備 HTML、CSS 和 JavaScript 方面的基礎(chǔ)知識(shí)，就完全可以輕松上手。它支持服務(wù)器端渲染和客戶端響應(yīng)式組件，設(shè)計(jì)靈感來(lái)自 Vue 2.0 和 Riot.js（Piirainen 本人也是 Riot 的原作者）。
2.Nue 工具——一套完整的前端開(kāi)發(fā)工具集。在完成之后，Nue 將能夠取代 Vite、Next.js 和 Astro 等系統(tǒng)，這也是本項(xiàng)目的最終發(fā)展目標(biāo)。
Piirajinen 計(jì)劃在 2024 年 3 月之前完成所有工具的準(zhǔn)備工作，但具體時(shí)間取決于問(wèn)題數(shù)量、開(kāi)源維護(hù)工作量，以及他自己的判斷水平。目前，Nue 已在 GitHub 上開(kāi)源，并遵循 MIT 許可證。
為什么創(chuàng)建 Nue？
Piirajinen 表示，他創(chuàng)建 Nue 的主要原因是他對(duì)于當(dāng)前 Web 開(kāi)發(fā)態(tài)勢(shì)并不滿意，主要問(wèn)題包括相關(guān)工具太復(fù)雜、代碼難以理解、編譯時(shí)間長(zhǎng)、網(wǎng)站過(guò)于臃腫等等。
此前，Piirajinen 在 Flowplayer、Muut 和 Volument 擔(dān)任首席產(chǎn)品官（CPO）時(shí)，就有一些不太愉快的前端開(kāi)發(fā)經(jīng)歷。雖然項(xiàng)目最初進(jìn)展順利，但很快就變得難以維護(hù)。經(jīng)過(guò)幾個(gè)月的開(kāi)發(fā)，工作節(jié)奏開(kāi)始明顯放緩，原本樂(lè)觀的未來(lái)計(jì)劃也越來(lái)越難以落地。
Piirajinen 認(rèn)為，不只是他自己有這種感覺(jué)，整個(gè)前端開(kāi)發(fā)行業(yè)都面臨危機(jī)。Piirajinen 提到，他讀過(guò)不少相關(guān)文章，開(kāi)發(fā)者們紛紛表示前端令他們身心俱疲。因此，Piirajinen 想要做點(diǎn)什么，改變這令人惱火的現(xiàn)實(shí)。
Piirajinen 計(jì)劃以極簡(jiǎn)化方式從零開(kāi)始構(gòu)建一切，并用到了不少“舊有”創(chuàng)新成果，例如漸進(jìn)式增強(qiáng)、關(guān)注點(diǎn)分離和語(yǔ)義網(wǎng)頁(yè)設(shè)計(jì)。而 Nue 是 Piirajinen 改變現(xiàn)狀的一次雄心勃勃的嘗試，希望能為 JS 和 UX 開(kāi)發(fā)者們提供極簡(jiǎn)化工具。它強(qiáng)調(diào)恢復(fù) Web 標(biāo)準(zhǔn)模型的榮光，并引入現(xiàn)代創(chuàng)新的力量。Nue 想要讓 Web 開(kāi)發(fā)再次變得有趣。
Piirainen 表示，Nue 的靈感主要來(lái)自 Jarred Sumner 開(kāi)發(fā)的 Bun。這是一款新的 JS 運(yùn)行時(shí)、捆綁器、測(cè)試運(yùn)行器外加 NPM 兼容型包管理器。Piirainen 認(rèn)為，Bun 希望讓 JavaScript 變得更快，而 Nue 希望讓前端開(kāi)發(fā)變得更快。Nue+Bun 將成為面向前端開(kāi)發(fā)者的完美組合。值得一提的是，Jarred Sumner 和 Piirainen 一樣，也是一個(gè)單兵作戰(zhàn)的開(kāi)發(fā)者。
Nue 的其他靈感來(lái)源還包括：
Salvatore Sanfilippo 的推文：“縱觀如今的 Web，我發(fā)現(xiàn)開(kāi)發(fā)實(shí)踐仍然沒(méi)能遵循最基本的導(dǎo)航和可用性規(guī)則。盡管硬件發(fā)展一刻不停，但 Web 呈現(xiàn)速度仍然很慢。我只能認(rèn)為，現(xiàn)代前端開(kāi)發(fā)已經(jīng)走進(jìn)了死胡同?！?/p>
喬布斯的名言：“一切應(yīng)該以客戶體驗(yàn)為起點(diǎn)，再據(jù)此倒推技術(shù)實(shí)現(xiàn)?！?/p>
Dieter Rams 的名言：“少，即是多。”
基于以上幾點(diǎn)，Piirainen 給 Nue 項(xiàng)目定下了三條指導(dǎo)原則：
關(guān)注點(diǎn)分離：讓人們各自專注自己的專業(yè)領(lǐng)域，由此加快交付速度；內(nèi)容創(chuàng)作者專注于內(nèi)容，UX 開(kāi)發(fā)者專注于交互設(shè)計(jì)，JS 開(kāi)發(fā)者負(fù)責(zé)前端中的后端部分。
“只用最普通的 Web 元素”：Nue 將努力發(fā)掘標(biāo)準(zhǔn) HTML、CSS 和 JavaScript 當(dāng)中蘊(yùn)藏的力量。
極簡(jiǎn)主義：小型代碼庫(kù)更易于維護(hù)和擴(kuò)展，發(fā)生錯(cuò)誤的幾率也會(huì)更低。
代碼量減少 90%，Nue 主張極簡(jiǎn)主義
據(jù)了解，Nue 的最大優(yōu)勢(shì)就是幫助開(kāi)發(fā)者以更少的代碼達(dá)成相同的效果。在一個(gè)項(xiàng)目中，同樣的功能實(shí)現(xiàn)之間存在 2 到 10 倍的代碼量差異并不罕見(jiàn)。以用 Nue 編寫的自定義列表框組件為例：React 版本需要使用 2500 行 JS 代碼，Nue 版本則能夠在保持 50% 到 80% 功能的前提下，把代碼量控制在十分之一。
“這就是 HTML”
Nue 使用的是基于 HTML 的模板語(yǔ)法：
類似于 React 宣稱其“就是 JavaScript”，Nue 也可被認(rèn)為“就是 HTML”。而這樣的特性，對(duì)于專注于交互設(shè)計(jì)、可訪問(wèn)性和用戶體驗(yàn)的 UX 開(kāi)發(fā)者來(lái)說(shuō)堪稱完美。
為擴(kuò)展而生
據(jù)介紹，Nue 之所以能夠?yàn)榍岸碎_(kāi)發(fā)帶來(lái)新的可擴(kuò)展水平，主要?dú)w功于以下三大因素：
關(guān)注點(diǎn)分離，易于閱讀的代碼比“一團(tuán)亂麻”的代碼更易于擴(kuò)展。
極簡(jiǎn)主義，100 行代碼肯定比 1000 行代碼更易于擴(kuò)展。
人員分離。保證 UX 開(kāi)發(fā)者只須關(guān)注前端，JS/TS 開(kāi)發(fā)者只須關(guān)注前端的后端，這樣團(tuán)隊(duì)技能就會(huì)達(dá)到最佳平衡。
UX 開(kāi)發(fā)者與 JavaScript 開(kāi)發(fā)者能夠并行工作、互不干擾，最佳結(jié)果也自然會(huì)由此產(chǎn)生。
對(duì)樣式解耦
Nue 并不主張使用域 CSS、Tailwind 或者其他緊密耦合的 CSS-in-JS 框架。相反，它認(rèn)為最好將樣式跟布局和結(jié)構(gòu)區(qū)分開(kāi)來(lái)，主要是因?yàn)椋?/p>
有助于增加可復(fù)用代碼：因?yàn)闃邮讲粫?huì)被硬編碼進(jìn)組件，所以同一組件可以根本頁(yè)面或上下文而呈現(xiàn)出不同效果。
不會(huì)弄亂代碼：純 HTML 或純 CSS 代碼，其理解難度顯然大大低于亂七八糟的組合代碼。
更快的頁(yè)面加載速度：通過(guò)對(duì)樣式解耦，開(kāi)發(fā)者可以輕松從次 CSS 中提取主 CSS，并將 HTML 頁(yè)面保持在關(guān)鍵的 14 kb 限制以內(nèi)。
四種組件類型
Nue 擁有豐富的組件模型，允許開(kāi)發(fā)者使用不同類型的組件構(gòu)建起各類應(yīng)用：
服務(wù)器組件：在服務(wù)器端渲染，可以幫助我們構(gòu)建起以內(nèi)容為中心的網(wǎng)站，無(wú)需 JavaScript 即可提升加載速度，并可接受搜索引擎的抓取。
響應(yīng)式組件：在客戶端渲染，可幫助開(kāi)發(fā)者構(gòu)建動(dòng)態(tài)島或單頁(yè)應(yīng)用程序。
混合組件：一部分在服務(wù)器端渲染、一部分在客戶端渲染。這類組件能幫助開(kāi)發(fā)者構(gòu)建響應(yīng)式、SEO 友好的組件，例如視頻標(biāo)簽或圖片庫(kù)。
通用組件：既可使用在服務(wù)器端，又可使用在客戶端，且效果相同。
開(kāi)發(fā)者：Nue 很棒，但取代 Vue 或 React 還為時(shí)尚早
對(duì)于這樣一個(gè)創(chuàng)新項(xiàng)目，不少社區(qū)網(wǎng)友給予肯定。網(wǎng)友 aziis98 大贊 Nue 是一個(gè)“很棒的項(xiàng)目”，即使是像他這樣一個(gè) Vite 和 Astro 的忠實(shí)粉絲，也感到“耳目一新”。
網(wǎng)友 ilrwbwrkhv 評(píng)論稱：
真的很棒。盡管 Web 一直在不斷變化，但層出不窮的“新框架”還是無(wú)法讓人們滿意，而且全部主流框架也都驚人地相似。
我們確實(shí)有必要從頭開(kāi)始考量需求，并拿出一套更小、內(nèi)存效率更高的解決方案。
這里也希望有更多的前端開(kāi)發(fā)者停止人云亦云，嘗試獨(dú)立思考，想想過(guò)去的老前輩是怎么努力減少內(nèi)存占用量的。
我每次看到如今的 Slack 等應(yīng)用程序，都有種悲傷和絕望的感覺(jué)。
像 Nue 這樣的項(xiàng)目至少發(fā)現(xiàn)了正確的問(wèn)題，也擺出了嚴(yán)謹(jǐn)?shù)膽B(tài)度。支持！
也有不少網(wǎng)友直接指出 Nue 當(dāng)前存在的問(wèn)題，并給出了比較中肯的建議。
網(wǎng)友 niutech 指出，Nue 更像是 Petite-Vue 或者 Riot.js 的替代品，還很難說(shuō)可以取代非常成熟的 Vue 或者 React。所以拿它跟 headlessui-react/vue 做比較，就像拿蘋果跟橙子或者香蕉比較一樣有點(diǎn)錯(cuò)位：無(wú)頭 UI 列表框的復(fù)雜度要高得多。其實(shí)在 Vue 中也可以用 Nue 那個(gè)級(jí)別的代碼量構(gòu)建起列表框，這事并不太難。
此外，作者并沒(méi)有在入門介紹(https://nuejs.org/docs/nuejs/getting-started.html)中提到如何在無(wú)需構(gòu)建步驟的情況下使用 Nue，從而逐步增強(qiáng)現(xiàn)有 HTML 網(wǎng)站（例如 Petite Vue）：<script src="//unpkg.com/petite-vue" defer init></script>`還是 Alpine.js: `<script src="//unpkg.com/alpinejs" defer></script>`。
用戶 bartq 認(rèn)為，單從網(wǎng)站構(gòu)建庫(kù)的角度來(lái)看，Nue 已經(jīng)做得很成功了，但身為開(kāi)發(fā)者，他還期待看到其他成果：
1. 用該庫(kù)創(chuàng)建的示例項(xiàng)目，包括過(guò)程中的挑戰(zhàn)、解決方案、難題和成果。
2. 用視頻演示如何用 Nue 庫(kù)創(chuàng)建簡(jiǎn)單的應(yīng)用程序。在已經(jīng)非常擁擠的 JS 生態(tài)系統(tǒng)當(dāng)中，光靠枯燥的說(shuō)明文檔已經(jīng)很難吸引到支持者。比如想在視頻中看到：
- 工具如何起效；
- 調(diào)試如何起效；
- 構(gòu)建過(guò)程如何起效；
- 還有其他哪些強(qiáng)大功能等。
