Technology moves forward quickly, sweeping out whole ecosystems of tools and solutions and replacing them with new ones. Consider Adobe Flash and Microsoft Silverlight—there is no need to launch new features in products that use them because they are, in fact, dead. Of course, businesspeople know what happens in the technology world and read the technical news, but it will be too late to switch horses midstream when the decline is obvious. That’s why migrating the WealthTech platform to a new framework is not only a technology but also a business problem.
Compared to other current options, AngularJS isn’t the highest-performing web development framework. According to the research on freecodecamp.org, based on the figures from 2018, many modern frameworks have enhanced performance that can influence customer loyalty and the ability to flexibly adapt to market changes. Let us overview what pitfalls can one anticipate and avoid while migrating a huge WealthTech platform to a new framework on the example of Angular.
AngularJS appeared in 2010, and many successful up-and-running projects were first launched using it. Moreover, many start-ups today prefer using AngularJS because it’s easy to learn, start coding, and start finding developers for projects. However, a point comes when the project becomes too intertwined, obscure, and difficult to maintain. That’s the reason to seamlessly migrate to Angular and help the company grow by enhancing the code quality, security, performance, and other factors without losing time and clients. (Picture: First meaningful paint [ms]—lower is better, freecodecamp.org)
We have several examples of how companies listed as WealthTech Club members use AngularJS and Angular in their projects. You can find more details on each case by following the corresponding link:
- AdvisoryWorld uses a couple of key front-end libraries on top of Java—in particular, Angular and Bootstrap.
- Capitect’s tech stack includes Angular and Bootstrap on the front-end, Node for back-end, PostgreSQL for database management, and Redis for caching.
- Bridge FT’s front-end is written in Angular 1. In the future, they plan an inevitable switch to the latest Angular version in 2019.
- InterGen’s AI robo-advisor widget is built using Angular.
- Wela has a fully API-driven architecture, where the stack includes PHP, Angular 6, and MySQL for data storage.
Among other benefits of Angular migration, you can consider up-to-date coding approaches, future framework updates, flexibility, scalability, ability to optimize the code and improve the team’s skills along the road, and more. If you decide to take advantage of Angular’s cutting-edge development approach, the following migration checklist is for you.
Key points
Follow through these key steps to ensure a smooth and seamless upgrade:
- Estimates. Before migrating, let your CTO and tech leaders estimate the time necessary to accomplish the process. Lots of refactoring will follow the migration, so a chance of getting carried away from migrating to optimization exists. In turn, this would negatively influence business results. Try to keep with the time frames elicited at this stage and maintain control over the budget and the process.
- Refactoring. Running a migration is a good chance to optimize the areas you usually wouldn’t get around to. Many activities would be related to changing the syntax, refactoring, and optimization, which are must-haves for a migration. For example, the new framework versions don’t support directives and shared scope.
Following the Angular Style Guide’s patterns and practices helps make an AngularJS app more closely align with Angular. With each iteration, you’ll have the code increasingly resemble Angular. You would also be able to make more changes to your code and enhance its quality in the areas that do not require immediate attention but are nice to have from a strategic point of view. Don’t miss your chance to fix such issues during the migration—of course, within the initial priorities and estimates.
- Dual-booting of AngularJS and Angular frameworks. The purpose of this stage is to smoothly integrate both AngularJS and Angular frameworks into one application to keep production up and running. The ngUpgrade library is designed to match AngularJS and Angular components in the same application. At this time, your project’s AngularJS codebase contains all your code while your Angular codebase is empty. Iteration by iteration, you’re ready to move components, services, and routes to Angular until you migrate the entire codebase.
- Migration strategies. When running a hybrid app, you may need to use some component, service, or module in both frameworks. That’s why you may need to downgrade the migrated components to AngularJS or upgrade some complex intertwined components to Angular before the migration completion. The NgModule helps with this. For more details on how to set up downgrade and upgrade with code examples, download our white paper.
- Regression testing. When you’re deleting the AngularJS code, you may face some overlooked issues and need to fix them ASAP. It’s vital to keep in mind that this can happen and apply counters. The migration process should appreciate the necessity to test the migrated modules and the system overall, so it’s best to upgrade in stages, module by module, to ensure QAs don’t run a regression testing each time you migrate something.
