SlideShare a Scribd company logo

How to migrate large project from Angular to React

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 of 23
Download to read offline
How to
Migrate from
Angular to React
Feb 28, 2019
Tomasz Bąk
t.bak@selleo.com
About me
● 13 years software developer at selleo.com
● 6+ years senior frontend developer
Agenda
● Why migrate?
● Migration strategies
● Micro Frontends architecture
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
“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/
Why migrate?
● Hiring and talent retention
● Tech stack unification
● Leverage other tech ecosystem

Recommended

Strapi Meetup Presentation
Strapi Meetup PresentationStrapi Meetup Presentation
Strapi Meetup PresentationStrapi
 
Building an analytics workflow using Apache Airflow
Building an analytics workflow using Apache AirflowBuilding an analytics workflow using Apache Airflow
Building an analytics workflow using Apache AirflowYohei Onishi
 
Re: ゼロから始める監視設計
Re: ゼロから始める監視設計Re: ゼロから始める監視設計
Re: ゼロから始める監視設計Masahito Zembutsu
 
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~
これで怖くない!?大規模環境で体験するDB負荷対策~垂直から水平の彼方へ~hideakikabuto
 
Loki - like prometheus, but for logs
Loki - like prometheus, but for logsLoki - like prometheus, but for logs
Loki - like prometheus, but for logsJuraj Hantak
 
Micro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMicro Front-End & Microservices - Plansoft
Micro Front-End & Microservices - PlansoftMiki Lombardi
 

More Related Content

What's hot

How I learned to time travel, or, data pipelining and scheduling with Airflow
How I learned to time travel, or, data pipelining and scheduling with AirflowHow I learned to time travel, or, data pipelining and scheduling with Airflow
How I learned to time travel, or, data pipelining and scheduling with AirflowPyData
 
Developing Faster with Swagger
Developing Faster with SwaggerDeveloping Faster with Swagger
Developing Faster with SwaggerTony Tam
 
Designing APIs with OpenAPI Spec
Designing APIs with OpenAPI SpecDesigning APIs with OpenAPI Spec
Designing APIs with OpenAPI SpecAdam Paxton
 
AWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティスAWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティスAmazon Web Services Japan
 
[WSO2 API Manager Community Call] Mastering JWTs with WSO2 API Manager
[WSO2 API Manager Community Call] Mastering JWTs with WSO2 API Manager[WSO2 API Manager Community Call] Mastering JWTs with WSO2 API Manager
[WSO2 API Manager Community Call] Mastering JWTs with WSO2 API ManagerWSO2
 
Getting Started Monitoring with Prometheus and Grafana
Getting Started Monitoring with Prometheus and GrafanaGetting Started Monitoring with Prometheus and Grafana
Getting Started Monitoring with Prometheus and GrafanaSyah Dwi Prihatmoko
 
A quick introduction to Strapi CMS
A quick introduction to Strapi CMSA quick introduction to Strapi CMS
A quick introduction to Strapi CMSAshokkumar T A
 
Top 10 Front End Developer Skills | How to become a Front End Developer? Edureka
Top 10 Front End Developer Skills | How to become a Front End Developer? EdurekaTop 10 Front End Developer Skills | How to become a Front End Developer? Edureka
Top 10 Front End Developer Skills | How to become a Front End Developer? EdurekaEdureka!
 
CloudFront経由でのCORS利用
CloudFront経由でのCORS利用CloudFront経由でのCORS利用
CloudFront経由でのCORS利用Yuta Imai
 
マイクロサービスアーキテクチャ - アーキテクチャ設計の歴史を背景に
マイクロサービスアーキテクチャ - アーキテクチャ設計の歴史を背景にマイクロサービスアーキテクチャ - アーキテクチャ設計の歴史を背景に
マイクロサービスアーキテクチャ - アーキテクチャ設計の歴史を背景にYusuke Suzuki
 
システムアーキテクト~My batis編~
システムアーキテクト~My batis編~システムアーキテクト~My batis編~
システムアーキテクト~My batis編~Shinichi Kozake
 
