瞭解前端新框架 - nue-js

本文作者系 360 奇舞團前端開發工程師

最近前端又出來一個新框架 / 庫，名爲 nue.js。9.13 號提交了第一個 commit，到今天已超過 4.5k 個 star。

前端開發者 Tero Piirajinen 推出了一個名爲 Nue.js 的極簡化前端開發工具，並迅速引發社區討論。

Piirajinen 在 Hacker News 上表示，它是 React、Vue、Next.js、Vite、Svelte 和 Astro 的替代品。

什麼是 nue?

Nue JS 是一個非常小的（壓縮後 2.3kb）JavaScript 庫，用於構建 Web 界面。它是即將推出的 Nue 生態系統的核心。它就像 Vue.js、React.js 或 Svelte，但沒有 hooks, effects, props, portals, watchers, provides, injects, suspension 這些抽象概念。瞭解 HTML、CSS 和 JavaScript 的基礎知識，就可以輕鬆上手了。

Nue 工具——一套完整的前端開發工具集。在完成之後，Nue 將能夠取代 Vite、Next.js 和 Astro 等系統，這也是本項目的最終發展目標。

爲什麼創建 nue.js

作者表示，他創建 Nue 的主要原因是他對於當前 Web 開發態勢並不滿意，主要問題包括相關工具太複雜、代碼難以理解、編譯時間長、網站過於臃腫等等。

作者 Piirajinen 計劃以極簡化方式從零開始構建一切，並用到了不少 “舊有” 創新成果，例如漸進式增強、關注點分離和語義網頁設計。而 Nue 是 Piirajinen 改變現狀的一次雄心勃勃的嘗試，希望能爲 JS 和 UX 開發者們提供極簡化工具。它強調恢復 Web 標準模型的榮光，並引入現代創新的力量。Nue 想要讓 Web 開發再次變得有趣。

nue.js 的指導原則

  1. 關注點分離：讓人們各自專注自己的專業領域，由此加快交付速度；內容創作者專注於內容，UX 開發者專注於交互設計，JS 開發者負責前端中的後端部分。

  2. 極簡主義：小型代碼庫更易於維護和擴展，發生錯誤的幾率也會更低。

  3. 人才分離，當 UX 開發人員專注於前端，而 JS/TS 開發人員專注於前端後端時，您的團隊技能就會達到最佳平衡：

極簡主義

Nue 的最大好處是您需要更少的代碼來完成同樣的事情。需要編寫的代碼量有 2-10 倍的差異並不罕見

Nue 使用基於 HTML 的模板語法

對樣式解耦

Nue 並不主張使用域 CSS、Tailwind 或者其他緊密耦合的 CSS-in-JS 框架。相反，它認爲最好將樣式跟佈局和結構區分開來，主要是因爲：

有助於增加可複用代碼：因爲樣式不會被硬編碼進組件，所以同一組件可以根本頁面或上下文而呈現出不同效果。

不會弄亂代碼：純 HTML 或純 CSS 代碼，其理解難度顯然大大低於亂七八糟的組合代碼。

更快的頁面加載速度：通過對樣式解耦，開發者可以輕鬆從次 CSS 中提取主 CSS，並將 HTML 頁面保持在關鍵的 14 kb 限制以內。

四種組件類型

Nue 擁有豐富的組件模型，允許開發者使用不同類型的組件構建起各類應用：

服務器組件：在服務器端渲染，可以幫助我們構建起以內容爲中心的網站，無需 JavaScript 即可提升加載速度，並可接受搜索引擎的抓取。

響應式組件：在客戶端渲染，可幫助開發者構建動態島或單頁應用程序。

混合組件：一部分在服務器端渲染、一部分在客戶端渲染。這類組件能幫助開發者構建響應式、SEO 友好的組件，例如視頻標籤或圖片庫。

通用組件：既可使用在服務器端，又可使用在客戶端，且效果相同。

UI 庫文件

Nue 允許大家在單個文件上定義多個組件，這無疑是種能把相關組件整理起來並簡化依賴項管理的絕佳方法。使用庫文件，您的文件系統層次結構看起來更乾淨，並且您需要更少的樣板代碼將連接的部分連接在一起。他們幫助其他開發人員打包庫。

工具組合更簡單

Nue JS 提供用於服務器端渲染的簡單 render 函數和用於爲瀏覽器生成組件的 compile 函數。而且無需像 Webpack 或 Vite 那類大型捆綁器那樣控制你的開發環境，可以直接將 Nue 導入到項目當中。

當然，如果開發者需要打理幾百上千個 NPM 依賴項，那麼在業務模型層上使用捆綁器確實有其現實意義。Bun 和 esbuild 都是性能出色的理想方案選項。

相關用例

Nue JS 是一款多功能工具，支持服務器端與客戶端渲染，可幫助開發者構建起以內容爲中心的網站和響應式單頁應用程序。

UI 庫開發：能夠爲響應式前端或服務器生成的內容創建可複用組件。

漸進式增強 Nue JS：這是一套堪稱完美的微型庫，可通過動態組件或 “島” 增強以內容爲中心的網站。

靜態網站生成器：只需將其導入項目即可準備渲染，無需藉助捆綁器 bundle。

單頁應用程序：可配合即將推出的 Nue MVC 構建起更簡單、更具可擴展性的應用程序。T

emplating Nue：一款用於生成網站和 HTML 電子郵件的通用工具。

總結

  1. 同一個文件裏可以定義多個組件，使用 @name 命名

  2. data 統一收集，統一輸出，script 標籤中定義變量無效

  3. 有類似 prop 父子組件傳值，但是組件內變量優先級大於傳入值

  4. 有: for 和: if 語法

  5. 事件處理，和 vue 一樣也是 @click，並有按鍵修飾符

前端框架層出不窮，這給大家帶來了一個新的思路，感興趣的同學可以瞭解一下。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/T7oQFLJbqlHz3Uc9azYqHg

猜你喜歡