There has been a rising demand amongst clients to migrate their existing web applications to React, giving rise to the growth of React as a highly demanded technology in the industry. The flexibility and exchangeability of React make room for experimentation and thus opens up various possibilities for developers. Despite its several advantages, in specific cases, taking the application complexity and customer demand into account, migrating the whole application to React might not be a favorable option. At times like these, the better option is to build a part of the application as a separate React application and to combine it with the existing application, making it work as a single application. Let us take a look at the need to migrate to React and the process and benefits that entails it.
The Angular to React Migration: An Overview
When Google had announced to stop its support for Angular Version 1.5 back in 2018, many projects were forced to migrate either to a higher Angular version or any other better technology. One of the main reasons why React was chosen as a better option was because it improved the user experience by rendering the elements in DOM at a faster rate. That brings us to the concept of the Virtual DOM. The Virtual DOM is a node tree like the original DOM that lists elements and their attributes and content as objects and properties. React’s Virtual DOM provides a more efficient way of updating the view in a web application in such a way that each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created. Rendering the Virtual DOM is always faster than rendering the UI in the actual browser DOM.
Another benefit of using React was that although Angular, as well as React, have large community support, a typical React forum goes into far more detail when compared to Angular.
There exist several approaches to execute the migration. We are going to delve into one such React-Angular migration technique here. For this, let us assume that the case here is an already existing page in Angular that is to be converted to React.
The steps to do so are as follows:
- Develop a whole new React application that is properly structured and covers all features and functionalities that already existed on the page in Angular.
- The existing route for this page in Angular should also be defined in the React application so that this page will be rendered when we navigate to the corresponding URL in the browser (say ‘/host/upload’).
- Under the assumption that the routing is still handled in Angular application, we need to keep the same route definition in Angular, and at the same time, remove the functionalities associated with the page in Angular since it is being handled in React.
- We need to modify our bundler config(eg: webpack)so that the bundler outputs only a single js and CSS file instead of multiple chunks. Without this step, it will not be possible to integrate the React application on top of any other application.
- Build the React application.
- Go to the build folder of the Angular application.
- Copy the React build folder and paste it inside the Angular build folder.
- In the index.html file of the Angular build, link the js and CSS references from the React build with a relative path as shown below:
- Now deploy the combined build file so that we get to see our new React page in the existing Angular application when we navigate to the corresponding URL.
A question that arises now is: How to handle the session and share the data that is common for both the Angular and React applications?
A simple approach to this question would be to keep the data in local or session storage of the browser, and since the combined application is using the same window, it can access the data from the browser’s storage. For those using third party authentication like AWS Cognito, we will have to use the same plugin in both React as well as Angular side.
Weighing the Pros and Cons of the Migration
As with every process in the world, the migration from Angular to React comes with its own set of benefits and drawbacks. The advantages of migration are as follows:
- The migration process can be made to happen in multiple stages so that we will be able to save the development time and effort of building the entire application from the scratch in React.
- New features can be developed in parallel to React migration (in Angular or React), which can be deployed without any delay.
- Improved client satisfaction and cost-effectiveness.
However, the disadvantages of the migration are as mentioned below:
- The build size could be higher than a stand-alone Angular application. One reason for that could be — the same libraries or plugins(eg: AWS Cognito) will have to be used repeatedly in both applications until the migration process gets completed.
- The deployment pipeline needs to be modified to accommodate the React application build along with Angular.
- While migrating to React, we might still need to modify features in the Angular application so that the team should have both Angular and React resources.
Having said that, despite some of its disadvantages, React offers lightweight components and promotes functional programming. While the cost of migration might seem higher, it compensates for it by providing access to a larger community and 3rd party libraries. With its simple API, unidirectional data flow, functional programming, lightweight components, and opportunity to innovate, migrating to React would undoubtedly be a favorable option.
Software Engineer, RapidValue