Turbolinks Vue.js
WHICH IS WHY I’M ATTRACTED
TO THESE TWO TECHNOLOGIES
Slide 4
Slide 4 text
Turbolinks
Slide 5
Slide 5 text
A PAGE HAS A BODY
Slide 6
Slide 6 text
AND A HEAD
A PAGE HAS A BODY
Slide 7
Slide 7 text
Replaces
the body
with the new
content
WITH TURBOLINKS, CLICKING A LINK…
Slide 8
Slide 8 text
Replaces
the body
with the new
content
WITH TURBOLINKS, CLICKING A LINK…
Merges
the head
Slide 9
Slide 9 text
Replaces
the body
with the new
content
WITH TURBOLINKS, CLICKING A LINK…
Merges
the head
It keeps a Cache of snapshots
For Back operations, etc
Slide 10
Slide 10 text
Replaces
the body
with the new
content
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
Slide 11
Slide 11 text
Vue.js
Slide 12
Slide 12 text
jQuery
In the category of
Front-end UX
Dev Tools
Slide 13
Slide 13 text
jQuery Vanilla JS
In the category of
Front-end UX
Dev Tools
Slide 14
Slide 14 text
Angular
A full-fledge client-side
MVC
jQuery Vanilla JS
In the category of
Front-end UX
Dev Tools
Slide 15
Slide 15 text
React
Angular
A full-fledge client-side
MVC
jQuery Vanilla JS
In the category of
Front-end UX
Dev Tools
Slide 16
Slide 16 text
React
Angular
A full-fledge client-side
MVC
jQuery Vanilla JS
In the category of
Front-end UX
Dev Tools
View renderers
Slide 17
Slide 17 text
React
Angular
A full-fledge client-side
MVC
Vue
jQuery Vanilla JS
In the category of
Front-end UX
Dev Tools
View renderers
Slide 18
Slide 18 text
AS AN EXAMPLE, LET’S TAKE A FORM FIELD
Slide 19
Slide 19 text
AS AN EXAMPLE, LET’S TAKE A FORM FIELD
AS PART OF A PURCHASE FORM…
Slide 20
Slide 20 text
new Vue({
el: “.purchase-form”,
data: {
}
quantity: null
})
})
AS THE FORM FIELD’S VALUE CHANGES,
SO DOES THE VALUE IN THE MODEL
AND VICE VERSA
Slide 23
Slide 23 text
,
price: 25
}
new Vue({
el: “.purchase-form”,
data: {
quantity: 23
})
23
WE CAN ADD OTHER PROPERTIES TO THE MODEL
Slide 24
Slide 24 text
,
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
Slide 25
Slide 25 text
,
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
Slide 26
Slide 26 text
DEFINING SUB-COMPONENTS MAKES VUE SCALABLE
Slide 27
Slide 27 text
React
Angular
Vue
jQuery Vanilla JS
SPA
Front-end UX
vue-router
vue-resource SPA
YOU CAN GO ALL OUT
AND BUILD A SPA…
Slide 28
Slide 28 text
Approachable
Small
Fast
Delightful
Scalable
BUT VUE’S BEST QUALITIES ARE THAT IT IS
Slide 29
Slide 29 text
Now available: Vue.js 2.0
Slide 30
Slide 30 text
IF YOU WANT
mostly server-generated content
in places: more front-end reactivity
Turbolinks + Vuejs
mostly jQuery / Vanilla js, Unobtrusive JS
Slide 31
Slide 31 text
Replaces
the body
with the new
content
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
Slide 32
Slide 32 text
new Vue({
el: “.purchase-form”,
data: {
}
quantity: 23
}
23
REACTIVITY = DOM EVENTS, OBSERVERS
DESTROYED WHEN CLONING THE BODY
FOR THE RESTORE CACHE
Slide 33
Slide 33 text
FOR THE SOLUTION
LET’S LOOK AT THE TIMELINE OF EVENTS
Slide 34
Slide 34 text
turbolinks:load
FOR THE SOLUTION
LET’S LOOK AT THE TIMELINE OF EVENTS
Slide 35
Slide 35 text
turbolinks:load turbolinks:before-cache
FOR THE SOLUTION
LET’S LOOK AT THE TIMELINE OF EVENTS
Slide 36
Slide 36 text
turbolinks:load turbolinks:before-cache
init destroy
(Vue.js events)
FOR THE SOLUTION
LET’S LOOK AT THE TIMELINE OF EVENTS
Slide 37
Slide 37 text
turbolinks:load turbolinks:before-cache
init destroy
re-inject in turbolinks
snapshot the original DOM
element with end data
(serialized) injected
(Vue.js events)
Slide 38
Slide 38 text
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)
Slide 39
Slide 39 text
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)
Slide 40
Slide 40 text
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)
Slide 41
Slide 41 text
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)