It's been nine months since we released the first beta of Turbo 7, and now the final release is, well, finally here! It's been battle-tested extensively in both Basecamp and HEY, and by the growing community of Turbo programmers who've jumped on board the HTML Over The Wire train with Hotwire.
Things haven't changed dramatically since that first beta, but we have added a range of refinements since. The excellent Handbook and Reference is up-to-date with the latest, so that's a great way to dive in. After you refresh yourself with original screencast, of course. And maybe check out the architectural overview of Hotwire by the Pragmatic Studio, which is also a nice introduction.
However, here are some of the more recent additions you might have missed are during the beta and release-candidate phase:
Lazy-Loaded Frames
In addition to eagerly loading frames together with a new page, there's now also the option to lazy-load those frames only when they appear visible to the user. This is an excellent feature for modals and hidden menus that might not need loading at all, unless the user interacts with them. Many thanks to Sean Doyle for this contribution!
Targeting Multiple Elements
You can now target multiple elements for stream actions using a CSS query selector. Like removing all elements with a given class or replacing all input fields with an error state. This is done by specifying targets="query-selector" instead of target="dom-id". Many thanks to Bo Lopker for this contribution!
Pausing Requests and Rendering
If you want to perform transitions between Turbo pages, you can now pause rendering while you play your animations. The turbo:before-render event has been adapted to allow for async callbacks. If you need to pause requests, like for fetching remote session tokens, you can do so with the turbo:before-fetch-request event, which like turbo:before-render allows for an async callback. Many thanks to Kirill Platonov for these contributions!
Before and After Stream Actions
In addition to the basic five stream actions we originally shipped, we've added Before and After to insert element before and after another element in the DOM. Many thanks to guitarneck for this contribution!
New Frame Events
When you need to hook into Turbo's loading and rendering of frames, you can now use turbo:frame-render and turbo:frame-load, which work just like the full page versions. With turbo:frame-render, you even have access to the FetchResponse via the event.detail.fetchResponse. Many thanks to John Kapantzakis and Sean Doyle for these contributions.
Duplicate Elements Are Removed Before Append/Prepend
When you receive updates to your page through both a WebSocket and as a respond to form submissions, you can get duplicate elements added, and before you had to guard against that yourself. Now we take care of that directly to ensure that no duplicates are allowed. Many thanks to Jérôme Cornet for fixing this!
Compatibility With Nonce Elements In Head
If you're using a content security policy that relies on nonces, Turbo will now disregard these changing attributes as part of its evaluation of the head on elements with data-turbo-track. That means Turbo won't constantly try to reload the page because a nonce changed, when it had already loaded those resources.
Progress Bar Now Also Applies To Form Submissions
We started out having the progress bar only kick in for links, but of course it should also kick in for form submissions. It now does. Many thanks to Jason Meller for fixing this!
Turbo Native Release Candidates
We're also almost ready with the Turbo Native adapters for iOS and Android. Both are in the release candidate phase and will be final shortly.
More shoutouts
In addition to the shoutouts for the most contributions, let's also thank Jeffrey Hardy, Javan Makhmali, and Sam Stephenson for their foundational work on Turbo. And a special mention to Dom Christie for a lot of polish as well.
The Future of Hotwire
As mentioned in the release notes for Stimulus 3, the future for Hotwire is looking awfully... electric ⚡️! Turbo 7 + Stimulus 3 = Hotwire 1.0 and that combo will be shipping by default in Rails 7. The Turbo integration for Rails with turbo-rails is also extensive, and will continue to improve.
HTML Over The Wire is the way.
Things haven't changed dramatically since that first beta, but we have added a range of refinements since. The excellent Handbook and Reference is up-to-date with the latest, so that's a great way to dive in. After you refresh yourself with original screencast, of course. And maybe check out the architectural overview of Hotwire by the Pragmatic Studio, which is also a nice introduction.
However, here are some of the more recent additions you might have missed are during the beta and release-candidate phase:
Lazy-Loaded Frames
In addition to eagerly loading frames together with a new page, there's now also the option to lazy-load those frames only when they appear visible to the user. This is an excellent feature for modals and hidden menus that might not need loading at all, unless the user interacts with them. Many thanks to Sean Doyle for this contribution!
Targeting Multiple Elements
You can now target multiple elements for stream actions using a CSS query selector. Like removing all elements with a given class or replacing all input fields with an error state. This is done by specifying targets="query-selector" instead of target="dom-id". Many thanks to Bo Lopker for this contribution!
Pausing Requests and Rendering
If you want to perform transitions between Turbo pages, you can now pause rendering while you play your animations. The turbo:before-render event has been adapted to allow for async callbacks. If you need to pause requests, like for fetching remote session tokens, you can do so with the turbo:before-fetch-request event, which like turbo:before-render allows for an async callback. Many thanks to Kirill Platonov for these contributions!
Before and After Stream Actions
In addition to the basic five stream actions we originally shipped, we've added Before and After to insert element before and after another element in the DOM. Many thanks to guitarneck for this contribution!
New Frame Events
When you need to hook into Turbo's loading and rendering of frames, you can now use turbo:frame-render and turbo:frame-load, which work just like the full page versions. With turbo:frame-render, you even have access to the FetchResponse via the event.detail.fetchResponse. Many thanks to John Kapantzakis and Sean Doyle for these contributions.
Duplicate Elements Are Removed Before Append/Prepend
When you receive updates to your page through both a WebSocket and as a respond to form submissions, you can get duplicate elements added, and before you had to guard against that yourself. Now we take care of that directly to ensure that no duplicates are allowed. Many thanks to Jérôme Cornet for fixing this!
Compatibility With Nonce Elements In Head
If you're using a content security policy that relies on nonces, Turbo will now disregard these changing attributes as part of its evaluation of the head on elements with data-turbo-track. That means Turbo won't constantly try to reload the page because a nonce changed, when it had already loaded those resources.
Progress Bar Now Also Applies To Form Submissions
We started out having the progress bar only kick in for links, but of course it should also kick in for form submissions. It now does. Many thanks to Jason Meller for fixing this!
Turbo Native Release Candidates
We're also almost ready with the Turbo Native adapters for iOS and Android. Both are in the release candidate phase and will be final shortly.
More shoutouts
In addition to the shoutouts for the most contributions, let's also thank Jeffrey Hardy, Javan Makhmali, and Sam Stephenson for their foundational work on Turbo. And a special mention to Dom Christie for a lot of polish as well.
The Future of Hotwire
As mentioned in the release notes for Stimulus 3, the future for Hotwire is looking awfully... electric ⚡️! Turbo 7 + Stimulus 3 = Hotwire 1.0 and that combo will be shipping by default in Rails 7. The Turbo integration for Rails with turbo-rails is also extensive, and will continue to improve.
HTML Over The Wire is the way.