Case Study: Progressive Migration Works Like a Charm for Migrating from AngularJS to React
ABOUT THE CLIENT:
The Challenge
Our client has one of the biggest platforms for automating corporate expenses on the market. After working with Softjourn's teams of experts on many different projects over the years, the client decided to entrust us with the project of rewriting their application from AngularJS to React.
The Solution
Our team suggested to go down the path of progressive migration to ensure our client can continue to issue cards without any issues. Our team was determined not only to successfully migrate the application but also fix any issues with the current application so it would function even better.
The Benefits
The goal of our project was to:
- Continue and support progressive migration from AngularJS to React
- Finish the migration and phase out AngularJS
- Prioritize the migration of new features
- Resolve problems and bugs
The Challenge
Choosing the right tech stack for a new application heavily depends on what technologies are currently available. Over time, we’ve seen how new technology offers additional tools for testing, different libraries, and increased flexibility in software development.
However, some technologies only stick around for a short time before becoming legacy and then are no longer supported. For example, the popular framework, AngularJS, announced that it would no longer be supported by the end of 2021. When it was introduced ten years ago, the framework was adopted by numerous companies as a target web framework for new web apps. Now, many of these companies must pivot to a new tech stack.
Besides migrating to a supported platform, many companies can better expand their services with new features by moving their application to another platform. These are some of the main reasons our client, a large-scale expense management company, decided to migrate from AngularJS to React. They knew React would bring a lot of benefits, like improved app performance, more flexibility, and a large community of developers.
Our client is a big name in the expense management industry and constantly strives to offer its customers a chance to save time and money by automating corporate expenses. After many successful projects working with Softjourn, the client knew that our team was more than capable of providing insightful suggestions, time-saving solutions, and processes to ensure the success of migrating platforms.
Choosing the right tech stack for a new application heavily depends on what technologies are currently available. Over time, we’ve seen how new technology offers additional tools for testing, different libraries, and increased flexibility in software development.
However, some technologies only stick around for a short time before becoming legacy and then are no longer supported. For example, the popular framework, AgularJS, announced that it would no longer be supported by the end of 2021. When it was introduced ten years ago, the framework was adopted by numerous companies as a target web framework for new web apps. Now, many of these companies must pivot to a new tech stack.
Besides migrating to a supported platform, many companies can better expand their services with new features by moving their application to another platform. These are some of the main reasons our client, a large-scale expense management company, decided to migrate from AngularJS to React. They knew React would bring a lot of benefits, like improved app performance, more flexibility, and a large community of developers.
Our client is a big name in the expense management industry and constantly strives to offer its customers a chance to save time and money by automating corporate expenses. After many successful projects working with Softjourn, the client knew that our team was more than capable of providing insightful suggestions, time-saving solutions, and processes to ensure the success of migrating platforms.
Our team decided to go with progressive migration to make sure the client’s system was able to continue normally issuing cards and managing transactions during the migration. Progressive migration would allow our client to keep the high speed and performance of their application for thousands of users during the process.
The design of React allows the creation of small JavaScript components so they can be inserted into the page generated by a template. Our team was ready to slowly start migrating React components until all pages consist of primarily React components.
Softjourn’s contribution to this project was significant from day one. Our well-versed team pointed out the high number of bugs that were slowing the application and urged the client that migration should be a top priority to keep their app running smoothly.
The goal of our project was to:
- Continue and support progressive migration from AngularJS to React
- Finish the migration and phase out AngularJS
- Prioritize the migration of new features
- Resolve problems and bugs
The Solution
React was developed by Facebook and was named one of the most highly favored web frameworks by developers, according to Stack Overflow.
React contains a front-end JavaScript library useful for building user interfaces and is utilized for building web and mobile applications. It offers several key features that make it one of the most popular technologies today, including virtual DOM, JSX, and reusable library code.
Progressive Migration
As a web and mobile app development company, Softjourn’s team of developers has over a decade of experience with both AngularJS and React. Our hands-on experience and deep expertise proved instrumental in deciding how to approach this type of migration. Our team suggested progressive migration, which is a gradual process where the team would infuse new tech into the existing AngularJS code.
Benefits of a gradual migration:
- It causes little disturbance to the end-users
- It works well for large and frequently updated applications
- It allows developers to test each component
- It reduces the risk of human error
Softjourn’s developers created a system of bundles for the part of the application that needed to be rewritten into React. This ensured that the parts of the application still in Angular wouldn’t cause any unanticipated problems. Since the client did not have a detailed migration process, our experts developed the process to migrate the code to React faster and more efficiently.
Here are the steps we used for the migration:
Brainstorming – Our team and the client’s in-house team met together to brainstorm different solutions to find the one that would work best for their project and decide on how to implement it.
Implementation Planning - In this phase, the team analyzed the issues that needed to be resolved and broke them into separate tasks according to the process previously developed by the client’s in-house team for this project.
Development phase - Once all of the team members understood what they were working on, the team focused on migration. As soon as a problem or a bug was identified, the team worked to fix it without disturbing the flow of the application and process.
Testing - The final step for every task was to test the code. Our team recommended having two approvals per request to ensure that the code would be ready for merging.
The Benefits
React is a lightweight tool that proved to be a good choice for our client’s application. These are the greatest advantages our client gained by migrating to React:
- Faster page loading time
- A stable code structure
- Access to external third-party libraries
- UI-focused designs
- Access to a variety of developer tools
- Works well for web applications
- A large community of developers
The Result
During the migration process, our client noticed that pages were loading much faster, bugs were removed, and their platform was much more efficient overall than it was prior to the migration. Plus, updating the application and creating new features in the future will be much easier due to the flexible React framework.
If you are considering the shift from AngularJS to React, or a migration between other platforms, we advise you to plan ahead and make sure you have the right resources and knowledge to perform a successful migration.
With a detailed plan of migration, you can ensure the smooth functioning of your application during the migration and after. Our experienced developers and business analysts are glad to learn about your project and create solutions that will support your business goals.