Hotwire — เว็บที่ขยับได้โดยไม่ต้องมี state ชุดที่สอง และ Turbo Drive

บล็อก C: ทำให้เว็บขยับได้ โดยไม่ต้องมีสมุดเล่มที่สอง

ตลอดบล็อก A และ B เราทำหน้าเว็บที่สวยและอ่านรู้เรื่องแล้ว · แต่มันยังเป็นเว็บแบบ "กดแล้วรอหน้าใหม่" · ถ้าอยากแก้หัวข้อบทความในหน้าเดิม หรือให้คอมเมนต์ใหม่เด้งขึ้นเองโดยไม่ต้องรีเฟรช — คนส่วนใหญ่จะนึกถึง React ทันที

บล็อก C จะทำของพวกนั้นด้วย Hotwire แทน · Hotwire คือชื่อรวมของเครื่องมือชุดหนึ่งจากทีมที่สร้าง Rails · สองตัวที่เราจะใช้คือ Turbo (เปลี่ยนหน้า/เปลี่ยนบางส่วนของหน้าโดยไม่ต้องเขียน JS) และ Stimulus (JS ชิ้นเล็ก ๆ ที่ HTML เป็นคนเรียก) · ทั้งคู่มากับ Rails ตั้งแต่ rails new ไม่ต้องติดตั้งเพิ่ม

คำถามเดียวที่อยู่เบื้องหลัง Hotwire

ทวนบท 122 ก่อน: แอป React ที่ fetch JSON มาเก็บใน useState จะมีข้อมูลสองชุด — ชุดจริงในฐานข้อมูล กับสำเนาในแท็บของผู้ใช้ · สองชุดนี้ต้องตรงกันตลอด ไม่งั้นจอโชว์ของเก่า (บั๊ก sync)

Hotwire ตั้งคำถามกลับว่า: "ถ้าเราไม่ยอมให้มีสำเนาชุดที่สองเลย เราจะทำให้หน้าเว็บขยับได้ถึงไหน" · สองฝั่งตอบไม่เหมือนกัน:

เครื่องมือที่ฝั่ง SPA ใช้ดูแลสำเนา มีชื่อที่คุณจะได้ยินบ่อย: Redux · Zustand (ที่เก็บ state กลางของทั้งแอป) และ React Query · SWR (ตัวช่วย fetch ที่จำว่าข้อมูลไหนเก่าแล้วและไปขอใหม่ให้เอง) · ถ้าเทียบกับที่เราเรียน: มันคือ useState + useEffect ฉบับอัปเกรด ที่ทำให้ไม่ลืม fetch ใหม่

เครื่องมือพวกนี้เก่งมาก · แต่สังเกตว่าทุกตัวเกิดมาแก้ปัญหาเดียวกัน คือทำให้สำเนาตรงกับของจริง · Hotwire เลือกตัดปัญหาที่ต้นทาง: ไม่มีสำเนา ก็ไม่มีอะไรต้องทำให้ตรง

วัดจริง: HTML หนักกว่า JSON แค่ไหน

ข้อเสียที่ทุกคนถามคือ "ส่ง HTML ไม่เปลืองกว่าเหรอ" · ข้อนี้จริง แต่มากแค่ไหนต้องวัดเอง · แอปของเราตอบได้ทั้งสองแบบอยู่แล้ว (scaffold ทำ .json ไว้ให้ — บท 122) เลยวัดบทความชิ้นที่ 1 ได้เลย · เปิด bin/dev ทิ้งไว้ แล้วเปิดหน้าต่าง Terminal อีกอันในโฟลเดอร์แอปมารันคำสั่งนี้:

$ curl -s localhost:3000/posts/1.json
{"id":1,"title":"ต้มยำกุ้งน้ำข้น","description":"ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด รสเปรี้ยวเผ็ดกลมกล่อม กุ้งแม่น้ำตัวใหญ่ หอมตะไคร้ ข่า ใบมะกรูด กินกับข้าวสวยร้อน ๆ ได้ทั้งถ้วย ร้านนี้เปิดมาสามสิบปีแล้ว คิวยาวทุกวันเสาร์อาทิตย์","category_id":1,"created_at":"2026-10-08T10:52:53.123+07:00","updated_at":"2026-11-07T10:52:53.123+07:00","url":"http://localhost:3000/posts/1.json"}

