介紹

我們又帶來了另一個令人興奮且廣為討論的 Rails 教程，介紹如何將 Hotwire 與 Rails 應(yīng)用程序一起使用。本Hotwire Rails教程是構(gòu)建使用少量 JavaScript 的現(xiàn)代 Web 應(yīng)用程序的替代方法。

Rails 7 Hotwire 是 Rails 7 發(fā)布后默認(rèn)的前端框架。它用于在 Rails 應(yīng)用程序中通過線路表示 HTML。以前，我們習(xí)慣于在我們的 gem 文件中添加一個 hotwire-rails gem，然后運行 rails hotwire: install。然而，隨著 Rails 7 的引入，這個 gem 被棄用了。現(xiàn)在，我們直接使用 turbo-rails 和 stimulus rails，它們作為 Hotwire 的類 SPA 頁面加速器和 Hotwire 的適度 JavaScript 框架。

什么是熱線？

Hotwire 是一個包含不同框架的包，可幫助構(gòu)建應(yīng)用程序。它簡化了開發(fā)人員編寫網(wǎng)頁的工作，而無需編寫 JavaScript，而是通過網(wǎng)絡(luò)發(fā)送 HTML 代碼。

Hotwire 框架簡介：

1.渦輪增壓：

它使用簡化的技術(shù)來構(gòu)建 Web 應(yīng)用程序，同時減少應(yīng)用程序中 JavaScript 的使用。Turbo 為通過網(wǎng)絡(luò)發(fā)送的 HTML 數(shù)據(jù)提供多種處理方法，并在不實際加載整個頁面的情況下顯示應(yīng)用程序的數(shù)據(jù)。通過使用以下技術(shù)，它有助于在不破壞單頁應(yīng)用程序體驗的情況下保持 Web 應(yīng)用程序的簡單性：

Turbo Frames： Turbo Frames 有助于在沒有任何依賴的情況下加載我們標(biāo)記的不同部分，因為它將頁面劃分為不同的上下文，分別稱為框架，并分別更新這些框架。
Turbo Drive：點擊每個鏈接時不必重新加載整個頁面。只會顯示標(biāo)記中包含的 HTML。
Turbo Streams：為了向應(yīng)用程序添加實時功能，使用了此技術(shù)。它有助于使用 CRUD 操作將實時數(shù)據(jù)帶到應(yīng)用程序。

2. 刺激

它代表了 JavaScript 框架，當(dāng)應(yīng)用程序中需要 JS 時，它是必需的。在刺激的幫助下可以與 HTML 交互，因為幫助這些交互的控制器是由刺激編寫的。

3.斯特拉達(dá)

由于尚未正式發(fā)布，因此關(guān)于 Strada 的信息不多。但是，它適用于本機(jī)應(yīng)用程序，并且通過使用 HTML 橋?qū)傩?，可以?Web 應(yīng)用程序和本機(jī)應(yīng)用程序之間進(jìn)行交互。

Hotwire Stack 的簡單圖示：

Hotwire Rails 教程的先決條件

在我們實施 Ruby on Rails Hotwire 教程時，請確保在開始之前完成以下安裝。

• Rails 上的 Ruby

• 熱線寶石

• PostgreSQL/SQLite（任選一個數(shù)據(jù)庫）

• 渦輪導(dǎo)軌

• 刺激.js

正在尋找熱情的 ROR 開發(fā)人員團(tuán)隊來塑造您的 Web 項目的愿景？
立即聯(lián)系 Bacancy 并聘請 Ruby 開發(fā)人員開始構(gòu)建您的夢想項目！

創(chuàng)建一個新的 Rails 項目

找到以下命令來創(chuàng)建 Rails 應(yīng)用程序。

mkdir ~/項目/railshotwirecd ~/項目/railshotwireecho "source 'https://rubygems.org'" > Gemfileecho "gem 'rails', '~> 7.0.0'" >> Gemfile捆綁安裝  bundle exec rails 新的。--force -d=postgresql

現(xiàn)在為項目創(chuàng)建一些文件，到目前為止還沒有看到 Rails Hotwire 的使用。
在您的終端中執(zhí)行以下命令。

• 為應(yīng)用程序創(chuàng)建默認(rèn)控制器

echo "class HomeController < ApplicationController" > app/controllers/home_controller.rbecho "結(jié)束" >> app/controllers/home_controller.rb

