fbpx Skip to content

Aquent | DEV6

Strategy to Upgrade an AngularJS Enterprise Application

Written by: Ronak Nagda

Introduction

If you have an application written in AngularJS, your app most likely falls under one of the two categories: either it is not heavily used, and will be discontinued one day (in which case the upgrade is not required); or it is too large, providing substantial day-to-day business impact and upgrading is not a priority at the moment.  The project that my team is working on falls into the latter category.

Please note that this blog post is about how we have planned to use a particular strategy to upgrade our existing AngularJS application and not the exact steps to do so.  If you are looking for step-by-step instructions, there are many other resources available including the official Angular website.

Options to Upgrade

Pre Angular 2.0: The application in discussion here was written when Angular 2.0 (now Angular) was in Beta and did not seem ready for the “big stage”.  Hence, we decided to upgrade only to TypeScript, to allow for an easier migration path in future.

Need: The need to upgrade to Angular seems evident. There are many technical advantages including faster load times; lower memory usage; modular development; faster change detection; observables, and so on.  Also, it is reasonable to assume that AngularJS will be deprecated eventually.

Options: To upgrade, one of the initial steps is to rewrite the app from scratch with the latest Angular version available.  However, in some cases, it is unreasonable to rewrite a large Angular 1 app in Angular 2 all at once.

The other option is to prepare the existing app to a point where it is ready to migrate to a newer version of Angular and then make the big switch which some people call the “Big Bang” method.  In this case, the leap could be too large and there is a risk that the app may remain in an erroneous state for too long, which can double the workload if a lot of changes or improvements need to be added to the old branch during the transition.

After discussions with some of my current team members, the plan we decided on was to upgrade the application incrementally by running two frameworks simultaneously in the same application.

Incremental Approach

This approach runs both AngularJS and Angular frameworks side by side, while porting each component to its newer version. The resulting application downtime will be comparatively much lower.  The process will also be less tedious since our existing app is all in TypeScript.

Advantages:

  • This is the official approach recommended by the Angular team.
  • Makes upgrading a complex application possible without distorting the day to day business, since the required tasks can be carried on concurrently and spread over time.
  • Offers a lot of flexibility and freedom to create a custom migration plan.
  • Possible to re-use AngularJS components in parts of Angular.
  • Maintain the same look and feel during migration.
  • All the new feature additions can be written in Angular thereby reducing the amount of legacy code and future rework.

Disadvantages:  One drawback to this approach is the performance hit.  The app may seem heavy while upgrading, since two frameworks will be parsed and loaded at runtime. However, this issue will be resolved once the migration to Angular is complete.

Conclusion

The process of migration may seem intimidating at first since it demands knowledge of three domains: AngularJS, TypeScript and Angular. However, the ngUpgrade module in Angular has been designed to make incremental upgrading seamless.

At the time of writing this blog, we have still not finalized a timeline for this upgrade.  I will write a follow-up blog post once this upgrade commences.

If you have upgraded your app recently or plan to do so, please feel free to share your thoughts and views.

References:

Sign up for our Angular Course

$1,995 CAD – 4 Days

View Course Details