[NDC17] Kubernetes로 개발서버 간단히 찍어내기
[NDC17] Kubernetes로 개발서버 간단히 찍어내기[NDC17] Kubernetes로 개발서버 간단히 찍어내기
[NDC17] Kubernetes로 개발서버 간단히 찍어내기SeungYong Oh
 
Spring Boot ユーザの方のための Quarkus 入門
Spring Boot ユーザの方のための Quarkus 入門Spring Boot ユーザの方のための Quarkus 入門
Spring Boot ユーザの方のための Quarkus 入門tsukasamannen
 
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_Akito Tsukahara
 
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptxGetting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptxIlesh Mistry
 
Dbts2013 特濃jpoug log_file_sync
Dbts2013 特濃jpoug log_file_syncDbts2013 特濃jpoug log_file_sync
Dbts2013 特濃jpoug log_file_syncKoji Shinkubo
 
Nodejs Explained with Examples
Nodejs Explained with ExamplesNodejs Explained with Examples
Nodejs Explained with ExamplesGabriele Lana
 
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】dcubeio
 

What's hot (20)

How I learned to time travel, or, data pipelining and scheduling with Airflow
How I learned to time travel, or, data pipelining and scheduling with AirflowHow I learned to time travel, or, data pipelining and scheduling with Airflow
How I learned to time travel, or, data pipelining and scheduling with Airflow
 
Developing Faster with Swagger
Developing Faster with SwaggerDeveloping Faster with Swagger
Developing Faster with Swagger
 
Airflow introduction
Airflow introductionAirflow introduction
Airflow introduction
 
Designing APIs with OpenAPI Spec
Designing APIs with OpenAPI SpecDesigning APIs with OpenAPI Spec
Designing APIs with OpenAPI Spec
 
AWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティスAWSでDockerを扱うためのベストプラクティス
AWSでDockerを扱うためのベストプラクティス
 
[WSO2 API Manager Community Call] Mastering JWTs with WSO2 API Manager
[WSO2 API Manager Community Call] Mastering JWTs with WSO2 API Manager[WSO2 API Manager Community Call] Mastering JWTs with WSO2 API Manager
[WSO2 API Manager Community Call] Mastering JWTs with WSO2 API Manager
 
Getting Started Monitoring with Prometheus and Grafana
Getting Started Monitoring with Prometheus and GrafanaGetting Started Monitoring with Prometheus and Grafana
Getting Started Monitoring with Prometheus and Grafana
 
A quick introduction to Strapi CMS
A quick introduction to Strapi CMSA quick introduction to Strapi CMS
A quick introduction to Strapi CMS
 
Top 10 Front End Developer Skills | How to become a Front End Developer? Edureka
Top 10 Front End Developer Skills | How to become a Front End Developer? EdurekaTop 10 Front End Developer Skills | How to become a Front End Developer? Edureka
Top 10 Front End Developer Skills | How to become a Front End Developer? Edureka
 
CloudFront経由でのCORS利用
CloudFront経由でのCORS利用CloudFront経由でのCORS利用
CloudFront経由でのCORS利用
 
マイクロサービスアーキテクチャ - アーキテクチャ設計の歴史を背景に
マイクロサービスアーキテクチャ - アーキテクチャ設計の歴史を背景にマイクロサービスアーキテクチャ - アーキテクチャ設計の歴史を背景に
マイクロサービスアーキテクチャ - アーキテクチャ設計の歴史を背景に
 
システムアーキテクト~My batis編~
システムアーキテクト~My batis編~システムアーキテクト~My batis編~
システムアーキテクト~My batis編~
 
Vert.x vs akka
Vert.x vs akkaVert.x vs akka
Vert.x vs akka
 
[NDC17] Kubernetes로 개발서버 간단히 찍어내기
[NDC17] Kubernetes로 개발서버 간단히 찍어내기[NDC17] Kubernetes로 개발서버 간단히 찍어내기
[NDC17] Kubernetes로 개발서버 간단히 찍어내기
 