• 為應(yīng)用程序創(chuàng)建另一個控制器

echo "class OtherController < ApplicationController" > app/controllers/other_controller.rbecho "結(jié)束" >> app/controllers/other_controller.rb

• 為應(yīng)用程序創(chuàng)建路由

echo "Rails.application.routes.draw do" > config/routes.rbecho '獲取“home/index”' >> config/routes.rbecho '獲取“其他/索引”' >> config/routes.rbecho 'root to: "home#index"' >> config/routes.rbecho 'end' >> config/routes.rb

• 為應(yīng)用程序創(chuàng)建默認(rèn)視圖

mkdir 應(yīng)用程序/視圖/主頁echo '<h1>這是 Rails Hotwire 主頁</h1>' > app/views/home/index.html.erbecho '<div><%= link_to "進(jìn)入其他頁面", other_index_path %></div>' >> app/views/home/index.html.erb

• 為應(yīng)用程序創(chuàng)建另一個視圖

mkdir 應(yīng)用程序/視圖/其他echo '<h1>這是另一個頁面</h1>' > app/views/other/index.html.erbecho '<div><%= link_to "進(jìn)入主頁", root_path %></div>' >> app/views/other/index.html.erb

• 為應(yīng)用程序創(chuàng)建數(shù)據(jù)庫和 schema.rb 文件

bin/rails db:createbin/rails 數(shù)據(jù)庫：遷移

• 用于檢查應(yīng)用程序運行垃圾桶/軌道 s并打開瀏覽器，您正在運行的應(yīng)用程序?qū)⒕哂幸韵乱晥D。

此外，您可以克隆代碼并瀏覽項目。這是存儲庫的源代碼：Rails 7 Hotwire 應(yīng)用程序

現(xiàn)在，讓我們看看Hotwire Rails如何通過各種 Turbo 技術(shù)發(fā)揮其魔力。

熱線導(dǎo)軌：Turbo Drive

在 Web 瀏覽器上轉(zhuǎn)到localhost:3000，然后右鍵單擊 Inspect，然后打開瀏覽器 DevTools 的 Network 選項卡。

現(xiàn)在單擊出現(xiàn)在主頁上的轉(zhuǎn)到另一個頁面鏈接以從主頁重定向到另一個頁面。在我們的網(wǎng)絡(luò)標(biāo)簽中，我們可以看到這個導(dǎo)航動作是通過 XHR 實現(xiàn)的?？雌饋碇恢匦录虞d了 HTML 內(nèi)部的部分，這里在執(zhí)行導(dǎo)航操作時既沒有重新加載 CSS，也沒有重新加載 JS。

通過執(zhí)行此操作，我們可以看到 Turbo Drive 有助于在不加載整個頁面的情況下表示 HTML 響應(yīng)，并且僅遵循重定向和馴鹿 HTML 響應(yīng)，這有助于加快應(yīng)用程序的訪問速度。

熱線導(dǎo)軌：Turbo Frame

這種技術(shù)有助于將當(dāng)前頁面劃分為稱為框架的不同部分，當(dāng)從服務(wù)器添加新數(shù)據(jù)時，這些部分可以單獨獨立更新。
下面我們討論 Turbo frame 的不同用例，如內(nèi)聯(lián)編輯、排序、搜索和數(shù)據(jù)過濾。

讓我們執(zhí)行一些實際操作來查看這些用例的示例。

在應(yīng)用程序/控制器/home_controller.rb文件

＃代碼

類 HomeController < ApplicationController
   def turbo_frame_form
   結(jié)尾
   
   def turbo_frame_submit
      extracted_anynumber = params[:any][:anynumber]
      渲染：turbo_frame_form，狀態(tài)：：ok，本地人：{anynumber：extracted_anynumber，評論：'turbo_frame_submit ok'}
   結(jié)尾結(jié)尾

添加應(yīng)用程序/views/home/turbo_frame_form.html.erb文件到應(yīng)用程序并將此內(nèi)容添加到文件中。

＃代碼

