Turbolinks là optimization tăng perceived performance bằng cách smart về switching pages và reloading assets trong app. Khác conditional GET requests, nó không require changes Ruby code trong Rails app itself. Turbolinks 5 là JavaScript library works everywhere (even without Rails, như static pages) và degrades gracefully trên unsupported browsers.

Turbolinks 5

Turbolinks bundled với Rails và included trong new applications by default since Rails 4. Rails 5 ships với Turbolinks 5, rewrite của Turbolinks Classic.

Mặc dù ship với Rails, version mới Turbolinks là pure JavaScript library dùng trên bất kỳ HTML page nào put trong <script> tag hoặc include vào app JavaScript bundle.

Khi included, Turbolinks tự find all links point to same domain, attach click event listener. Clicks trên those links intercepted. Thay vì follow links như bình thường, request linked page in background via JavaScript dùng XMLHttpRequest. Sau đó, 4 things happen:

1. Copy của current page stored trong Turbolinks cache để dùng sau
2. Nó replaces current page <body> với <body> từ XHR result
3. Nó merges current page <head> với <head> từ XHR result
4. Nó change URL trong browser dùng History API

Bằng merge <head> tags, browser không phải reload và rerender assets như CSS và JavaScript files present trên both pages. Có thể speed up app significantly, đặc biệt nếu nhiều assets reused trên most pages.

Trong fresh Rails 5 app với some views, thấy Turbolinks in action bằng navigate around click links và press back button. Browser network tab, requests pages loaded through Turbolinks marked "xhr". Assets không reload cho every request.

Caching và page previews

Speed up subsequent requests same page, Turbolinks maintain cache recently visited pages. Cho phép render previous page immediately khi press back button, ví dụ.

Speed up perceived performance slow pages, Turbolinks show preview page nếu exists in cache. Sau click link, cached version shown بينما fresh version loads.

Caveats (Lưu ý)

Turbolinks reimplement some browser default features, nên some things work differently với Turbolinks enabled vs without.

turbolinks:load và <script> tags

Vì page không refresh sau every link click, load JavaScript on page load dùng window.onload hoặc DOMContentLoaded không work nữa. Fix đó, Turbolinks supply turbolinks:load event, dùng thay thế:

document.addEventListener("turbolinks:load", function() {
  // ...
})

Browser loading states

Khi switch pages, browser không show loading indicator vì request executed in background.

Attempt fix đó, Turbolinks show blue bar (có thể style với CSS) at top page sau 500 milliseconds indicate page loading.

$ rails new --skip-turbolinks?

Turbolinks 5 come long way since Turbolinks Classic, khi Turbolinks seemed như thing you skip khi generate new Rails app. Là gracefully degrading pure JavaScript plugin không depend on Rails now, works out of box cho most apps, nếu keep caveats in mind.

Return, Turbolinks cho nice speed boost và prevent static assets reloaded every page view, save some network requests. Generate new Rails app, try keep Turbolinks in see what it does. Existing apps, give Turbolinks a try!

Kết thúc overview Turbolinks. Bạn dùng Turbolinks trong apps? We'd love to hear! Cũng curious how you liked this và previous articles AppSignal Academy, hoặc what you'd like to read next @AppSignal.