Turbolinks 101

Transcript

1. Turbolinks 101 Alessandro Dias Codeminer42 adbatista @adbatista1
4. Turbolinks 101
5. Vamos falar de uma preocupação do desenvolvedor WEB
6. Como acelerar o carregamento de páginas
8. #= require jquery #= require jquery_ujs #= require_tree app
9. #= 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
10. #= 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
11. Como funciona uma requisição de página ?
13. /users
14. /users
15. O que fazer?
16. Carregamento especulativo
17. Single Page Frameworks
18. Single Page Frameworks • É para Single Page applications; • Dificulta SEO e acessibilidade; • Precisa de uma camada de API;
19. PJAX
20. Pjax • Configurável; • Boa performance; • Depende do JQuery; • Precisa alterar o controller para retornar o conteúdo especifico;
21. Turbolinks
22. 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;
23. gem ‘turbolinks’ //= require jquery //= require turbolinks stylesheet_link_tag 'application', media: 'all', 'data-turbolinks- track' => true javascript_include_tag 'application', 'data-turbolinks-track' => true
24. Turbolinks avalia todos scripts retornados dentro do body É recomendado mover todos scripts para o <head>
25. Mas eu realmente preciso adicionar scripts dentro do <body>
26. <script data-turbolinks-eval=false>
27. E se eu quiser desabilitar o Turbolinks para algum link especifico?
28. <a ... data-no-turbolink>
29. Turbolinks + JQuery
30. Turbolinks + JQuery $(document).on('page:load', function(){ .... });
31. Mas minha app já tem vários JQuery.ready...
32. gem ‘jquery-turbolinks’ //= require jquery //= require jquery.turbolinks //= require jquery_ujs // ... your other scripts here ... //= require turbolinks
34. Turbolinks + libs externas http://reed.github.io/turbolinks-compatibility/