Я создал Франкенштейна: 3 истории миграции

A presentation at HolyJS 2019 Piter in May 2019 in St Petersburg, Russia by Denys Mishunov

I BUI LT F TER NS O S N T E E K I N N A M R 3 Stories Of Migration @mishunov

“ Migration ” 1. COMPLETE REWRITE 2. GRADUAL MIGRATION

Chapter 1. REWRITE, REWRITE, DENY Story about complete rewrite, rejection of an opportunity and a coffee-machine

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

Outcome Complete re-write is… - never just a re-write - much more than meets the eye: - old app is up and running - new features - new bugs, hard to catch

Outcome Web Components… …worked outside of Web Components project

Depression DENIAL ANGER BARGAINING DEPRESSION ACCEPTANCE

Chapter 2. ACCEPTANCE Story about irony in life, uncontrolled freedom and new experience

“[…] develop features that work in the existing project FAST…” “… so that it would be easier to migrate to…”

“[…] 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

Outcome I’ve learned AngularJS after all. Web Components: great containers quite the polyglots

Chapter 3. ADVENTURES BEGIN Practical story about crazy theory of building monsters

FRANKENSTEIN MIGRATION MICRO-SERVICES SERVICE

FRANKENSTEIN MIGRATION SERVICE MICRO-SERVICES SERVICE SERVICE SERVICE SERVICE SERVICE

FRANKENSTEIN MIGRATION MICRO-SERVICES 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

FRANKENSTEIN MIGRATION WEB COMPONENTS FANCY INPUT, ANYONE? I’M FANCY BUTTON!

FRANKENSTEIN MIGRATION WEB COMPONENTS
<section> <form> <fieldset> FANCY INPUT, ANYONE? I’M FANCY BUTTON!

FRANKENSTEIN MIGRATION WEB COMPONENTS
<section> <fancy-app> <form> <fieldset> FANCY INPUT, ANYONE? I’M FANCY BUTTON!

FRANKENSTEIN MIGRATION MICRO-SERVICES WEB COMPONENTS

FRANKENSTEIN MIGRATION PERSONAL BRAND THIS HEAD is here JUST FOR ILLUSTRATIVE PURPOSE Maecenas at arcu nibh Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque Aliquam egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque

FRANKENSTEIN MIGRATION CURRENT The framework we migrate AWAY from

FRANKENSTEIN MIGRATION CURRENT The framework we migrate AWAY from GOAL The framework we migrate TO

FRANKENSTEIN MIGRATION HOST ALIEN AUTONOMOUSLY DEVELOPED INDEPENDENTLY DEPLOYABLE

FRANKENSTEIN MIGRATION QUALITY OF COMPLETE REWRITE + DELIVERY SPEED OF GRADUAL MIGRATION

FRANKENSTEIN MIGRATION 1. Identify micro-services PERSONAL BRAND THIS HEAD is here JUST FOR ILLUSTRATIVE PURPOSE Maecenas at arcu nibh Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque Aliquam egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque

FRANKENSTEIN MIGRATION 1. Identify micro-services 2. Allow HOST-to-ALIEN access HOST ALIEN

FRANKENSTEIN MIGRATION HOST
Identify micro-services
Allow HOST-to-ALIEN access
Write ALIEN component ALIEN

FRANKENSTEIN MIGRATION 1. Identify micro-services 2. Allow HOST-to-ALIEN access 3. Write ALIEN component 4. Write WEB component HOST ALIEN

FRANKENSTEIN MIGRATION 1. Identify micro-services 2. Allow HOST-to-ALIEN access 3. Write ALIEN component 4. Write WEB component 5. Import ALIEN into WEB component HOST ALIEN

FRANKENSTEIN MIGRATION HOST 1. Identify micro-services 2. Allow HOST-to-ALIEN access 3. Write ALIEN component 4. Write WEB component 5. Import ALIEN into WEB component 6. Replace HOST component with WEB component ALI

FRANKENSTEIN MIGRATION 1. Identify micro-services PERSONAL BRAND THIS HEAD 2. Allow HOST-to-ALIEN access is here JUST FOR 3. Write ALIEN component ILLUSTRATIVE PURPOSE 4. Write WEB component 5. Import ALIEN into WEB component 6. Replace HOST component with WEB component Maecenas at arcu nibh Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque Aliquam egestas Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis arcu at purus consequat eleifend. Praesent interdum elit non hendrerit scelerisque

FRANKENSTEIN MIGRATION to something MORE MODERN & FLEXIBLE

https://gitlab.com/mishunov/frankenstein-demo

