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
18
Aplicações Real-time com Phoenix LiveView
Avatar for Alessandro Dias Batista adbatista
0
28
Aprenda http criando seu server
Avatar for Alessandro Dias Batista adbatista
0
27
GURUPI - Conhecendo Phoenix Liveview
Avatar for Alessandro Dias Batista adbatista
0
24
Ciclo de trabalho Ágil
Avatar for Alessandro Dias Batista adbatista
1
64
Ruby e o Mercado de trabalho
Avatar for Alessandro Dias Batista adbatista
0
210

Other Decks in Programming

See All in Programming
ふつうのFeature Flag実践入門
Avatar for irof irof
7
3.9k
タクシーアプリ『GO』の バックエンド開発のおける AI利活用と若者のすべて
Avatar for Kazuhiko Yamashita pyama86
3
2k
TypeScript+Orvalで実現する型安全かつ堅牢でスケーラブルなマルチチャネル通知基盤 / TSKaigi Night talks ~after conference~
Avatar for doriven d0riven
0
340
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
Avatar for Hajime Kato hjmkth
1
230
JJUG CCC 2026 Spring: JSpecify で実現する Kotlin フレンドリーな Java API 設計
Avatar for ternbusty ternbusty
1
170
Even G2とAWSで推しのエージェントを召喚しよう！
Avatar for Har1101 har1101
1
110
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
540
Vue × Nuxt × Oxc どこまで使える？実運用の現在地
Avatar for ANDPAD inc andpad
0
250
Inside Stream API
Avatar for Yuichi.Sakuraba skrb
1
710
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
780
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
260
AIで効率化できた業務・日常
Avatar for Ochtum ochtum
0
130

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
290
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
430
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
123
22k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.2k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k

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