<節(jié)>
    <%= turbo_frame_tag 'anyframe' 做 %>
            
      <分區(qū)>
          <h2>框架視圖</h2>
          <%= form_with scope: :any, url: turbo_frame_submit_path, local: true do |form| %>
              <%= form.label :anynumber, '鍵入一個整數(shù)（奇數(shù)或偶數(shù)）', 'class' => 'my-0 d-inline' %>
              <%= form.text_field :anynumber, type: 'number', 'required' => 'true', 'value' => "#{local_assigns[:anynumber] || 0}", 'aria-describedby' => '任意數(shù)字' %>
              <%= form.submit '提交這個號碼', 'id' => 'submit-number' %>
          <%結(jié)束%>
      </div>
      <分區(qū)>
        <h2>視圖的數(shù)據(jù)</h2>
        <pre style="font-size: .7rem;"><%= JSON.pretty_generate(local_assigns) %></pre>
      </div>
      
    <%結(jié)束%></節(jié)>

• 在 routes.rb 中做一些調(diào)整

＃代碼

Rails.application.routes.draw 做
  獲取“主頁/索引”
  獲取“其他/索引”
  獲取 '/home/turbo_frame_form' => 'home#turbo_frame_form'，如：'turbo_frame_form'
  發(fā)布 '/home/turbo_frame_submit' => 'home#turbo_frame_submit'，如：'turbo_frame_submit'
  根到：“home#index”結(jié)尾

• 下一步是更改 app/views/home/index.html.erb 中的主頁視圖

＃代碼

<h1>這是 Rails Hotwire 主頁</h1><div><%= link_to "進(jìn)入其他頁面", other_index_path %></div><%= turbo_frame_tag 'anyframe' 做 %>        
  <分區(qū)>
      <h2>主頁視圖</h2>
      <%= form_with scope: :any, url: turbo_frame_submit_path, local: true do |form| %>
          <%= form.label :anynumber, '鍵入一個整數(shù)（奇數(shù)或偶數(shù)）', 'class' => 'my-0 d-inline' %>
          <%= form.text_field :anynumber, type: 'number', 'required' => 'true', 'value' => "#{local_assigns[:anynumber] || 0}", 'aria-describedby' => '任意數(shù)字' %>
          <%= form.submit '提交這個號碼', 'id' => 'submit-number' %>
      <%結(jié)束%>
  <分區(qū)><%結(jié)束%>

• 完成所有更改后，重新啟動rails server并刷新瀏覽器，默認(rèn)視圖將出現(xiàn)在瀏覽器上。

• 現(xiàn)在在字段中輸入任何數(shù)字，輸入數(shù)字后點擊提交按鈕，當(dāng)點擊提交按鈕時我們可以在下面的屏幕中看到 Turbo Frame 正在運行，我們可以觀察到框架部分發(fā)生了變化，第一個標(biāo)題和第一個鏈接沒有移動。

Hotwire Rails：Turbo Streams

Turbo Streams 通過 WebSocket、SSE 或僅使用 HTML 和一系列類似 CRUD 的操作響應(yīng)表單提交來提供頁面更新，您可以自由地說

• 在響應(yīng)除 GET 操作之外的所有其他操作（如發(fā)布、放置、修補和刪除）時更新 HTML 片段。

• 將更改傳輸給所有用戶，而無需重新加載瀏覽器頁面。

這個傳輸可以用一個簡單的例子來表示。

• 更改 Rails 應(yīng)用程序的 app/controllers/other_controller.rb 文件

＃代碼

類 OtherController < ApplicationController
  定義 post_something
    respond_to 做|格式|
      format.turbo_stream { }
    結(jié)尾
  結(jié)尾
   結(jié)尾

在應(yīng)用程序的 routes.rb 文件中添加以下行

＃代碼

發(fā)布 '/other/post_something' => 'other#post_something'，如：'post_something'

高超！Rails 現(xiàn)在將在到達(dá)“/other/post_something”端點的任何時刻嘗試定位 app/views/other/post_something.turbo_stream.erb 模板。

為此，我們需要在 Rails 應(yīng)用程序中添加 app/views/other/post_something.turbo_stream.erb 模板。

＃代碼

<turbo-stream action="append" target="messages">
  <模板>
    <div id="message_1">這會更改現(xiàn)有消息！</div>
  </模板></渦輪流>

這說明響應(yīng)將嘗試附加 ID 為“messages”的 Turbo 幀模板。

現(xiàn)在用以下內(nèi)容更改 app/views/other 路徑中的 index.html.erb 文件。

