I built <frankenstein-monster>: 3 stories of migration
A presentation at Smashing Conf New York in in New York, NY, USA by Denys Mishunov
with love from Presented by DENYS MISHUNOV twitter: @MISHUNOV web: MISHUNOV.ME
migration noun mi·gra·tion | \ mī-ˈgrā-shən \
migration
MAGIC migration
migration
migration
MAGIC migration
migration
migration
MAGIC
migration COMPLETE REWRITE GRADUAL MIGRATION
migration COMPLETE REWRITE GRADUAL MIGRATION
Chapter 1. REWRITE, REWRITE, DENY Story about complete rewrite, rejection of an opportunity and a coffee-machine
“ to something MORE MODERN & FLEXIBLE ”
- Re-fresh Design 2. Pick Target 3. Migrate
E TUR FEA FE E AT R RE U U E UATEUART R F A E FE E F
E TUR FEA FE E AT R RE U U E UATEUART R F A E FE E F
“ to something MORE MODERN & FLEXIBLE ”
? H A L B LAH B MEH… BLAH-BL AH!
migration COMPLETE REWRITE GRADUAL MIGRATION
migration COMPLETE REWRITE GRADUAL MIGRATION
Chapter 2. ACCEPTANCE Story about gradual migration and irony in life
“[…] develop features that work in the existing project FAST…” “… so that it would be easier to migrate to…” something MORE MODERN & FLEXIBLE
COMPONENT COMPONENT S E I T R OPE PR COMPONENT COMPONENT PR S E I T R OPE
COMPONENT DOM EVENTS COMPONENT S E I T R OPE PR COMPONENT DOM EVENTS COMPONENT PR S E I T R OPE
BEFORE we go on…
migration COMPLETE REWRITE
migration COMPLETE REWRITE GRADUAL MIGRATION
migration vs COMPLETE REWRITE GRADUAL MIGRATION
Chapter 3. ADVENTURES BEGIN Practical story about building monsters
FRANKENSTEIN MIGRATION
FRANKENSTEIN MIGRATION MICROSERVICES
FRANKENSTEIN MIGRATION MICROSERVICES SERVICE
FRANKENSTEIN MIGRATION SERVICE MICROSERVICES SERVICE SERVICE SERVICE SERVICE SERVICE
FRANKENSTEIN MIGRATION MICROSERVICES SERVICE SERVICE SERVICE SERVICE SERVICE SERVICE Small in size Bounded by contexts Built and released with automated processes Autonomously developed Independently deployable
FRANKENSTEIN MIGRATION MICROSERVICES SERVICE SERVICE SERVICE SERVICE SERVICE SERVICE Small in size Bounded by contexts Built and released with automated processes Autonomously developed Independently deployable
FRANKENSTEIN MIGRATION WEB COMPONENTS Autonomously developed Independently deployable
WEB COMPONENTS FRANKENSTEIN MIGRATION MICROSERVICES
FRANKENSTEIN MIGRATION THEORY
FRANKENSTEIN MIGRATION THEORY
FRANKENSTEIN MIGRATION
FRANKENSTEIN MIGRATION to something MORE MODERN & FLEXIBLE
FRANKENSTEIN MIGRATION
FRANKENSTEIN MIGRATION COMPLETE REWRITE
FRANKENSTEIN MIGRATION COMPLETE REWRITE HOST ALIEN
FRANKENSTEIN MIGRATION COMPLETE REWRITE + GRADUAL MIGRATION HOST ALIEN
- Identify Microservices
- y tif en Id M ic ce s vi er ro s
ce s vi er ro s M ic y tif en Id 1. 2. Host-To-Alien Access
os H s A cc es ce s vi er ro s lie n M ic A t-T o- y tif en Id
- Write Alien Component 2.
os H s A cc es ce s vi er ro s lie n M ic A t-T o- y tif en Id
e n lie A nt ne po Co m s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id
- Web Component Wrapper 3.
e n lie A nt ne po Co m s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id
W eb n lie A nt ne W ra p pe nt ne po Co m Co m po e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id r
- Swap Host service with WC 4.
W eb n lie A nt ne W ra p pe nt ne po Co m Co m po e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id r
n lie A w ith C r W pe W ra p ce vi er ts os H nt ne nt ne po Co m Co m po ap Sw W eb e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id
n lie A w ith C r W pe W ra p ce vi er ts os H nt ne nt ne po Co m Co m po ap Sw W eb e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id
- Rinse Repeat
n lie A w ith C r W pe W ra p ce vi er ts os H nt ne nt ne po Co m Co m po ap Sw W eb e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id
- Rinse Repeat
n lie A w ith C r W pe W ra p ce vi er ts os H nt ne nt ne po Co m Co m po ap Sw W eb e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id
- Rinse Repeat
- Switch to Alien
n lie A w ith C r W pe W ra p ce vi er ts os H nt ne nt ne po Co m Co m po ap Sw W eb e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id
H TT P 6. Rinse Repeat to A lie n w ith C r W pe W ra p ce vi er nt ne nt ne po Co m ts os H h itc n lie A Co m po ap Sw W eb e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id Sw 7. 5. 4. 3. 2. 1.
H TT P 6. Rinse Repeat to A lie n w ith C r W pe W ra p ce vi er nt ne nt ne po Co m ts os H h itc n lie A Co m po ap Sw W eb e s A cc es ce s vi er ro s lie n M ic A t-T o- W rit os H y tif en Id Sw 7. 5. 4. 3. 2. 1.
QUALITY OF FRANKENSTEIN COMPLETE REWRITE THEORY + MIGRATION DELIVERY SPEED OF GRADUAL MIGRATION
FRANKENSTEIN MIGRATION PRACTICE
FRANKENSTEIN MIGRATION
FRANKENSTEIN APPROACH
FRANKENSTEIN APPROACH • Faster PROJECT’S BOOTSTRAPPING using components from different projects
FRANKENSTEIN APPROACH • Faster PROJECT’S BOOTSTRAPPING using components from different projects • Faster release-cycle for a CORE FEATURE
FRANKENSTEIN APPROACH • Faster PROJECT’S BOOTSTRAPPING using components from different projects • Faster release-cycle for a CORE FEATURE • Framework-agnostic HIRING POLICY
with love from Presented by DENYS MISHUNOV Music: ME Illustrations: OH, WELL… https://bit.ly/33wg7ue Git Repositories: https://bit.ly/2B7LqQ7 @mishunov · mishunov.me
I BUILT <FRANKENSTEIN-MONSTER>: 3 STORIES OF MIGRATION A lot of people consider complete re-write to be the best solution for project migration. Even though this may give better results int the end when compared to gradual migration, most projects cannot afford this move due to limited work-force, budget or other reasons.
But what if we could migrate our applications bit by bit without polluting global scope by messing up with CSS leaking and different JS bits yelling at each other? What if we could do this in an isolated manner as if we would have several sandboxes in our applications where we are allowed to do anything we want?
This talk will tell 3 entertaining stories (spiced with quite a few code examples) of application migrations with different approaches, different architectural decisions, and different results. Join Denys to get an idea of how to approach framework-agnostic frontend migrations using micro-services architecture, web components, and a good sense of humor.
for free. You
can too.
Video
Code
The following code examples from the presentation can be tried out live.
Buzz and feedback
Here’s what was said about this presentation on social media.
