Angular 8 changes and new features
The angular version number indicates the level of changes introduced by the release. The use of semantic versioning helps us understand the potential impact of updating to a new version.
Angular is the most popular platform for developing client-side (frontend) mobile and desktop web apps or SPAs. With the new release of Angular 8, we have a new set of powerful features that developers will appreciate that are added at many levels. The core framework, Angular material library and the CLI.
Preview of Ivy
If we have been following Angular, Then we probably encountered the word "Ivy". Ivy is a significant change in Angular history; it an angular rendered which is radically different from anything as it uses incremental DOM. It changes how the following internally works, without changing our runtime code to reach rewriting the Angular compiler and runtime code to reach.
How Angular Ivy works on Incremental DOM
The key idea behind incremental DOM is every component gets compiled into a series of instructions. These instructions create DOM trees and update them in-place when the data changes.
Two main concepts of Ivy
- Tree shakable: It means removing unused pieces of our code, where the framework does not interpret the component reference like a particular instruction. It will never be used so we can omit the remaining direction from the bundle results in smaller bundles and faster load times.
- Low Memory Footprint: Increment DOM doesn't need any memory to re-render the view if it doesn't change the DOM. So that it allocates the mind when the DOM nodes are added or removed from memory. Since most of render/template calls don't change anything result in substantial memory savings.
Differential loading
Angular 8 apps will now be more performant. With differential loading, new apps generated by Angular CLI will now contain separate bundles for legacy Javascript and modern JavaScript.
The correct bundle will be loaded automatically to the browser & will be able to download smaller, more efficient app bundles that load and render faster.
Angular Router Backwards Compatibility
Angular 8 feature added background compatibility mode to Angular router that helps to upgrade the path for large projects and will make it easier to move to Angular by allowing lazy loading parts of Angular v1.x apps to angular 2+ right away.
Improved Web Worker Building
Web workers are included while building the production bundles, which have essential for improving the parallelizability and helps increase the performance.
ng g web worker <name>
Bazel Support
One of the latest new features of Angular 8 is to build our CLI application with bazel. The Angular framework itself is made with bazel.
It is available as opt-in, it is expected to be included in @angular/cli version 9.
Bazel key advantages are:
- We will be able to build our backend and frontend with the same tools
- Faster build time first will be painfully slow, as bazel is aiming for the precisely reproducible builds, but concurrent builds will be a lot faster. And it will be beneficial if our app uses several modules and libraries to use.
- Incremental Build: Codebase will only trigger the smallest rebuild possible help to build and deploy only changed rather than the whole app.
- We can eject the Bazel files, and they are hidden by default.
- The possibility to have remote builds on a build farm.
Lazy Loading
Lazy loading is based on the concept of Angular Routing as it helps bring down the size of the large file by lazily loading the data that are required. In previous angular versions, the route configuration uses the property@loadChildren which accepts a string and if there was a wrong module name or any type while agrees with a series. And if there were a wrong module name or any kind while writing the code, Angular would not consider it wrong and accept whatever value was there as a string until we try building it.
Opt-in Usage Sharing
Keeping their efforts in alignment with the community's needs Angular CLI will be gaining another new feature, i.e., opt-in usage sharing. This feature will enable opt-in to sharing telemetry about our Angular CLI usage with the Angular team. And now Angular 8 can collect data like commands used and build speed if users allow them which will help developers improve in future.
CLI workflow improvement
The Angular CLI is continuously improving, and now the ng-build, ng-test and ng-run are equipped in the extended by 3rd-party libraries and tools.
For example: AngularFire
Builders API
The new version allows us to use the builder API. It uses builders for primary operations like serve, build, test, lint and e2e. The builders are functions that implement the logic and behaviour for a task that can replace a command which we pass to the createBuilder() method from @angular-devkit/architect package & now we can create our custom builders as well.
AngularJS API migration improvement with $location service
The angular team wants to give support for all developers using AngularJS to upgrade them into the latest Angular. So some enhancement has been made to provide better integration with the AngularJS $location service in hybrid (AngularJS<=>Angular) apps. A new package angular/common/ up-gradation is added.
- To retrieve the state from location service.
- To track all location changes.
Service Worker
Angular ships with a service worker implementation are starting with version 5. With the Angular service worker and the Angular CLI built-in PWA support. The angular developer can advantage of this service worker and benefit from the increased reliability and performance it provides, without needing to code against low-level APIs and can achieve native-like application download and installation.
Updated Typescript to 3.4.x
In the newest version of Angular 8, they have updated Angular’s dependencies which include tools like RxJS and TypeScript to v3.4 (Angular 7 uses v3.2). And new apps generated via the Angular CLI will also use the latest version of TypeScript by default.
Angular Firebase
Angular has added support for firebase, and now we can deploy our application using the Angular CLI,
ng run [Project_name]: deploy