นี่คือ "วัตถุดิบดิบ" (วันเวลาใน created_at · updated_at ของคุณจะต่าง ตามวันที่คุณรัน seed) · ทีนี้นับขนาด (byte) ด้วย wc -c (นับจำนวน byte ที่ได้มา) และลองบีบด้วย gzip (วิธีบีบไฟล์ที่ server จริงมักเปิดไว้ตอนส่งผ่านเน็ต):

$ curl -s localhost:3000/posts/1.json | wc -c
     735
$ curl -s localhost:3000/posts/1 | wc -c
    6010
$ curl -s localhost:3000/posts/1.json | gzip | wc -c
     403
$ curl -s localhost:3000/posts/1 | gzip | wc -c
    2279

• | — ส่งผลของคำสั่งซ้ายไปให้คำสั่งขวา · อ่านว่า "ขอหน้า แล้ว (บีบ แล้ว) นับ byte"
• ไม่ใส่ .json = ได้หน้า HTML ทั้งหน้า แบบที่เบราว์เซอร์ได้ (มี <head> · navbar · ปุ่ม · ทุกอย่าง)

$ curl -s localhost:3000/posts/1 | sed -n '/<article/,/<\/article>/p' | wc -c

$ curl -s localhost:3000/posts/1 | sed -n '/<article/,/<\/article>/p' | wc -c
     943
$ curl -s localhost:3000/posts/1 | sed -n '/<article/,/<\/article>/p' | gzip | wc -c
     514

แปลว่าอะไร: HTML หนักกว่าจริง โดยเฉพาะตอนส่งทั้งหน้า · (ตอนรันบนเครื่องเรา Rails ยังแถมคอมเมนต์ <!-- BEGIN app/views/... --> ไว้บอกว่าแต่ละท่อนมาจากไฟล์ไหน · เว็บจริงไม่มี)

แต่ทั้งหน้าก็แค่ราว 2–6 KB (KB = พันกว่า byte) · เทียบกับไฟล์ที่หน้าเดียวกันใช้: tailwind-….css 64,279 byte · turbo.min-….js 105,579 byte · ไฟล์ใหญ่พวกนี้แหละที่ Turbo Drive ทำให้ไม่ต้องโหลดซ้ำ (สองหัวข้อถัดไป)

สิ่งที่ได้คืนมาจากการยอมส่ง HTML: ไม่ต้องมี state management library สักตัว · และโค้ดจัดหน้าตาอยู่ใน ERB ที่เดียว ไม่ต้องเขียนซ้ำทั้งฝั่ง Rails และฝั่ง JS

สไลด์หน้า 36 อ้างว่า "HTML หนักกว่า JSON ประมาณ 2–4 เท่า" · ของจริงขึ้นกับว่าเทียบกับอะไร: เฉพาะการ์ดต่างกันน้อย · ทั้งหน้าต่างกันหลายเท่าแม้บีบแล้ว · ถ้ามีคนเถียงเรื่องนี้ ให้วัดของจริงแบบที่เพิ่งทำ

Turbo มี 3 ชิ้น — แผนที่ของบล็อก C

Turbo แบ่งงานเป็นสามชิ้น ต่างกันที่ขนาดของส่วนที่เปลี่ยน · ตารางนี้คือแผนที่ของบท 130–133 · หลงเมื่อไหร่กลับมาดูตรงนี้

กฎเลือกใช้ (สไลด์หน้า 37): ไล่จากหยาบไปละเอียด แล้วเลือกชิ้นที่หยาบที่สุดที่ยังทำงานได้ · ภาษาคน: เริ่มจากของที่ไม่ต้องเขียนอะไร (Drive) · ไม่พอค่อยครอบกล่อง (Frames) · ยังไม่พอค่อยสั่งหลายจุด (Streams) · ชิ้นที่ละเอียดกว่าทำได้มากกว่า แต่มีโค้ดให้ดูแลมากกว่า

Turbo Drive — ทำงานอยู่แล้วตั้งแต่ Lab แรก

ข่าวดี: เราใช้ Turbo Drive มาตลอดโดยไม่รู้ตัว · ทุกครั้งที่คุณกดลิงก์ในแอปตั้งแต่บท 120 หน้าเว็บไม่ได้โหลดใหม่ทั้งใบ · มันมาจากบรรทัดเดียวในไฟล์ JS หลักของแอป — เปิด app/javascript/application.js:

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"

