Top Features of Angular 8

by JS Panther Full Stack | Javascript Developer

Google has finally released its latest Angular 8 version a few weeks ago. The latest version has bought a multitude of attractive features that have made Angular 8 unique compared to its previous versions. Also, the Angular team has gone several steps closer to the final release of Angular 9. In this blog, we will discuss the top features of Angular 8.

What’s New in Angular 8

Within the span of seven years, Google has subsequently and frequently released updated versions of the Angular framework. This indicates its devotion to providing a highly secure, advanced and contemporary web development framework for modern requirements.

Angular is the most popular front-end development program for building mobile apps, desktop apps and SPAs. The Angular 8.0 has brought with itself an impressive list of changes and improvements. Let’s explore some of the significant features of Angular 8.0

Differential Loading of Modern JavaScript

One of the significant aspects of custom web application is that it should be compatible with all the major browsers including Chrome, Safari, Edge, Firefox, and others.

Legacy JavaScript (ES5) and Modern JavaScript (ES2015+) as the new Command line interface.
Differential loading is a strategy that enables the command line interface (CLI) to create two separate bundles as per the uploaded apps.
The CLI will automatically configure the JS bundles based on the client’s browsers.
The correct bundle will be loaded automatically by the browser & will be able to download smaller, more efficient app bundles that load and render faster.

If you use ng update, Angular CLI will update your tsconfig.json. Angular CLI looks at the target JS level in your tsconfig.json to determine whether or not to take advantage of Differential Loading.

When the target is set to es2015, we generate and label two bundles. At runtime, the browser uses attributes on the script tag to load the right bundle.

Modern JS :

Legacy JS :

Angular.io will approximately be 40kB of initial bundle size for modern browsers. Applications generally save 7–20% of their bundle size, depending on the number of modern JavaScript features.

Backwards Compatibility of the Angular Router

Angular 8 has added backward compatibility mode to Angular router that makes migration easy from older versions to the latest ones. Thanks to $route APIs which permits lazy loading of Angular JS apps. Hence, it allows developers to upgrade and transfer larger projects easily.

Bazel Support

Bazel is one of the most speculated built-in tools introduced by Google with the release of Angular 8.0. However, Google is already using Bazel support internally for a long time. Recently, it has decided to present it as open source. It is available as opt-in and is expected to be included in

@angular/cli in Version 9.

Some of the Bazel key advantages are:

One tool for building an application for both the frontend and backend.
Developers can now build applications as incremental build and deploy the war files.
Faster build time, although it normally takes time for the first build but now less time will be consumed for the concurrent builds.
Bazel offers some out of the box innovative features, including the Eject the Bazel file, which is used to a hidden file by default.

Web Worker Support (PWA)

It is good news for Angular developers that the web worker and delegate support are anticipating additions in the new release. Adding web workers and delegates in an application demands a lot of time and efforts when you wish to run all as a background process.

With the Angular Service Worker and the Angular CLI built-in PWA support, Angular developers can now take benefits from the increased reliability and performance – without needing to code against low-level APIs, developers can achieve native-like application. Similarly, it can enhance the speed performance by shifting the tasks from the main thread.

Introducing Angular IVY

The Angular developers were speculating the release of Angular IVY for long. It’s finally here. IVY render engine is an essential feature of Angular 8.0 as it uses incremental DOM and forms the foundation of future innovations in the Angular framework.

It changes how the framework internally works, without changing the Angular apps. The Ivy project basically rewrites the Angular compiler and runtime code in order to reach better build times, better build sizes with tree-shaking and new features like lazy loading of components instead of modules.

Also, Google has introduced a preview version of IVY to receive the reviews from active, passionate angular developers in the Angular development community.

If you want to enable Ivy in your project, just instruct the Angular CLI to enable it using the –enable-ivy command:

Some of the advantages of Angular 8.0 with Ivy:

Faster re-build time
Improved template type checking
Improved payload size
Great backwards compatibility
Generated code that is easier to read and debug at runtime

Two main concepts on which IVY works:

Tree shakable (To remove the unused code from the application)
Memory saving using Incremental DOM

Lazy Loading

Angular 8.0 added support for dynamic imports in router configuration which enables the use of standard dynamic import syntax, instead of a custom string to find out missing or misspelled modules in our application.

Support for New Angular CLI Builders/Architect API

Angular 8.0 makes way for Builders API. It offers a functionality where you can override commands as ng build, ng test and ng lint. Basically, the builders are functions that implement the logic and behavior for a task.

Below is the snippet from .angular-cli.json in the Angular 8 project. You can notice how all commands now have an option called builder from Angular and how you can easily override by providing your own builder.

You can write our own builder using below mentioned API’s.

BuilderContext
BuilderOutput
createBuilder

Angular Firebase

The Angular developers can now upgrade to Angular CLI by using Angular Firebase. The Angular Firebase helps in deploying the web and mobile applications in several ways. The Firebase also offers to deploy commands to deploy the applications.

The Angular CLI is continuously improving, and now the ng-build, ng-test and ng-run are equipped to be extended by third-party libraries.

Add support for TypeScript 3.4

In this newest version of Angular, Angular team has updated Angular’s dependencies which include tools like RxJS and TypeScript to v3.4. Now all the new apps generated via the Angular CLI will use the same newest version of TypeScript by default. Further, 3.4 will provide the following features:

Faster subsequent builds with the –incremental flag
Higher order type inference from generic functions
Improvements for ReadonlyArray and readonly tuples
Type-checking for globalThis

Conclusively

The Angular framework is widely used for creating different types of web and cross-platform mobile applications. The latest Angular 8.0 version is going to ease the life of Angular developers a lot by introducing advanced features described in the post.

Officially Published on JS Panther as Top Features Of Angular 8 on Dec 3 2019