Angular 9 Is Here With All New Ivy Compiler & Runtime - Appventurez
Blog / Angular / Angular 9 Is Here With All New Ivy Compiler & Runtime

Angular 9 Is Here With All New Ivy Compiler & Runtime

Anand Prakash By Anand Prakash | February 11, 2020
angular 9 is released with new features

Angular 9.0 is here with updated features along with Angular Material and the CLI. 

The release made on 7th February throughs lights on what’s new in the Angular 9.0 version. 

The all-new version enables the seamless switching of applications to the Ivy compiler and runtime by default. Also, improved testing components are also introduced.

In one of the post, Google’s developer relations lead Stephen Fluin wrote- “This is one of the biggest updates to Angular we’ve made in the past 3 years, and we’re excited for all of the ways it empowers developers to build better applications and contribute to the Angular ecosystem,” 

Among all, the most notable feature that has captured the attention is Ivy. Ivy in Angular 9 improves bundle size along with bettering debugging process and improving type checking too. Faster testing, AOT compiler on by default with improved CSS class and Style binding are the add ons.

Using Ivy and Ivy’s tree shaking feature, Angular developer can witness improved small and large bundle size savings.

Another statement by Fluin highlighted- “small apps will benefit from tree-shaking, large apps will benefit from reduced factory sizes, and medium-sized apps will get slightly smaller bundle sizes. 

Before we gauge into the in-depth understanding of what has Ivy complier bought to the Angular, let’s have a look at Angular features. 

Angular 9- All-New Features

Built and backed by Google, Angular is one of the three popular JavaScript frameworks for developing client-side web and mobile applications. The framework with integrated libraries for front-end web development is the result of years. 

Due to this, many mobile app development company, as well as developers, rely heavily on Angular for developing frontend applications. With the major release and updations in Angular, the current version of Angular 9 is available now. 

However, when it comes to file size, Angular lacks behind in comparison with React or Vue. This downside of Angular impacts the download time and hence affects the overall performance of the app. 

Also, the constant dilemma of whether to choose frameworks Vue-js-vs-angular and React vs Angular this year will remain trending. 

Hence, a look at the introduction of Angular can be proven worthy. 

Moving on, by cutting the chaos, Angular 9 brings a wave of joy among developers. With its all-new features, the Ivy compiler is the most welcoming feature. 

Clubbing everything together, Angular 9 got Ivy as an add on. 

Ivy

Ivy compiler and runtime in Angular offers numerous advantages listed below- 

  • Smaller Bundle Sizes & Augmented Performance
  • Better Debugging
  • Improved Style Binding & CSS Class
  • Faster Testing
  • Improved Build Errors
  • Improved Type Checking
  • Improved Internationalization

This is just the crux of what Ivy is offering. Here is the breakdown of major improvements- 

1. Smaller Bundle Sizes & Augmented Performance

The Ivy compiler is designed to remove parts of Angular- those parts that are not being used via tree-shaking while generating less code for each Angular Component. 

The made improvements bring in some “noticeable” size savings in small and large apps. 

  • Small apps can incur benefits from the tree-shaking concept.
  • Large apps contained with a plethora of components can take advantage of the reduced factory size.
  • Mid-size apps cannot take leverage due to less number of components.
ivy improvement

 Meanwhile, there is a plus side of it too. 

The duo of smaller bundle size and Augmented performance will make users get enhanced and flawless performance of greater value. 

2. Better Debugging

The all-new Ivy renders a number of tools for debugging applications. The new ng object for debugging is the new offering for running application in Dev Mode with Ivy runtime. 

  • Developers can manually call methods and update state
  • For seeing the result of change detection, change detection with applyChanges can be triggered.

And this is not enough, with Ivy, stack trace to jump directly to the template instruction with the expression has been changed too. 

3. Improved Style Binding & CSS Class

With Ivy compiler and runtime, the improvements for handling styles have been made too. 

Earlier, if an application is contained competing definitions for a style. Those styles further replace each other destructively. Thanks to Ivy, the styles can now be merged in a predictable way.

4. Faster Testing

The implementation of TestBed in Ivy is now more efficient to use.

TestBed previously used to recompile all components between each test running phase, irrespective of changes made to components. 

Moving on, TestBed does not recompile components between tests until a component is manually overridden. The practice helps in avoiding recompilation between grand majority of tests.

The above-mentioned practice can be validated with Fluin’s statement- “With this change, the framework’s core acceptance tests are about 40% faster. We would expect users to see their own application test speeds to be around 40–50% faster,”.

5. Improved Build Errors

The new Ivy compiler is faster while offering the stronger type safety making error messages easier to read.

Earlier in Version 8 or View Engine, a compiler error used to look like this- 

angular version 8 compiler error

Whereas in version 9 with Ivy, the error now looks like- 

angular version 9 compiler error

6. Improved Type Checking

The Angular compiler can conveniently check various applications while applying strict rules. The features further help in catching bugs earlier in the development process. 

In the current Angular version, there are two main flags for additional type checks. 

  • fullTemplateTypeCheck- meant for checking template that involves -ngIf, ngFor, ng etc)
  • strictTemplates is all about strict type system rules for type checking.

7. Improved Internationalization

One of the core features of Angular is Internationalization. Through it, developers can build the application once per locale while receiving highly optimized and localized applications. 

