สร้างแอป Interactive Rails อย่างรวดเร็วด้วย Hotwire:คู่มือสำหรับผู้เริ่มต้น

Hotwire เป็นหัวข้อร้อนแรงในขณะนี้สำหรับนักพัฒนา Rails ทุกคน หากคุณร่วมงานกับ Rails ก็มีโอกาสที่ดีที่คุณจะได้ยินเรื่องนี้มามากมาย

Hotwire เป็นวิธีใหม่ในการเพิ่มการโต้ตอบให้กับแอปของคุณโดยใช้โค้ดเพียงไม่กี่บรรทัด และทำงานได้อย่างรวดเร็วด้วยการส่ง HTML ผ่านสาย นั่นหมายความว่าคุณสามารถรักษามือของคุณให้สะอาดจากเฟรมเวิร์ก Single Page Applications (SPA) ส่วนใหญ่ได้ คุณยังสามารถรักษาตรรกะการเรนเดอร์ของคุณไว้ที่ศูนย์กลางบนเซิร์ฟเวอร์ ในขณะที่ยังคงรักษาเวลาในการโหลดเพจและการโต้ตอบที่รวดเร็ว

ในโพสต์นี้ เราจะดูส่วนประกอบหลักของ Hotwire และวิธีใช้ในแอป Rails ของคุณ แต่ก่อนอื่น:Hotwire คืออะไร และเหตุใดคุณจึงควรใช้มัน

ฮอตไวร์คืออะไร?

Hotwire ไม่ใช่ไลบรารีเดียว แต่เป็นแนวทางใหม่ในการสร้างเว็บและแอปพลิเคชันมือถือโดยการส่ง HTML ผ่านสาย ซึ่งรวมถึง Turbo, Stimulus และ Strada (จะมาในปลายปีนี้) เราจะหารือแต่ละสิ่งเหล่านี้โดยละเอียดในหัวข้อถัดไป

หมายเหตุด้านข้าง :แม้ว่า Hotwire จะเชื่อมโยงกับ Rails อย่างมาก แต่ก็ไม่เชื่อเรื่องภาษาอย่างสมบูรณ์ ดังนั้นจึงสามารถทำงานได้เช่นเดียวกับแอปพลิเคชันอื่นๆ ฉันใช้ Stimulus ในการผลิตกับแอปที่ไม่ใช่ Rails หลายตัวและเว็บไซต์คงที่บางแห่ง คุณสามารถใช้ Turbo แบบไม่มี Rails ได้เช่นกัน

แต่ให้เรากลับมาที่โลก Rails ในตอนนี้

เหตุใดจึงต้องใช้ Hotwire ในแอป Rails ของคุณ

แล้วคุณควรใช้ Hotwire เมื่อใด? คำตอบคือทุกที่ที่คุณต้องการเพิ่มการโต้ตอบให้กับแอปพลิเคชันของคุณ ตัวอย่างเช่น หากคุณต้องการ:

• เนื้อหาบางส่วนที่จะแสดง/ซ่อนตามเงื่อนไขตามการโต้ตอบของผู้ใช้ (เช่น แบบฟอร์มที่อยู่ที่รายการรัฐเปลี่ยนแปลงโดยอัตโนมัติตามประเทศที่เลือก)
• เพื่ออัปเดตเนื้อหาบางส่วนแบบเรียลไทม์ (เช่น ฟีด เช่น Twitter ซึ่งทวีตใหม่จะถูกเพิ่มลงในเพจโดยอัตโนมัติ)
• หากต้องการโหลดบางส่วนของหน้าของคุณแบบ Lazy Loading (เช่น ภายในหีบเพลง คุณสามารถโหลดชื่อและทำเครื่องหมายรายละเอียดให้โหลดแบบ Lazy Loaded เพื่อเพิ่มความเร็วในการโหลด)

ส่วนประกอบ Hotwire

ดังที่ได้กล่าวไว้ก่อนหน้านี้ Hotwire คือชุดของเทคนิคใหม่ (และเก่าบางส่วน) สำหรับการสร้างเว็บแอป

เราจะมาพูดคุยกันในหัวข้อต่อไปนี้กัน

เทอร์โบ

HTML ขับเคลื่อน Turbo ที่แกนหลัก Turbo มีเทคนิคหลายประการในการจัดการข้อมูล HTML ที่มาจากสายและแสดงข้อมูลบนแอปพลิเคชันของคุณโดยไม่ต้องโหลดซ้ำทั้งหน้า ประกอบด้วย:

• เทอร์โบไดรฟ์

  หากคุณเคยใช้ Turbolinks มาก่อน คุณจะรู้สึกเหมือนอยู่บ้านด้วย Turbo Drive โดยที่แกนหลักคือ โค้ด JS บางส่วนจะดักจับเหตุการณ์ JavaScript ในแอปพลิเคชันของคุณ โหลด HTML แบบอะซิงโครนัส และแทนที่ส่วนของมาร์กอัป HTML ของคุณ

• เฟรมเทอร์โบ

  Turbo Frames แยกส่วนของมาร์กอัปของคุณออกเป็นส่วนต่างๆ ที่สามารถโหลดได้อย่างอิสระ

  ตัวอย่างเช่น หากคุณมีแอปพลิเคชันบล็อก เนื้อหาของโพสต์และความคิดเห็นจะเป็นสองส่วนที่เกี่ยวข้องกันแต่เป็นอิสระจากเพจ คุณสามารถแยกส่วนทั้งสองออกเพื่อให้การนำทางทำงานแยกจากกัน หรือแม้แต่โหลดส่วนเหล่านั้นแบบอะซิงโครนัสด้วยเฟรมเทอร์โบ

• สตรีมเทอร์โบ

  Turbo Streams นำเสนอยูทิลิตี้เพื่อนำข้อมูลแบบเรียลไทม์มาสู่แอปพลิเคชันของคุณได้อย่างง่ายดาย ตัวอย่างเช่น สมมติว่าคุณกำลังสร้างฟีดข่าวเช่น Twitter คุณต้องการดึงทวีตใหม่เข้าสู่ฟีดของผู้ใช้ทันทีที่มีการโพสต์โดยไม่ต้องโหลดหน้าซ้ำ Turbo Streams ช่วยให้คุณดำเนินการนี้ได้โดยไม่ต้องเขียน JSแม้แต่บรรทัดเดียว

• เทอร์โบเนทิฟ

  Turbo Native ช่วยให้คุณสร้าง wrapper แบบเนทีฟรอบเว็บแอปพลิเคชันของคุณ การนำทางและการโต้ตอบจะให้ความรู้สึกเป็นธรรมชาติโดยที่คุณไม่ต้องทำซ้ำหน้าจอทั้งหมด

  คุณจะส่งแอปพลิเคชันที่เหลือผ่านทางเว็บต่อไป ด้วยวิธีนี้ คุณสามารถมุ่งเน้นไปที่ส่วนที่มีการโต้ตอบจริงๆ ของแอปพลิเคชันของคุณและทำให้ถูกต้อง

สิ่งเร้า

Stimulus เป็นเฟรมเวิร์ก JavaScript สำหรับการเขียนตัวควบคุมที่โต้ตอบกับ HTML ของคุณ

สมมติว่าเราจำเป็นต้องเพิ่มแอตทริบิวต์ JavaScript เช่น 05 , 18 และ 24 ไปยังองค์ประกอบบนเพจ เราจะเขียนตัวควบคุมการกระตุ้นด้วยการเข้าถึงองค์ประกอบที่ได้รับเหตุการณ์ตามคุณลักษณะเหล่านั้น นี่คือตัวอย่าง: