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

Turbolinks

Tony Messias
August 31, 2017
Programming
0
99

 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

Tony Messias

August 31, 2017
Tweet

More Decks by Tony Messias

See All by Tony Messias
Hotwire: Aplicações Web Modernas e Minimalistas
tonysm
0
140
Introduction to Kubernetes
tonysm
0
52
Phoenix for Laravel Developers
tonysm
0
750
Queues & Async Apps
tonysm
0
93
ELK Stack and Application Discovery
tonysm
0
130
Laravel's Ecosystem
tonysm
0
120
Command-Oriented Architecture
tonysm
3
350
Elasticsearch
tonysm
0
130
APIs seguras com OAuth2
tonysm
0
120

Other Decks in Programming

See All in Programming
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
630
Netty Chicago Java User Group 2024-04-17
sullis
0
100
Hanami and htmx
bkuhlmann
0
190
Folding Cheat Sheet #3
philipschwarz
PRO
0
110
ONE WEDGE_company_guide
1wedge_one
0
370
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
スクラムチームと認知負荷 - ニフティのスクラムトーク Vol2. / NIFTY Tech Talk #18
niftycorp
PRO
1
120
CircleCIを活用して AWSへの継続的デリバリーを 実践する
coconala_engineer
1
230
Javaエンジニアのための Nodejs/Nuxt3入門
hidekatsu_izuno
0
280
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
450
Elm Form Validation
bkuhlmann
0
500

Featured

See All Featured
Atom: Resistance is Futile
akmur
258
25k
Documentation Writing (for coders)
carmenintech
59
3.9k
Done Done
chrislema
178
15k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Web Components: a chance to create the future
zenorocha
305
41k
It's Worth the Effort
3n
180
27k
Writing Fast Ruby
sferik
620
60k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Docker and Python
trallard
33
2.7k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
16
6.3k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Web development in the modern age
philhawksworth
202
10k

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!