Turbolinks 101

Turbolinks 101 Alessandro Dias Codeminer42 adbatista @adbatista1

Turbolinks 101

Vamos falar de uma preocupação do desenvolvedor WEB

Como acelerar o carregamento de páginas

#= require jquery #= require jquery_ujs #= require_tree app

#= require jquery #= require jquery_ujs #= require_tree app #=
require pickadate/picker #= require pickadate/picker.date #= require select2 #= require jquery.slick #= require jquery.scrollTo #= require jquery-maskedinput #= require refile #= require components/modal

#= require jquery #= require jquery_ujs #= require_tree app #=
require pickadate/picker #= require pickadate/picker.date #= require select2 #= require cocoon #= require jquery.slick #= require jquery.scrollTo #= require jquery-maskedinput #= require refile #= require jQuery.toggleModifier #= require helpers/toggle_element #= require helpers/token_fields #= require helpers/hide_if #= require helpers/carousel #= require helpers/cocoon #= require helpers/pickadate_translate #= require helpers/pickadate #= require helpers/error_fields #= require helpers/sticky_header #= require helpers/mask_fields #= require components/accordions #= require components/tabs_navigation #= require components/modal #= require components/rounds_navigation #= require components/preview_upload #= require components/social_buttons #= require pages/tournament_creation #= require pages/tournaments #= require pages/player #= require page_control

Como funciona uma requisição de página ?

/users

O que fazer?

Carregamento especulativo

Single Page Frameworks

Single Page Frameworks • É para Single Page applications; •
Dificulta SEO e acessibilidade; • Precisa de uma camada de API;

Pjax • Configurável; • Boa performance; • Depende do JQuery;
• Precisa alterar o controller para retornar o conteúdo especifico;

Turbolinks

Turbolinks • Desenvolvida pela Basecamp (antiga 37Signals); • Usado na
versão mobile do campfire; • Simples de add na app; • Não precisa de alteração no backend; • Executa full page load em navegadores incompatíveis;

gem ‘turbolinks’ //= require jquery //= require turbolinks stylesheet_link_tag 'application',
media: 'all', 'data-turbolinks- track' => true javascript_include_tag 'application', 'data-turbolinks-track' => true

Turbolinks avalia todos scripts retornados dentro do body É recomendado
mover todos scripts para o <head>

Mas eu realmente preciso adicionar scripts dentro do <body>

E se eu quiser desabilitar o Turbolinks para algum link
especifico?

Turbolinks + JQuery

Turbolinks + JQuery $(document).on('page:load', function(){ .... });

Mas minha app já tem vários JQuery.ready...

gem ‘jquery-turbolinks’ //= require jquery //= require jquery.turbolinks //= require
jquery_ujs // ... your other scripts here ... //= require turbolinks

Turbolinks + libs externas http://reed.github.io/turbolinks-compatibility/

Turbolinks 101

Turbolinks 101

Alessandro Dias Batista

More Decks by Alessandro Dias Batista

Other Decks in Programming

Featured

Transcript

Turbolinks 101 Alessandro Dias Codeminer42 adbatista @adbatista1

Turbolinks 101

Vamos falar de uma preocupação do desenvolvedor WEB

Como acelerar o carregamento de páginas

#= require jquery #= require jquery_ujs #= require_tree app

#= require jquery #= require jquery_ujs #= require_tree app #=

#= require jquery #= require jquery_ujs #= require_tree app #=

Como funciona uma requisição de página ?

/users

/users

O que fazer?

Carregamento especulativo

Single Page Frameworks

Single Page Frameworks • É para Single Page applications; •

PJAX

Pjax • Configurável; • Boa performance; • Depende do JQuery;

Turbolinks

Turbolinks • Desenvolvida pela Basecamp (antiga 37Signals); • Usado na

gem ‘turbolinks’ //= require jquery //= require turbolinks stylesheet_link_tag 'application',

Turbolinks avalia todos scripts retornados dentro do body É recomendado

Mas eu realmente preciso adicionar scripts dentro do <body>

<script data-turbolinks-eval=false>

E se eu quiser desabilitar o Turbolinks para algum link

<a ... data-no-turbolink>

Turbolinks + JQuery

Turbolinks + JQuery $(document).on('page:load', function(){ .... });

Mas minha app já tem vários JQuery.ready...

gem ‘jquery-turbolinks’ //= require jquery //= require jquery.turbolinks //= require

Turbolinks + libs externas http://reed.github.io/turbolinks-compatibility/