Spring Boot ユーザの方のための Quarkus 入門
Spring Boot ユーザの方のための Quarkus 入門Spring Boot ユーザの方のための Quarkus 入門
Spring Boot ユーザの方のための Quarkus 入門
 
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
Web api開発をするなら ドキュメントは自動生成にしておこう__ph_per_kaigi2021_
 
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptxGetting started with Next.js - IM Tech Meetup - Oct 2022.pptx
Getting started with Next.js - IM Tech Meetup - Oct 2022.pptx
 
Dbts2013 特濃jpoug log_file_sync
Dbts2013 特濃jpoug log_file_syncDbts2013 特濃jpoug log_file_sync
Dbts2013 特濃jpoug log_file_sync
 
Nodejs Explained with Examples
Nodejs Explained with ExamplesNodejs Explained with Examples
Nodejs Explained with Examples
 
Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】Apiドキュメンテーションツールを使いこなす【api blueprint編】
Apiドキュメンテーションツールを使いこなす【api blueprint編】
 

Similar to How to migrate large project from Angular to React

FEVR - Micro Frontend
FEVR - Micro FrontendFEVR - Micro Frontend
FEVR - Micro FrontendMiki Lombardi
 
IT 8003 Cloud ComputingFor this activi.docx
IT 8003 Cloud ComputingFor this activi.docxIT 8003 Cloud ComputingFor this activi.docx
IT 8003 Cloud ComputingFor this activi.docxvrickens
 
Cloudify your applications: microservices and beyond
Cloudify your applications: microservices and beyondCloudify your applications: microservices and beyond
Cloudify your applications: microservices and beyondUgo Landini
 
Scaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfScaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfKatamaRajuBandigari1
 
The Benefits Of Software Creation
The Benefits Of Software CreationThe Benefits Of Software Creation
The Benefits Of Software CreationJennifer Wood
 
Beyond 12 Factor - Developing Cloud Native Applications
Beyond 12 Factor - Developing Cloud Native ApplicationsBeyond 12 Factor - Developing Cloud Native Applications
Beyond 12 Factor - Developing Cloud Native ApplicationsContainer Solutions
 
KiranGara_JEE_7Yrs
KiranGara_JEE_7YrsKiranGara_JEE_7Yrs
KiranGara_JEE_7YrsKiran Gara
 
From Shadow IT to Empowered IT: Unshackling Your Developers’ Creativity!
From Shadow IT to Empowered IT: Unshackling Your Developers’ Creativity!From Shadow IT to Empowered IT: Unshackling Your Developers’ Creativity!
From Shadow IT to Empowered IT: Unshackling Your Developers’ Creativity!WSO2
 
from shadow IT to empowered IT-asanka 2014 08-gartner catalyst
from shadow IT to empowered IT-asanka 2014 08-gartner catalystfrom shadow IT to empowered IT-asanka 2014 08-gartner catalyst
from shadow IT to empowered IT-asanka 2014 08-gartner catalystWSO2
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendVlad Fedosov
 
The F*star Meta-Pattern (English only)
The F*star Meta-Pattern (English only)The F*star Meta-Pattern (English only)
The F*star Meta-Pattern (English only)eelstork
 
Application security for the modern web - ISSA South Texas Houston DevOps
Application security for the modern web - ISSA South Texas Houston DevOpsApplication security for the modern web - ISSA South Texas Houston DevOps
Application security for the modern web - ISSA South Texas Houston DevOpsPhillip Maddux
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekDr. Felix Raab
 
Analyzing Optimal Practises for Web Frameworks
Analyzing Optimal Practises for Web FrameworksAnalyzing Optimal Practises for Web Frameworks
Analyzing Optimal Practises for Web FrameworksIRJET Journal
 
IRJET- Web Page Builder
IRJET- Web Page BuilderIRJET- Web Page Builder
IRJET- Web Page BuilderIRJET Journal
 
Architecting an ASP.NET MVC Solution
Architecting an ASP.NET MVC SolutionArchitecting an ASP.NET MVC Solution
Architecting an ASP.NET MVC SolutionAndrea Saltarello
 