＃代碼

<h1>這是另一頁</h1><div><%= link_to "進(jìn)入首頁", root_path %></div><div style="margin-top: 3rem;">
  <%= form_with scope: :any, url: post_something_path do |form| %>
      <%= form.submit '發(fā)布任何消息' %>
  <%結(jié)束%>
  <turbo-frame id="消息">
    <div>一條空消息</div>
  </渦輪框架></div>

• 完成所有更改后，重新啟動 rails server 并刷新瀏覽器，然后轉(zhuǎn)到另一個頁面。

• 出現(xiàn)以上屏幕后，單擊發(fā)布任何消息按鈕

此操作表明，在提交響應(yīng)后，Turbo Streams 幫助開發(fā)人員附加消息，而無需重新加載頁面。

我們可以測試的另一個用例是開發(fā)人員替換消息而不是附加消息。為此，我們需要更改 app/views/other/post_something.turbo_stream.erb 模板文件的內(nèi)容，并將 action 屬性的值從 append 更改為 replace 并檢查瀏覽器中的更改。

＃代碼

<turbo-stream action="replace" target="messages">
  <模板>
    <div id="message_1">這會更改現(xiàn)有消息！</div>
  </模板></渦輪流>

當(dāng)我們點擊 Post any message 按鈕時，該按鈕下方顯示的消息將替換為 app/views/other/post_something.turbo_stream.erb 模板中提到的消息

刺激

應(yīng)用程序中有一些情況需要 JS，因此為了涵蓋這些情況，我們需要 Hotwire JS 工具。Hotwire 有一個 JS 工具，因為在某些情況下 Turbo-* 工具是不夠的。但正如我們所知，Hotwire 用于減少應(yīng)用程序中 JS 的使用，Stimulus 將 HTML 視為唯一的真實來源?？紤]我們必須為頁面上的元素提供一些 JavaScript 屬性的情況，例如數(shù)據(jù)控制器、數(shù)據(jù)操作和數(shù)據(jù)目標(biāo)。為此，將創(chuàng)建一個可以訪問元素并根據(jù)這些特征接收事件的刺激控制器。

在 rails 應(yīng)用程序中更改app/views/other/index.html.erb模板文件

＃代碼

<h1>這是另一頁</h1><div><%= link_to "進(jìn)入首頁", root_path %></div><div style="margin-top: 2rem;">
  <%= form_with scope: :any, url: post_something_path do |form| %>
      <%= form.submit '發(fā)布內(nèi)容' %>
  <%結(jié)束%>
  <turbo-frame id="消息">
    <div>一條空消息</div>
  </渦輪框架></div><div style="margin-top: 2rem;">
  <h2>刺激</h2>  
  <div data-controller="你好">
    <input data-hello-target="name" type="text">
    <button data-action="click->hello#greet">
      迎接
    </按鈕>
    <span data-hello-target="輸出">
    </span>
  </div></div>

• 更改路徑 app/JavaScript/controllers 中的 hello_controller.js 并在文件中添加刺激控制器，這有助于使 HTML 栩栩如生。

＃代碼

從“@hotwired/stimulus”導(dǎo)入{控制器}導(dǎo)出默認(rèn)類擴(kuò)展控制器{
  靜態(tài)目標(biāo)= [“名稱”，“輸出”]
  問候（）{
    this.outputTarget.textContent =
      `你好，${this.nameTarget.value}！`
  }}

更改代碼后轉(zhuǎn)到您的瀏覽器，然后單擊“進(jìn)入其他頁面”鏈接，該鏈接將導(dǎo)航到 localhost:3000/other/index 頁面，在那里您可以看到旨在增強(qiáng) HTML 的刺激控制器實現(xiàn)的更改具有足夠的行為以使其更具響應(yīng)性。

只需一點點工作，Turbo 和 Stimulus 就可以一起為快速且引人注目的應(yīng)用程序提供完整的答案。

使用 Rails 7 Hotwire 有助于以更快的速度加載頁面，并允許您在服務(wù)器上呈現(xiàn)模板，您可以在服務(wù)器上訪問整個域模型。這是 ROR 中的一種富有成效的開發(fā)體驗，不會影響與 SPA 相關(guān)的任何速度或響應(yīng)能力。

結(jié)論

（言鼎科技）