Migration to Vue.js #iJS19

One might think that working for brownfield projects might not be as much fun as starting something from scratch. But is this really true? In this session we’ll learn how to integrate Vue.js into a legacy codebase. In the end, it is possible to migrate to it completely step by step, regardless if it is a whole website, a component library or a frontend microservice.

Transcript

1. @vannsl From Legacy to Vue.js
2. @vannsl Vanessa Böhner Web Developer Product Engineer @ SinnerSchrader City Coordinator (Munich) @ Vue Vixens @vannsl @vannsl vannsl.io
3. @vannsl What is legacy?
4. @vannsl code is legacy code as soon as it's written.
5. @vannsl What is a migration?
6. @vannsl –Margaret Rouse “migration is the process of moving from the use of one operating environment to another operating environment that is, in most cases, thought to be a better one. searchcio.techtarget.com/definition/migration
7. @vannsl Why now?
8. @vannsl Mobile First Offline First Icons made by Rami McMin and Freepik, from Flaticon (CC 3.0 BY)
9. @vannsl
10. @vannsl
11. @vannsl The progressive Framework Vue.js
12. @vannsl Declarative Rendering & Single File Components
13. @vannsl 1 <template> 2 <div class="name"> 3 {{ nickName }} 4 </div> 5 </template> 6 7 <script> 8 export default { 9 data() { 10 return { 11 nickName: 'Vannsl' 12 } 13 } 14 } 15 </script> 16 17 <style scoped> 18 .name { 19 color: blue; 20 } 21 </style>
14. @vannsl 1 <template> 2 <div class="name"> 3 {{ nickName }} 4 </div> 5 </template> 6 7 <script> 8 export default { 9 data() { 10 return { 11 nickName: 'Vannsl' 12 } 13 } 14 } 15 </script> 16 17 <style scoped> 18 .name { 19 color: blue; 20 } 21 </style>
15. @vannsl 1 <template> 2 <div class="name"> 3 {{ nickName }} 4 </div> 5 </template> 6 7 <script> 8 export default { 9 data() { 10 return { 11 nickName: 'Vannsl' 12 } 13 } 14 } 15 </script> 16 17 <style scoped> 18 .name { 19 color: blue; 20 } 21 </style>
16. @vannsl 1 <template> 2 <div class="name"> 3 {{ nickName }} 4 </div> 5 </template> 6 7 <script> 8 export default { 9 data() { 10 return { 11 nickName: 'Vannsl' 12 } 13 } 14 } 15 </script> 16 17 <style scoped> 18 .name { 19 color: blue; 20 } 21 </style>
17. @vannsl Directives 1 <input v-bind:value=“nickName” v-on:change=“setNewNickName”> 2 <input v-model=“nickName">
18. @vannsl Composing Components 1 <template> 2 <div class="name"> 4 <other-component v-bind:nickName=“nickName" /> 5 </div> 6 </template> 7 8 <script> 9 import OtherComponent from ‘./OtherComponent.vue' 10 11 export default { 12 // … 17 components: { 18 OtherComponent 19 } 20 } 21 </script>
19. @vannsl emit & on 1 <template> 2 <button v-on:click=“$emit(‘customClick’)” v-text=“Submit” /> 3 </template> 4 5 <template> 6 <custom-button v-on:customClick=‘handleClick' /> 7 </template>
20. @vannsl vuejs.org/v2/guide/ Component Tree
21. @vannsl ! Super Hero Friends 1 <template lang="pug"> 2 div 3 h1 {{ title }} 4 </template> 5 6 <script lang="coffee"> 7 export default 8 props: 9 nickName: 10 type: String 11 required: true 12 </script> 13 14 <style lang="scss"> 15 /* write SCSS here */ 16 </style> Pug CoffeeScript TypeScript SCSS Stylus etc.
22. @vannsl ! Super Hero Friends 1 <template lang="pug"> 2 div 3 h1 {{ title }} 4 </template> 5 6 <script lang="coffee"> 7 export default 8 props: 9 nickName: 10 type: String 11 required: true 12 </script> 13 14 <style lang="scss"> 15 /* write SCSS here */ 16 </style> Pug CoffeeScript TypeScript SCSS Stylus etc.
23. @vannsl jQuery to Vue.js
24. @vannsl jQuery Import 1 <div class="container"> 2 <h2>Awesome container</h2> 3 </div> 4 5 <script src="https://cdnjs.cloudflare.com/ajax/libs/ jquery/3.4.1/jquery.min.js"></script> 6 <script> 7 // javascript & jquery code 8 </script>
25. @vannsl Vue.js Import 1 <div class="container"> 2 <h2>Awesome container</h2> 3 </div> 4 5 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/ dist/vue.min.js"></script> 6 <script> 7 // javascript & vue code 8 </script>
26. @vannsl
27. @vannsl 12 <div id="app"> 13 <button id="toggle"> 14 Show 15 </button> 16 <div id="container"> 17 <span style="display: none;"> 18 Hello World 19 </span> 20 </div> 21 </div> 22 23 <script> 24 var isShown = false; 25 var $spanElement = $("#container").find('span'); 26 27 $("#toggle").click(function (event) { 28 event.prevenDefault(); 29 if (isShown) { 30 if ($spanElement) { 31 $spanElement.hide(); 32 } 33 $("#toggle").html('Show'); 34 } else { 35 if ($spanElement) { 36 $spanElement.show(); 37 } 38 $("#toggle").html('Hide'); 39 } 40 isShown = !isShown; 41 }); 42 </script>
28. @vannsl 23 <script> 24 var isShown = false; 25 var $spanElement = $("#container").find('span'); 26 27 $("#toggle").click(function (event) { 28 event.prevenDefault(); 29 if (isShown) { 30 if ($spanElement) { 31 $spanElement.hide(); 32 } 33 $("#toggle").html('Show'); 34 } else { 35 if ($spanElement) { 36 $spanElement.show(); 37 } 38 $("#toggle").html('Hide'); 39 } 40 isShown = !isShown; 41 }); 42 </script> 12 <div id="app"> 13 <button id="toggle"> 14 Show 15 </button> 16 <div id="container"> 17 <span style="display: none;"> 18 Hello World 19 </span> 20 </div> 21 </div> 22
29. @vannsl 23 <script> 24 var isShown = false; 25 var $spanElement = $("#container").find('span'); 26 27 $("#toggle").click(function (event) { 28 event.prevenDefault(); 29 if (isShown) { 30 if ($spanElement) { 31 $spanElement.hide(); 32 } 33 $("#toggle").html('Show'); 34 } else { 35 if ($spanElement) { 36 $spanElement.show(); 37 } 38 $("#toggle").html('Hide'); 39 } 40 isShown = !isShown; 41 }); 42 </script> 12 <div id="app"> 13 <button id="toggle"> 14 Show 15 </button> 16 <div id="container"> 17 <span style="display: none;"> 18 Hello World 19 </span> 20 </div> 21 </div> 22
30. @vannsl 23 <script> 24 var isShown = false; 25 var $spanElement = $("#container").find('span'); 26 27 $("#toggle").click(function (event) { 28 event.prevenDefault(); 29 if (isShown) { 30 if ($spanElement) { 31 $spanElement.hide(); 32 } 33 $("#toggle").html('Show'); 34 } else { 35 if ($spanElement) { 36 $spanElement.show(); 37 } 38 $("#toggle").html('Hide'); 39 } 40 isShown = !isShown; 41 }); 42 </script> 12 <div id="app"> 13 <button id="toggle"> 14 Show 15 </button> 16 <div id="container"> 17 <span style="display: none;"> 18 Hello World 19 </span> 20 </div> 21 </div> 22
31. @vannsl 23 <script> 24 var isShown = false; 25 var $spanElement = $("#container").find('span'); 26 27 $("#toggle").click(function (event) { 28 event.prevenDefault(); 29 if (isShown) { 30 if ($spanElement) { 31 $spanElement.hide(); 32 } 33 $("#toggle").html('Show'); 34 } else { 35 if ($spanElement) { 36 $spanElement.show(); 37 } 38 $("#toggle").html('Hide'); 39 } 40 isShown = !isShown; 41 }); 42 </script> 12 <div id="app"> 13 <button id="toggle"> 14 Show 15 </button> 16 <div id="container"> 17 <span style="display: none;"> 18 Hello World 19 </span> 20 </div> 21 </div> 22
32. @vannsl 12 <div id="app"> 13 <button v-on:click.prevent="isShown = !isShown"> 14 {{ isShown ? 'Hide' : 'Show' }} 15 </button> 16 <div> 17 <span v-show='isShown'> 18 Hello World 19 </span> 20 </div> 21 </div> 22 23 <script> 24 new Vue({ 25 el: '#app', 26 data: { 27 isShown: false 28 }, 29 }) 30 </script>
33. @vannsl 12 <div id="app"> 13 <button v-on:click.prevent="isShown = !isShown"> 14 {{ isShown ? 'Hide' : 'Show' }} 15 </button> 16 <div> 17 <span v-show='isShown'> 18 Hello World 19 </span> 20 </div> 21 </div> 22 23 <script> 24 new Vue({ 25 el: '#app', 26 data: { 27 isShown: false 28 }, 29 }) 30 </script>
34. @vannsl 12 <div id="app"> 13 <button v-on:click.prevent="isShown = !isShown"> 14 {{ isShown ? 'Hide' : 'Show' }} 15 </button> 16 <div> 17 <span v-show='isShown'> 18 Hello World 19 </span> 20 </div> 21 </div> 22 23 <script> 24 new Vue({ 25 el: '#app', 26 data: { 27 isShown: false, 28 }, 29 }) 30 </script>
35. @vannsl 12 <div id="app"> 13 <button v-on:click.prevent="isShown = !isShown"> 14 {{ isShown ? 'Hide' : 'Show' }} 15 </button> 16 <div> 17 <span v-show='isShown'> 18 Hello World 19 </span> 20 </div> 21 </div> 22 23 <script> 24 new Vue({ 25 el: '#app', 26 data: { 27 isShown: false, 28 }, 29 }) 30 </script>
36. @vannsl backbonejs to Vue.js
37. @vannsl 1 const Vue = require('vue').default 2 3 module.exports = class VueComponent extends Core.View { 4 constructor(config) { 5 super(config) 6 } 7 8 get template() { 9 return "<div class='vue-component'></div>" 10 } 11 12 init(config) { 13 this.component = config.component 14 } 15 16 afterRender() { 17 const el = this.$(‘.vue-component').get(0) 18 new Vue({ 19 el, 20 render: (h) => h(this.component) 21 }) 22 } 23 }
38. @vannsl 1 const Vue = require('vue').default 2 3 module.exports = class VueComponent extends Core.View { 4 constructor(config) { 5 super(config) 6 } 7 8 get template() { 9 return "<div class='vue-component'></div>" 10 } 11 12 init(config) { 13 this.component = config.component 14 } 15 16 afterRender() { 17 const el = this.$(‘.vue-component').get(0) 18 new Vue({ 19 el, 20 render: (h) => h(this.component) 21 }) 22 } 23 }
39. @vannsl 1 const Vue = require('vue').default 2 3 module.exports = class VueComponent extends Core.View { 4 constructor(config) { 5 super(config) 6 } 7 8 get template() { 9 return "<div class='vue-component'></div>" 10 } 11 12 init(config) { 13 this.component = config.component 14 } 15 16 afterRender() { 17 const el = this.$(‘.vue-component').get(0) 18 new Vue({ 19 el, 20 render: (h) => h(this.component) 21 }) 22 } 23 }
40. @vannsl 1 const Vue = require('vue').default 2 3 module.exports = class VueComponent extends Core.View { 4 constructor(config) { 5 super(config) 6 } 7 8 get template() { 9 return "<div class='vue-component'></div>" 10 } 11 12 init(config) { 13 this.component = config.component 14 } 15 16 afterRender() { 17 const el = this.$(‘.vue-component').get(0) 18 new Vue({ 19 el, 20 render: (h) => h(this.component) 21 }) 22 } 23 }
41. @vannsl 1 const Vue = require('vue').default 2 3 module.exports = class VueComponent extends Core.View { 4 constructor(config) { 5 super(config) 6 } 7 8 get template() { 9 return "<div class='vue-component'></div>" 10 } 11 12 init(config) { 13 this.component = config.component 14 } 15 16 afterRender() { 17 const el = this.$(‘.vue-component').get(0) 18 new Vue({ 19 el, 20 render: (h) => h(this.component) 21 }) 22 } 23 }
42. @vannsl AngularJS to Vue.js
43. @vannsl –Evan You “I extracted the part that I really liked about AngularJS and built something really lightweight without all the extra concepts involved. Interview with Evan You by Vivian Cromwell
44. @vannsl 1 const app = angular.module('vue.components', ['ngVue']) .controller(‘MainController') 2 3 const VComponent = Vue.component('vue-component', { 4 render(h) { 5 return ( 6 <span>Hello World</span> 7 ) 8 } 9 }) 10 11 app.value('VueComponent', VComponent); github.com/ngVue/ngVue
45. @vannsl 1 const app = angular.module('vue.components', ['ngVue']) .controller(‘MainController') 2 3 const VComponent = Vue.component('vue-component', { 4 render(h) { 5 return ( 6 <span>Hello World</span> 7 ) 8 } 9 }) 10 11 app.value('VueComponent', VComponent); github.com/ngVue/ngVue
46. @vannsl 1 const app = angular.module('vue.components', ['ngVue']) .controller(‘MainController') 2 3 const VComponent = Vue.component('vue-component', { 4 render(h) { 5 return ( 6 <span>Hello World</span> 7 ) 8 } 9 }) 10 11 app.value('VueComponent', VComponent); github.com/ngVue/ngVue
47. @vannsl 1 const app = angular.module('vue.components', ['ngVue']) .controller(‘MainController') 2 3 const VComponent = Vue.component(‘vue-component', { 4 render(h) { 5 return ( 6 <span>Hello World</span> 7 ) 8 } 9 }) 10 11 app.value('VueComponent', VComponent); github.com/ngVue/ngVue
48. @vannsl AngularJS: Winter is co… already here
49. @vannsl Migration Options Full Rewrite Separated Pages Hybrid
50. @vannsl Full Rewrite Legacy Vue
51. @vannsl No Refactoring
52. @vannsl No Refactoring No Risk of Bugs
53. @vannsl No Refactoring Time intensive No Risk of Bugs
54. @vannsl No Refactoring Time intensive No Risk of Bugs Feature Set
55. @vannsl Separated Pages Legacy Vue
56. @vannsl Don’t touch existing features
57. @vannsl Don’t touch existing features No synchronization between modules on same page
58. @vannsl Don’t touch existing features (Full) Rewrite of shared modules No synchronization between modules on same page
59. @vannsl Don’t touch existing features (Full) Rewrite of shared modules No synchronization between modules on same page Maintain both versions
60. @vannsl Hybrid Legacy Vue
61. @vannsl No Rewrite unless wanted
62. @vannsl No Rewrite unless wanted Step by Step
63. @vannsl No Rewrite unless wanted Configuration & Shared vendors Step by Step
64. @vannsl Vue 2x Vue Import?
65. @vannsl 1 window.Vue = require('vue'); 2 window.$ = require('jquery'); 3 window.JQuery = require('jquery'); Shared dependencies for Hybrid
66. @vannsl No Rewrite unless wanted Configuration Step by Step Synchronization between modules
67. @vannsl Wrapper to Component Legacy Vue
68. @vannsl Data Attributes 1 <div id="vue-app" data-nickName="<%= @nickName %>"> 2 <!-- Vue Component will be inserted here --> 3 </div> 4 5 <script> 6 var Comp = Vue.extend({ 7 props: ['nickName'], 8 template: `<div class= "name">{{ nickName }}</div>` 9 }) 10 11 var app = new Comp({ 12 el: '#app', 13 propsData: ['nickName'] 14 }) 15 </script>
69. @vannsl Data Attributes 1 <div id="vue-app" data-nickName="<%= @nickName %>"> 2 <!-- Vue Component will be inserted here --> 3 </div> 4 5 <script> 6 var Comp = Vue.extend({ 7 props: ['nickName'], 8 template: `<div class= "name">{{ nickName }}</div>` 9 }) 10 11 var app = new Comp({ 12 el: '#app', 13 propsData: ['nickName'] 14 }) 15 </script>
70. @vannsl Data Attributes 1 <div id="vue-app" data-nickName="<%= @nickName %>"> 2 <!-- Vue Component will be inserted here --> 3 </div> 4 5 <script> 6 var Comp = Vue.extend({ 7 props: ['nickName'], 8 template: `<div class="name">{{ nickName }}</div>` 9 }) 10 11 var app = new Comp({ 12 el: '#app', 13 propsData: ['nickName'] 14 }) 15 </script>
71. @vannsl 12 init(opts) { 13 this.component = opts.component 14 this.nickName = opts.nickName 15 } 16 17 afterRender() { 18 const el = this.$('.vue-container').get(0) 19 20 new Vue({ 21 el, 22 render: (h) => { 23 return h(this.component, { nickName: this.nickName }); 24 } 25 }) 26 }
72. @vannsl 1 const app = angular.module('vue.components', ['ngVue']) 2 .controller('MainController', () => { this.person = {nickName: 'Vannsl'} }) 3 4 const VComponent = Vue.component('hello-component', { 5 props: { 6 nickName: String 7 }, 8 render(h) { 9 return ( 10 <span>Hi, { this.nickName }</span> 11 ) 12 } 13 }) 14 15 app.value('HelloComponent', VComponent);
73. @vannsl Server to Vue Legacy Vue
74. @vannsl 7 <script> 8 export default { 9 data() { 10 return { 11 nickName: '' 12 } 13 }, 14 created() { 15 axios.get(“[URL]”).then((response) => { 16 this.nickName = response.data.nickName; 17 }); 18 } 19 }; 20 </script> Fetch Request (Promise)
75. @vannsl Fetch Request (async / await) 7 <script> 8 export default { 9 data() { 10 return { 11 nickName: '' 12 } 13 }, 14 async created() { 15 const response = await axios.get("[URL]"); 16 this.nickName = response.data.nickName; 17 } 18 }; 19 </script>
76. @vannsl Window Object 1 <template> 2 <div class="name"> 3 {{ nickName }} 4 </div> 5 </template> 6 7 <script> 8 export default { 9 data() { 10 const { nickName } = window.myVueConfig; 11 return Object.assign({}, windowProps); 12 } 13 } 14 </script>
77. @vannsl Communication Legacy Vue
78. @vannsl jQuery Events 1 <script> 2 $('#input').on('change', function(ev) { 3 $(document).trigger('input-change', ev.target.value); 4 }); 5 </script>
79. @vannsl JavaScript Events 1 <script> 2 document.querySelector('#input').addEventListener('change', function(ev) { 3 var customEvent = new CustomEvent('input-change', { 4 detail: { 5 nickName: ev.target.value 6 } 7 }); 8 document.dispatchEvent(customEvent); 9 }); 10 </script>
80. @vannsl Communication Vue
81. @vannsl Communication Vue
82. @vannsl Vuex Submodules 1 const moduleA = { 2 state: { ... }, 3 mutations: { ... }, 6 } 7 8 const moduleB = { 9 state: { ... }, 10 mutations: { ... }, 12 } 13 14 const store = new Vuex.Store({ 15 modules: { 16 a: moduleA, 17 b: moduleB 18 } 19 }) 20 21 store.state.a // -> `moduleA`'s state 22 store.state.b // -> `moduleB`'s state https://vuex.vuejs.org/guide/modules.html
83. @vannsl Communication Vue
84. @vannsl Vue Global Eventbus 1 <script> 2 // Component 1 3 this.$eventBus.$emit('input-changed', data); 4 5 // Component 2 6 this.$eventBus.$on('input-changed', (data) => { 7 // do something 8 }); 9 </script>
85. @vannsl That’s how you can migrate. But why should you?
86. @vannsl clean, maintainable and testable code % &
87. @vannsl What could go wrong?
88. @vannsl clean, maintainable and testable code % & Deadlines
89. @vannsl clean, maintainable and testable code % & Requirement Changes Deadlines
90. @vannsl clean, maintainable and testable code % & Workarounds for Bugs Requirement Changes Deadlines
91. @vannsl clean, maintainable and testable code % & Requirement Changes Workarounds for Bugs Team Member Changes Deadlines
92. @vannsl clean, maintainable and testable code % & Requirement Changes Workarounds for Bugs Team Member Changes Deadlines
93. @vannsl
94. @vannsl
95. @vannsl Pro Tipps Make a plan
96. @vannsl Pro Tipps Make a plan Folder Structure
97. @vannsl /vue_app /bridge /src /node_modules app.html app.js /legacy_app /bridge index.html main style.css Folder Structure /root
98. @vannsl Pro Tipps Make a plan Folder Structure Chrome Dev Tools
99. @vannsl Chrome Dev Tools
100. @vannsl Companies Snipcart SinnerSchrader Gitlab Glovoapp Dawex Holistics easyship Unbabel
101. @vannsl . / Approachable
102. @vannsl Performant
103. @vannsl Easy to Import and Check Out Why not?
104. @vannsl Vue CLI Create React App Angular CLI 1. Find your Framework
105. @vannsl 2. Decide on a Method Full Rewrite Separated Pages Hybrid
106. @vannsl 3. Do it
107. @vannsl Vanessa Böhner @vannsl @vannsl vannsl.io Thanks