Speeding up Initial Rendering of Rails Pages with render_async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

Nikola Đuza

Novi Sad, Serbia

Software Engineer @ Toptal

Open source contributor

Novi Sad JS Organizer

https://nikolalsvk.github.io/

@nikolalsvk

Nikola Đuza

Novi Sad, Serbia

Software Engineer @ Toptal

Open source contributor

Novi Sad JS Organizer

https://nikolalsvk.github.io/

/nikolalsvk

/nikolalsvk

@nikolalsvk

/nikolalsvk

https://slides.com/nikolalsvk/render-async

/nikolalsvk

Nikola Đuza

Novi Sad, Serbia

Software Engineer @ Toptal

Open source contributor

Novi Sad JS Organizer

https://nikolalsvk.github.io/

@nikolalsvk

🏍💨 Rails is FAST 🏎💨

@nikolalsvk

https://slides.com/nikolalsvk/render-async

Rails is FAST❓

@nikolalsvk

https://slides.com/nikolalsvk/render-async

Let's PROVE it

@nikolalsvk

https://slides.com/nikolalsvk/render-async

by building a website

Let's PROVE it

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

SHOW page

/movies/1

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

Lets add some ratings

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

SHOW page

/movies/1

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

🐌 Rails is SLOW 🛵

@nikolalsvk

https://slides.com/nikolalsvk/render-async

It can't be

@nikolalsvk

https://slides.com/nikolalsvk/render-async

🐌 Rails is SLOW 🛵

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

🐌 Rails is SLOW 🛵

WE MADE IT SLOW

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

SHOUT OUT TO

YOU'RE NOT SLOW ❤️

@nikolalsvk

https://slides.com/nikolalsvk/render-async

ANYWAYS

LET'S OPTIMIZE THIS ASAP

@nikolalsvk

https://slides.com/nikolalsvk/render-async

WE'RE GOING TO USE render_async

✨ https://github.com/renderedtext/render_async ✨

@nikolalsvk

https://slides.com/nikolalsvk/render-async

WHY render_async❓

@nikolalsvk

https://slides.com/nikolalsvk/render-async

INTERNET POINTS

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

REPLACE THIS INSIDE

app/views/movies/show.html.erb

STEP #1

@nikolalsvk

https://slides.com/nikolalsvk/render-async

WITH THIS

app/views/movies/show.html.erb

STEP #1

@nikolalsvk

https://slides.com/nikolalsvk/render-async

config/routes.rb

STEP #2

@nikolalsvk

https://slides.com/nikolalsvk/render-async

STEP #3

@nikolalsvk

https://slides.com/nikolalsvk/render-async

REMEMBER THIS

app/views/movies/show.html.erb

@nikolalsvk

https://slides.com/nikolalsvk/render-async

LET'S PUT IT INSIDE

app/views/movies/_rating.html.erb

STEP #4

@nikolalsvk

https://slides.com/nikolalsvk/render-async

ADD content_for TO

app/views/layouts/application.html.erb

STEP #5

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

INITIAL PAGE LOAD

REDUCED FROM

4s to 24ms

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

BUT THE USER STILL SEES THIS

@nikolalsvk

https://slides.com/nikolalsvk/render-async

LET'S ADD A PLACEHOLDER

@nikolalsvk

https://slides.com/nikolalsvk/render-async

app/views/movies/show.html.erb

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

HOW DOES IT WORK❓

✨ https://github.com/renderedtext/render_async ✨

@nikolalsvk

https://slides.com/nikolalsvk/render-async

2 PARTS

1. Rails

2. JavaScript

@nikolalsvk

https://slides.com/nikolalsvk/render-async

VIEW HELPER

  • defines render_async view helper 📝

  • makes it available in views 👐

  • passes all the arguments to render_async partial 🛂

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

render_async PARTIAL

  • sets up neccessary HTML elements 🏗

  • puts a placeholder 📭

  • passes arguments of render_async call to JS part 🤝

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

LET'S BREAK IT DOWN

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

ADD content_for TO

app/views/layouts/application.html.erb

STEP #5

@nikolalsvk

https://slides.com/nikolalsvk/render-async

2 PARTS

✅ 1. Rails

2. JavaScript

@nikolalsvk

https://slides.com/nikolalsvk/render-async

JavaScript part

  • makes a request to a path that we passed to render_async 🚀

  • inserts request response to a page where we put render_async 🛬

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

2 PARTS

✅ 1. Rails

✅ 2. JavaScript

@nikolalsvk

https://slides.com/nikolalsvk/render-async

NOW THIS MAKES SENSE

@nikolalsvk

https://slides.com/nikolalsvk/render-async

HOW DOES IT WORK❓

  • It loads partials asynchronously from the server

  • renders them on the page

@nikolalsvk

https://slides.com/nikolalsvk/render-async

LET'S PIMP OUR DVD WEBSITE

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

LET'S ADD RATINGS ON INDEX PAGE

@nikolalsvk

https://slides.com/nikolalsvk/render-async

app/views/movies/index.html.erb

@nikolalsvk

https://slides.com/nikolalsvk/render-async

app/views/movies/index.html.erb

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

YOU CAN DO OTHER THINGS WITH render_async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

ADD SOME STYLING 💅

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

ADD ERROR HANDLING 🌋

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

@nikolalsvk

https://slides.com/nikolalsvk/render-async

OTHER FEATURES

  • Polling 🔃

  • Caching 💽

  • Event dispatching 🎆

  • Toggling 👆

@nikolalsvk

https://slides.com/nikolalsvk/render-async

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

@nikolalsvk

https://slides.com/nikolalsvk/render-async

Спасибо!

@nikolalsvk

https://slides.com/nikolalsvk/render-async

Made with Slides.com