1 2 ! D E V O R P P A
Identify micro-services

HOST ALIEN 2. Allow HOST-to-ALIEN access

https://gitlab.com/mishunov/frankenstein-todomvc

HOST P P A V O R ALIEN ! D E 2. Allow HOST-to-ALIEN access

Migrator’s toolset CONFIGURABLE Package Bundler

Migrator’s toolset CONFIGURABLE Package Bundler ? Web Components POLYFILL

Migrator’s toolset CONFIGURABLE Package Bundler ? Web Components POLYFILL Custom Elements v1
Shadow DOM v1

Migrator’s toolset CONFIGURABLE Package Bundler ? Web Components POLYFILL Custom Elements v1 75 Shadow DOM v1 75

Migrator’s toolset CONFIGURABLE Package Bundler ? Web Components POLYFILL www.webcomponents.org/polyfills/ github.com/WebComponents/webcomponentsjs

Write WEB component 5. Import ALIEN into WEB component

Import ALIEN into WEB 4+5. Write WEB component component

/js/frankenstein-wrappers/header-wrapper.js // eslint-disable-next-line import React from “../../react/node_modules/react”; /* eslint-disable */ import ReactDOM from “../../react/node_modules/react-dom”; import HeaderApp from “../../react/src/components/Header”; class FrankensteinWrapper extends HTMLElement { connectedCallback() { const mountPoint = document.createElement(“div”); this.attachShadow({ mode: “open” }).appendChild(mountPoint); ReactDOM.render(<HeaderApp />, mountPoint); } } customElements.define(“frankenstein-header-wrapper”, FrankensteinWrapper);

4+5. Write WEB component P P A ! D E V O R

Replace HOST component with WEB component ?

/index.html […] <section class=”todoapp”> <header class=”header”> <h1>todos</h1> <input class=“new-todo” placeholder=”What needs to be done?” autofocus> </header> […] </section> […] <script src=“dist/frankenstein.js”></script> ‘entry’ in webpack’s configuration

/index.html […] <section class=”todoapp”> <frankenstein-header-wrapper></frankenstein-header-wrapper> […] </section> […] <script src=“dist/frankenstein.js”></script>

[BEHIND THE SCENE: Desperately clicking Enter]

V A H N E E S U O Y E U F S I TH ? Y T I L A N O I NCT it get, suscip e h ib n is qu cus , tincidunt e u q e tum elit la n n a e n m r r u e f m e a qu vita Praesent at sapien, nare a. Ali . r r e e o c u t g la li n e p o v a c ll is at nu ttis bortis, leo x, id venen n ligula ma e lo o n ia in t d s se sagittis in u e c is it d e la ic n u e ll e iq u o p t s g s is n u r id o t S d io s. Proin c et odo ex. Se laoreet, od in faucibu m is r is m u o a sum laore c im r M ip u p . e c a , n m id m u u v e s n a s r t ip g ue e feugia pellentesq es ac ant lectus, non enaeos. m o in im a f le h m e a s ia u d t o t g a E p n . u ce co les nec turpis tra, per in t mi. Cras um et ma s li d o e r v n e t is In ia t a b . t n u li e ne on ent per c . Donec ve u vel facilisis s q u r c o n t o . h a r r o l ad lit s non felis risus ve u le q s s a u d io o s. c im s o x s s a i le m t tacit rat et puru is soda n e ll c e a t v la p n p a o , c c s e s a n ll la nu tie dictum. C dum est ollicitudin e id moles r s u e t c iq n t in u is n n r t o t , n e , is rp ue aliqu d ipsum tu auctor aug e Maecenas S ie t . s le im o n e m in rta ue elit. Pro uris sed po q a s e M t . n o e r ll e e b ,p natis li rit massa id ndum dui e e r ib d Ut eu vene b n t e e h , m r a it a um pulvin gue nibh, s n o c e u Cras id ips q s nte Nulla pelle . in r o it t t r po MISSIN Applicat G ion Style Proin co ngue lac inia ex, feugiat n id venen unc. Ma atis velit u r is nec turp laoreet, ornare a is. Etiam odio id s . Aliquam ollicitud in pellen urna ne vel facil in tesque s lo que, tin isis elit. b o r t is em, eu c , leo null cidunt q Interdum maximu ommod a placer uis nibh et male s risus v o a t sapien ex. Sed eget, su s u e a l d , tristique rhoncus a fames vitae fer scipit dictum. . mentum est non Donec v Class ap ac ante li elit lacu enenatis gula ma tent tac ipsum p Maecen s ttis cong iti socio velit mi. r im as alique is in u squ ad e Cras con f . a P t nunc s u raesent cibus. S litora to gue leo ollicitud uspendis r q le in u c e n t nt per se sagit us, non ulla con Ut eu ve conubia tis vallis so gravida nenatis d ip a n li le b o s u e s s t r m ra, per sodales Cras id ip o. Maur laoreet is sed po non felis inceptos sum pulv . r ta enim. himenae inar, hen porttitor Sed ipsu os. drerit m in. Nulla m turpis assa id, pellente , tristiqu pellente sque co sque eli e id mole ngue nib t . stie nec, Proin m h, sit am olestie a placerat et biben u et purus ctor aug dum du . u i e, non in terdum es t s