• import "@hotwired/turbo-rails" — โหลด Turbo · ชื่อเล่นนี้อยู่ในสมุดรายชื่อ config/importmap.rb บรรทัด pin "@hotwired/turbo-rails", to: "turbo.min.js" (บท 127) · แค่โหลดมา Turbo Drive ก็เริ่มทำงานทันที ไม่ต้องเรียกฟังก์ชันอะไรต่อ
• import "controllers" — โหลด Stimulus controller ทุกตัวในโฟลเดอร์ app/javascript/controllers/ (เช่น ปุ่มธีมของบท 129 · ละเอียดบท 134)

พิสูจน์ด้วยตัวแปรใน JavaScript

ถ้าหน้าโหลดใหม่จริง เบราว์เซอร์จะทิ้งทุกอย่างของหน้าเก่า รวมถึงตัวแปร JS · ถ้าตัวแปรยังอยู่หลังกดลิงก์ = หน้าไม่ได้โหลดใหม่ · ผมลองใน Chrome: เปิด /posts → พิมพ์ window.marker = "ยังอยู่" ในแท็บ Console ของ DevTools (ช่องพิมพ์ JS ที่ใช้ในบท 129 · window. = ตัวแปรระดับทั้งหน้า) → กดหัวข้อ "นมเย็น" → กด F5 (รีเฟรช)

URL เปลี่ยน · หัวข้อแท็บเปลี่ยน · เนื้อหาเปลี่ยน — แต่ตัวแปรยังอยู่ · แปลว่าเบราว์เซอร์ไม่ได้เปิดหน้าใหม่ · Turbo แอบไปเอา HTML ของ /posts/30 มาแล้วสลับเนื้อหาให้ (ภารกิจท้ายบทให้คุณลองเองด้วย DevTools)

คุ้นไหม? บท 83 ทำการทดลองเดียวกันกับ <Link> ของ Next.js แล้วตัวแปรก็ยังอยู่ · ความรู้สึกเหมือนกัน คือกดแล้วไม่กระพริบ · ต่างกันที่ Next.js ต้องใช้ <Link> แทน <a> · ส่วน Turbo ดักลิงก์ <a> ธรรมดาทุกอันให้เอง (link_to ที่เราเขียนมาตลอดก็ได้ผลทันที)

request ที่ Turbo ยิง — server ไม่ต้องรู้ด้วยซ้ำ

ผมดักดู request ที่ Turbo ยิงตอนกดลิงก์นั้น · นอกจาก header (ข้อมูลกำกับ request) ที่เบราว์เซอร์ใส่ให้ทุก request อยู่แล้ว (เช่น User-Agent · Cookie) มีสองตัวนี้ที่ Turbo ใส่เอง:

accept: text/html, application/xhtml+xml
x-turbo-request-id: 1987ae28-93a8-4e4c-9672-007c2029345c

• accept: text/html… — "ขอเป็น HTML นะ" เหมือนที่เบราว์เซอร์ขอปกติ (ไม่ใช่ JSON)
• x-turbo-request-id — เลขสุ่มประจำ request ที่ Turbo ติดไว้ (ของคุณจะเป็นเลขอื่น · ชื่อ header ไม่สนตัวพิมพ์เล็ก-ใหญ่ ใน DevTools อาจเห็นเป็น X-Turbo-Request-Id)

ฝั่ง server (log/development.log) เห็นเหมือนการเปิดหน้าธรรมดาทุกอย่าง:

Started GET "/posts/30" for ::1 at 2026-11-07 11:01:59 +0700
Processing by PostsController#show as HTML
Completed 200 OK in 14ms (Views: 8.4ms | ActiveRecord: 2.6ms (2 queries, 0 cached) | GC: 0.0ms)

• for ::1 — ใครเป็นคนขอ · ::1 คือ "เครื่องตัวเอง" (localhost) แบบที่อ่านยากหน่อย
• as HTML — controller ตอบเป็น HTML (ถ้าเปิด /posts/30.json จะเป็น as JSON)
• วันเวลา · 14ms · ตัวเลขในวงเล็บ — ของคุณจะต่างทุกครั้ง ไม่ต้องสนใจ

as HTML · controller เดิม · view เดิม · ส่ง HTML ทั้งหน้าเหมือนเดิม — เราไม่ได้แก้ controller สักบรรทัด · งานทั้งหมดเกิดในเบราว์เซอร์ นี่คือเหตุผลที่ Turbo Drive "ฟรี"

