As one of the foremost frontend development frameworks, each iteration of Angular is eagerly awaited by developers all around the world. With a host of new features, Angular 9 promises to be one of the biggest releases made by Angular in the past 3 years.

We take a look at its biggest feature, the Ivy compiler and some of the new major features.

The Ivy Compiler  

After being introduced in Angular 8 as an opt-in, the new Ivy compiler and render pipeline is now the default compiler in Angular 9. Ivy promises smaller bundle sizes, better debugging and a boost in overall performance. Even though Ivy doesn't affect your workflow in Angular, it does have a major impact on the code being generated.

Let's take a look.

1. Smaller apps

Image courtesy: Kara Erickson - What's New in Angular v9 ng-conf 2020 keynote.
 You'll see a considerable boost in performance of your apps.

Ivy is much more efficient than ViewEngine. For each component in Angular less code is generated since the compiler removes the unused parts of Angular. This has a huge impact on the size of the app. The difference in bundle size between Angular 8 apps and Angular 9 apps is almost 40%. This is a big deal since one of the main drawbacks of Angular when compared to other libraries like React and Vue is the app size. Also, the drop in bundle sizes improves the overall performance of the apps you build.

2. Faster and efficient testing

 You'll see a positive impact on your development timeline thanks to Ivy.

With Ivy, you can expect to see a 40-50% boost in test speeds of your apps. This is mainly down to the implementation of TestBed, which has been completely revamped and is now much more efficient.

Image courtesy: Kara Erickson - What's New in Angular v9 ng-conf 2020 keynote.

How did they do that?

Rather than recompiling all components during each test cycle, the TestBed in Ivy avoids recompilation between tests unless a component has been manually overridden.

3. More debugging tools

Image courtesy: Kara Erickson - What's New in Angular v9 ng-conf 2020 keynote.

Now you have more tools to debug your applications. You have the new ng object for debugging while running an application in Dev Mode. With this you can now gain access to instances of your components, directives, etc.

4. Improved handling of styles and style merging

Handling of styles has been greatly improved in Ivy. Usually what happens is that if there were two competing definitions for a style, then those styles would destructively replace each other. Now they are just merged predictably.

Image courtesy: Kara Erickson - What's New in Angular v9 ng-conf 2020 keynote.

In Ivy, bindings do not depend on the timing of changes to these expressions instead, there is a clear, consistent order of precedence with the most specific style having the highest precedence..For example, a binding to [style.color] overrides a conflicting binding to [style].

5. Lazy loading

In Ivy, any component can be lazy loaded and dynamically rendered. Components can be lazy loaded and rendered without Angular modules or routing. Even the libraries which are only used by a lazy loaded component are bundled into lazy-loaded chunks.

6. AOT Compilation

The AOT Compiler has seen a great deal of improvement because of Ivy's new architecture. Till Angular 8, JIT compilation was preferred the preferred compiler since AOT was too slow. Now in Ivy AOT is the default compiler thanks to the huge improvements in build and rebuild times.