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

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

Pascal Laliberte
September 27, 2016
Programming
1
990

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
380
Get More Traction for Your Product Using Jobs-To-Be-Done
pascallaliberte
1
420
Making technology more human, and loving every minute of it
pascallaliberte
2
1.6k
Happiness and Design
pascallaliberte
0
160

Other Decks in Programming

See All in Programming
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
350
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
300
Folding Cheat Sheet #1
philipschwarz
PRO
0
210
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
120
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
420
ONE WEDGE_company_guide
1wedge_one
0
380
Milestoner
bkuhlmann
1
400
[技育CAMPアカデミア]アイディアを形に！【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
350
Ruby Pattern Matching
bkuhlmann
0
920
Git Rebase
bkuhlmann
11
1.6k
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160

Featured

See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
It's Worth the Effort
3n
180
27k
How to name files
jennybc
64
92k
The Cult of Friendly URLs
andyhume
74
5.7k
Producing Creativity
orderedlist
PRO
336
39k
GitHub's CSS Performance
jonrohan
1023
450k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Facilitating Awesome Meetings
lara
41
5.6k
For a Future-Friendly Web
brad_frost
171
8.9k
Unsuck your backbone
ammeep
662
57k

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