6 ขั้นที่ Turbo Drive ทำตอนเรากดลิงก์

ลำดับตามสไลด์หน้า 38 · ข้างขวาคือสิ่งที่ผมเห็นจริงใน Chrome ตอนกดจาก /posts ไป /posts/30:

• fetch ในขั้น ② — คำสั่ง JS ที่ไปขอข้อมูลจาก server แบบเดียวกับที่ใช้ใน useEffect (บท 74) · "เบื้องหลัง" = ระหว่างรอ หน้าเดิมยังโชว์อยู่
• History API — ชุดคำสั่งของเบราว์เซอร์ที่ให้ JS เปลี่ยน URL และเพิ่มรายการในประวัติ (ที่ปุ่ม back ใช้) ได้โดยไม่ต้องโหลดหน้า · Turbo ใช้มันทำให้ปุ่ม back ยังทำงานปกติ
• cache ในขั้น ⑥ — ที่เก็บของไว้ใช้ซ้ำ · ตรงนี้คือ Turbo จำหน้าตาของหน้าก่อนไว้ในหน่วยความจำของแท็บ

Turbo เรียกการเปลี่ยนหน้าหนึ่งครั้งว่า visit · กดลิงก์ = ขอ server ใหม่ (ขั้น ①–⑥) · กดปุ่ม back = เอาภาพจากขั้น ⑥ มาโชว์ (ถ้ามีภาพเก็บไว้ ไม่ต้องขอ server)

ขั้น ④ มีข้อยกเว้น: data-turbo-track="reload"

จำป้ายใน <head> จากบท 127 ได้ไหม: <link rel="stylesheet" href="/assets/application-8b441ae0.css" data-turbo-track="reload" /> · ป้ายนี้บอก Turbo ว่า "ถ้าหน้าใหม่ชี้ไปไฟล์ชื่ออื่น ให้โหลดใหม่ทั้งหน้า"

ผมลองแก้ app/assets/stylesheets/application.css (เติมคอมเมนต์บรรทัดเดียว) ระหว่างที่หน้าเปิดอยู่ แล้วกดลิงก์ "บทความ" · ผล: ชื่อไฟล์ใหม่เป็น application-a9162a1a.css (เลขของคุณจะต่าง ขึ้นกับสิ่งที่เติม) และ window.marker หายไป = Turbo ยอมโหลดใหม่ทั้งหน้า · นี่คือการทำงานร่วมกับ fingerprint ของบท 127: เลขรุ่นใหม่บนปกเมนู → ร้านรู้ว่าต้องจัดโต๊ะใหม่ทั้งโต๊ะ ผู้ใช้จะไม่ค้างอยู่กับ CSS เก่า

ฝั่ง JS ก็เหมือนกัน: <script type="importmap"> (สมุดรายชื่อของบท 127) ก็ติดป้ายนี้ · แก้ application.js เมื่อไหร่ การกดลิงก์ครั้งถัดไปจะโหลดใหม่ทั้งหน้าเหมือนกัน (ลองแล้ว) — จำไว้ใช้ในการทดลองข้างล่าง

สั่งให้มันหยุดยุ่ง: data-turbo="false" และ data-turbo-action="replace"

บางลิงก์ไม่อยากให้ Turbo จัดการ หรืออยากให้ทำต่างจากปกติ · ใส่ป้าย data-… บนลิงก์นั้นได้ · ใน ERB ใส่ผ่าน data: { … } ของ link_to (บท 103) · ลองแก้สองไฟล์นี้ (ทดลองแล้วจะ git restore ทิ้ง)

วิธีแก้: หาบรรทัด link_to เดิม แล้วเติม , data: { … } ต่อท้ายก่อน %> · ส่วนอื่นของบรรทัดเหมือนเดิมทุกตัว

app/views/shared/_navbar.html.erb — ลิงก์ "หมวด":

<%= link_to "หมวด", categories_path, class: "btn btn-ghost btn-sm", data: { turbo: false } %>

app/views/shared/_pagination.html.erb — ลิงก์ "ถัดไป":

<%= link_to "ถัดไป →", pagy.page_url(:next), class: "join-item btn btn-sm", data: { turbo_action: "replace" } %>

HTML ที่ได้ออกมา (curl -s localhost:3000/posts · สองบรรทัดนี้อยู่คนละที่ในหน้า ผมตัดมาวางคู่กัน):