onChange onClick onBlur onKeyDown onWhatever […] EVENTS RETARGETING

MISSING Application Styles Proin congue lacinia ex, id venenatis velit ornare a. Aliquam urna neque, tincidunt quis nibh eget, suscipit feugiat nunc. Mauris laoreet, odio id sollicitudin lobortis, leo nulla placerat sapien, vitae fermentum elit lacus nec turpis. Etiam in pellentesque sem, eu commodo ex. Sed tristique est non ligula mattis congue. Praesent vel facilisis elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sagittis maximus risus vel rhoncus. Donec venenatis velit mi. Cras congue leo lectus, non gravida ipsum laoreet dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas aliquet nunc sollicitudin nulla convallis sodales sodales non felis. Ut eu venenatis libero. Mauris sed porta enim. Sed ipsum turpis, tristique id molestie nec, placerat et purus. Cras id ipsum pulvinar, hendrerit massa id, pellentesque elit. Proin molestie auctor augue, non interdum est porttitor in. Nulla pellentesque congue nibh, sit amet bibendum dui

MISSING Global styles Application Styles CSS Modules <style scoped> Proin congue lacinia ex, id venenatis velit ornare a. Aliquam urna neque, tincidunt quis nibh eget, suscipit feugiat nunc. Mauris laoreet, odio id sollicitudin lobortis, leo nulla placerat sapien, vitae fermentum elit lacus nec turpis. Etiam in pellentesque sem, eu commodo ex. Sed tristique est non ligula mattis congue. Praesent vel facilisis elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sagittis maximus risus vel rhoncus. Donec venenatis velit mi. Cras congue leo lectus, non gravida ipsum laoreet dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas aliquet nunc sollicitudin nulla convallis sodales sodales non felis. Ut eu venenatis libero. Mauris sed porta enim. Sed ipsum turpis, tristique id molestie nec, placerat et purus. Cras id ipsum pulvinar, hendrerit massa id, pellentesque elit. Proin molestie auctor augue, non interdum est porttitor in. Nulla pellentesque congue nibh, sit amet bibendum dui

Global styles
<style></style>
CSS Modules MISSING
<style scoped> Application Styles

MISSING <style></style> Global styles CSS Modules <style scoped> Application Styles <style></style> Proin congue lacinia ex, id venenatis velit ornare a. Aliquam urna neque, tincidunt quis nibh eget, suscipit feugiat nunc. Mauris laoreet, odio id sollicitudin lobortis, leo nulla placerat sapien, vitae fermentum elit lacus nec turpis. Etiam in pellentesque sem, eu commodo ex. Sed tristique est non ligula mattis congue. Praesent vel facilisis elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse sagittis maximus risus vel rhoncus. Donec venenatis velit mi. Cras congue leo lectus, non gravida ipsum laoreet dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas aliquet nunc sollicitudin nulla convallis sodales sodales non felis. Ut eu venenatis libero. Mauris sed porta enim. Sed ipsum turpis, tristique id molestie nec, placerat et purus. Cras id ipsum pulvinar, hendrerit massa id, pellentesque elit. Proin molestie auctor augue, non interdum est porttitor in. Nulla pellentesque congue nibh, sit amet bibendum dui

