After several months of delays and considerable uncertainty, version 9 of Angular, one of the most widely used Front-End development frameworks in the world, was finally released.
The big star of this new version is the long-awaited new "Ivy" compiler, which they had been working on for a long time. The mere fact of changing to the new version, and thanks to Ivy, will provide us with great improvements in our applications, without the need to make big changes to the code base, including:
- Optimizing application size
- Improved build times
- Faster testing
- Debugging and error handling improvements
- New directives
- Improved internationalization
This version 9 in Angular symbolizes a major version, following the semantic version:
- Major version: It is expected that changes may break old versions and certain steps (manual or automatic) are likely required to update the application.
- Minor version: introduction of small innovations, but always compatible with previous versions.
- Patch version: introduction of solutions to known bugs.
Angular has promised to release a new major version every 6 months or so, although the latter has been much to be desired (it should have been released in October 2019). Much of the blame for this delay is due to Ivy.
As we will see shortly, there have been no big changes in terms of code, so the upgrade for the developers should be very simple. Stay tuned for these steps. This is due to the great work of the Angular team to introduce drastic modifications to the Angular core, but keeping its API intact and introducing few external changes that can break applications.
Having said that, let's start reviewing the news:
Optimizing application size
The main reason they have been working on this new compiler was reducing the size of the compiled code. This is especially important when we talk about mobile phones because the size of the downloading files has a big impact.
Optimization is accomplished at compile-time, removing Angular code that the component and application are not going to use. This method is called tree-shaking or pruning, and it can represent a fairly significant percentage depending on the original size of your application. The estimation of the Angular team itself is that it can reach a 40% reduction in size, as shown in the image provided by them:
Improved build times
Another of the strong points of the new Ivy architecture is the compilation times that are drastically reduced, which allows AOT or Ahead of Time to be activated by default.
This allows you to serve the browser with a smaller pre-compiled code (which means faster) instead of using JIT or compilation at runtime and letting the browser compile it for you.
Another improvement when it comes to compilation occurs with the runtime of tests. If you use TestBed for the management of your components and services, you should know that this API has been rewritten, improving runtimes between 40% and 50%. This is because previously it would recompile all the components between the running of each test (whether they had changed or not). Now Ivy will only recompile those components that have been changed during the tests.
Debugging and error handling improvements
Perhaps one of the most interesting introductions that have been added in this version is the new ng object, to debug the application in your development environment offering you some very interesting methods such as:
- ng.applyChanges: This can save you from having to go to the UI, do manual modifications, and see how your application flow behaves. With this function, you simply configure the state of your application and make it update to see what happens.
- ng.getComponent: It's not that getting a component to debug in Angular is complex but this reduces the time you would have to think about it.
There has also been a significant improvement in the information displayed about the errors, both in the browser and in the compiler, making debugging easier.
New directives
Both [ngStyle] and [ngClass] were destructive directives. This means that if, for example, at any time there was a conflict in the styles of a component, the last one that was evaluated would win. With version 9 [style] and [class] work in a more ordered way, more similar to the CSS that we know, using what we would call priority order or hierarchy. If we have a [style] that modifies the color and a [style.color] that, of course, will also modify the color, since the last one is more specific it will have priority over the color indicated by the first one.
This behavior is the same as in CSS, which will allow you to have more control over your components.
Improvement in internationalization
Now with Ivy, the internationalization API compilation step is now ten times faster.
To sum up, with Ivy's introduction, Angular is at its best.
Both versions 8 and 9 have made major improvements when it comes to library performance while minimizing API changes to prioritize compatibility. It is these two points that make these two versions almost obligatory to update if you have an old application written with Angular since their benefits can be enormous.
