Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Turbolinks 101

Avatar for Alessandro Dias Batista Alessandro Dias Batista
September 19, 2015
Programming
120
0

Turbolinks 101

Avatar for Alessandro Dias Batista

Alessandro Dias Batista

September 19, 2015

More Decks by Alessandro Dias Batista

See All by Alessandro Dias Batista
Usando agentes de IA no ambiente de desenvolvimento
Avatar for Alessandro Dias Batista adbatista
0
21
Aplicações Real-time com Phoenix LiveView
Avatar for Alessandro Dias Batista adbatista
0
30
Aprenda http criando seu server
Avatar for Alessandro Dias Batista adbatista
0
30
GURUPI - Conhecendo Phoenix Liveview
Avatar for Alessandro Dias Batista adbatista
0
27
Ciclo de trabalho Ágil
Avatar for Alessandro Dias Batista adbatista
1
65
Ruby e o Mercado de trabalho
Avatar for Alessandro Dias Batista adbatista
0
210

Other Decks in Programming

See All in Programming
属人化した知識を、 AIが辿れる地図にする
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
1
130
アルゴリズムは何を圧縮しているのか ─ Haskell から育った「圧縮代数」というメンタルモデル
Avatar for Naoya Ito naoya
16
3.7k
Android CLI
Avatar for Sungyong An fornewid
0
200
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人　～ある倉庫システムの事例から～
Avatar for HideyukiKitao panda728
PRO
0
200
Welcome to the "Parametricity" 🏙️ − Generic だけど Specific な世界 −
Avatar for TAKASE Kazuyuki guvalif
PRO
1
200
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
Avatar for Ryo Tomidokoro hanhan1978
4
1.5k
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
Avatar for kosuke T kosuket
0
360
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
170
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
480
メールのエイリアス機能を履き違えない
Avatar for 船長（せんちょう） isshinfunada
0
170
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
280
OpenSpecのproposalにbrainstormingを持たせてみた
Avatar for Toranosuke Minamikawa tigertora7571
1
160

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
2
52k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
400
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
190
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.1k
Done Done
Avatar for chrislema chrislema
186
16k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
8.9k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
240

Transcript

  1. Turbolinks 101 Alessandro Dias Codeminer42 adbatista @adbatista1

  2. None
  3. None

  4. Turbolinks 101

  5. Vamos falar de uma preocupação do desenvolvedor WEB

  6. Como acelerar o carregamento de páginas

  7. None

  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 ?

  12. None

  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
  33. None

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

  35. None
  36. None
  37. None