惡補一下 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 的開發者的關注度不算高

💬 備註


1會員
5內容數
留言0
查看全部
發表第一個留言支持創作者!
Knovour的沙龍 的其他內容
Streamlabs OBS 與開源直播軟體 OBS Studio 的商標使用爭議簡短紀錄
這陣子開始摸 Elixir/Phoenix,對於裡面產生 MVC 相關檔案的指令稍微做個紀錄,免得要確認時還要翻來翻去 本圖的紀錄不包含 migration 檔跟測試檔
撒旦之名代表專屬於你自身人格與人性的代名詞,是你之所以為一個人的證明;並以此來重新了解自己、接受自己,並能坦然地為自己所做的一切負起完全的責任。
Streamlabs OBS 與開源直播軟體 OBS Studio 的商標使用爭議簡短紀錄
這陣子開始摸 Elixir/Phoenix,對於裡面產生 MVC 相關檔案的指令稍微做個紀錄,免得要確認時還要翻來翻去 本圖的紀錄不包含 migration 檔跟測試檔
撒旦之名代表專屬於你自身人格與人性的代名詞,是你之所以為一個人的證明;並以此來重新了解自己、接受自己,並能坦然地為自己所做的一切負起完全的責任。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
《遊行》是由阿爾弗雷德·尤赫利編劇,傑森·羅伯特·布朗譜曲和填詞的音樂劇。該音樂劇劇情改編自1913年美國喬治亞州猶太裔美國人里奧·弗蘭克的審判和監禁,以及1915年的私刑處決。 該音樂劇於1998年12月在百老匯首演,並憑藉其精彩的表現贏得了托尼獎最佳編劇和最佳原創配樂等兩項大獎(共獲得九項提名)
Thumbnail
大腸直腸癌的治療方式很多樣,包括手術治療、標靶治療、化學治療、放射線治療等,不同的治療可能遭遇不同的副作用。 鄞子傑醫師表示,手術治療的副作用較即時,會在剛手術後那段時間出現。若有順利通過,除了排便次數增加之外,長期的問題較少。
Thumbnail
越來越多人開始自炊生活,把料理當作樂趣,但是看了好多網路上的食譜、很多網紅廚師的教學影片,準備在廚房大展身手時卻總是失敗?有哪些廚房事天天做,天天錯,難怪美味少一味?  快讓白宮主廚告訴你料理密技,過年好在親朋好友面前大展身手!
Thumbnail
完整標題:bone 與「歺」(歹)、「骨」、「骨頭」或「尸內撐」、「身內撐」、「肉內撐」或「骰」或「習」、「補習」等的轉換密碼
水草原本長得好好的,因為加了「水質穩定劑」,就死了。 那「劑」,讓我想到了「補習班」。
Thumbnail
在這次sci-con的發表過後,有不少日本的聽眾來問我,台灣的「好」與「惡」更詳細的解說,我很想做更完整與徹底的解釋,不過這可能會讓幫忙翻譯的朋友忙過頭,所以我在這裡先寫下稍微深入一點的補充說明。 「好」是個在台灣經常聽到的生活問答主題。 像是「這樣做好不好?」「這是不是比較好?」
Thumbnail
拜當初發行的電腦版之賜,惡靈古堡2是自己對於恐怖遊戲的啟蒙之作,即便當時的3D技術以現在來看相當粗糙,但固定視角看不見前方的恐懼感,加上整體氣氛的塑造,首次遊玩時一邊看文件一邊感受那些居民、警察的無力感,至今仍然難以忘懷。
Thumbnail
很多人以為我的母語是英文,尤其身邊很多朋友見識過我 “中文糟到沒朋友”的時期,就是那種在麥當勞點餐店員還會回答“沒關係,用英文也可以的”概念,所幸皇天不負苦心人,在付出不少努力學習中文後,雖然不敢自稱精通,不過應付國內各種升學考試絕對頂標有餘,本篇分享日前各種惡補中文的方式。
Thumbnail
總的來說,東南亞國家裡除了對環境管理、維護有嚴格執行的新加坡,以及開發較低度的寮國、緬甸、柬埔寨…之外,幾乎都有河流遭受嚴重污染的問題,差別只是程度輕重而已。
Thumbnail
<p>東南亞十個國家裡,除了新加坡、汶萊之外,警察貪汙、濫權的情況十分普遍,其中又以菲律賓最為嚴重。</p>
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
《遊行》是由阿爾弗雷德·尤赫利編劇,傑森·羅伯特·布朗譜曲和填詞的音樂劇。該音樂劇劇情改編自1913年美國喬治亞州猶太裔美國人里奧·弗蘭克的審判和監禁,以及1915年的私刑處決。 該音樂劇於1998年12月在百老匯首演,並憑藉其精彩的表現贏得了托尼獎最佳編劇和最佳原創配樂等兩項大獎(共獲得九項提名)
Thumbnail
大腸直腸癌的治療方式很多樣,包括手術治療、標靶治療、化學治療、放射線治療等,不同的治療可能遭遇不同的副作用。 鄞子傑醫師表示,手術治療的副作用較即時,會在剛手術後那段時間出現。若有順利通過,除了排便次數增加之外,長期的問題較少。
Thumbnail
越來越多人開始自炊生活,把料理當作樂趣,但是看了好多網路上的食譜、很多網紅廚師的教學影片,準備在廚房大展身手時卻總是失敗?有哪些廚房事天天做,天天錯,難怪美味少一味?  快讓白宮主廚告訴你料理密技,過年好在親朋好友面前大展身手!
Thumbnail
完整標題:bone 與「歺」(歹)、「骨」、「骨頭」或「尸內撐」、「身內撐」、「肉內撐」或「骰」或「習」、「補習」等的轉換密碼
水草原本長得好好的,因為加了「水質穩定劑」,就死了。 那「劑」,讓我想到了「補習班」。
Thumbnail
在這次sci-con的發表過後,有不少日本的聽眾來問我,台灣的「好」與「惡」更詳細的解說,我很想做更完整與徹底的解釋,不過這可能會讓幫忙翻譯的朋友忙過頭,所以我在這裡先寫下稍微深入一點的補充說明。 「好」是個在台灣經常聽到的生活問答主題。 像是「這樣做好不好?」「這是不是比較好?」
Thumbnail
拜當初發行的電腦版之賜,惡靈古堡2是自己對於恐怖遊戲的啟蒙之作,即便當時的3D技術以現在來看相當粗糙,但固定視角看不見前方的恐懼感,加上整體氣氛的塑造,首次遊玩時一邊看文件一邊感受那些居民、警察的無力感,至今仍然難以忘懷。
Thumbnail
很多人以為我的母語是英文,尤其身邊很多朋友見識過我 “中文糟到沒朋友”的時期,就是那種在麥當勞點餐店員還會回答“沒關係,用英文也可以的”概念,所幸皇天不負苦心人,在付出不少努力學習中文後,雖然不敢自稱精通,不過應付國內各種升學考試絕對頂標有餘,本篇分享日前各種惡補中文的方式。
Thumbnail
總的來說,東南亞國家裡除了對環境管理、維護有嚴格執行的新加坡,以及開發較低度的寮國、緬甸、柬埔寨…之外,幾乎都有河流遭受嚴重污染的問題,差別只是程度輕重而已。
Thumbnail
<p>東南亞十個國家裡,除了新加坡、汶萊之外,警察貪汙、濫權的情況十分普遍,其中又以菲律賓最為嚴重。</p>