<a class="btn btn-ghost btn-sm" data-turbo="false" href="/categories">หมวด</a>
<a class="join-item btn btn-sm" data-turbo-action="replace" href="/posts?page=2">ถัดไป →</a>

• data: { turbo: false } → data-turbo="false" — Rails เติม data- ข้างหน้าให้
• turbo_action: → data-turbo-action — ขีดล่าง _ ใน Ruby กลายเป็นขีดกลาง - ใน HTML ให้เอง (ชื่อ symbol ใน Ruby มีขีดกลางไม่ได้)

ผลใน Chrome (เริ่มที่หน้าหมวด /categories/1 แล้วกดตามลำดับ):

(history.length = จำนวนรายการในประวัติของแท็บ · ของผมเริ่มที่ 2 เพราะแท็บเปิดหน้าว่างไว้ก่อน ของคุณอาจเริ่มที่เลขอื่น — ดูที่การเพิ่ม)

• data-turbo-action="replace" — ยังใช้ Turbo แต่เขียนทับรายการประวัติแทนการเพิ่ม · เหมาะกับการเปลี่ยนหน้า/กรอง/เรียงรายการ ที่ผู้ใช้กดหลายครั้ง แล้วไม่อยากให้ปุ่ม back ต้องย้อนทีละขั้น
• data-turbo="false" — ลิงก์นี้ให้เบราว์เซอร์โหลดหน้าใหม่แบบเดิม · เหมาะกับลิงก์ดาวน์โหลดไฟล์ (เช่น PDF) หรือหน้าที่ต้องเริ่มสะอาดทั้งใบ

★ ผลข้างเคียงที่ทุกคนต้องเจอ: DOMContentLoaded ยิงครั้งเดียว

ก่อนไปต่อ ต้องรู้จักสองคำของ JavaScript ฝั่งเบราว์เซอร์:

• event — "เหตุการณ์" ที่เบราว์เซอร์ประกาศ เช่น ผู้ใช้คลิก (click) · กดปุ่มคีย์บอร์ด (keydown) · อ่าน HTML ของหน้าเสร็จ (DOMContentLoaded)
• addEventListener("ชื่อ event", ฟังก์ชัน) — ฝากบอกว่า "ถ้าเกิด event นี้ ให้เรียกฟังก์ชันนี้" · ฟังก์ชันที่ฝากไว้เรียกว่า listener (ผู้รอฟัง) · ฝากกับอะไรก็ได้ เช่น ปุ่มหนึ่งปุ่ม หรือ document (ตัวแทนของทั้งหน้า)

ชื่อ DOMContentLoaded มาจาก DOM = โครงของหน้าที่เบราว์เซอร์สร้างจาก HTML ให้ JS หยิบจับได้ (แท็กแต่ละตัวกลายเป็น element หนึ่งชิ้น) · แปลตรง ๆ คือ "สร้างโครงหน้าจาก HTML เสร็จแล้ว"

สมัยก่อนมี Turbo โค้ด JS แทบทุกตัวเริ่มด้วย "รอให้ HTML อ่านเสร็จ (DOMContentLoaded) แล้วค่อยไปหา element มาผูกงาน" — บทความสอน JS เก่า ๆ และโค้ดที่ AI เขียนให้ก็ยังเป็นแบบนี้บ่อย · เทียบกับ React คือคล้าย useEffect(() => { … }, []) ที่ทำครั้งเดียวหลังวาดจอ (บท 74)

ปัญหาคือ Turbo ไม่เคยทิ้งหน้าเดิม (เราเพิ่งพิสูจน์) · หน้าเว็บ "เกิด" แค่ครั้งเดียวตอนเปิดเว็บครั้งแรก · Turbo จึงมี event ของตัวเองชื่อ turbo:load ที่ยิงทั้งตอนเปิดครั้งแรกและทุกครั้งที่ Turbo เปลี่ยนหน้า · ลองดูว่าสองตัวนี้ยิงกี่ครั้ง

เพิ่มต่อท้าย app/javascript/application.js (ทดลองแล้วลบ):

// ทดลองบท 130 — ลบทิ้งเมื่อจบบท
document.addEventListener("DOMContentLoaded", () => {
  console.log("DOMContentLoaded ยิงแล้ว")
})
document.addEventListener("turbo:load", () => {
  console.log("turbo:load ยิงแล้ว", location.pathname)
})

