Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to migrate large project from Angular to React

1,003 views

Published on

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

Published in: Software
  • Be the first to comment

How to migrate large project from Angular to React

  1. 1. How to Migrate from Angular to React Feb 28, 2019 Tomasz Bąk t.bak@selleo.com
  2. 2. About me ● 13 years software developer at selleo.com ● 6+ years senior frontend developer
  3. 3. Agenda ● Why migrate? ● Migration strategies ● Micro Frontends architecture
  4. 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. 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. 6. Why migrate? ● Hiring and talent retention ● Tech stack unification ● Leverage other tech ecosystem
  7. 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. 8. Migration vs business value Legacy App New App Time Added Value
  9. 9. Migration vs business value Legacy App New App Time Added Value ... ......
  10. 10. Migration strategies Bottom-up Top-down
  11. 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. 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. 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. 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. 15. Micro Frontends architecture
  16. 16. Micro Frontends architecture
  17. 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. 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. 19. Micro Frontends architecture - Single SPA framework https://single-spa.js.org
  20. 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. 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. 22. Summary ● Consider the business value and costs ● Identify the Bounded Contexts in your application ● Make your application more modular, break the Monolith!
  23. 23. Q&A t.bak@selleo.com

×