Similar to How to migrate large project from Angular to React (20)

FEVR - Micro Frontend
FEVR - Micro FrontendFEVR - Micro Frontend
FEVR - Micro Frontend
 
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJSMicro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
Micro Front Ends : Divided We Rule by Parth Ghiya - AhmedabadJS
 
IT 8003 Cloud ComputingFor this activi.docx
IT 8003 Cloud ComputingFor this activi.docxIT 8003 Cloud ComputingFor this activi.docx
IT 8003 Cloud ComputingFor this activi.docx
 
Cloudify your applications: microservices and beyond
Cloudify your applications: microservices and beyondCloudify your applications: microservices and beyond
Cloudify your applications: microservices and beyond
 
Scaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdfScaling frontend applications with micro-frontends Presentation.pdf
Scaling frontend applications with micro-frontends Presentation.pdf
 
The Benefits Of Software Creation
The Benefits Of Software CreationThe Benefits Of Software Creation
The Benefits Of Software Creation
 
Beyond 12 Factor - Developing Cloud Native Applications
Beyond 12 Factor - Developing Cloud Native ApplicationsBeyond 12 Factor - Developing Cloud Native Applications
Beyond 12 Factor - Developing Cloud Native Applications
 
KiranGara_JEE_7Yrs
KiranGara_JEE_7YrsKiranGara_JEE_7Yrs
KiranGara_JEE_7Yrs
 
From Shadow IT to Empowered IT: Unshackling Your Developers’ Creativity!
From Shadow IT to Empowered IT: Unshackling Your Developers’ Creativity!From Shadow IT to Empowered IT: Unshackling Your Developers’ Creativity!
From Shadow IT to Empowered IT: Unshackling Your Developers’ Creativity!
 
from shadow IT to empowered IT-asanka 2014 08-gartner catalyst
from shadow IT to empowered IT-asanka 2014 08-gartner catalystfrom shadow IT to empowered IT-asanka 2014 08-gartner catalyst
from shadow IT to empowered IT-asanka 2014 08-gartner catalyst
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
 
Abhinav Nigam
Abhinav NigamAbhinav Nigam
Abhinav Nigam
 
The F*star Meta-Pattern (English only)
The F*star Meta-Pattern (English only)The F*star Meta-Pattern (English only)
The F*star Meta-Pattern (English only)
 
Resume
ResumeResume
Resume
 
Application security for the modern web - ISSA South Texas Houston DevOps
Application security for the modern web - ISSA South Texas Houston DevOpsApplication security for the modern web - ISSA South Texas Houston DevOps
Application security for the modern web - ISSA South Texas Houston DevOps
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one week
 
Analyzing Optimal Practises for Web Frameworks
Analyzing Optimal Practises for Web FrameworksAnalyzing Optimal Practises for Web Frameworks
Analyzing Optimal Practises for Web Frameworks
 
Ahmed El Mawaziny CV
Ahmed El Mawaziny CVAhmed El Mawaziny CV
Ahmed El Mawaziny CV
 
IRJET- Web Page Builder
IRJET- Web Page BuilderIRJET- Web Page Builder
IRJET- Web Page Builder
 
Architecting an ASP.NET MVC Solution
Architecting an ASP.NET MVC SolutionArchitecting an ASP.NET MVC Solution
Architecting an ASP.NET MVC Solution
 

More from Tomasz Bak

Design Patterns in React
Design Patterns in ReactDesign Patterns in React
Design Patterns in ReactTomasz Bak
 
Building React CRUD app in minutes?
Building React CRUD app in minutes?Building React CRUD app in minutes?
Building React CRUD app in minutes?Tomasz Bak
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypressTomasz Bak
 
How to GraphQL: React Apollo
How to GraphQL: React ApolloHow to GraphQL: React Apollo
How to GraphQL: React ApolloTomasz Bak
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQLTomasz Bak
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packagesTomasz Bak
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?Tomasz Bak
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2 Tomasz Bak
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Tomasz Bak
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript PromisesTomasz Bak
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpTomasz Bak
 
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSUlepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSTomasz Bak
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmailTomasz Bak
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005Tomasz Bak
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScriptTomasz Bak
 

