Developers now have the privilege of Angular 9.0. Even before COVID-19 could stall the economy. Angular is ubiquitous for app development brains; this improved version will make life easier for many. To know it better you go through the piece and don’t have to swim deeper in the ocean.
8 mins read of yours will suffice the need.
The reason I want to express my intellectual property to the audiences is to entail app development, which I’ll be like a ‘’walk in the park ‘So my efforts would be to make as concise as possible rather than make it a full-on technical documentary. Hope this’ll be a more than a stopgap.
We’ll cover the following points to decode it:
- Why is Angular very popular?
- Understanding Angular 9.0 version Changes
- Angular 9.0 vs Previous Versions
- How using Ivy proved to be a game-changer for Angular 9.0?
“Like in Cricket, every ball is different, and you can’t expect the same execution. By some measures, development is similar”.
When it comes to the execution of codes, developers always are having a hard time. They have to come up with something special to set the tone right. But technology is —a double whammy. Intricacies & Redressal are part of their working regime- anyway, my best wishes to would-be developers.
Till date‘Angular 9 is one of the popular versions of Angular, which acts as a framework for building web and mobile App with JavaScript or more precisely, a super language called TypeScript built by Microsoft’.
Modern age technology and contemporary politics are similar. By and large, there’ll be criticism from all corners.I say it is my favorite as it has its own set of distinctions that I’m going to cover.
Angular 9.0 is an improved version of what we have already gone through. It has scalability, consumes less time. Most probably, it is based on Ivy. I know the hassles related to web/mobile app development never ends. Making Angular 9 is my all-time favorite.
Img Src: Google
Version supported.: All Prior versions have been obsolete now, only 8x will have support until 20 th Nov 2020. They are Making Angular 9.0 flavor of the season.
Readers are fascinated to know and happen to be new to the section—I’ll shine on the facts to clear any creeping doubts…
The reason why I am excited about Angular 9 is because of its distinct features.
It comprised of many changes :
- Default compilation of Ivy in Angular 9.0
- Your Angular application is compiled Ahead-of-Time (AOT). Allowing Angular’s AOT compiler with the HTML and TypeScript present in your code into JavaScript before browser downloads and executes. It occurs during the build process, including type-checking.
- Angular 9 requires TypeScript 3.7. It does not support lower versions.
- tslib or the TypeScript runtime library makes a peer dependency rather than a direct one.The library would be installed automatically earlier but now, you will have to add this using– npm or yarn explicitly.
Often it is realized that large volumes of data make an application more prone to crashes and downfall. The same goes for angular as earlier versions would ridiculously take more time.
Essential Features:
- Data in a small bundle with augmented performance
- Faster Testing
- Better mechanism of debugging
The inclusion of the Ivy compiler makes the process more suitable as it is a COMPILING & RENDERING Engine. By all means, this has silenced the critics by resolving common glitches with Angular.
Improvements:
- CSS class and style binding
- type checking
- build errors
- build times, enabling AOT on by default
- Style Experience
- Server-side rendering with Angular Universal
- Component and Direct Class Inheritance
- Differential Loading
- Selector-less bindings support for Angular Ivy
- Support for TypeScript Diagnostics Format
- Support for more scopes in providedIn
- A New Type-Safe TestBed.inject() Method Instead of TestBed.get()
- AOT compilation everywhere
- Bundle sizes
- Globalization
- Additional provider scopes
- Better developer’s experience
- New debugging API in development mode
- Strict mode
- Latest TypeScript versions
- Stable Bazel release as an opt-in option
- Angular Components
IVY: A Goal Setter or Game Changer in Angular?
Ivy: A game-changer in Angular 9.0, where front-end support is the IVY Engine. It is different in a way because it has completely transformed— the internal framework without even changing the transcript.
The most notable change you’ll come across Ivy. With the release of Angular 9.0, Ivy is now the default compiler and runtime. Ivy improves bundle size, allows for better debugging, adds improved type checking, swift testing, enables the AOT compiler by default, and improves CSS class and style binding.
With Ivy, both small and large apps will see improved bundle size savings thanks to Ivy’s tree-shaking feature, while eliminating dead-code.
Importance of JSS framework :
Your JS framework is a compiler. It’s appropriate for most JS frameworks out there, but it’s especially true for Angular.
Here are the conclusive facts:
For instance: In Angular, when you write a component, you write the part in TypeScript and its template in HTML, further augmented by Angular template syntax (ngIf, ngFor, etc.)
Angular does the compilation about HTML functionality on browsers.The compilation is done by Angular into JavaScript instructions, to create the appropriate DOM when the component will appear on-page, and to update the component when its state changes.
A big part of Angular is its compiler:
Here, HTML is like a fuel to generate JS code.
Though rewriting is not new’ the last rewrite was executed in Angular 4 without raising any brows. By far the deepest rewrite of the internals since the initial release of Angular: the Angular team is changing the engine (previously called View Engine) while driving.
This compiler (and the runtime) has been completely rewritten over the last year and gives you a better understanding of Ivy. This is not the first rewrite: Ivy stands for ‘IV’,4 in roman numbers.
By far it is the deepest rewrite of the internals since the initial release of Angular; the Angular team is changing the engine (previously called View Engine) while driving.
“IVY for angular is like what android is for mobile O”.
Angular: A Front-end Framework…by Ivy Engine.A great way to master angular concepts
It achieves the same with this effort: Ivy is a complete rewrite of the compiler (and runtime) to::
🚀 (Incremental compilation results in improved builds)
🔥Better build sizes (with a generated code compatible with tree-shaking)
🔓unlock new potential features (metaprogramming or high -order components, slow component loading instead of modules, a change detection system not based on zone.js…)
Key benefits of IVY:
- Smaller bundle Size
- Helpful in Debugging
- Expedites Quick Compilation
How IVY A masterstroke in reducing Bundle Size?
This is self -explanatory as earlier versions had big size bundles which eventually resulted in flawed output. Understanding of View Engine is essential.
Angular view engine absorbs in written templates and components which translates them into regular HTML. and Javascript to- read and display.
View Engine: In Angular 9, the new compiler and runtime instructions are known as default IVY is the default compiler.
Earlier when compiling any component e.g.
1)example.component.file(Typescript code)
2)example.component.ngfactory.js profile(template code) static representation
The problem arises during the mapping of these two codes, resulting in delayed outputs. To avoid this Angular team removed the factory.file by adding template code within the javascript code itself.
Helpful Debugging
Unlike older versions, you don’t have to debug through a framework that eats out precious time. You can do it in the component itself, which helps in debugging code instantly.
Improved CSS class and style binding
Angular 9.0 has the capacity to Ivy compiler and runtime handle style predictably. In outdated versions, if an application contained competing definitions for a style, those styles tend to interchange.
With this Angular 9.0 feature, one can manage styles through a CLEAR, CONSISTENT order of precedence with little dependence on timing.
[style.color]="myColor"
[style]="{color: myOtherColor}" myDirective>
@Component({
host: {
style: "color:blue"
},...})
...
@Directive({
host: {
style: "color:black",
"[style.color]": "property"
},...
})
Improved Build Errors
Ivy is not only efficient but meets safety parameters too which makes it a better compiler. It is known to speed up build times. And taking less time for the builds to complete. Enabling all the error messages for better readability.
Enables the AOT Compiler on by Default
The architecture of Ivy brings improvement in the compiler’s performance. It means -AOT builds– will be relatively faster. Compiler and runtime changes would eliminate the need of entry components. and serve. The latest version of components in Angular 9 will compile automatically depending on their usage.
Faster Compilation
The versions before Angular 9.0 would make use of the ng build command, the whole application gets recompiled. The Angular components were familiar with all the dependencies themselves.
For example, any application comprised of *ngIf then would also know what this *ngIf needs to compile. To make changes to any of the *ngIf dependencies, all components contain *ngIf is to be recompiled.
It came up with an idea of the Locality Principle bringing forth single file compilation.
Now the components contain *ngIf is not aware of any dependencies. So if some component is recompiled, nothing else will be needed to recompile putting an end to global recompilation.
AOT & Ivy
Both IOT & IVY helps in the creations of applications. To initiate AOT for execution, open the angular.json file, and set AOT to true.
Source: edureka.co
The relation between AOT & IVY is vital as both are known to speed up creations of applications. To activate this, you need to open the angular.json file and AOT to true.
Bottom line:
With the advent of Angular 9.0, the community can primarily benefit from smaller & high-performance applications. Hence, producing a better developer experience. Giving developers a clear understanding of syntax and the project structure.
In a nutshell, the team is likely to work on developing components and directives According to the Angular team, it is notified that there won’t be any need for a significant API change. The expertise of the Indian developers will ‘keep the ball rolling’ in the Angular ecosystem.
Good Luck!
