Turbolinks: battery-included SPA for Rails

TURBOLINKS BATTERY-INCLUDED SPA FOR RAILS Muhammad Mufid Afif Thursday, March
16th, 2017 GO-JEK Office Blok-M, Jakarta

ME • Rubying since 2012, but working with it profesionally
since 2015 • Previously uses Java (Spring and Play) and C# (Xamarin.Android). And now, Ruby + Rails.

OUTLINE • Rails Modularity: Where is theTL? • TL in
a nutshell and browser performance • HowTL works • Usage and Caveats

• One of the most “interesting” Ruby and Rails Philosophy
• More is better. • Array#first or Array[0]? Up to you! • alias_method everywhere! • Trivia: other platform/framework discourage duplication because it is confusing. • Ruby and Rails encourage aliasing because, well, without it, it is confusing!

Having more choice is good! Aspect Rails way Alternatives DB
ActiveRecord Sequel Views ERB, Jbuilder HAMLIT, JB Cache Backbone Memcached Redis Testing MiniTest Rspec JS “Framework” Turbolinks Ember, React, Vue *via Sprockets

Let’s start with a question...

Who use jQuery in 2017? Why not migrating to React.js
or Ember? Isn’t this is the year of SPA?

Tl;dr: Your use case may be unique, don’t force yourself
into a framework Well, as you can see in previous Table, the choice is yours. Most default things in Rails can be replaced.

TURBOLINKS * Note: olderTurbolinks version has dependency to jQuery, but
it has been being stand-alone since years ago • No dependency to any Javascript framework! • Bring SPA-responsiveness to standard Rails application (Thanks toTurbolinks Preview and History Navigation) • Changing DOM • Less browser requests, less 304 Not Modified. That means faster response! • It is included in Rails. You may remove it, but you can also use it. Up to the devs.

UNDERSTANDING BROWSER REQUEST AND 304 RESPONSE • 304 Not Modified
may be sent if: • If-Modified-Since was the same with server’s version • ETag hash is the same with server’s version • But the request still happens... Even if the response’s body is 0 bytes. • Slower request!

• Avatars got 304 (Even if it had the same
fingerprint!) • JS and CSS got 304

Ура! *cheering in Russian

Ура! *cheering in Russian • Trivia: Adding DOM with same
locator (URL) won’t download it twice. • Avatars wasn’t downloaded • JS and CSS wasn’t downloaded

Without TL With TL

Thanks Turbolinks! Let’s make a fewer request. ... thus faster.

How Does Turbolinks Work?

1. Anchor Injection

* Version: Turbolinks 5.0.0 HTML has been loaded Inject “click”
event on parent element, with event capturing and bubbling 1. ANCHOR INJECTION Normal navigation will be replaced with Turbolinks’ Visit

* Version: Turbolinks 5.0.0 DOMContentLoaded Inject “event” via document.addEventListener(‘click’) 1.
ANCHOR INJECTION Normal navigation will be replaced with Turbolinks’ Visit

* Version: Turbolinks 5.0.0 DOMContentLoaded Inject “event” via document.addEventListener(‘click’) 1.
ANCHOR INJECTION Normal navigation will be replaced with Turbolinks’ Visit Rails automatically adds “Turbolinks-Location” for 3xx/Redirection

2. TurbolinksVisit

* Version: Turbolinks 5.0.0 Exists in cache and the page
was allowed to be previewed? 2. TURBOLINKS VISIT

was allowed to be previewed? Asynchronously load target href 2. TURBOLINKS VISIT Load from cache, inject ‘data-turbolinks-preview=true’ in <html /> root YES NO Assets version changed? Page loaded Do a full reload YES Replace metas, title, and body NO Put in cache (if allowed)

was allowed to be previewed? 2. TURBOLINKS VISIT

3. History Navigation Or, back and forward in browser

* Version: Turbolinks 5.0.0 Exists in cache AND the page
was allowed to be cached? Asynchronously load target href 3. HISTORY NAVIGATION Load from cache YES NO Assets version changed? Page loaded Do a full reload YES Replace metas, title, and body NO Put in cache (if allowed)

Usage and Caveats!

• You can’t use $.ready since it will be fired
only once or multiple times! • Careful: Don’t attach turbolinks:load in inline script, since it will be fired twice! • Recommended way: • Require all components in application.js • Since each page is unique; put initialization as inline script, at the end of the body – so that page specific JS won’t make main script dirty COMPONENT INITIALIZATION

• Components may create their own DOM after initialization (e.g.:
Select2) • Without cleanup, those components may work incorrectly since they are not designed forTurbolinks (obviously!) DOM CLEANUP

Example: Cleanup for select2 var target; var removeSelector = ".select2-hidden-accessible";
// Select2 Removal target = $(removeSelector).first(); if (target.length > 0) { target.each(function() { var par = $(this).parent(); par.find(removeSelector) .removeClass(removeSelector); par.find(".select2").remove(); }); }

• Recommended way: Consider ujs-style event injection • put attributes
in data- • Define actions in data- • Use .on, put .on inside main script that is included by application.js • If it is page specific, use inline script. EVENT INJECTION

TIMEOUT AND INTERVAL • Be sure to clean it up
before next Turbolinks’ visit (add cleanup via turbolinks:before-render) • Warning again: all inline scripts are executed twice with Turbolinks’ Preview!

Example: Interval cleanup var timers = []; var attachInterval =
function() { var handler = setInterval( ... ) timers.push(handler); } document.addEventListener('turbolinks:before-render', function() { $(timers).each(function() { clearInterval(this); }); timers = []; });

Demo https://blurrrggghhhh.herokuapp.com/posts https://github.com/mufid/tl-demo Component Initialization DOM Cleanup Event Injection Timeout
and Interval

Try back, forward, back, forward, click on a link, back,
forward, your pages!

Thank you.

Question / Discussion?

CREDITS • Globe by Fatahillah from the Noun Project •
Subway by Viktor Fedyuk from the Noun Project • Exhaust Problem by Oliviu Stoian from the Noun Project

Turbolinks: battery-included SPA for Rails

Turbolinks: battery-included SPA for Rails

More Decks by Muhammad Mufid Afif

Other Decks in Programming

Featured

Transcript