惡補一下 JS 的 Library 跟 Framework

這兩年都用 Elixir + Phoenix + LiveView 在開發網站，遠離雜亂的 js 生態圈。最近剛好因為有相關需求，所以就大概看一下有哪些沒見過的 Library 跟 Framework，有興趣的就大概摸一下，寫個粗淺的心得

為了這篇文章寫了三種 TodoMVC 組合供參考

• Astro + Svelte

• htmx + Alpine (data) + Nest.js

• htmx + Alpine (store) + Adonis.js

前端

Svelte

其實在轉用 Elixir 之前就用過 Svelte 寫過一兩個 side project；沒記錯的話，那時因為適逢 Vue 從 2 到 3 過渡期，就連 Nuxt.js 這 Vue 的最大推手也遲遲未有升級支援，而 React Hooks 帶來的開發體驗對我來說並沒有好多少，對於這兩大生態圈感到疲勞，所以就跳到 Svelte 去了

• 同樣的功能，Svelte 可以用少量的程式碼實現，沒有太多冗餘的 function

• 從 jQuery 轉到這些前端大坑後，Svelte 是少數有帶給我所謂的「良好的開發體驗」的；上一個是 Elm，可惜他死透了

• 使用 js library 大多不需要像 React 那樣繞來繞去，或是得找額外打包好的 xxx-react 套件，直接使用即可，所以不存在什麼「生態圈太小」的說法

• 我再也不想寫 jsx 了

• 數據綁定方面用了很多語法糖，compiler 做掉了很多東西，所以初次使用在這方面會需要一點「想像力」。說實話，這連缺點也算不上

• SvelteJS: My ecosystem is bigger than yours（直戳痛點的好文）

Astro

• 由於框架特性，我可以把不需要 js 的 components 寫成 astro 檔，剩下的檔案就幾乎是確定需要 js 邏輯操作、動態渲染的部分了，方便重點關注

  

• 除了產生一般的靜態 html 外，還可以打包成 middleware 給 Express、Fastify 或線上 server 做 SSR 用，十分聰明的做法

  

• 你學 React 就需要碰 Next，學 Vue 就需要接觸 Nuxt；基於上一條特性，不管你想學 React、Vue 還是 Svelte，你都可以先忽略那些專屬的 SSR framework，直接套到 Astro 上就行，降低學新東西或技術選擇時「要換就得全換」的門檻

• 大多數網站沒有 SPA 的必要，用 MPA 還能省掉頁面切換時可能要另外寫重設 state 數值的部分，讓邏輯更單純

• Astro 可以包其他 framework 的檔案，但不能反包 astro 檔，雖然可以繞點遠路，但還是稍嫌可惜

• Astro 的正式發佈給前端界帶來了什麼？

• Web 框架 Astro 2.0 发布，在静态和动态渲染之外提供了混合渲染能力

• Unlock New Possibilities with Hybrid Rendering

全端

首先給下面要介紹的東西先做個資訊補充，除了前端 framework 是吃後端的 json 再更新部分 html 外，也有一種是讓後端直接生成部分 html 丟給瀏覽器做局部更新的；好處是前端需要寫的 js 極少，甚至可以直接讓後端處理 form validate，不需要 js 做一次，後端再做一次

舉凡 Laravel 的 Livewire、RoR 的 Hotwire、Phoenix 的 LiveView 都是此類

htmx

• 如果你使用的後端 framework 沒有像上述選項有自家的高度整合方案（如 Django、Express），htmx 會是一個很好的通用方案

• 由於參數遍佈 html，所以功能複雜的頁面在維護上可能會有反效果

• 自帶的 Events 有點雜

• Htmx 意外走红，我们从 React“退回去”后：代码行数减少 67%，JS 依赖项从 255 下降到 9

Alpine

這是由 Livewire 作者所開發的，用来補足不需要與後端互動的部分

• 參數量極少，能夠快速上手

  

• 與後端溝通的部分由 htmx、LiveView 這些負責，剩下瑣碎的前端互動可由 Alpine 代勞，兩者結合之後，幾乎不用寫到什麼 js

• 我们从 Vue 到 Alpine.js 的旅程

• AlpineJS作者：不上班，一年10w刀

• 一個小 demo

後端

Nest.js

• Decorator 的運用很漂亮，程式碼看起來很清晰

• 跟 Express、Koa 一樣屬於輕量型的 framework，對於專案結構沒有太嚴格的規劃。若不定義好結構容易跟以前一樣程式碼越多架構越亂

• 因為是包 Express/Fastify 的關係，所以出錯時可能還要釐清一下是哪邊的問題

• 不理解為什麼需要包 RxJS？

• 若要使用的話，我會傾向於把核心從 Express 換成 Fastify，除了 Express 現在是養老狀態以外，Fastify 對 template engine 的參數設定的整合也比較好

  

  Express 就沒法像這樣寫

• 如今大部分的 template engine 都沒在更新或是僅有維護了，雖然應該也沒人在用了

• Nest.js 給我一種「如果 Express 用 TypeScript 重寫會是什麼樣？」為出發點的感覺

Adonis.js

這個 framework 初衷是讓 PHP 用戶方便轉移到 Node，所以大量參考了 Laravel 的結構

• 有相對完整的專案結構

• 官方有豐富的教學且持續更新

• 官方的 VSCode Extension 功能支援十分豐富

• 自帶的 edge template 跟 framework 的語法糖結合有不錯的開發體驗

• 不是 Express 套皮

• 開發者親測，效能與 Fastify 相當

• 或許是客群取向關係，純 js 開發者的關注度不算高

• 目前正開發 6 版中，想試的可以再等等