Introduction to Angular 9

In this Blog, we can take a brief introduction to Angular 9. The Angular 9 is launched on Feb 7, 2020. So the versioning change from 8 to 9. Angular version 9 is an evolutionary release and it includes many new features and bug fixes.

In this blog, we going to discuss the following topics:

– Different Built-in Angular feature

– Complete Development with Angular

– Angular View Engines Understanding

– Long-standing problems solve by Angular Ivy

– Angular Ivy and Mobile compatibility

– Improvements of Angular diagnostics

– Changing of Dependency injection in angular Core.

– Angular Benchmark

– Type-Safe and DI in Angular 9

– The Future of Angular

Angular is an outstanding open-source framework for web and mobile application development. which maintained by Google, Angular is a framework with a complete set of tools which require to build the application. Angular follow the proper roadmap, Angular release a new version every six months with new features and bug fixes. The Google team works hard and Dedicatedly maintains Angular, so API will not need to change like as before in Angular 1 & 2 we have faced drastically change in API. That’s a great thing, Which keeps up-to-date the things with the best practice and advance features supported by  JavaScript and TypeScript.

In our “Advantages of Angular 8” Blog, we have covered the advantages and tips of using Angular 8 components with all aspects of development with angular. In the previous version of the angular large bundle files that have negatively impacted download times and, as a consequence, application performance.

In this blog, we will discuss the Ivy compiler in detail, we will discuss the Ivy and why Ivy is important features for angular. The spoiler alert is solved the different problem with large bundle and application performance. we also discuss different features like internationalization support and selector less binding

Java Script Performance and Bundles

The most common problem with the previous version of angular is the large file size of an app specifically generated file size of JavaScript bundles. if we compare Angular libraries with  React or Vue.js then the Angular app is bigger.

We cant feel difference at the run time. The angular runtime performance is good but loading time is longer because the simple app also is large.

The JavaScript bundle also drow our attention to another problem. We can learn more things with the angular because angular provides many built-in developers tools. While the other JS framework libraries are focused on components.

Understanding of Angular View Engines

Before the release of Angular 8, The angular framework relied on ViewEngine for the render and build code in the browser. The Angular component is written using the typescript language. The typescript is a set of JavaScript. We can use the compiler to render the TypeScript. angular relied on view-engine for transpiring typescript code into JavaScript.

Angular ViewEngine can take the Component and Templates, and translate them into the regular JavaScript and HTML so a browser can interpret and display them.

Long-standing problems solve by Angular Ivy

Ivy is the most significant feature that was released with Angular 8. It acts as an internal build and pipeline render. A renderer is a kind of engine that takes the instructions which we input into the Angular component. after that, it translates them into instructions that change the Document Object Model (DOM).

Changing the view engine with IIvy it’s not replaced our way of work with Angular. but its definitely an impact on the generated code.

Angular 8 preview allows the user to play around with Ivy But in Angular 9 Ivy is the standard renderer. The purpose of Ivy is a more efficient renderer or easier to implement. It allows us to ship less code because it requires fewe instruction.

Ivy generates even smaller bundles of JavaScript and Ivy solves the drawbacks of Angular’s bundles. Ivy will be a game-changer because it takes Angular applications in terms of performance and scale to a whole new level.

Ivy doesn’t change the way you use Angular, but it does change the way the app is created. The Angular team has concentrated on projects such as modern JavaScript’s differential initialization, which was shipped with Angular. This means that they build and deploy various bundles of polyfills together. The polyfills require the different browsers Which are load at runtime, so that’s why it’s leading to less code being downloaded.

Angular Ivy and Mobile compatibility

The world’s half website traffic came from Smartphone devices. A large number of such mobile devices view web pages from areas suffering from slow internet connections.

The developers can rebuild existing apps to reduce the size of downloadable assets and increase the mobile user experience, but these changes can be challenging, costly and bring unforeseen risks to their projects.

Through, reducing the size of JavaScript packages, Ivy is becoming a welcome improvement for developers who want to speed up the initialization of applications.

Improvements of Angular diagnostics

The Angular Compiler previously created both native TypeScript diagnostics as well as its own internal API diagnostics, but TypeScript diagnostics gained from recent improvements, none of which was incorporated in Ui diagnostics.

Instead of supporting multiple formats. The Angular 9 can simplify the process by translating all diagnostic Angular TypeScript Compiler (ngtsc) to the same standard as TypeScript Diagnostics.

The Angular version 9 will also prohibit programs from running into unintended connection problems by using the registry schema to test DOM bindings. Therefore, reliable design diagnostics will be used to help generate strongly concise error messages.

Changing of Dependency injection in angular Core.

Now we can take a look smaller but important updates and improvement of angular 9 which is mean a lot in the latest version of angular

The Angular Core had some new enhancement like Angular 9 adds dependency injection support for the given value

Angular 9 also expands the vocabulary for the given property and also includes the ‘platform’ and ‘any’ scopes.

Angular Benchmark

Angular 8 allowed smaller and faster applications compared to the Angular 7 version. Since the Angular team didn’t stop working on performance enhancements, many of us were anxiously waiting to see how Angular 9 will compete, especially with the addition of the Ivy as the main compiler.

The shown benchmark is run with a new application which created with Angular CLI:

After this, we will build it with another option production build option along with angular CLI:

 

Benchmark is conducted by Google Chrome’s inbuild Audit functionality by using the following test.

Device: Mobile

Audits: Performance

Throttling: Applied Slow 4G, 4x CPU Slowdown

Angular 8.2.7:

The production build with the Angular version 8.2.7 resulted in a main.js of 246KB for ES2015 browsers.

Angular 9.0.0-next.5:

The build with the Angular 9.0.0-next.5 offers a slightly small main.js file at 214KB. Which 13 percent improvement from the Angular 8.

Update: Angular 9.0.0-rc.9:

The total ES2015 bundle size of the app is 177KB Which is smaller than both Angular 8 and the previous Angular 9 pre-release version we tested.

With better performance than Angular 8 and a much smaller app bundle size, The Angular developers are want to update the apps to use Angular 9 after its final release.

Type-Safe and DI in Angular 9

The Angular 9 is offered the modified TestBed to replace the old get function with all new inject method. get method still work but its discontinues. The TestBed.inject is a good option to start with Angular9

TestBed.get isn’t typesafe at the moment. Fixing TestBed.get would bring about a massive change in the break, so the Angular team decided to replace it with TestBed.inject.

The Future of Angular

Angular 9 provides a better developer experience. with an all-new Angular 9 Developer has a clear project structure and a clear syntax.

Possible changes will be introducing in Angular in the near feature.

The Angular team had indicated that there are no huge changes are required in the API.  Will there be more deprecations, and perhaps an alternative form of part creation? An enhanced experience with the developers is always something to hope for. Maybe we’ll spend more time in the future developing components and directives, and less time trying to put them together.