Angular’s imminent version 8 has been transpired!!! Explore the novel features — Ivy and others.

lavanya katika
Jun 4 · 9 min read

A learning curve is essential to growth! Angular which is a great framework for building interactive elements and components of a website rolls up with its latest version. Angular v.8.0.0 brings updates with new features and a list of bug fixes for core and bazel.

Let’s have a look at the exemplary features of Angular 8.0.0-beta

Stability is essential for the ecosystem around Angular to thrive. Thus, Angular’s new version offers many updates, but first, let us go through the quintessential features.

Command to Update to V8

With this, your lazy loaded route imports will be migrated to the new import syntax automatically.

How to enable IVY?

Set “enableIvy” option in the “angularCompilerOptions” in your project’s tsconfig.app.json as follows

ANGULAR IVY — The next generation rendering engine.

Ivy is Angular’s new rendering pipeline and view engine. It uses the incremental DOM in which every component has complied with a set of instructions that constitutes the DOM tree.

Moreover, it also updates it whenever there is a change in the data.

The two important concepts of IVY

1) Tree-Shaking

The newest update adds advanced tree-shaking algorithms to the compiler, removing unused pieces of your code, which results in smaller bundles and faster load times.

This means that for an example like “Hello World” where very little of Angular is needed (e.g. no need to even include event binding — For suppose 41Kb in above Fig), you can get tiny 2.7kb bundles. And that sounds like Whoa!

An awesome benefit of this is that developers will have a lot more freedom to use Angular as they require. There will be no limitations to using it where a lot of interaction is required. Thus, making even simple concepts like landing pages could be developed with the angular toolkit without taking a strong loading-time hit.

2) Locality

Locality means that Ivy compiles one file at a time. It only looks at a component and its template but not its dependencies when generating the output.

Compiling one file at a time means smaller sets of instructions, and it will also mean we’ll be able to do incremental builds. Renderer2 was unable to do this because it needed to do a static analysis of all code and generate a file called metadata.json that could be used to generate the compilation instructions. This template data was then sent to the Angular interpreter in order to be translated into something readable by the DOM.

Ivy compresses these steps, and the template HTML is turned into instructions that are then readable by then DOM.

Also, Locality offers more opportunity for meta-programming, like higher order components and the ability to dynamically generate modules, components, or pipes.

Once the IVY is completed, it will make the Angular applications

  • Smaller — Generates small bundles.
  • Faster — Loads faster in slower networks.
  • Simpler — Simple and easy to use and debug.
  • A simpler, more hackable pipeline
  • Human readable code

Updating the internal rendering engine and angular rewrite results in an engine that drastically shrinks the bundle size and hence allows you to build a way smaller angular apps without the need to adjust your code.

Incremental DOM

We all want our applications to perform well on mobile devices. This mainly means optimizing two things:

  • Bundle Size — For this, the rendering engine itself has to be tree shakable.
  • Low Memory Footprint — It’s the amount of main memory that a program uses or references while running. The rendering engine has to have a low memory footprint.

To achieve this, we use Incremental DOM. When using incremental DOM, the framework does not interpret the component. Instead, the component references instructions. If it doesn’t reference a particular instruction, it will never be used. And since we know this at compile time, we can omit the unused instruction from the bundle.

Virtual DOM creates a full DOM tree from scratch on rerendering.

Whereas, incremental DOM doesn’t need any memory to rerender the view if it doesn’t change the DOM. We only have to allocate the memory when the DOM nodes are added or removed. And the size of the allocation is proportional to the size of the DOM change.

Since most of render/template calls don’t change anything (or change very little), this can result in huge memory savings.

Differential Loading of Modern Javascript

Differential Loading is a technique which is automatically used by the CLI. It means that there will be different bundles created by the CLI, one for modern browsers i.e, it does not need to load so many polyfills and, one for the legacy browsers i.e, for full polyfill ES5 syntax and, you still deploy your entire dist folder content.

Modern browsers are smaller because it’s can simply use more modern Javascript syntax and doesn’t need to compile that modern syntax to more complex workarounds.

Cool thing right!?

Once a user visits your page, a small script will automatically detect which browser the user uses and loads to write bundles. So, you don’t need to configure anything and you just use the CLI, you automatically get that when you build for production and you will automatically deploy an app which will then also automatically only loads the scripts that are then required.

Hence, decreasing 7–20% in bundle size.

Differential Serving for the Angular and the CLI:

Angular Routers backward compatibility

This will make it easier to upgrade legacy Angular apps to modern Angular. The router updates will make it possible to lazy load parts of Angular 1.x apps inside a modern Angular app using $route APIs.