In Angular 9.0, by moving the build-time i18n substitutions in the build process- the change allows developers to make it up 10 times faster.

When this was the major improvements made in the Ivy, there are also improvements made. 

Let’s have a look at it too- 

TypeScript 3.7 support

Angular 9 has now been updated to work with TypeScript 3.6 and 3.7 all the while including popular optional chaining feature in TypeScript 3.7. 

Also, for staying in sync with the ecosystem, Zone.JS and RxJS have been updates as other ecosystem dependencies.

Options for “provideIn”

When creating an @Injectable service in Angular, there is a strict need to choose where it should be added to the injector. 

Also, there are two additional options available too-

  • Platform- Specifying provideIn

Platform is the way through which service becomes available in a special singleton platform injector- shared by applications on the page. 

  • Any– It provides a unique instance in every module

Final Words

The release is the amalgamation of 2 years of hard work, dedication and improvements. The level of excitement is still high as there are more things to explore in this version of Angular before Angular 10 version. 

Anand Prakash
Anand Prakash

Co-Founder and AVP Technology at Appventurez Mobitech. A tech enthusiast who has broad expertise in delivering end to end software solutions. He is an expert technocrat ho has in-depth knowledge and is highly experienced in delivering solutions for Android, Xamarin, Ethereum Smart Contracts, ASP.net.

⚡️ by Appventurez

Leave a Reply

Please rate*

Your email address will not be published. Required fields are marked *

Hey there! This is Anand, author of this blog. Leave your email address and we'll keep you posted on what we're up to.

This will subscribe you to Appventurez once-a-month newsletter. You can unsubscribe anytime. And we promise not to pester you or share your data :)

Hey there, wondering where this article came from? It was produced by some people at Appventurez, a Mobile & Web App Development Company. We are here for solutioning of your technological needs.

Our Latest Blog

how to develop a bitcoin wallet app | Appventurez
How To Develop A Bitcoin Wallet App?

As a kid, I was fascinated with science fiction movies and used to wonder a lot...

Read more
android app development tools | Appventurez
Top 5 Tools For Android App Development

More than 2.9 million apps are available on Android’s Play Store - according ...

Read more
tips to increase mobile app response rate | Appventurez
14 Tips To Increase The Mobile App Response Rate

Smartphones become invincible when they are graced with mobile applications. Th...

Read more

Our Global Presence

Appventurez Map
Mobile App Agency In USA USA
Usa Flag

USA

5440-F Thornwood Drive San Jose, CA 95123

+1-512-823-1002
Mobile App Agency In Australia Australia
Australia Flag

Australia

5 Taunton Place Craigieburn VIC Australia

+1 512-823-1002
Mobile App Agency In Germany Germany
Germany Flag

Germany

Frauengartenstr. 2, Hechingen, Baden-Wuerttemberg, Germany 72379

+49 7471 9699793
Mobile App Agency In Qatar Qatar
Qatar Flag

Qatar

Office #216 Regus Tower Bank Street, Doha Qatar

+974-33497259
Mobile App Agency In India India
India Flag

India (HQ)

Logix Infotech Park, 1st Floor, Plot No.- D-5, Sector 59, Noida, Uttar Pradesh 201301

+91 120 41 577 46
Mobile App Agency In Dubai Dubai
Dubai Flag

Dubai

Rimal 5 Jumeirah Beach Residence 2 Dubai

+1 512 823 1002
Mobile App Agency In South Africa South Africa
South Africa Flag

South Africa

3 monterrey Complex, 63 Montrose Avenue, Northgate, Johannesburg, 2191

+27 737 810 945
Mobile App Agency In United Kingdom United Kingdom
United Kingdom Flag

United Kingdom

7 Hanover House, Chapel Street, Bradford BD1 5DQ, United Kingdom

+1 512 823 1002
Mobile App Agency In Mexico Mexico
Mexico Flag

Mexico

Calle Ambar 2711, Av Victoria, 45089, Zapopan, Jalisco, Mexico

+521 332 393 9998
India Flag

India (HQ)

Logix Infotech Park, 1st Floor, Plot No.- D-5, Sector 59, Noida, Uttar Pradesh 201301

+91 120 41 577 46
Australia Flag

Australia

5 Taunton Place Craigieburn VIC Australia

+1 512-823-1002
Qatar Flag

Qatar

Office #216,Regus Tower, Bank Street, Doha Qatar

+974-33497259
Germany Flag

Germany

Frauengartenstr. 2, Hechingen, Baden-Wuerttemberg, Germany 72379

+49 7471 9699793
USA Flag

USA

5440-F Thornwood Drive San Jose, CA 95123

+1-512-823-1002
Dubai Flag

Dubai

Rimal 5 Jumeirah Beach Residence 2 Dubai

+1 512 823 1002
South Africa Flag

South Africa

3 monterrey Complex, 63 Montrose Avenue, Northgate, Johannesburg, 2191

+27 737 810 945
United Kingdom Flag

United Kingdom

7 Hanover House, Chapel Street, Bradford BD1 5DQ, United Kingdom

+1 512 823 1002
Mexico Flag

Mexico

Calle Ambar 2711, Av Victoria, 45089, Zapopan, Jalisco, Mexico

+521 332 393 9998