DOMContentLoaded ยิงแล้ว
turbo:load ยิงแล้ว /posts
turbo:load ยิงแล้ว /categories
turbo:load ยิงแล้ว /posts
turbo:load ยิงแล้ว /categories

โค้ด JS แบบดั้งเดิม — พังตั้งแต่หน้าที่สอง

ลบโค้ดเมื่อกี้ แล้วลองแบบที่สไลด์หน้า 40 ยกมา (ผมเปลี่ยน .menu เป็น main เพราะแอปเราไม่มีเมนูชื่อนั้น) · ทุกครั้งที่แก้ application.js ให้กด F5 ก่อนเริ่มลอง (เหตุผลเดียวกับข้างบน):

// ทดลองบท 130 — ลบทิ้งเมื่อจบบท
document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("main").addEventListener("click", () => {
    console.log("คลิกใน main")
  })
})

• document.querySelector("main") — หา element <main> ตัวแรกในหน้า (คือกล่องเนื้อหาใน layout)
• ทั้งก้อนแปลว่า: "พอหน้าอ่านเสร็จ ไปหา <main> แล้วฝากไว้ว่าถ้ามีคนคลิก ให้พิมพ์ข้อความ"

ผลจริงใน Chrome (คลิกที่ว่าง ๆ ในหน้า ไม่โดนลิงก์):

ทำไม: DOMContentLoaded ยิงครั้งเดียว · ตอนนั้นมันผูกงานไว้กับ <main> ตัวแรก · พอ Turbo เปลี่ยนหน้า <body> ทั้งก้อนเป็นของใหม่ (ขั้น ③) → <main> ตัวใหม่ไม่มีใครผูกงานให้ · ไม่มี error สักบรรทัด ปุ่มแค่ "ตาย" เงียบ ๆ

ท่าแก้เฉพาะหน้า: turbo:load — ใช้ได้ แต่ระวังงานสะสม

เปลี่ยนคำว่า "DOMContentLoaded" ในโค้ดข้างบนเป็น "turbo:load" · ผลจริง: คลิกในหน้าแล้วขึ้น คลิกใน main ครบทุกหน้า หน้าละหนึ่งบรรทัด ✅ · เพราะทุกครั้งที่เปลี่ยนหน้า มันไปผูกงานให้ <main> ตัวใหม่

แต่ถ้างานที่ผูกไว้ฝากไว้กับของที่ไม่เคยถูกเปลี่ยน — เช่น document (ตัวแทนทั้งหน้า ซึ่ง Turbo ไม่เคยทิ้ง) — มันจะสะสม · งานแบบนี้มีจริงบ่อย เช่น "กด Esc แล้วปิดเมนู" หรือ "คลิกที่อื่นแล้วปิด dropdown" · ลองโค้ดนี้แทน:

// ทดลองบท 130 — ลบทิ้งเมื่อจบบท
let round = 0
document.addEventListener("turbo:load", () => {
  round = round + 1
  const myRound = round
  document.addEventListener("keydown", (event) => {
    console.log("กดปุ่ม", event.key, "— listener ตัวที่", myRound)
  })
})

• let round = 0 — ตัวนับว่า turbo:load ยิงไปกี่รอบแล้ว · const myRound = round — จำเลขรอบไว้ให้ listener ตัวนั้น จะได้เห็นว่ามีกี่ตัว
• listener ตัวนอก (turbo:load) ทำหน้าที่ "ฝาก listener ตัวใน (keydown) เพิ่มอีกหนึ่งตัว" ทุกครั้งที่ยิง
• (event) => — เบราว์เซอร์ส่งรายละเอียดของ event มาให้ในตัวแปรนี้ · event.key = ปุ่มที่กด เช่น k

ผลจริงใน Chrome — เปิด /posts กด k → กด "หมวด" → กด "บทความ" → กด k อีกครั้ง:

กดครั้งเดียว ทำงาน 3 รอบ · เพราะทุก turbo:load ฝากงานใหม่ไว้กับ document ตัวเดิม และไม่มีใครถอดของเก่าออก · ถ้างานนั้นคือ "สลับเมนูเปิด/ปิด" กด 3 รอบ = เปิด-ปิด-เปิด · ยิ่งเปิดหลายหน้ายิ่งเพี้ยน และ refresh ทีเดียวอาการหายเป็นปลิดทิ้ง (เลยหาบั๊กยาก)

