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

Turbolinks

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tony Messias Tony Messias
August 31, 2017
Programming
140
0

 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

More Decks by Tony Messias

See All by Tony Messias
Hotwire Native (and Hotwire 101) for Laravel Devs
Avatar for Tony Messias tonysm
0
100
Hotwire: Aplicações Web Modernas e Minimalistas
Avatar for Tony Messias tonysm
0
200
Introduction to Kubernetes
Avatar for Tony Messias tonysm
0
71
Phoenix for Laravel Developers
Avatar for Tony Messias tonysm
0
820
Queues & Async Apps
Avatar for Tony Messias tonysm
0
120
ELK Stack and Application Discovery
Avatar for Tony Messias tonysm
0
170
Laravel's Ecosystem
Avatar for Tony Messias tonysm
0
170
Command-Oriented Architecture
Avatar for Tony Messias tonysm
3
380
Elasticsearch
Avatar for Tony Messias tonysm
0
150

Other Decks in Programming

See All in Programming
10年分の技術的負債、完済へ ― Claude Code主導のAI駆動開発でスポーツブルを丸ごとリプレイスした話
Avatar for nero15 takuya_houshima
0
2.5k
Codex CLI でつくる、Issue から merge までの開発フロー
Avatar for amata1219 amata1219
0
350
AI時代の脳疲弊と向き合う ~言語学としてのPHP~
Avatar for Sakurai sakuraikotone
1
1.9k
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
Avatar for Suguru Ohki suguruooki
0
260
JAWS-UG横浜 #100 祝・第100回スペシャル AWS は VPC レスの時代へ
Avatar for maroon1st maroon1st
0
110
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
190
Rethinking API Platform Filters
Avatar for Vincent Amstoutz vinceamstoutz
0
11k
mruby on C#: From VM Implementation to Game (RubyKaigi 2026)Scripting
Avatar for hadashiA hadashia
1
150
セグメントとターゲットを意識するプロポーザルの書き方 〜採択の鍵は、誰に刺すかを見極めるマーケティング戦略にある〜
Avatar for memory m3m0r7
PRO
0
500
「効かない！」依存性注入（DI）を活用したAPI Platformのエラーハンドリング奮闘記
Avatar for Maki Hayashi mkmk884
1
330
JOAI2026 1st solution - heron0519 -
Avatar for heron0519 heron0519
0
110
t *testing.T は どこからやってくるの？
Avatar for Kotaro Otaka otakakot
0
190

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.2k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
520
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
130
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
1k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
440
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.1k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.7k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
140

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!