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

Making Turbolinks work with Vue.js: Fast server...

Pascal Laliberte
September 27, 2016
Programming
1
1.1k

Making Turbolinks work with Vue.js: Fast server-generated pages with reactive front-end components

Turbolinks stands against bloated single-page applications with speedy transitions between server-generated pages. Vue.js teaches the big client-side view-renderers how to be small and delightful. Using both together is a little tricky (it's the page restores), and in this talk, we'll go over an approach that works.

Pascal Laliberte

September 27, 2016
Tweet

More Decks by Pascal Laliberte

See All by Pascal Laliberte
Create a Striking Product using Jobs-To-Be-Done
pascallaliberte
1
390
Get More Traction for Your Product Using Jobs-To-Be-Done
pascallaliberte
1
480
Making technology more human, and loving every minute of it
pascallaliberte
2
1.6k
Happiness and Design
pascallaliberte
0
200

Other Decks in Programming

See All in Programming
선언형 UI에서의 상태관리
l2hyunwoo
0
130
103 Early Hints
sugi_0000
1
220
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
920
nekko cloudにおけるProxmox VE利用事例
irumaru
3
420
Refactor your code - refactor yourself
xosofox
1
250
ブラウザ単体でmp4書き出すまで - muddy-web - 2024-12
yue4u
2
460
Scalaから始めるOpenFeature入門 / Scalaわいわい勉強会 #4
arthur1
1
300
事業成長を爆速で進めてきたプロダクトエンジニアたちの成功談・失敗談
nealle
3
1.4k
CSC305 Lecture 26
javiergs
PRO
0
140
talk-with-local-llm-with-web-streams-api
kbaba1001
0
170
短期間での新規プロダクト開発における「コスパの良い」Goのテスト戦略」 / kamakura.go
n3xem
2
160
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
250

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Git: the NoSQL Database
bkeepers
PRO
427
64k
KATA
mclloyd
29
14k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Applications with DynamoDB
mza
91
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
A Philosophy of Restraint
colly
203
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k

Transcript

  1. Turbolinks + Vue.js Pascal Laliberté

  2. Starting small Depth WHAT I VALUE

  3. Turbolinks Vue.js WHICH IS WHY I’M ATTRACTED TO THESE TWO

    TECHNOLOGIES

  4. Turbolinks

  5. A PAGE HAS A BODY

  6. AND A HEAD <head> A PAGE HAS A BODY

  7. <head> Replaces the body with the new content <head> WITH

    TURBOLINKS, CLICKING A LINK…

  8. <head> Replaces the body with the new content <head> WITH

    TURBOLINKS, CLICKING A LINK… Merges the head

  9. <head> Replaces the body with the new content <head> WITH

    TURBOLINKS, CLICKING A LINK… Merges the head It keeps a Cache of snapshots
 For Back operations, etc

  10. <head> Replaces the body with the new content <head> WITH

    TURBOLINKS, CLICKING A LINK… Merges the head It keeps a Cache of snapshots
 For Back operations, etc WHICH MAKES PAGE TRANSITIONS
 (AND PAGE RESTORES) SUPER QUICK

  11. Vue.js

  12. jQuery In the category of Front-end UX Dev Tools

  13. jQuery Vanilla JS In the category of Front-end UX Dev

    Tools

  14. Angular A full-fledge client-side MVC jQuery Vanilla JS In the

    category of Front-end UX Dev Tools

  15. React Angular A full-fledge client-side MVC jQuery Vanilla JS In

    the category of Front-end UX Dev Tools

  16. React Angular A full-fledge client-side MVC jQuery Vanilla JS In

    the category of Front-end UX Dev Tools View renderers

  17. React Angular A full-fledge client-side MVC Vue jQuery Vanilla JS

    In the category of Front-end UX Dev Tools View renderers

  18. AS AN EXAMPLE, LET’S TAKE A FORM FIELD

  19. <div class=“purchase-form”> <input v-model=“quantity”> AS AN EXAMPLE, LET’S TAKE A

    FORM FIELD AS PART OF A PURCHASE FORM…

  20. new Vue({ el: “.purchase-form”, data: { } quantity: null })

    <div class=“purchase-form”> <input v-model=“quantity”> WHEN WE SETUP THE VUE INSTANCE, WE SET THE MODEL

  21. new Vue({ el: “.purchase-form”, data: { } quantity: 2 }

    2 <div class=“purchase-form”> <input v-model=“quantity”> }) AS THE FORM FIELD’S VALUE CHANGES, SO DOES THE VALUE IN THE MODEL

  22. new Vue({ el: “.purchase-form”, data: { } quantity: 23 }

    23 <div class=“purchase-form”> <input v-model=“quantity”> }) AS THE FORM FIELD’S VALUE CHANGES, SO DOES THE VALUE IN THE MODEL AND VICE VERSA

  23. , price: 25 } new Vue({ el: “.purchase-form”, data: {

    quantity: 23 }) 23 WE CAN ADD OTHER PROPERTIES TO THE MODEL

  24. , price: 25 } new Vue({ el: “.purchase-form”, data: {

    quantity: 23 }) 23 , computed: { total () { return this.quantity * this.price } } AND COMPUTED PROPERTIES TOO, WHICH UPDATE ON THE FLY

  25. , price: 25 } new Vue({ el: “.purchase-form”, data: {

    quantity: 23 }) 23 methods events components , computed: { total () { return this.quantity * this.price } } YOU CAN ALSO DEFINE

  26. <map-popover :lat=“lat” :long=“long” :zoom=“zoom” ></map-popover> DEFINING SUB-COMPONENTS MAKES VUE SCALABLE

  27. React Angular Vue jQuery Vanilla JS SPA Front-end UX vue-router

    vue-resource SPA YOU CAN GO ALL OUT AND BUILD A SPA…

  28. Approachable Small Fast Delightful Scalable BUT VUE’S BEST QUALITIES ARE

    THAT IT IS

  29. Now available: Vue.js 2.0

  30. IF YOU WANT mostly server-generated content in places: more front-end

    reactivity Turbolinks + Vuejs mostly jQuery / Vanilla js, Unobtrusive JS

  31. <head> Replaces the body with the new content <head> WITH

    TURBOLINKS, CLICKING A LINK… Merges the head It keeps a Cache of snapshots
 For Back operations, etc THE PROBLEM MERGING THEM TOGETHER IS THE BODY REPLACEMENT CAUSES VUE INSTANCES TO LOSE REACTIVITY ON RESTORES Turbolinks + Vuejs

  32. new Vue({ el: “.purchase-form”, data: { } quantity: 23 }

    23 REACTIVITY = DOM EVENTS, OBSERVERS DESTROYED WHEN CLONING THE BODY FOR THE RESTORE CACHE

  33. FOR THE SOLUTION LET’S LOOK AT THE TIMELINE OF EVENTS

  34. turbolinks:load FOR THE SOLUTION LET’S LOOK AT THE TIMELINE OF

    EVENTS

  35. turbolinks:load turbolinks:before-cache FOR THE SOLUTION LET’S LOOK AT THE TIMELINE

    OF EVENTS

  36. turbolinks:load turbolinks:before-cache init destroy (Vue.js events) FOR THE SOLUTION LET’S

    LOOK AT THE TIMELINE OF EVENTS

  37. turbolinks:load turbolinks:before-cache init destroy re-inject in turbolinks snapshot the original

    DOM element with end data (serialized) injected (Vue.js events)

  38. turbolinks:load turbolinks:before-cache init destroy save initial DOM element before it’s

    walked re-inject in turbolinks snapshot the original DOM element with end data (serialized) injected (Vue.js events)

  39. turbolinks:load turbolinks:before-cache init destroy save initial DOM element before it’s

    walked re-inject in turbolinks snapshot the original DOM element with end data (serialized) injected detect serialized start data attached to initial DOM element (Vue.js events)

  40. turbolinks:load turbolinks:before-cache init destroy save initial DOM element before it’s

    walked re-inject in turbolinks snapshot the original DOM element with end data (serialized) injected detect serialized start data attached to initial DOM element Vue.js Mixin (Vue.js events)

  41. turbolinks:load turbolinks:before-cache init destroy save initial DOM element before it’s

    walked re-inject in turbolinks snapshot the original DOM element with end data (serialized) injected detect serialized start data attached to initial DOM element Vue.js Mixin …for each Vue component on the page (Vue.js events)

  42. @pascallaliberte pascallaliberte.me