Learn migration strategies for large front-end migration projects with an emphasis on continuous business value delivery. Identify the Bounded Contexts in your application and make your application more modular. * Transform - create a parallel new view * Coexist - leave the existing view for a time, so the functionality is implemented incrementally * Eliminate - remove the old functionality as users stop using it

1. How to
Migrate from
Angular to React
Feb 28, 2019
Tomasz Bąk
t.bak@selleo.com

2. About me
● 13 years software developer at selleo.com
● 6+ years senior frontend developer

3. Agenda
● Why migrate?
● Migration strategies
● Micro Frontends architecture

4. Before migration consider
the business value and costs
“Old code has been used. It has been tested. Lots of bugs
have been found, and they’ve been fixed. Each of these bugs
took weeks of real-world usage before they were found.
When you throw away code and start from scratch, you are
throwing away all that knowledge.”
Source: https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/
Joel Spolsky

5. “This code is a mess”
is not a good reason to migrate
● ugly code - fix cryptic variables names, mixed
_camelCase/snake_case etc.
● architecture problems - can be solved, one at a time, by
carefully moving code, refactoring, changing interfaces
● performance problems - when optimizing for speed, 1%
of the work gets you 99% of the bang
Source: https://www.joelonsoftware.com/2000/04/06/things-you-should-never-do-part-i/

6. Why migrate?
● Hiring and talent retention
● Tech stack unification
● Leverage other tech ecosystem

7. React advantages
● JavaScript superpowers
○ JSX blends well together with JavaScript
○ your components are functions
○ static type checking (TypeScript instead of PropTypes)
● stronger libraries community
○ Redux, Jest + Enzyme, Formik + Yup
○ React / Redux developer tools
● strict unidirectional data flow

8. Migration vs business value
Legacy
App
New
App
Time
Added Value

9. Migration vs business value
Legacy
App
New
App
Time
Added Value ... ......

10. Migration strategies
Bottom-up Top-down

11. Migration strategies
Bottom-up Top-down
Embed React components in Angular
Usually delays state management
layer migration
Replace larger chunks, usually URL based
Two separate state management layers

12. Martin Fowler’s
Strangler Application pattern
Transform - create a parallel new view
Coexist - leave the existing view for a time, so the
functionality is implemented incrementally
Eliminate - remove the old functionality as users
stop using it
Source: https://developer.ibm.com/articles/cl-strangler-application-pattern-microservices-apps-trs/

13. How to apply
Strangler Application pattern
Identify the Bounded Contexts in your application
design - e.g. in an airline application, flight booking
would be one Bounded Context, while the airline
loyalty program would be a different Bounded
Context.
Choose the Bounded Context that is the smallest
and least costly to refactor
Source: https://developer.ibm.com/articles/cl-strangler-application-pattern-microservices-apps-trs/

14. Micro Frontends architecture
The idea behind Micro Frontends is to think
about a website or web app as a composition of
features which are owned by independent
teams. Each team has a distinct area of
business or mission it cares about and
specialises in. A team is cross functional and
develops its features end-to-end, from database
to user interface.
Source: https://micro-frontends.org

15. Micro Frontends architecture

16. Micro Frontends architecture

17. Who is using Micro Frontends?
HelloFresh
“At first, we found development speed to be a bit slow. Since this approach
requires you to own your entire project E2E, the learning curve can be steep. But
after cresting the curve we were able to push out projects like never before;
the new HelloFresh shop, for example, took 3 people 4 weeks to roll out. Our
developers also claim increased confidence and breadth of knowledge after
adopting this approach.”
Source: https://engineering.hellofresh.com/front-end-microservices-at-hellofresh-23978a611b87

18. Who is using Micro Frontends?
Ikea
“Today, we are aware that we should normally not have our whole enterprise in one service, and so we
split up the enterprise architecture in smaller services, for example, microservices. However, we are
also starting to realize that we have the same problems with the frontend monolith as we had with the
backend monolith, Gustaf Nilsson Kotte explained in a recent interview hosted by Stefan Tilkov. Using
a micro frontend architecture, he breaks the frontend into smaller parts to allow for teams to deploy
autonomously, thus enabling continuous delivery for web frontends.”
Source: https://www.infoq.com/news/2018/08/experiences-micro-frontends

19. Micro Frontends architecture - Single SPA framework https://single-spa.js.org

20. Micro Frontends architecture - Single SPA framework https://single-spa.js.org
import {declareChildApplication, start} from 'single-spa';
declareChildApplication('navbar',
() => import('./navbar/navbar.app.js'), () => true);
declareChildApplication('home',
() => import('./home/home.app.js'), () => location.pathname === "" || location.pathname === "/");
declareChildApplication('angular',
() => import('./angular/angular.app.js'), pathPrefix('/angular'));
declareChildApplication('react',
() => import('./react/react.app.js'), pathPrefix('/react'));
declareChildApplication('vue',
() => import('src/vue/vue.app.js'), pathPrefix('/vue'));
start();

21. Micro Frontends architecture - Single SPA framework https://single-spa.js.org
import React from 'react';
import ReactDOM from 'react-dom';
import singleSpaReact from 'single-spa-react';
import rootComponent from './root.component.js';
const reactLifecycles = singleSpaReact({
React, ReactDOM,
rootComponent,
domElementGetter: () => document.getElementById('react-app')
});
export const bootstrap = [reactLifecycles.bootstrap];
export const mount = [reactLifecycles.mount];
export const unmount = [reactLifecycles.unmount];

22. Summary
● Consider the business value and costs
● Identify the Bounded Contexts in your application
● Make your application more modular, break the
Monolith!

23. Q&A
t.bak@selleo.com