This weblog publish will clarify all new options and the way they got here to be within the newest 2.1.9 model.
We’ll begin of with the brand new Turbo help.
⚡️ Turbo help
render_async joins the Turbo occasion
The brand new Turbo is definitely a
continuation of the
Turbolinks.
In case you forgot about Turbolinks – it lets you carry a single-page
expertise into your software with out an excessive amount of fuss.
What Turbo is doing is following up on the thought of Turbolinks with extra
ideas. With Turbolinks, you’ll be able to navigate the pages, and the Turbolinks would
cache them, so you’re feeling that every little thing is easy like in a single-page app.
Transferring across the browser’s historical past like that was revolutionary again within the day
(I consider it’s nonetheless fascinating).
However how does it actually work? The components of the web page are cached so once you
navigate again to the web page, you immediately get a preview till the precise web page
request is completed. This attracts the phantasm of a single-page app. Now, this
idea is extracted into Turbo Drive. The
Turbo Drive
a part of the Turbo is what we’re thinking about.
However how does it actually work? The pages are cached, so once you navigate again to
the web page, you immediately get a preview till the precise web page request finishes.
By exhibiting a preview of the web page, Turbolinks attracts the phantasm of a
single-page app. Now, this idea moved into Turbo Drive. And we’re exactly
within the Turbo Drive half
of the Turbo.
All this magical rendering is the place render_async is available in. Since render_async
makes async requests after the web page hundreds, we’ve to help this in some way.
Whenever you go to a web page that has Turbo enabled and is cached inside Turbo, you
will first get a preview of the web page. Within the meantime, a request is shipped to the
backend to get the brand new model of the web page. Then, when the brand new model arrives,
it can substitute it with the preview model.
To deal with these results and make render_async work, we first recommended to place
data-turbolinks-track="reload" or now data-turbo-track="reload" to the
render_async calls. These information attributes cease Turbo from doing its magic, which
is just not one thing each consumer needs. Then, a intelligent contribution from Mbuckley0
made it attainable to have the Turbo performance and have render_async working.
The thought is to have render_async work after turbo:load occurs – or in plain
phrases – when Turbo hundreds the web page. However, we additionally must cease render_async from
performing when the preview is exhibiting with the Turbolinks. All you have to do
is about the turbo configuration like so:
RenderAsync.configure do |config|
config.turbo = true
finish🔮 Future Turbo work
Sure, the render_async is working with the Turbo. However, we wish to make it work
higher. Proper now, there’s a slight itch that’s been bugging different customers and
me. After you get the Turbo preview and the web page replaces the preview, the
render_async name performs and replaces the preview values.
It in all probability sounds a bit complicated, so I’ll present a GIF that ought to illustrate it higher:
Discover how after we click on on both of the hyperlinks, we get the preview of the web page with the ”render_async right here :wave:” textual content. Then, the web page is fetched from the backend and render_async is triggered as soon as extra. At that time, we see the ”...Loading /render_async/wave” half. And eventually, after the wave request finishes, the web page is again to its state as within the preview.
A future enchancment could be if we may skip the exhibiting of the loading indicator for render_async. It might be good to point out a preview contained in the render_async container till render_async fetches the freshest information from the request.
If in case you have any concepts or would like to contribute, let me know on our Discord server or ping me on Twitter right here. Thanks so much.
🐛 Minor bug repair
There was an issue with the configuration choices within the gem. We mounted it simply
by a easy rename, however the bizarre factor is the way it was nearly unnoticed. You’re good
now to make use of varied configuration choices.
There have been additionally small updates to the documentation, however nothing too drastic
there – simply small typo fixes.
Last ideas
That’s it for this model. Thanks, everybody, for contributing. Take into account
becoming a member of the Discord server,
that manner, we will make it even higher.
Additionally, be at liberty to share this on Twitter with mates and coworkers beneath:
I launched the two.1.9 model of render_async immediately. Try what’s new beneath 👇https://t.co/aLpAKd9f44
— Nikola Đuza (@nikolalsvk) February 23, 2021
I’ll see you within the subsequent one, cheers.
