Angular is one in every of the outstanding open-source frameworks for building internet and mobile applications. Developed by Google, Angular has evolved over the years into a comprehensive development framework that features all of the tools and components needed to create an internet app. Angular follows a transparent roadmap, with a brand new major version of Angular discharged every six months. The Angular team works thoughtfully so the API doesn’t get to modification (or a minimum of not as drastically because it did from Angular one to 2). this can be an honest factor, it keeps things up-to-date with the most recent best practices and latest options supported by matter or JavaScript. so here we will discuss what new in Angular 9

New Version of Angular

New options in Angular nine

1. JavaScript Bundles and Performance

We’ll begin by watching one in every one of the issues that troubled previous versions of Angular: giant bundle files that have negatively compact download times and, as a consequence, application performance.

2. ivy Compiler

The big new feature we’ll dive into is that the ivy compiler. We’ll justify what ivy will and why it’s really a very important feature for the long run of Angular (it solves some of the issues with massive bundles and application performance).

3. Selector-less Bindings and internationalization

We’ll bit on a few different new options, as well as selector-less bindings and internationalization support. you will see why we’re calling this Associate in Nursing organic process unleash instead of revolutionary.

4. Benchmarking Angular eight and therefore the Pre-release Version of Angular nine

We’ll run some benchmark tests to check performance between Angular eight and a pre-release version of Angular nine.

JavaScript Bundles and Performance

One of the ongoing problems with previous Angular versions is the relatively large file size of the app — more precisely, the file size of the generated JavaScript bundles. If you compare Angular to other libraries such as React or Vue.js, the Angular app is significantly bigger.

At runtime, you probably won’t feel the difference. While Angular runtime performance is good, the loading can take longer because even a simple app can be relatively large.

The size of the JavaScript bundles also hints at another problem: there’s more to learn with Angular because Angular is a complete framework with many built-in developer tools, while other JavaScript libraries are more focused on components.

So what could the Angular team do to mitigate the problems stemming from the large bundle files in earlier Angular versions?

Understanding Angular ViewEngine

Before Angular 8, the framework relied exclusively on ViewEngine (sometimes referred to as the “VE”) to build and render code in browsers. Angular components are written using the TypeScript language. TypeScript is a superset of JavaScript, and we use a compiler or “transpiler” to render TypeScript into a dialect of JavaScript that runs in the browser. Angular historically has relied on ViewEngine to do this transpiling from TypeScript code into JavaScript.

The Angular ViewEngine takes the templates and components and translates them into regular HTML and JavaScript so that the browser can interpret and display them.

Angular Ivy Solves Long-Standing Problems

One of the most significant features that shipped with Angular 8 was the opt-in Ivy preview. Ivy is Angular’s new internal build and render pipeline. The renderer is the engine that takes the instructions you input into the Angular components with the templates and then translates them into instructions that change the DOM (Document Object Model).

The Ivy compiler is hidden away, and replacing ViewEngine with Ivy does not change the way you work with Angular. But this change does have a significant impact on the code that’s being generated.

The Angular 8 preview lets users play around with Ivy. With Angular 9, Ivy is the standard renderer. If a renderer is more efficient or easier to implement, that means you can ship less code because fewer instructions are required, and that’s the purpose of Ivy.

Ivy yields much smaller JavaScript bundles, so Ivy solves Angular’s bundle weaknesses. Ivy will be a game-changer because it brings Angular applications to a whole new level in terms of performance and size.

Ivy doesn’t change the way Angular is used, but it does change how the app is generated. The Angular team has focused on initiatives like the differential loading of modern JavaScript, which shipped with Angular 8. This means that different polyfill bundles are created and deployed together. At runtime, only the polyfills that are required for the specific browser are loaded, thus leading to less code being downloaded.

Angular Ivy and Faster Mobile Apps

Smartphones and other mobile devices account for about half of the website traffic worldwide. A considerable percentage of these mobile devices access web pages from locations that suffer from slow internet connections.

Developers can redesign existing apps to reduce the size of the downloadable assets and enhance the mobile user experience, but these changes can be difficult, expensive, and introduce unforeseen risks to their projects.

By reducing the size of JavaScript bundles, Ivy becomes a welcome improvement for developers trying to speed up application startup.

Putting Ivy to Work

In Angular 9, the new Ivy compiler will finally be the default, so Angular apps built with Ivy will be faster and more efficient.

In Angular 8, Ivy was optional, so you had to explicitly enable it by adding the following lines to the tsconfig.json file in the project folder:

"angularCompilerOptions": {

"enableIvy": true

}

And then you had to run the compiler by executing the ngc command inside the project folder:

node_modules/.bin/ngc

In Angular 9, setting the enable option in the tsconfig.json file is no longer needed since the Ivy renderer is the default.

Selector-less Directives

One feature missing from the Angular 8 Ivy preview that had been available in ViewEngine was the ability to use selector-less directives as base classes.

With Angular 9, this feature has been added to Ivy so that developers get the advantages of Ivy compilation, but don’t miss previous functionality.

Consider the following pattern showing a decorated child class that inherits a constructor from an undecorated base class:

export class BaseDir {

constructor(@Inject(ViewContainerRef) protected vcr: ViewContainerRef) {}

} @Directive({

selector: '[child]',

})

export class ChildDir extends BaseDir {

// constructor inherited from BaseDir

}

Angular ViewEngine already supports this pattern. Still, it was missing in Ivy’s initial release: without the @directive annotation identifying the BaseDir class as a directive, the Ivy compiler didn’t interpret information about its constructor parameters.

Version 9 will now ship with his feature so that it becomes consistent across all of the Angular codebase.

To More about Web Design and Development Blogs Follow our Blogging Section

Tags: Website Designing Company|| Website Development Company ||Website Redesigning Company || Custom Website Development