On this weblog publish, we’ll clarify all new options and the way they got here to be within the
newest 2.1.7 model.
Hey, thanks for studying concerning the new launch, I actually respect it! Earlier than we bounce
into particulars, I’d like to say that I created a render_async Discord server.
Please be part of us there, we’re simply beginning! Let’s make this gem even higher.
The brand new model has a few new options you possibly can check out:
- Retry render_async request after a while
- Management polling by dispatching occasions
- Customise content_for title
Additionally, our README acquired a model new shine to it ✨
Let’s go over all the brand new options and the right way to use them.
Wait a bit, then retry
Earlier than, we added a function the place you can inform render_async to retry the
request if it fails. It’s fairly easy. All you have to do is
specify the variety of retries you wish to have. If the request shouldn’t be
profitable after, let’s say, three makes an attempt, the render_async will cease
retrying.
Retrying is beneficial for some endpoints which can be ‘flaky’, that means that generally they
return the profitable response, generally they fail. To do that, you possibly can write the next:
<%= render_async users_path, retry_count: 5 %>By setting retry_count, we’re telling what number of instances render_async ought to
retry the request to the users_path in our case. However, for some of us, it might be
helpful to have some delay between the requests. For instance, possibly the server
you are attempting to achieve is overcrowded, and it might use a break from fixed
requests. No matter the reason being, now you can set a retry_delay like so:
<%= render_async users_path,
retry_count: 5,
retry_delay: 2000 %>We’re giving the server a 2 seconds break earlier than render_async makes one other
request to it. The logic with retrying will keep the identical, that means the
render_async will stop retrying after fifth try.
I’m blissful to listen to your experiences with this function! Think about becoming a member of
the render_async Discord server and get a response rapidly!
Hey, you, cease. OK, now begin.
With render_async, you possibly can simply do
HTML polling with out having to write down JavaScript.
You are able to do this by scripting this in your view:
<%= render_async comments_path, interval: 5000 %>render_async will then ship a request to comments_path each 5 seconds. This
is all good and dandy, however how within the hell do you cease it? I’m glad you requested.
Earlier than, you can management polling by interacting with a component on the web page,
similar to a hyperlink that may cease and begin polling. To do that, you are able to do
one thing like so:
<a href='#' id='comments-button'>Load feedback</a>
<%= render_async comments_path,
toggle: { selector: '#comments-button', occasion: :click on },
interval: 2000 %>The “Load feedback” button will function a change, toggle when you like. What you have to do
is to specify what’s a toggle to render_async. You are able to do this by passing a toggle choices
object with selector – an ID of the ingredient, and occasion – e.g. ‘click on’ if the ingredient is a button.
In our case, at any time when a person clicks the “Load feedback” button, the polling
will cease if began, or begin if stopped.
You could possibly make the most of occasions render_async is dispatching
after every request to alter the copy of the hyperlink
in order for you, however that’s a narrative for one more publish.
Think about becoming a member of the e-newsletter to get new posts ASAP.
Cease, however with occasions
We described a method on the right way to management polling. The brand new model added the flexibility to
management polling by dispatching occasions. In different phrases, render_async now listens for:
- ‘async-stop’, and
- ‘async-start’ occasions.
All you have to do is the next:
<%= render_async comments_path,
container_id: 'controllable-interval',
interval: 3000 %>render_async will ballot the comments_path each 3 seconds, and it’ll put the response within the
container with controlalble-interval ID. We are going to see in a second why this issues. Then,
in your view, you possibly can put two buttons – one to cease polling, one other to begin it.
<button id="stop-polling">Cease polling</button>
<button id="start-polling">Begin polling</button>
<script>
var container = doc.getElementById("controllable-interval")
var stopPolling = doc.getElementById("stop-polling")
var startPolling = doc.getElementById("start-polling")
var triggerEventOnContainer = perform (eventName) {
var occasion = new Occasion(eventName)
container.dispatchEvent(occasion)
}
stopPolling.addEventListener("click on", perform () {
container.innerHTML = "<p>Polling stopped</p>"
triggerEventOnContainer("async-stop")
})
startPolling.addEventListener("click on", perform () {
triggerEventOnContainer("async-start")
})
</script>We then set off ‘async-stop’ at any time when “Cease polling” is clicked, or we set off
‘async-start’ at any time when “Begin polling is clicked.
💡 Please observe that occasions have to be dispatched to a render_async container.
Controlling by occasions is fairly neat when you want that fine-grained management
over the polling. One other enchancment
that may be made is to cease polling based mostly on the response from a server
or to go in an choice to
begin polling instantly when the toggle is about
(which isn’t the case proper now). If you’re inquisitive about any of those or have questions or suggestions,
contemplate becoming a member of the render_async Discord server!
Naming is difficult
One other function within the 2.1.7 model permits you to specify a reputation for the
content_for the place render_async code will reside. It won’t make a lot
sense to you at first, however there’s a chance to have a render_async inside
render_async 🤯.
You’ll name render_async for one endpoint, and that endpoint has one other render_async name
in its response. You may get into extra particulars in the README.
The brand new model permits you to differentiate the place the place the logic for the
nested render_async will reside.
<%= render_async comment_stats_path, content_for_name: :render_async_comment_stats %>
<%= content_for :render_async_comment_stats %>The nested render_async’s logic will render in a unique place than the one
from the father or mother render_async name. Within the instance above, the content material will
render inside render_async_comment_stats path, contemplating you place the
content_for with that title.
Anyhow, if doing this cascade rendering is your factor, we’ve a bug that we
want some assist with. The issue that occurs is that JavaScript doesn’t get evaluated
when you use the Vanilla JS model of the gem. The jQuery model works
completely high-quality as a result of the replaceWith technique from jQuery evaluates JS that
you give to it. You probably have any concepts on the right way to clear up this in plain JavaScript, be part of
our Discord, and let’s speak there.
New look, who this?
Moreover, render_async acquired its README web page polished a bit! Test it out right here
when you’d like, or admire the photograph under:
Don’t forget to star 🌟 the mission and share it with your mates and
coworkers when you discover it helpful.
Closing ideas
Releasing a brand new model, sprucing the README, and dealing on new options was
a blast! Thanks for everybody that helped and hold doing the nice work on
contributing. I do know I
talked about this a couple of instances within the publish, however please be part of the
Discord if you’re utilizing this gem, that method we
could make it even higher!
P.S. 💸 In case you like my work on this gem to this point, and also you wish to give me some juice
and motivation to maintain enhancing and sustaining it, contemplate sponsoring me on
GitHub Sponsors or by
PayPal.
Additionally, be at liberty to share this on Twitter with mates and coworkers under:
I launched a brand new 2.1.7 model of render_async over the weekend.
There is a bunch of latest options, try what you are able to do now 👇https://t.co/VhmaROL2Gl
— Nikola Đuza (@nikolalsvk) August 3, 2020
Till the subsequent one, cheers!
