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

790

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

Creating a Free Video Ad Network on the Edge

0

120

ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module

0

150

アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile

9

3.3k

Jakarta EE meets AI

0

190

イベント駆動で成長して委員会

1

320

TypeScript Graph でコードレビューの心理的障壁を乗り越える

2

1.1k

距離関数を極める！ / SESSIONS 2024

0

280

とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!

1

880

Contemporary Test Cases

0

140

受け取る人から提供する人になるということ

0

230

Realtime API 入門

0

150

watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編

1

140

Featured

See All Featured

Ruby is Unlike a Banana

97

11k

Building Applications with DynamoDB

90

6.1k

452

42k

It's Worth the Effort

183

27k

No one is an island. Learnings from fostering a developers community.

19

3k

Evolution of real-time – Irina Nazarova, EuRuKo, 2024

4

370

Unsuck your backbone

668

57k

YesSQL, Process and Tooling at Scale

169

14k

Embracing the Ebb and Flow

84

4.5k

Making the Leap to Tech Lead

133

8.9k

458

140k

Dealing with People You Can't Stand - Big Design 2015

364

24k

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!