Rails 前端打包工具組合 (2022版)

發現 Rails 的前端打包(build)工具已經到了眼花繚亂的地步,文件也沒寫如何搭配,老專案又該何去何從? 我做了一個排列組合分析看看。

會有這麼多情況,主要是因為

  1. Webpacker 被 Rails 官方 deprecated 了,這個與 webpack 深度綁一起的 gem 可能因為維護成本太高,Rails 官方不再維護了,死在 v6.0.0.rc.6。Webpacker 版號大 webpack 一號,webpacker v6 是搭配 webpack v5。webpacker v5 是搭配 webpack v4…
  2. sassc-rails 採用的 LibSass 核心被 Sass 官方 deprecated 了,官方改用 Dart 來實作。我不是 Sass 專長,不了解升級 Dart 版 SaSS 是否要緊,感覺可以拖一拖等有需要升級再處理。

DHH 為了想要避免初學者安裝和了解 Node.js 世界,所以預設提供的是不需要額外裝 Node.js 的 importmap 方案,以及另出一個 dartsass-rails gem 來換成 Dart Sass。

但如果真的要上線,還是得換掉 importmap 改擁抱 Node.js 世界的 jsbundling 方案。

CSS 部分Sass 部分JS 部分要求另外裝Node.js短評
Sprocketssassc-railsSprocketsno傳統 Rails 作法,無法處理 Vue.js/React 編譯需要
Sprocketssassc-railsWebpackeryesRails 6 時代 DHH 建議的方案: css/image 留在 Sprockets,js 改用 webpack。
Webpacker 同左同左yes一度很多人建議把 Sprockets 都拆了換成 Webpacker… 現在又要逃難了
Sprocketssassc-railsimportmapnoDHH 給的新 Rails 7 預設方案
Sprocketssassc-railsjsbundlingyes我目前的推薦方案
Sprocketssassc-rails + sass-embeddedSprocketsno竟然有人 Hack sassc-ruby 改核心用 dart-sass ,看起來可以無痛升級喔
Sprocketssassc-rails + sass-embeddedjsbundlingyes同上類似,如果需要JS編譯
Sprocketsdartsass-railsimportmapnoDHH 給的升級 Dart Sass 過渡方案
Sprocketsdartsass-railsjsbundlingyes同上類似,如果需要JS編譯
Sprocketscssbundling jsbundlingyesDHH 發現這種組合時,可以把 Sprockets 換成精簡後的 Propshaft
Propshaftdartsass-railsjsbundlingyes應該沒人這樣用,dartsass-rails gem 想解決是 Sprockets 搭配 Dart Sass 的場景
Propshaftcssbundlingjsbundlingyes這是 DHH 給的 Rails 前端終極方案: 都外包給 Node.js 編譯打包,最後給 Propshaft 整合進 Rails 即可
Propshaftjsbundlingjsbundlingyes不用 cssbundling,而是透過 jsbundling 的 bundle 工具來處理 css,例如 esbuild 的 sass plugin (感謝 Jerry Lee 分享)
Vite Ruby同左同左yes完全不用 Rails 給的前端方案,全部改用 Vite 處理

以下再個別說明一下

  • Sprockets 是 Rails 歷史最久的打包編譯 CSS/JS 工具,而且最近還有在釋出更新。不過在 Node.js 新世界後,其編譯功能追不上需求了,無法處理 React 和 Vue.js 需要的編譯任務。
  • sassc-rails gem (等同於 sass-rails gem 兩者一樣),是搭配 Sprockets 用的,核心是已被 deprecated 的 LibSass
  • dartsass-rails gem,也是搭配 Sprockets 用的,核心換成 Dart Sass,但根據文件有 Troubleshooting,升級會有一些麻煩要處理
  • sass-embedded,竟然有人 Hack sassc-ruby gem,把裡面的 LibSass 換成 Dart 版本…. 看起來完全無痛升級,比用 dartsass-rails 還簡單
  • Importmap 是 Rails 直接利用瀏覽器的 JavaScript modules 功能,因此就不需要處理 JS 編譯了。不過因為瀏覽器支援還不好關係,應該還不能真的拿來上 Production 使用,也查到 ES Module Shims polyfill 可以試試看。
  • cssbundling-rails 和 jsbundling-rails 都是把編譯打包任務,全都交給 Node.js 世界處理,最後丟出一個 build 好的檔案給 Asset Pipeline (Sprockets或Propshaft) 整合進 Rails。
  • Propshaft 是個陽春精簡版的 Sprockets,沒有編譯和打包 css/js 的功能,只剩下最基本和 Rails 整合的任務。因為編譯和打包都透過 cssbundling-rails 和 jsbundling-rails 處理完了。

我的想法:

  • 現階段 Sprockets 繼續用,有用 Vue.js/React 就再搭配 jsbundling-rails + esbuild 處理
  • 之前的 Webpacker code 得拆除,這死路了。得改成用 jsbundling-rails + esbuild 處理
  • 若有需要升級 Dart Sass,我會嘗試用 sass-embedded 看看,不行再試 dartsass-rails gem。真不行有需要再全面換 cssbundling-rails 以及 Sprockets 可換成 Propshaft (以上遷移成本由小到大)
  • Vite Ruby 蠻有趣的,Vue.js 社群出的 Vite 工具很厲害。但這也等於都不用 Rails 提供的前端方案了,也不清楚 Vite Ruby 是否走的長遠。這可能比較適合重度前端開發,有專屬 F2E 的 Rails 團隊使用。

Rails 老司機帶飛 投影片

今天在 COSCUP 2022 的 Rails 演講投影片。

距離上次公開講 Rails 也有5~6年了,之前講 Rails 大多偏教學,這次主要分享自己的一些經驗和主觀意見看法,請多指教了。

簡單摘要 1. OO用多型取代條件式、STI 和 Strategy Pattern 舉例 2. diss 了 service object 和一些其他 patterns 3. diss 了前端 Turbo 是舊瓶新裝,推薦用 Vue.js 4. N+1 queries 問題 5. Gemfile 用法

Tweets 整理 (2022 Q2)

2022/6

  • 2022-06-12 13:38 想不到 Vue.js 還有這種 progressive enhancement 返璞歸真之作 t.co/UTv2oYf31y 感覺蠻適合搭配後端框架的,另外注意到類似的 Alpine.js t.co/iBx0303dGZ 似乎更活躍

2022/5

  • 2022-05-14 15:52 換了 Mac Studio M1 Max,終於有 32G RAM 可以用了。這年頭大多是在家工作coding,有出門主要也都是開會,不需要帶台攻頂MBP。原先用了一年多的 Mac mini M1 六折賣很快就脫手了,比投資美股賠的還少… 😅

2022/4

  • 2022-04-24 20:18 週末看了 t.co/iIzVEvAbE3 學一下 Hotwire。感想是: 就這? Turbo Stream 跟16年前的 Rails RJS 沒啥本質上的進步 😆
  • 2022-04-01 20:11 @chrisythuang 也有試過 2B 筆尖不貼膜,但嘗試後還是覺得類紙膜 + HB或2H 筆尖的效果比較好。
  • 2022-04-01 20:08 @tonylu915 你可以先換筆尖用用看,找一下 2B 筆尖
  • 2022-04-01 17:11 iPad 竟然有種保護膜產品叫做 “類紙膜”,貼上去之後觸控筆的感覺更像在真實紙張上書寫,不會這麼滑,寫起來蠻不錯的。缺點是會犧牲一點螢幕的清晰度,但還可以接受,生產力比較重要。

Tweets 整理 (2022 Q1)

2022/2

  • 2022-02-16 08:57 Linode 被 Akamai 收購了,要準備改用別家了嗎? R.I.P. Linode 🪦 t.co/BvF0gixM12
  • 2022-02-11 17:42 RT @dhh: “Propshaft, a new asset pipeline library for Rails, is the result of such a cascading compression of complexity. En… t.co/rP2oqR7NCn

2022/1

  • 2022-01-26 23:28 在京東買了一台 Boox Max Lumi2 電子書閱讀器,原來有出這種 android 開放式的,根本就是電子墨水平板。愛裝什麼 app 就裝什麼: Kobo, Readmoo, 博客來, Kindle, 多看閱讀,13吋看PD… t.co/IXyueGoWyO
  • 2022-01-23 17:15 “When to use JSON data type in database schema design?” t.co/2Pnil74k0C # 各種不需要正規化和加索引的場景,越來越愛用 JSON data type 了
  • 2022-01-19 20:16 Rails 的 webpacker GG 了,拖很久的 v6 開發也被官方放棄了 # 想不到 sprockets 還比較長壽 t.co/CeJ3P1FlFg
  • 2022-01-12 11:39 “Please help me with my n+1 problem…” t.co/1fduRwiUPI # 這部落格蠻多 Rails N+1 queries 的各種進階解法,不錯
  • 2022-01-02 19:06 “The State Of Mobile First and Desktop First” t.co/zDFGpfxwuQ # 聽說現在不流行講 Mobile First 了,反正就 RWD 吧

克服團隊領導的5大障礙 讀後感

一本講公司領導團隊的寓言故事書。

蠻特別的是跟一般講領導個人特質的書不一樣,這本情境是在領導團隊(這裡指的是由公司CEO, 財務、業務、行銷、客服、產品部門等一級主管組成的領導團隊)中展開。最大的觸動就是對於公司管理層來說,你的 leadership team 應該才是第一順位重要,應該要比自己部門團隊更親近才是。

這跟現實中往往相反,因為主管通常會跟自己部門最親近,而不是領導團隊,這導致本位主義,不知道別的部門在幹嘛,無法像一個團隊達成公司的目標。

就像一個籃球教練分別跟五個球員談話,每個人都不知道教練跟其他人講了什麼。這不是 Team,而是一群個人在打球。

至於書名所謂的五大障礙,主要就是講溝通,先有信任,然後開會不要害怕衝突,要有承諾、責任、成果等等。這部分內容就比較老生常談,而且我覺得書中故事能順利展開的最大原因,就是主人公(新CEO)很厲害能夠引導溝通,進而產生公司變革。而現實中不是每個人都會這麼能主持會議溝通的….

資本主義沒告訴你的23件事 心得摘要

這本就是對著自由市場經濟開幹的書啊,改變了很多我對資本主義的認知,光是看各章標題就很吸引人。市面上的經濟學大多是自然市場經濟學背景,而這本書用了更多事實舉例跟數據來反駁,有種說了大實話的感覺。

  1. 根本沒有自由市場

    每個市場都有他自己的各種限制,有多自由是政治定義的。市場不是客觀的。自由貿易、公平貿易也是如此。市場的邊界是由政治決定的。
  2. 經營公司不該以股東的利益為優先

因為股東是公司流動性最高的厲害關係人,最不在乎公司的長期發展 (除非是大股東),尤其是小股東,只在乎最大短期利益。股東可輕易退出公司,只需要賣股票就好了。

其他利害關係人,例如員工、供應商,反而對長期利益更關心。

因此,長期的穩定好公司,其實會有各種手段來減少浮動股東對公司的影響,例如 政府擁有的股份、不同等級的骨釘,保證創始家族的控制權、公司有勞工代表、友好公司交叉持股 等等

閱讀全文〈資本主義沒告訴你的23件事 心得摘要〉