Turbolinks เป็น optimization ที่เพิ่ม perceived performance โดยการ smart เกี่ยวกับ switching pages และ reloading assets ใน app ของคุณ ต่างจาก conditional GET requests มันไม่ต้องการการเปลี่ยนแปลง Ruby code ใน Rails app ของคุณเลย Turbolinks 5 เป็น JavaScript library ที่ทำงานทุกที่ (แม้โดยไม่มี Rails เหมือน static pages) และ degrade gracefully บน unsupported browsers
Turbolinks 5
Turbolinks ถูก bundled กับ Rails และ included ใน new applications โดยค่าเริ่มต้นตั้งแต่ Rails 4 Rails 5 ships กับ Turbolinks 5 ซึ่งเป็น rewrite ของสิ่งที่ตอนนี้เรียกว่า Turbolinks Classic
แม้จะ ship กับ Rails เวอร์ชันใหม่ของ Turbolinks เป็น pure JavaScript library ที่สามารถใช้บน HTML page ใดๆ ได้ โดยวางใน <script> tag บน page หรือ include เข้า app's JavaScript bundle
เมื่อ included Turbolinks จะ automatically หา links ทั้งหมดที่ point ไป same domain และ attach click event listener คลิกบน links นั้นจะถูก intercept แทนที่จะ follow links เหมือนปกติ มัน request linked page ใน background ผ่าน JavaScript ใช้ XMLHttpRequest แล้ว สี่สิ่งเกิดขึ้น:
- A copy ของ current page ถูกเก็บใน Turbolinks' cache เพื่อใช้ภายหลัง
- มัน replaces current page's
<body>ด้วย<body>จาก XHR result - มัน merges current page's
<head>ด้วย<head>จาก XHR result - มันเปลี่ยน URL ใน browser ใช้ History API
ด้วยการ merge <head> tags browser ไม่ต้อง reload และ rerender assets เหมือน CSS และ JavaScript files ที่มีอยู่บนทั้งสอง pages นี่สามารถ speed up app ของคุณได้อย่างมาก โดยเฉพาะถ้าคุณมี assets เยอะที่ reuse บน most ของ pages
ใน fresh Rails 5 app ที่มี views บ้าง คุณสามารถเห็น Turbolinks ใน action โดย navigate around โดยคลิก links และกด back button ใน browser's network tab คุณจะเห็น requests สำหรับ pages ที่ loaded ผ่าน Turbolinks marked ว่า "xhr" นอกจากนี้ assets ของคุณจะไม่ถูก reload สำหรับทุก request
Caching และ page previews
เพื่อ speed up subsequent requests ไป same page Turbolinks maintain cache ของ recently visited pages นี่อนุญาตให้ render previous page ทันทีเมื่อกด back button ตัวอย่าง
เพื่อ speed up perceived performance ของ slow pages Turbolinks จะ show preview ของ page ถ้ามันมีใน cache หลังจากคลิก link cached version จะถูกแสดงขณะ fresh version กำลัง load
Caveats
Turbolinks reimplements บาง default features ของ browser ดังนั้นบางสิ่งทำงานต่างกับ Turbolinks enabled จาก without
turbolinks:load และ <script> tags
เพราะ page ไม่ refresh หลังจากทุก link click การ load JavaScript บน page load ใช้ window.onload หรือ DOMContentLoaded ไม่ทำงานแล้ว เพื่อ fix นั้น Turbolinks ให้ turbolinks:load event ซึ่งคุณสามารถใช้แทนได้:
document.addEventListener("turbolinks:load", function() { // ... }) Browser loading states
เมื่อ switching ระหว่าง pages browser จะไม่ show loading indicator ใน browser เพราะ request executed ใน background
ในความพยายาม fix นั้น Turbolinks จะ show blue bar (ซึ่งสามารถ style ด้วย CSS) ที่ top ของ page หลัง 500 milliseconds เพื่อ indicate ว่ากำลัง load page
$ rails new --skip-turbolinks?
Turbolinks 5 ได้พัฒนามามากตั้งแต่ Turbolinks Classic เมื่อ Turbolinks ดูเหมือนสิ่งที่คุณ skip ตอน generate new Rails app เป็น gracefully degrading pure JavaScript plugin ที่ไม่ depend on Rails ตอนนี้ มันทำงาน out of the box สำหรับ most apps ถ้าคุณ keep caveats ในใจ
ใน exchange Turbolinks ให้ nice speed boost และป้องกัน static assets ของคุณจากการ reload บนทุก page view ซึ่งประหยัด network requests บ้าง เมื่อ generate new Rails app ลอง keep Turbolinks ไว้ดูว่ามันทำอะไรได้ บน existing apps ให้ Turbolinks ลองดู!
นี่คือสรุป overview ของ Turbolinks คุณใช้ Turbolinks ใน apps ใดๆ ไหม? เรายินดีฟังจากคุณ! นอกจากนี้ เราสนใจว่าคุณชอบบทความนี้และ previous articles ใน AppSignal Academy อย่างไร หรืออยากอ่านอะไรต่อไปที่ @AppSignal
