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

Turbolinks

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Tony Messias Tony Messias
August 31, 2017
Programming
0
130

 Turbolinks

In this talk I shared some options on hybrid development and the Rails way of doing things, talking about how it works for Basecamp. Most of the ideas here are taken from Basecamp talks and texts, but I added my two cents in the slides and also sharing what it took for me to add Turbolinks in a demo application I got.

Sources per slide:

Slide 6:
- https://medium.com/@js_tut/anatomy-of-a-react-application-d465739ec6be

Slide 8:
- https://www.youtube.com/watch?v=SWEts0rlezA

Slide 9:
- https://en.wikipedia.org/wiki/Document_Object_Model

Slide 10, 11:
- https://www.youtube.com/watch?v=SWEts0rlezA

Slide 12:
- https://www.youtube.com/watch?v=SWEts0rlezA
- https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/
- http://jgaskins.org/blog/2016/02/28/turbolinks-vs-the-virtual-dom

Slide 13:
- https://www.youtube.com/watch?v=SWEts0rlezA
- https://ssr.vuejs.org/en/

Slide 16:
- https://www.youtube.com/watch?v=SWEts0rlezA

Slide 17:
- https://www.youtube.com/watch?v=Cx6aGMC6MjU
- https://m.signalvnoise.com/the-majestic-monolith-29166d022228
- https://www.flickr.com/photos/planetargon/127984254/

Slide 18:
- https://www.youtube.com/watch?v=Cx6aGMC6MjU

Slide 20, 21, 22, 29:
- https://www.youtube.com/watch?v=SWEts0rlezA

Slide 30:
- https://github.com/turbolinks/turbolinks-android

Avatar for Tony Messias

Tony Messias

August 31, 2017
Tweet

More Decks by Tony Messias

See All by Tony Messias
Hotwire Native (and Hotwire 101) for Laravel Devs
Avatar for Tony Messias tonysm
0
85
Hotwire: Aplicações Web Modernas e Minimalistas
Avatar for Tony Messias tonysm
0
190
Introduction to Kubernetes
Avatar for Tony Messias tonysm
0
62
Phoenix for Laravel Developers
Avatar for Tony Messias tonysm
0
810
Queues & Async Apps
Avatar for Tony Messias tonysm
0
110
ELK Stack and Application Discovery
Avatar for Tony Messias tonysm
0
160
Laravel's Ecosystem
Avatar for Tony Messias tonysm
0
160
Command-Oriented Architecture
Avatar for Tony Messias tonysm
3
380
Elasticsearch
Avatar for Tony Messias tonysm
0
140

Other Decks in Programming

See All in Programming
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
180
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
2.4k
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
530
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
Avatar for Haochen Kotoi-Xie haochenx
0
100
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.2k
CSC307 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
490
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
7
7.3k
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.7k
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
950
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.7k
[AI Engineering Summit Tokyo 2025] LLMは計画業務のゲームチェンジャーか？ 最適化業務における活⽤の可能性と限界
Avatar for terry-u16 terryu16
2
610

Featured

See All Featured
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
130
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
14k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.9k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.7k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
230
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
240
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
37
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
730

Transcript

  1. Turbolinks por Tony Messias

  2. None
  3. None
  4. None
  5. None

  6. source

  7. None

  8. source

  9. source

  10. source

  11. source

  12. source 2 source 1 source 3

  13. source 2 source 1

  14. None
  15. None

  16. source

  17. source 2 source 1 source 3

  18. source

  19. None

  20. source

  21. source

  22. document.body = ... source

  23. demo!

  24. <html> <head> <title>Exemplo</title> <link rel="stylesheet" href="/app.css" /> </head> <body> <div

    id="app"> <deliveries></deliveries> </div> <script src="/app.js"></script> </body> </html> import Vue from 'vue'; import Deliveries from './components/Deliveries.vue'; new Vue({ el: '#app', components: {Deliveries}, });

  25. // ... import Turbolinks from 'turbolinks'; new Vue({ el: '#app',

    components: {Deliveries}, }); Turbolinks.start();

  26. // ... import Turbolinks from 'turbolinks'; import VueTurbolinks from 'vue-turbolinks';

    document.addEventListener('turbolinks:load', () => { new Vue({ el: '#app', mixins: [VueTurbolinks], components: {Deliveries}, }); }); Turbolinks.start();

  27. Nem tudo são flores... → Turbolinks não trabalha bem com

    forms HTML, eles aconselham a transformar todo form em AJAX, o que no rails é fácil. <%= form_for(@model,:html=>{:remote=>true}) do |f |%> → Alguns plugins e widgets de UI podem precisar de um maior cuidado, visto que você tem que utilizar os hooks do Turbolinks para fazer a inicialição/destruição dos mesmos.

  28. mas não para por ai...

  29. source

  30. source

  31. None

  32. mais demo!

  33. That’s all!