The Angular team recently announced the end of long-term support for AngularJS. Long term support (LTS) was originally planned for July of 2021, but was delayed to December 31, 2021 due to the effects of COVID-19. You can see their announcement in their blog post both discontinuing LTS and providing a transitionary path to later Angular versions for those whose teams and develop plans focus completely on the Angular ecosystem.
If you have been part of teams like mine whose expertise lies in React but are tasked with developing and maintaining an AngularJS, this post is for you. Together we’ll go over migratory steps to transition your code base from AngularJS to React.
The migration of your code base isn’t necessarily a hard one but may take time and dedication depending on the size and complexity of your current solution. Generally speaking, there are three main approaches you can take to transition away from AngularJS. These are:
This library takes reconfiguring your current solution to load in multiple apps as front-end microservices. I’m not terribly familiar with the solution as the implementation to do so with an AngularJS app proved to be too tedious at the time of migration. Most examples given are when starting apps from scratch. If there are those that can speak to a legacy migration solution, please let me know your insights.
Iframes apps are standalone apps that we want to run in conjunction to the parent app as sub-features, or child apps, throughout the parent app. This requires creating a new app with its’ own repository, pipeline, deployment strategies, testing environments, and domains where the app will reside. It also requires server and client-side security protocols if you only want the iframe to be accessible from the parent app.
This can be a great way to move off of legacy code and constraints while enabling your engineering team to use modern technologies and standards without having to worry about conflicts with your parent app. This can also allow you to move into a new CSS framework without conflicting styles between the parent and child apps. In order to merge the two apps together, you’ll need to:
Eventually if architected with replacement in mind, you could replace the legacy app with your iframe app completely once every view and component has been transferred.
This solution allows you to continue with a monolithic build but restricts you from implementing modern build techniques if your current app is too complex to rewrite every portion of the app at once without creating more tech debt and unexpected failures (e.g., Moving from Webpack 3 to Webpack 5). My favorite tool for this approach is react2angular, an NPM package that embeds React apps in your AngularJS project without getting in the way of the main app maintenance or feature development.
This tool allows you to send your AngularJS services and any prop you define to your React app without having to rewrite the AngularJS components. Your React app consumes incoming services and data as props and your team is already productive from the start with little overhead. As a result of AngularJS rending React micro apps throughout your parent app, React doesn’t have the convenience of the apps sharing a single global state management solution like Redux or Context. This can slowly change as you migrate and merge more and more of the app components into your new React codebase. Another advantage in using react2angular is creating wrap smaller React components in an Angular component by name only in order to mass replace a particular feature as you are making the transition over time.
A few things to consider with this approach.
If you are looking at only new feature development, the Iframe approach may be good for you. If you want to replace current functionality of a legacy app, the Micro App approach may be the approach to best transition your app. Personally, I favor the two of them in unison. By doing so you can transition older features to a newer codebase while developing newer features in a new iframe codebase. Eventually, you can even move the react2angular Micro app code straight into the iframe app if you stay strict to both using the same shared libraries and utilities.
Possible migration flow:
There may be more or less steps depending on the complexity of your current solution and you should cater your migration strategies as such to what works best for your project or company goals.
In conclusion, as a result of starting or completing this migration, your company should see benefits both in engineering moral and empowerment to implement new technologies and staying up to date with the developer ecosystem. You can rest with peace of mind that security maintenance doesn’t fall on your shoulders without support from the official Angular development teams. As well, migrating your app will also allow you to expand your hiring base as you are no longer stuck hiring candidates in a niche and discontinued framework.
Thanks for the read and I wish you the best of luck on your migration!