How to migrate
a legacy codebase
to a new tech stack
Alex Gyoshev
@agyoshev
are you working with a legacy codebase?
Poll:
Approach #1:
All in one go
Over the weekend
... or in 2 years
TRY selling that to management
or to your customers
Approach #2:
Page by Page
Approach #2:
Page by Page
PROS
CONS
- Can be done iteratively
- Can be done in parallel
- Requires a shell (router / iframe / webpack)
- Doesn't work for large pages
Approach #2:
Page by Page
Not great for large pages
Approach #2:
Page by Page
iframe: double-edged sword
Quick to implement, hard to get rid of
Bad user experience (performance, links)
😌
😱
Approach #3:
Component by Component
Approach #3:
Component by Component
new Vue({
el: "#element",
render: MyComponent
})
Approach #3:
Component by Component
Usage
ComponentRegistry.load('MyComponent')
.then(function (MyComponent: Vue) {
// use MyComponent
});
Approach #3:
Component by Component
PROS
CONS
- Can be done iteratively
- Can be done in parallel
- Works for large pages
- Doesn't require a shell
- Can be lazy loaded
- Requires infrastructure
- Defensive coding
Approach #3:
Component by Component
infrastructure
Webpack build
TSX component:
Bundle chunks
-
runtime.bc05e222.js
-
lib-ui.dc71160a.js
-
my-component.d5e5b31b.js
🚀
MyComponent
+ 🔮
Approach #3:
Component by Component
infrastructure 🔮
// legacy
ComponentRegistry.registerScripts(
"MyComponent",
[
"runtime.bc05e222.js",
"lib-ui.dc71160a.js",
"my-component.d5e5b31b.js"
]
);// in Webpack
// instead of "new Vue({})"
ComponentRegistry.registerComponent(
'MyComponent',
MyComponent
);
Approach #3:
Component by Component
Usage
ComponentRegistry.load('MyComponent')
.then(function (MyComponent: Vue) {
const instance = new MyComponent({
el: '#target-element',
propsData: {
prop1: 'foo',
prop2: 123
}
});
instance.$on('save', function() {
console.log(this.prop1, this.prop2);
});
});Lessons learned
It takes time.
You can migrate any app to a new tech stack.
Thank you!
Alex Gyoshev
@agyoshev
slides.com/gyoshev/migrate-legacy-codebase
🔮😱