Turbolinks

August 31, 2017

120

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

0

170

Introduction to Kubernetes

0

58

Phoenix for Laravel Developers

0

800

Queues & Async Apps

0

100

ELK Stack and Application Discovery

0

150

Laravel's Ecosystem

0

130

Command-Oriented Architecture

3

360

0

140

APIs seguras com OAuth2

0

130

Other Decks in Programming

See All in Programming

menu基盤チームによるGoogle Cloudの活用事例~Application Integration, Cloud Tasks編~

yoshifumi_ishikura

0

110

ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56

2

380

Stackless и stackful? Корутины и асинхронность в Go

0

760

Symfony Mapper Component

2

730

「Chatwork」Android版アプリを支える単体テストの現在

0

180

今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left

0

200

Haze - Real time background blurring

1

510

Effective Signals in Angular 19+: Rules and Helpers @ngbe2024

0

140

たのしいparse.y

3

120

Mermaid x AST x 生成AI = コードとドキュメントの完全同期への道

0

160

コンテナをたくさん詰め込んだシステムとランタイムの変化

1

130

KMP와 kotlinx.rpc로 서버와 클라이언트 동기화

0

140

Featured

See All Featured

Helping Users Find Their Own Way: Creating Modern Search Experiences

29

2.3k

Building an army of robots

302

44k

How to train your dragon (web standard)

88

5.7k

Building Better People: How to give real-time feedback that sticks.

365

19k

Unsuck your backbone

669

57k

Building a Scalable Design System with Sketch

460

33k

Sharpening the Axe: The Primacy of Toolmaking

38

1.9k

How STYLIGHT went responsive

95

5.2k

Keith and Marios Guide to Fast Websites

410

22k

Why Our Code Smells

335

57k

Save Time (by Creating Custom Rails Generators)

28

900

RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub

132

33k

Transcript

Turbolinks por Tony Messias
None
None
None
None
source
None
source
source
source
source
source 2 source 1 source 3
source 2 source 1
None
None
source
source 2 source 1 source 3
source
None
source
source
document.body = ... source
demo!
<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}, });
// ... import Turbolinks from 'turbolinks'; new Vue({ el: '#app',
components: {Deliveries}, }); Turbolinks.start();
// ... import Turbolinks from 'turbolinks'; import VueTurbolinks from 'vue-turbolinks';
document.addEventListener('turbolinks:load', () => { new Vue({ el: '#app', mixins: [VueTurbolinks], components: {Deliveries}, }); }); Turbolinks.start();
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.
mas não para por ai...
source
source
None
mais demo!
That’s all!