Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Turbolinks 101

Avatar for Alessandro Dias Batista Alessandro Dias Batista
September 19, 2015
Programming
130
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
28
Aplicações Real-time com Phoenix LiveView
Avatar for Alessandro Dias Batista adbatista
0
34
Aprenda http criando seu server
Avatar for Alessandro Dias Batista adbatista
0
33
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
220

Other Decks in Programming

See All in Programming
typoなんかねぇよ
Avatar for らすぴー raspython3
0
680
数年滞っていたダークモード対応をおよそ2週間で完了させる
Avatar for Kazuki Chigita chigichan24
0
700
型解析で実現する Go の言語内 DSL / Conference に Go! タイムテーブルの歩き方 for Gophers
Avatar for mazrean mazrean
0
140
一参加者から『中の人』へ 〜全通PHPerがブースに立って学んだ、カンファレンスを100倍楽しむコツ〜
Avatar for 藤掛大介 wp_daisuke
0
140
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
160
AWS DevOps Agentで インシデント対応をAIに任せたい
Avatar for HonMarkHunt honmarkhunt
7
2.7k
「AI時代、配布するPythonコードをどう守るか: 難読化の実験と判断軸」 #PyconJP2026
Avatar for PKSHA Technology（パークシャテクノロジー） pkshadeck
PRO
2
190
Vibes Containers 〜AIで変わるコンテナ設計と運用〜
Avatar for Tetsuya Kikuchi tkikuc
3
520
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
1.6k
20260828_品質と開発生産性を両立させる、AI時代のE2Eテストの考え方
Avatar for MagicPod magicpod
0
180
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
9
3.9k
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
Avatar for nogu nogu66
0
140

Featured

See All Featured
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
930
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
270
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
210
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
13
39k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
220k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k

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