Rails 7 將 Hotwire (Turbo & Stimulus) 用來取代 Turbolink 及 UJS

在談 Hotwire 之前，我們先來聊聊 Turbolink 及 UJS

Rails UJS會幫我們做幾件事情

1. 在表單、連結物件上，自動加入data-屬性

   • form helper
     當我們使用form_for、form_tag、form_with來產生表單時
     Rails UJS會生出一個隱藏表單
     在裡面加入data屬性，並帶token去發送請求
   • link_to
     產生超連結的方法
     如果加入了remote: true，就會呼叫js，可避免雙重點擊狀況(詳見第4點)
   • button_to
     產生按鈕，跟link_to一樣，加入了remote: true，就會呼叫js

2. 轉換GET為其他方法，讓Rails執行
   HTTP僅支援GET及POST方法
   當我們在屬性中設定method="方法"時
   Rails UJS會產生 _method
   讓Rails知道你要執行什麼方法

3. data confirm防呆確認
   data-confirm屬性會生出一個警告框，在觸發時讓使用者二度確認

4. 防止雙點擊
   使用 disable_with 來防止儲存時雙重點擊狀況，避免HTTP傳送多次request，導致伺服器當機的狀況

Turbolink 載入網頁時會做三件事

1. 結合上一頁與這一頁的 Header
2. 換掉 body 的內容
3. 換網址

Rails 7 改用 Hotwire 來做這些事

Turbo 是為了讓 SPA 載入更快而存在，加速連結的載入速度及表單的遞交速度

Turbo 分成三部分：

1. TurboDrive
   功能跟 Turbolink 一樣，不過 TurboDrive 會額外去監控表單的送出行為
2. TurboFrame
   可依需求任意替換任一個 HTML 區塊，免去設定監聽事件、監聽區塊，使用 TurboFrame 就能夠輕鬆調整區塊
3. TurboStream
   以往我們會需要使用 ActionCable 來做重複遞交 request ，最後這包資料傳到前端會變成 JSON 並渲染
   當客戶端或者伺服器端更新資料，就能即時傳遞資訊，不用一直 refresh
   不過 TurboStream 簡化了這件事情
   現在只要設定 CURD Container tags 就能以 websocket 的方式重複遞交

Stimulus：
為 JS 框架，無需另外設定監聽事件、監聽目標，直接在 HTML 屬性中指定事件及目標，就能抓到並且觸發

web小辭典

SPA: Single Page Application
單頁式頁面，使用 AJAX 方式讓網頁回應更即時，且無需換頁
使用者第一次載入頁面時，就會將網站所有資訊載入，因此只需要在同一頁面就能瀏覽到所有資訊