The Top Six Points to Consider When Migrating from AngularJS to ReactJS
Overview
It was a wonderful experience when I got the opportunity to work in UI migration. I know it’s a challenge to migrate from one system to another without compromising functionality. Still, I had to contemplate several important considerations before getting my hands dirty and jumping into the arena.
At a high level, one of our clients approached us to migrate an educational application from AngularJS to ReactJS. This application has been run in AngularJS for five years. After lots of quality brainstorming, the approach we took was to recreate a whole front-end application in parallel without affecting the existing application running in AngularJS.
For a seamless and successful migration, we followed proven and tested important strategical points listed below. This information will help and support you as a guide when potentially undertaking a similar migration process.
- Ecosystem
- Breakdown Legacy Components into Small React Component
- Establish State Management Functionality
- Routing Library
- UI Components
- Performance
1. Ecosystem
Since we built the legacy application in AngularJS, functionalities such as state management, routing, and API interaction were already part of the core angular framework itself, and so the migration did not require the installation of any additional libraries.
Unlike AngularJS, ReactJS is a plug-in library that integrates and implements any specific functionalities and builds the ecosystem with flexibility. So, the first step for us was to decide and list out the corresponding libraries to mimic the exact functionalities of the existing application.
The good thing is that ReactJS has lots of sophisticated libraries, and we decided to stick with the most stable libraries to carry out the migration process. The JS libraries we used in our application are listed below.
2. Breakdown Legacy Components into Small React Component
Once we selected the respective ReactJS libraries to synchronize with the Angular app functionalities perfectly, the next step of our migration process was to analyze the existing Angular app. As we all know, the typical MVC-based application has three entities (Models, Views, and Controllers) to separate responsibilities. In contrast, ReactJS follows the approach of breaking down the UI into components. Therefore, we analyzed the Angular app in a way where we can break it into smaller UI components.
We started development by building two types of major components:
- Common Component
- Activity Component
If you look at Common Components, they are independent, substitutable, and modular components that wrap both styles and functionality. In addition to that, Common Components are the most functional component without any complicated business logic. On the other hand, Activity Components are business-specific to application, so we used one or more Common Components to build the Activity Component. The takeaway here is that it took a noticeable amount of time to build Common Components. However, once done, it became remarkably smoother to build Activity Components without much difficulty.
3. Establish State Management Functionality
In any application, state management helps to store and access data across the application. The approach when handling the state differs a lot between Angular and React. In the legacy Angular application, the state of the UI components spreads out to multiple directives and services. In ReactsJs, we used Redux to manage the state across application levels. However, to manage the state at the functional level, we took advantage of ReactJs hooks.
4. Routing library
Though there are a variety of routing libraries available in React, such as Backbone, Aviator, React Router, React Mini Router, we picked one of the most popular routing libraries, “react-router-dom,” for our migration. I would recommend that if you start the migration from scratch, you should try Hook Router, as it is a better alternative for “react-router-dom”. Hook Router is a new library build around React hooks with the same capabilities as react-router-dom but with a cleaner and lighter implementation.
5. UI Components
MaterialUI is the default choice for most React app development. However, our application is an educational product, which demands a lot of unique components in which most of them are embedded media content like voice-over, captions, and video snippets. Therefore, we didn’t entirely rely on MaterialUI. Instead of tweaking the predefined MaterialUI components, we built our components using CSS and HTML, giving us more control and flexibility over the system. However, there have been some places where we have used MaterialUI components since they come in handy with tools like Popover, Modal, and Theme.
There are plenty of other UI framework libraries available in ReactJS. Some of them are listed below.
6. Performance
Performance is key for any application, whether already existing or in development. The performance of an application will also determine if you need an alternative option of migration. How Angular and React handles DOM is the key differentiating factor in performance.
Technically speaking, Angular uses Real DOM, and React uses Virtual DOM. However, when using Real DOM, any change made causes the entire page to refresh. Luckily, Virtual DOM comes to the rescue and solves this problem. Virtual DOM is the lightweight abstraction of Real DOM. It tracks the changes and ensures the only specific elements will update without affecting another part of the tree.
After the migration process is over, the industry-standard practice is to come up with performance evaluation metrics. We use these metrics to compare the React app performance against the legacy app. We noticed improvements in some apparent areas in the components that required often-changing states and interactive components like passage with embedded dropdowns, image hotspots, etc.
Conclusion
Throughout this migration, we learned a lot of fascinating technical things along the way, such as state management, react hooks, and building reusable components. We had to do a lot of laborious and heavy lifting because this was our first migration assignment, but it created the groundwork and framework for future migration jobs to operate effortlessly and seamlessly.
To conclude, we strongly believe that all the major factors and checkpoints for transitioning from Angular to React would be quite useful and beneficial. I hope you remember the points if you find yourself in the same migratory situation as stated above.
