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
WebMCP Challenge に星空観察アプリで参加した話
Avatar for dario okazaki okajun35
0
120
高専キャリア LT 発表内容
Avatar for Crysta1221 crysta1221
6
5.6k
Family mrubyの進捗
Avatar for Katsuhiko Kageyama kishima
1
110
The Good Stuff, Not the Slop: Engineering High-Quality Android Apps with Modern AI Tooling
Avatar for danybony danybony
1
230
LL言語やWebフレームワークの PostgreSQL対応 〜DBの機能がユーザーに届くまで〜
Avatar for 武田 憲太郎 kentaroutakeda
0
150
思考垂れ流し開発　～音声入力 × AIエージェント × 開発ハーネスによる試行錯誤～
Avatar for NPOS npostring
0
1k
Can LLMs Replicate 4 Years of Compose Migration? Exploring the boundaries of automation with 279 XML files from a real product
Avatar for makun makun
0
130
ソフトウェアラスタライザ
Avatar for Fadis fadis
1
800
フロントエンドUIフレームワークのこれまでとこれから
Avatar for TOMIKAWA Sotaro ssssota
4
2k
GKE で Pod の見方を変えたら、スケールアウト時の挙動を真に捉えられた話
Avatar for Sota Takaki stkk
0
110
Kiroで創り、AgentCoreで繋ぐ！AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
Avatar for matsukada licux
3
410
AI Agent時代のリアーキテクチャ戦略と実践
Avatar for Kazuhito Hokamura hokaccha
6
3.3k

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
456
43k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
3.2k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.3k
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
470
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.6k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.9k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
560
Designing for Performance
Avatar for Lara Hogan lara
611
70k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
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