惡補一下 js 的 library 跟 framework

更新於 發佈於 閱讀時間約 6 分鐘
本文同時發佈於 Hashnode(排版比較好看)

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

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


前端

Svelte

https://svelte.dev/

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

✅ 優點

  • 同樣的功能,Svelte 可以用少量的程式碼實現,沒有太多冗餘的 function
  • 從 jQuery 轉到這些前端大坑後,Svelte 是少數有帶給我所謂的「良好的開發體驗」的;上一個是 Elm,可惜他死透了
  • 使用 js library 大多不需要像 React 那樣繞來繞去,或是得找額外打包好的 xxx-react 套件,直接使用即可,所以不存在什麼「生態圈太小」的說法
  • 我再也不想寫 jsx 了

🤌 缺點

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

💡 延伸閱讀

Astro

https://astro.build/

✅ 優點

  • 由於框架特性,我可以把不需要用 js 的 components 寫成 astro 檔,剩下的檔案就幾乎是確定需要 js 邏輯操作的部分了,方便重點關注
raw-image
  • 除了產生一般的靜態 html 外,還可以打包成 middleware 給 Express、Fastify 或線上 server 做 SSR 用,十分聰明的做法
raw-image
  • 你學 React 就需要碰 Next,學 Vue 就需要接觸 Nuxt;基於上一條特性,不管你想學 React、Vue 還是 Svelte,你都可以先忽略那些專屬的 SSR framework,直接套到 Astro 上就行,降低學新東西或技術選擇時「要換就得全換」的門檻
  • 大多數網站沒有 SPA 的必要,用 MPA 還能省掉頁面切換時可能要另外寫重設 state 數值的部分,讓邏輯更單純

🤌 缺點

  • Astro 可以包其他 jsx 檔,但 jsx 不能反包 astro 檔,雖然可以繞點遠路,但還是稍嫌可惜(以 React 為例)

💡 延伸閱讀


全端

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

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

htmx

https://htmx.org/

✅ 優點

  • 如果你使用的後端 framework 沒有像上述選項有自家的高度整合方案(比如 Django),htmx 會是一個很好的通用方案

🤌 缺點

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

💡 延伸閱讀

Alpine

https://alpinejs.dev/

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

✅ 優點

  • 參數量極少,能夠快速上手
raw-image
  • 與後端溝通的部分由 htmx、LiveView 這些負責,剩下瑣碎的前端互動可由 Alpine 代勞,兩者結合之後,幾乎不用寫到什麼 js

💡 延伸閱讀

後端

Nest.js

https://nestjs.com/

✅ 優點

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

🤌 缺點

  • 跟 Express、Koa 一樣屬於輕量型的 framework,對於專案結構沒有太嚴格的規劃。若不定義好結構容易跟以前一樣程式碼越多架構越亂
  • 不理解為什麼需要包 rxjs?

💬 備註

  • 若要使用的話,我會傾向於把核心從 Express 換成 Fastify,除了 Express 現在是養老模式以外,Fastify 對 template engine 的參數設定的整合也比較好
Express 就沒法像這樣寫

Express 就沒法像這樣寫

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

Adonis.js

https://adonisjs.com/

raw-image

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

✅ 優點

🤌 缺點

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

💬 備註


avatar-img
1會員
5內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Knovour的沙龍 的其他內容
Streamlabs OBS 與開源直播軟體 OBS Studio 的商標使用爭議簡短紀錄
這陣子開始摸 Elixir/Phoenix,對於裡面產生 MVC 相關檔案的指令稍微做個紀錄,免得要確認時還要翻來翻去 本圖的紀錄不包含 migration 檔跟測試檔
撒旦之名代表專屬於你自身人格與人性的代名詞,是你之所以為一個人的證明;並以此來重新了解自己、接受自己,並能坦然地為自己所做的一切負起完全的責任。
Streamlabs OBS 與開源直播軟體 OBS Studio 的商標使用爭議簡短紀錄
這陣子開始摸 Elixir/Phoenix,對於裡面產生 MVC 相關檔案的指令稍微做個紀錄,免得要確認時還要翻來翻去 本圖的紀錄不包含 migration 檔跟測試檔
撒旦之名代表專屬於你自身人格與人性的代名詞,是你之所以為一個人的證明;並以此來重新了解自己、接受自己,並能坦然地為自己所做的一切負起完全的責任。
你可能也想看
Google News 追蹤
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
Thumbnail
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。
Thumbnail
分享這套功能齊全,視覺超級可愛還有響應式變化,教學文件又很容易閱讀的套件 Evo Calendar。 當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
先從react開始: 其實市面上有許多前端框架像是react,angular,vue... 至於為什麼我會選擇react…
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
Thumbnail
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。
Thumbnail
分享這套功能齊全,視覺超級可愛還有響應式變化,教學文件又很容易閱讀的套件 Evo Calendar。 當初在製作 JS side project 時,想找一個與 VCalendar 視覺相近的套件,但多半都不合意。六角學院指派的 side project 教練也幫我找了另一個純 JS 的範例,也很