More from Tomasz Bak (18)

Design Patterns in React
Design Patterns in ReactDesign Patterns in React
Design Patterns in React
 
Building React CRUD app in minutes?
Building React CRUD app in minutes?Building React CRUD app in minutes?
Building React CRUD app in minutes?
 
JAMstack
JAMstackJAMstack
JAMstack
 
e2e testing with cypress
e2e testing with cypresse2e testing with cypress
e2e testing with cypress
 
How to GraphQL: React Apollo
How to GraphQL: React ApolloHow to GraphQL: React Apollo
How to GraphQL: React Apollo
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQL
 
Working with npm packages
Working with npm packagesWorking with npm packages
Working with npm packages
 
How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?How to replace rails asset pipeline with webpack?
How to replace rails asset pipeline with webpack?
 
Functional Reactive Angular 2
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2
 
Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?Jak wnieść wkład w Open Source?
Jak wnieść wkład w Open Source?
 
JavaScript Promises
JavaScript PromisesJavaScript Promises
JavaScript Promises
 
Replacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with GulpReplacing Rails asset pipeline with Gulp
Replacing Rails asset pipeline with Gulp
 
Ulepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJSUlepszanie aplikacji webowej z AngularJS
Ulepszanie aplikacji webowej z AngularJS
 
Bardziej produktywny gmail
Bardziej produktywny gmailBardziej produktywny gmail
Bardziej produktywny gmail
 
Kerberos
KerberosKerberos
Kerberos
 
Rails tobak2005
Rails tobak2005Rails tobak2005
Rails tobak2005
 
Ldap novell
Ldap novellLdap novell
Ldap novell
 
Testowanie JavaScript
Testowanie JavaScriptTestowanie JavaScript
Testowanie JavaScript
 

Recently uploaded

OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20Shane Coughlan
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio, Inc.
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowNaoki (Neo) SATO
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flinkconfluent
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfssuser82c38d
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Dmitry Zinoviev
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019VICTOR MAESTRE RAMIREZ
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleAmir Moghimi
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!Anthony Dahanne
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Jeffrey Haguewood
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash CourseRohan Chandane
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfssuser82c38d
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxMindInventory
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureHironori Washizaki
 
Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!alttaskcom
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이ssuser82c38d
 
Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Fermin Galan
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCIOWomenMagazine
 
The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThousandEyes
 

Recently uploaded (20)

OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20OpenChain AI Study Group - North America and Europe - 2024-02-20
OpenChain AI Study Group - North America and Europe - 2024-02-20
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flow
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flink
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdf
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scale
 
No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!No more Dockerfiles? Buildpacks to help you ship your image!
No more Dockerfiles? Buildpacks to help you ship your image!
 
Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)Automation for Bonterra Impact Management (fka Apricot)
Automation for Bonterra Impact Management (fka Apricot)
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash Course
 
killingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdfkillingcamp longest common subsequence.pdf
killingcamp longest common subsequence.pdf
 
Role of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptxRole of DevOps in SaaS product Development.pdf.pptx
Role of DevOps in SaaS product Development.pdf.pptx
 
Joseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about ArchitectureJoseph Yoder : Being Agile about Architecture
Joseph Yoder : Being Agile about Architecture
 
Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!Welcome to AltTask - the nexus where innovation converges with empowerment!
Welcome to AltTask - the nexus where innovation converges with empowerment!
 
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
killingcamp 광고삽입문제 풀이, killingcamp 광고삽입문제 풀이
 
Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227Orion Context Broker introduction 20240227
Orion Context Broker introduction 20240227
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdf
 
The Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and TakeawaysThe Top Outages of 2023: Analyses and Takeaways
The Top Outages of 2023: Analyses and Takeaways
 
eLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdfeLearning Content Development Company Code and Pixels.pdf
eLearning Content Development Company Code and Pixels.pdf
 

How to migrate large project from Angular to React

  • 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 ... ......
  • 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
  • 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!