Speeding up Initial Rendering of Rails Pages with render_async
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6567756/Screenshot_2019-09-22_at_15.59.49.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243581/nikola.png)
Nikola Đuza
Novi Sad, Serbia
Software Engineer @ Toptal
Open source contributor
Novi Sad JS Organizer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243581/nikola.png)
Nikola Đuza
Novi Sad, Serbia
Software Engineer @ Toptal
Open source contributor
Novi Sad JS Organizer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6567767/twitter_PNG9.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6567769/GitHub-Mark.png)
/nikolalsvk
/nikolalsvk
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5243581/nikola.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6567767/twitter_PNG9.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6567769/GitHub-Mark.png)
/nikolalsvk
/nikolalsvk
Nikola Đuza
Novi Sad, Serbia
Software Engineer @ Toptal
Open source contributor
Novi Sad JS Organizer
🏍💨 Rails is FAST 🏎💨
Rails is FAST❓
Let's PROVE it
by building a website
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568196/kvUU7.gif)
Let's PROVE it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568124/Screenshot_2019-09-22_at_18.54.35.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568124/Screenshot_2019-09-22_at_18.54.35.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568751/Screenshot_2019-09-22_at_22.43.56.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568178/Screenshot_2019-09-22_at_19.16.03.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568200/Screenshot_2019-09-22_at_19.16.51.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568213/Screenshot_2019-09-22_at_19.34.26.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568243/maxresdefault.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568658/Screenshot_2019-09-22_at_22.05.18.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568666/Screenshot_2019-09-22_at_22.08.24.png)
SHOW page
/movies/1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568690/Screenshot_2019-09-22_at_22.16.01.png)
Lets add some ratings
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568708/QNFhOolVeCzPQ2Mx85.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568738/Screenshot_2019-09-22_at_22.39.17.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568742/Screenshot_2019-09-22_at_22.37.30.png)
SHOW page
/movies/1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/5499960/confidence.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568746/Screenshot_2019-09-22_at_22.40.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6558072/giphy.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568746/Screenshot_2019-09-22_at_22.40.43.png)
🐌 Rails is SLOW 🛵
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6572819/tenor.gif)
It can't be
🐌 Rails is SLOW 🛵
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568746/Screenshot_2019-09-22_at_22.40.43.png)
🐌 Rails is SLOW 🛵
WE MADE IT SLOW
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568738/Screenshot_2019-09-22_at_22.39.17.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6572915/Screenshot_2019-09-23_at_20.44.10.png)
SHOUT OUT TO
YOU'RE NOT SLOW ❤️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6572973/tumblr_lm55jjPzaE1qklopeo1_500.gif)
ANYWAYS
LET'S OPTIMIZE THIS ASAP
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573031/tenor-1.gif)
WE'RE GOING TO USE render_async
WHY render_async❓
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573037/Screenshot_2019-09-23_at_21.12.50.png)
INTERNET POINTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6592501/Screenshot_2019-09-28_at_11.26.14.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573080/Screenshot_2019-09-23_at_21.25.37.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573083/Screenshot_2019-09-23_at_21.24.13.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573084/Screenshot_2019-09-23_at_21.26.33.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573115/Screenshot_2019-09-23_at_21.36.39.png)
REPLACE THIS INSIDE
app/views/movies/show.html.erb
STEP #1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573116/Screenshot_2019-09-23_at_21.36.58.png)
WITH THIS
app/views/movies/show.html.erb
STEP #1
config/routes.rb
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573166/Screenshot_2019-09-23_at_21.45.24.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573174/Screenshot_2019-09-23_at_21.46.13.png)
STEP #2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573183/Screenshot_2019-09-23_at_21.48.42.png)
STEP #3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573115/Screenshot_2019-09-23_at_21.36.39.png)
REMEMBER THIS
app/views/movies/show.html.erb
LET'S PUT IT INSIDE
app/views/movies/_rating.html.erb
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573197/Screenshot_2019-09-23_at_21.51.43.png)
STEP #4
ADD content_for TO
app/views/layouts/application.html.erb
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573206/Screenshot_2019-09-23_at_21.54.17.png)
STEP #5
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577432/Screenshot_2019-09-24_at_18.28.35.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577431/Screenshot_2019-09-24_at_18.27.43.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577445/first-optimized-request.png)
INITIAL PAGE LOAD
REDUCED FROM
4s to 24ms
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577521/areyouawizzard.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577454/Screenshot_2019-09-24_at_18.35.55.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577432/Screenshot_2019-09-24_at_18.28.35.png)
BUT THE USER STILL SEES THIS
LET'S ADD A PLACEHOLDER
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577507/Screenshot_2019-09-24_at_18.52.40.png)
app/views/movies/show.html.erb
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577509/Screenshot_2019-09-24_at_18.52.16.png)
![](https://media2.giphy.com/media/12NUbkX6p4xOO4/giphy.gif)
HOW DOES IT WORK❓
2 PARTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568186/Ruby_on_Rails_logo.png)
1. Rails
2. JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6578300/logo-javascript-png-file-javascript-logo-png-1052.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568186/Ruby_on_Rails_logo.png)
VIEW HELPER
-
defines render_async view helper 📝
-
makes it available in views 👐
-
passes all the arguments to render_async partial 🛂
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6578322/Screenshot_2019-09-24_at_22.35.27.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568186/Ruby_on_Rails_logo.png)
render_async PARTIAL
-
sets up neccessary HTML elements 🏗
-
puts a placeholder 📭
-
passes arguments of render_async call to JS part 🤝
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6578326/Screenshot_2019-09-24_at_22.36.42.png)
LET'S BREAK IT DOWN
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6578344/Screenshot_2019-09-24_at_22.37.33.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6582415/Screenshot_2019-09-25_at_19.57.15.png)
ADD content_for TO
app/views/layouts/application.html.erb
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6573206/Screenshot_2019-09-23_at_21.54.17.png)
STEP #5
2 PARTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568186/Ruby_on_Rails_logo.png)
✅ 1. Rails
2. JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6578300/logo-javascript-png-file-javascript-logo-png-1052.png)
JavaScript part
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6578300/logo-javascript-png-file-javascript-logo-png-1052.png)
-
makes a request to a path that we passed to render_async 🚀
-
inserts request response to a page where we put render_async 🛬
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6582455/Screenshot_2019-09-25_at_20.08.02.png)
2 PARTS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6568186/Ruby_on_Rails_logo.png)
✅ 1. Rails
✅ 2. JavaScript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6578300/logo-javascript-png-file-javascript-logo-png-1052.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6577445/first-optimized-request.png)
NOW THIS MAKES SENSE
HOW DOES IT WORK❓
-
It loads partials asynchronously from the server
-
renders them on the page
LET'S PIMP OUR DVD WEBSITE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583116/Screenshot_2019-09-25_at_22.01.39.png)
LET'S ADD RATINGS ON INDEX PAGE
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583125/Screenshot_2019-09-25_at_22.02.19.png)
app/views/movies/index.html.erb
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583125/Screenshot_2019-09-25_at_22.02.19.png)
app/views/movies/index.html.erb
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583136/Screenshot_2019-09-25_at_22.06.35.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583138/Screenshot_2019-09-25_at_22.06.02.png)
YOU CAN DO OTHER THINGS WITH render_async
ADD SOME STYLING 💅
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583204/Screenshot_2019-09-25_at_22.25.18.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583205/Screenshot_2019-09-25_at_22.22.37.png)
ADD ERROR HANDLING 🌋
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583220/Screenshot_2019-09-25_at_22.31.10.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6583221/Screenshot_2019-09-25_at_22.31.17.png)
OTHER FEATURES
-
Polling 🔃
-
Caching 💽
-
Event dispatching 🎆
-
Toggling 👆
USE render_async TO:
-
Optimize initial page load
-
Some action is doing too much and it's slow
-
It has a tendency to fail and block the whole page
-
You need to poll for changes
Спасибо!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/673742/images/6567756/Screenshot_2019-09-22_at_15.59.49.png)
Speeding up Initial Rendering of Rails Pages with render_async
By Nikola Đuza
Speeding up Initial Rendering of Rails Pages with render_async
How to speed up your page using render_async
- 1,796