AngularJS to React Migration: Bridging the Gap between the “Old” and “New” World
Last month turned out quite an exciting one. I got to spend a day with our React development team. They were starting on a new project. It was AngularJS to React migration. I learned various practicalities on which projects are taken, learned the best practices, approaches to technology migration and how decisions are taken. But there is only so much you can learn about a project in a single day when the team is going to spend many coming months into development.
While I enjoyed working with them as a team member, I couldn’t take my mind off the project. Somehow, I wanted to be more invested in the project. I got a warning from the team, “things are going to get more technical from here.” I persisted. I became more involved into the project. The blog is a reminiscence of my time at our React lab and active sessions with the developers.
Rendering React within AngularJS: Building the Bridge
What exactly is a React component? It is yet another UI component. And what does a UI component does? It acquires data, triggers actions, and renders them to the DOM. In addition, a UI component maintains the internal state and handles user interaction. So what could be a simple concept of a bridge to connect ‘old’ world with the ‘new’ world? An AngularJS component acting as a thin client with the obligation to litate data to the React Component.
Revisiting the Project Scope
The main Application component is wired up with complex logic like routing. The routing is deeply integrated with the main components and a key piece of AngularJS. NavItem is friendlier. It displays a link, has some trivial logic like “am I ready” and displays anchor text.
The content part of our app contains sub tree showing a list of comments. The Component List is complex, as it is attached to the data layer and may retain state: what item is selected etc. The Comment is the easiest part of that tree. It essentially renders a Comment and handles user interaction. The Text component for example is responsible for rendering the text. That component will render in another technology without hiccups.
Completing the Bridge to Connect the Old and New World
Not a eureka moment but we could wrap a React component with an AngularJS layer with the ingenious piece of code. We can reuse the code in the rest of the application.
What a starting point and a proof of concept. I can’t wait to work with the team again although they are raising eyebrows.
Originally published at https://www.topsinfosolutions.com/ on June 18, 2019