/js/frankenstein-wrappers/header-wrapper.js const styles = [ require(“../../react/node_modules/todomvc-app-css/index.css?shadow”), require(‘../../react/src/components/Header.module.css?shadow’), `.todoapp{ margin:0; }` ]; class FrankensteinWrapper extends HTMLElement { connectedCallback() { const style = document.createElement(“style”); style.innerHTML = styles.join(”); const mountPoint = document.createElement(“div”); // In order to not loose the root styles, coming from index.css // we need to set up the wrapping element with .todoapp const appWrapper = document.createElement(“div”); appWrapper.classList.add(‘todoapp’); appWrapper.appendChild(mountPoint); this.attachShadow({ mode: “open” }).appendChild(style); this.shadowRoot.appendChild(appWrapper); […] } }

Replace HOST component with WEB component P P A ! D E V O R

jQuery plugins $(‘[data-toggle=”tooltip”]’).tooltip()

jQuery plugins $(‘[data-toggle=“tooltip”]’, shadowRoot).tooltip()

jQuery plugins /js/frankenstein-wrappers/main-wrapper.js ReactDOM.render(<MainApp root={ appWrapper } />, mountPoint);

jQuery plugins /js/frankenstein-wrappers/main-wrapper.js ReactDOM.render(<MainApp root={ root appWrapper } />, mountPoint);

jQuery plugins /js/frankenstein-wrappers/main-wrapper.js ReactDOM.render(<MainApp root={ appWrapper } />, mountPoint); /react/src/components/MainApp.js constructor(props) { super(props); this.documentRoot = this.props.root? root this.props.root: root document; … } … $(‘[data-toggle=”tooltip”]’, this.documentRoot).tooltip()

M I MIGRATION R E P X E ! ! T N E FRANKENSTEIN

FRANKENSTEIN APPROACH • Faster PROJECT’S BOOTSTRAPPING using components from different projects • Faster release-cycle for a CORE FEATURE • Framework-agnostic HIRING POLICY

Denys Mishunov
@mishunov

1 / 159

Для многих полное переписывание проекта — единственно верный способ миграции. Несмотря на то что это может дать отличный результат по сравнению с постепенной миграцией, большинство проектов не могут себе это позволить из-за нехватки ресурсов, времени, бюджета и других причин. В таком случае остается миграция «по частям», при которой, как правило, «старое» и «прошлое» сталкиваются в некое «старошлое», проект становится неповоротливым, сложным в управлении и поддержке. Что в итоге все равно рано или поздно приводит к полному переписыванию.

Но что, если бы мы могли мигрировать наши фронтенд-приложения постепенно, при этом не волноваться, что наш глобальный скоуп будет бесконечно испорчен, CSS начнет выливаться и заливаться во все возможные щели, а различные JS-библиотеки и фреймворки нашего проекта начнут крыть друг друга по матушке? Что, если бы мы могли разбить наше фронтенд-приложение на микросервисы, в рамках которых могли бы делать практически все что угодно без стандартных прелестей постепенной миграции?

Этот доклад в достаточно непринужденной форме расскажет три истории миграции трех приложений с различным подходом, различными архитектурными решениями и, соответственно, различным результатом. Слушатели получат базовое понимание общих подходов к фреймворк-независимой миграции фронтенд-приложений с использованием микросервисной архитектуры, веб-компонентов и хорошего чувства юмора.

Resources

The following resources were mentioned during the presentation or are useful additional information.

Frankenstein migration demo repository

Main migration directions
Frankenstein-ready TodoMVC

TodoMVC from http://todomvc.com tuned for easier usage in Frankenstein migrations

Buzz and feedback

Here’s what was said about this presentation on social media.

Starting soon #holyjs pic.twitter.com/PIpHNHVOIw
— Denys Mishunov (@mishunov) May 25, 2019
#holyjs Слушаем предпоследний слот докладов: @mishunov, @shelajev и @PalmaSwell. pic.twitter.com/Fdp3PSzaDa
— HolyJS (@HolyJSconf) May 25, 2019
Crowd demand @mishunov blood 🧛‍♂️ (but looks like the talk was good) #holyjs pic.twitter.com/YDSRaO4hDi
— Evgeny Kot (@bunopus) May 25, 2019
Я создал Франкенштейна: 3 истории миграции
Денис Мишунов pic.twitter.com/fcYLeb2ByT
— Dima Lebedev (@_dimalebedev) May 25, 2019
Денис Мишунов расскажет о Франкенштейне из фронтенда #holyjs pic.twitter.com/3BqAnaAnkn
— Фронтенд Юность (@frontend_u) May 25, 2019
А какого твое фронтенд-приложение? #holyjs pic.twitter.com/vted4eZLSP
— Фронтенд Юность (@frontend_u) May 25, 2019
Последняя стадия принятия #holyjs pic.twitter.com/yse1keXAaR
— Фронтенд Юность (@frontend_u) May 25, 2019

Я создал Франкенштейна: 3 истории миграции

Link for this presentation:

HTML code for embedding:

Share on social media:

Resources

Frankenstein migration demo repository

Frankenstein-ready TodoMVC

Buzz and feedback