Angular 9 - Risk vs Reward

With the recent release of Angular 9.0.0-rc.0, and now Angular 9.9.9-rc.2, a lot of us are probably wondering: "should we upgrade"? In this blog post, we'll be looking at the risk vs reward proposition for Angular 9.

While it is certainly simple enough to generate a new V8.x Angular SPA and then try to upgrade it, that's not really much of a real-world test. Accordingly, we took an actual, enterprise-grade SPA and upgraded from v7.X to 9.0.0-rc.0. Our guinea pig was certainly not the biggest SPA we've ever seen, but it was by no means a toy, and we feel that our experiences will probably be indicative to what you will encounter when migrating a typical application of medium scale and complexity. It had a fair amount of logic, retrieve data from a remote SQL database, and has to render a significant number of components for our test data set.

We won't be going into the details of that migration here. For that epic saga, see our blog post. However; it's worthwhile recapping the breaking changes that come with Angular 9:

  • Ivy is now on by default (although it can still be turned off). You may want to evaluate what that means to your app by looking here.
  • AOT is on by default. As with Ivy, AOT can be turned off, but be aware that his also requires you to turn off bundle optimization. As we will see, that comes at cost.
  • You will have to upgrade to TypeScript 3.6. Not really a problem for most (if any) applications, but be aware.
  • tslib is now a peer dependency, rather than a direct dependency.

So that, along with the potential of a failed migration is the risk side of the coin, what's the reward? To assess that, we looked at two main metrics: performance and bundle size. The results were interesting.

Fig 1: Performance - Angular 9.0.0.rc-1, with Ivy on and off. All measurements taken with the profiler in Chrome v78.0.3904.07 (Official Build) (64-bit). The times are the average of 12 separate runs of each configuration (after three cache-warming runs), and discarding slowest and fastest runs (as measured by Wall Time - Idle). The remaining 10 runs for each configuration were then averaged, and the percentage difference between those averages was taken as the measure of performance.

Angular 9 Performance Metrics

Fig 1: Performance - Angular 9.0.0.rc-1

If you're like us, you probably expected the Ivy renderer to make, well, rendering faster; and it does, by a modest amount. The real surprise is the improvements in other areas, amounting to a 45% reduction in CPU time and a 30% reduction in Wall Clock time. While your mileage will certainly vary. The trade-off for that is that loading was marginally slow, but it's honestly lost in the wash.

So what about bundle sizes. Here, we broadened our survey some what and looked at the same application running as Angular 7, 8 and 9. For the Angular 9 build, we also measured size with AOT both enabled and disabled.

Angular 9 Bundle Size Comparison

Fig 2. Bundle size comparison

As we can see from the above tables, it's mostly noise: bundle sizes are more-or-less the same across all three versions... unless you turn AOT off. Do that, and things get a little bloaty

So what's our conclusion. For our application, migration was relatively painless, and the clear performance gains attendant to Ivy are compelling. While YMMV can, and likely will, vary, we would certainly recommend checking the new Angular 9 out to see if it's right for your SPAs.

Do you want to develop Angular apps with PWA capabilities? Do you want to migrate your existing AngularJS application to Angular? Want to unit test your Angular apps using tools like Jasmine and Karma? If your answer to any of these questions is yes, then check out our Angular services here. In the last few years, we have helped clients all over the US, UK, Canada, Europe and India on Angular projects. We have worked on all sorts of backends including Node.js, .NET Core, Java, .NET and Python with frontend technologies including Angular, React, Blazor Aurelia with Typescript. We have successfully completed our Angular trainings world-wide both in-person and remotely.