ทางออกจริง: เปลี่ยนวิธีคิด

โค้ดทั้งหมดข้างบนเชื่อว่า "หน้าเว็บเกิดครั้งเดียวแล้วตาย" ซึ่งจริงในยุคที่ทุกลิงก์โหลดหน้าใหม่ · พอมี Turbo ความเชื่อนี้ไม่จริงอีกต่อไป · ทางออกที่สไลด์เสนอคือกลับทิศ:

• แทนที่ JS จะเดินไปตามหา element ตอนหน้าโหลด → ให้ element ประกาศเองว่าต้องการ JS อะไร ด้วยป้ายใน HTML
• แล้วมี "ผู้ดูแล" คอยดูว่า element ที่มีป้ายนั้นโผล่มาเมื่อไหร่ (ติดตั้งงาน) และหายไปเมื่อไหร่ (เก็บกวาด)

ผู้ดูแลคนนั้นคือ Stimulus (บท 134) · และคุณใช้มันไปแล้ว: ปุ่ม 🌓 ใน navbar ของบท 129 เขียนว่า data-controller="theme" data-action="theme#toggle" — ปุ่มประกาศเองว่า "ฉันใช้ JS ชื่อ theme · ถ้าโดนคลิกให้เรียก toggle" · ปุ่มนี้จึงใช้ได้ทุกหน้าโดยไม่ต้องสนว่า Turbo เปลี่ยนหน้าไปกี่รอบ (ลองกดลิงก์ไปมาแล้วกด 🌓 ดู)

เทียบกับ React: คล้าย useEffect ที่มีทั้งงานตอนติดตั้ง และ return () => … ไว้เก็บกวาด (cleanup · บท 74) · ต่างกันที่ Stimulus ผูกกับการโผล่/หายของ element ใน HTML ไม่ใช่ของ component

ภารกิจ

ทดสอบความเข้าใจ

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Hotwire — HTML Over The Wire — อ่านแค่ย่อหน้าแรกกับหัวข้อ Turbo และ Stimulus · ยืนยันว่า Hotwire คือการส่ง HTML แทน JSON และ Turbo + Stimulus คืออะไร
• Turbo Handbook — Navigate with Turbo Drive — อ่าน Page Navigation Basics · Application Visits · Restoration Visits (ที่มาของ 6 ขั้นและ data-turbo-action="replace") · แล้วข้ามไป Disabling Turbo Drive on Specific Links or Forms และ Reloading When Assets Change (ที่มาของ data-turbo-track)
• Turbo Handbook — Building Your Turbo Application § Observing Navigation Events — อ่านหัวข้อนี้หัวข้อเดียว (สั้น) · คู่มือบอกตรง ๆ ว่า turbo:load ยิงตอนเปิดครั้งแรกและหลังทุก visit และเตือนให้ "clean up behavior installed for the previous page" — คือเรื่องกระดิ่งสะสมของเรา · หัวข้อถัดไป Attaching Behavior With Stimulus คือสะพานไปบท 134
• Turbo Reference — Events — รายชื่อ event ทั้งหมดของ Turbo · ดูแค่ turbo:load กับ turbo:click ตัวอื่นยังไม่ต้อง
• MDN — Document: DOMContentLoaded event — อ่านย่อหน้าแรก · event ที่ยิงเมื่อ HTML ของหน้าอ่านเสร็จ (ครั้งเดียวต่อการโหลดหน้าเต็ม)
• MDN — EventTarget: addEventListener() — อ่านส่วนต้นหน้า (ก่อนหัวข้อ Syntax) · ตรงนั้นบอกว่าฟังก์ชันตัวเดิมจะไม่ถูกเพิ่มซ้ำ — ของเราสะสมเพราะ () => { … } สร้างฟังก์ชันตัวใหม่ทุกรอบ · หัวข้อ Memory issues ขยายเรื่องนี้
• Chrome DevTools — Inspect network activity — คู่มือแท็บ Network ที่ใช้ในภารกิจ · อ่านถึงหัวข้อที่สอนกรองรายการ (filter) พอ
• GitHub — hotwired/turbo-rails — gem ที่ทำให้ Turbo มากับ Rails · ดูแค่ README ส่วนแรก ว่ามันติดตั้งอะไรให้ (การ import ใน application.js)