Lazy loading with import() syntax

New syntax has been introduced to declare your lazy-loading routes, using the import() syntax from TypeScript.

This is now the preferred way to declare a lazy-loading route, and the string form has been deprecated. This syntax is similar to the ECMAScriptstandart and Ivy will only support this.

So you can change your “loadChildren” declarations from:

to:

A schematic offered by the CLI will automatically migrate your declarations for you, so this should be painless if you run ng update @angular/cli.

Opt-in Ivy Preview

The opt-in preview will allow you to switch between the Ivy and View Engine build and rendering pipelines in your project. Features it offers include the following:

  • Generated code that is easier to read and debug at runtime.
  • Rebuild times are significantly faster.
  • Improved payload size.
  • Better template type checking, so you can catch more errors at build time and prevent your users from encountering them at runtime.
  • Great backward compatibility.

Opt-in Usage Sharing

The new version comes with “opt-in telemetry to our CLI”.

Telemetry is an automated communications process by which measurements and other data are collected at remote or inaccessible points and transmitted to receiving equipment for monitoring.

Opt-in usage sharing will give the opportunity to opt-in to sharing telemetry about your Angular CLI usage with the Angular team. With the opt-in consent, information about things like the commands used and the build speed can be collected and changed accordingly by the team.

Improved Web Worker Bundling

The caveat of Angular for running itself in a Web Worker via @angular/platform-webworker is not yet supported in Angular CLI is a thing of past. Web workers allow you to run CPU intensive computations in a background thread, freeing the main thread to update the user interface.

Creating a WebWorker:

Once you have a web worker, you can use it normally in your application, and the CLI will be able to bundle and code split it correctly:

Dependency and other Updates

Deprecated HTTP package removed — @angular/http package is no longer supported. Instead, you can use @angular/common/http.

Queries Timing — In Angular version 8, it’s required that all @ViewChild and @ContentChild queries have a “static” tag specifying whether the query is “static” or “dynamic”.

Template Variable Reassignment — Currently with View Engine, doing something like below works

In Ivy, that won’t be the case anymore. It will not be possible to reassign a value to a template variable (here “option”). To prepare the switch to Ivy, a schematic analyzes your templates when you upgrade to Angular 8.0 and warns you if that’s the case.

You then have to manually fix it as below.

Support for Typescript 3.4.x — V8.0 includes updates to the latest and greatest versions of Angular’s dependencies, which include tools like RxJS and TypeScript.

Service Worker — Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App (also known as a PWA). At its simplest, a service worker is a script that runs in the web browser and manages to cache for an application. With “registrationStategy” option you can handle this as follows.

This also supports multiple application in a single domain.

Removed deprecated Document from @angular/platform-browser — If you want to use DOCUMENT, you need to import it from @angular/common.

Removing elements from an Array — Use the below native method.

markAllAsTouched in Forms — The“AbstractControl” class now offers a new method “markAllAsTouched” in addition to the existing “markAsDirty”, “markAsTouched”, “markAsPending”, etc. “AbstractControl” is the parent class of “FormGroup”, “FormControl”, “FormArray”, so the method is available on all reactive form entities.

Like “markAsTouched”, this new method marks a control as “touched” but also all its descendants.

Improvement in performance — The “ServerRendererFactory2” creates a new instance of the “DomElementSchemaRegistry” for all requests. Now it will share the global instance of “DomElementSchemaRegistry”.

Dynamic Imports for Route Configurations — We can lazily load parts of our application using the router by using the “loadchildren” key in the route configuration.

Before:

This syntax was custom to Angular and built into our toolchain. With version 8 we’re migrating to the industry standard dynamic imports.

Now:

This will improve the support from editors like “VSCode” and “WebStorm” who will now be able to understand and validate these imports for you.

If you use “ng update”, it’ll update your code automatically to use the new best practice.

Improvement in performance — If you are using Angular Firebase, you can deploy your application using the Angular CLI. Isn’t that exciting?!

You can run the below command to deploy the application using the CLI.

Conclusion

As we’ve seen, the additions to Angular 8 aren’t huge outside of Ivy. Let’s upgrade our angular applications. Since there aren’t any large breaking changes, in most cases our applications will work as-is without any changes. With the additions to enable differential loading, we’ll get noticeable performance gains for free.

For checking your current version — Go through the below link. https://medium.com/@lavanyakatika96/when-debugging-novices-insert-corrective-code-experts-remove-defective-code-c418cfe38466

Post below your interaction with the new Version. Awaiting!

Happy Versioning!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade