https://online.pragmaticstudio.com/courses/hotwire/ ## Turbo Drive 就是之前的 turbolink ## Turbo Frame (完全只需要改 HTML erb 即可，後端不用改) turbo_frame_tag 還會把包起來的整塊都變成 turbo frame 連結，有副作用。還不如只用 div 就好了 回傳的 template 裡面也必須要有 turbo_frame_tag，不然會替換成 空白 就是簡化版的只能更新一個區塊的 Turbo Stream，可以沿用本來的 HTML template/format 相比 Turbo Drive 就是匡一個比較小的範圍內是 turbolinks 的感覺 有個 form data: { turbo_frame: “XXX” } 功能 蠻厲害的，讓 form submit 之後只更新某個區塊。不用寫 js 用 data { turbo_action: “advance” } 可以順便改 URL 記錄 Form invalidation 情境也可用，還不錯 autoscroll 功能 [Turbo Reference](https://turbo.hotwired.dev/reference/frames) lazy-loading 功能 turbo_frame_tag :src , :loading => :lazy > 感覺都可以透過 :remote => true 搭配 controller 裡面的 render :js => XXXX 某的 helper 來解決 ## Turbo Stream (一種 server-side rendering format) 有七種 action 其實用 js 也行 template 變成 HTML 為主的 erb 相比 js.erb 的可讀性是有比較好，但是也失去擴充 js 的空間 自己寫 helper 和 controller 方法就可以取代 Turbo Stream 了 > 自己寫不就是 RJS 嗎? 哈哈 例如 turbo_stream.replace “DOM_ID”, (partial 參數) 支援 block turbo_stream.replace “DOM_ID” do render :partial => “XXX end 支援 inline render turbo_stream: turbo_stream.replace(@bait, @bait) Append Prepend Remove Update Before After [The Pragmatic Studio | Sign In](https://online.pragmaticstudio.com/courses/hotwire/steps/14) ## Stimulus 方便在現有的 erb template 上，綁 javascript 事件 > vue.js 其實也可以辦到對 sever-side template 綁事件吧，只是現在比較流行的做法是 component 單件 > 本質上還是完全對應 DOM 操作，跟 vue.js 那種用資料回推表現層不同 > 一套操作下來，還是很零碎，跟之前 jd.erb 的缺點一樣 ## ActionCable 用 turbo_stream_from 方法訂閱 broadcast_prepend_to 方法發布和調整 HTML broadcast_replace_to 方法 broadcat_prepend_later_to 也有 async 版本的方法 # 結論 看完感覺是.... 就這? 還是蠻失望的，跟15年前的概念一樣，沒啥進步 XD 除了 Turbo Frame 是蠻漂亮的語法糖 Turbo Stream 就是 RJS Stimulus 是半套的現代 js framework 就專案是不會用了 新專案..... 再看看 XD #tech