AppDividend
Latest Code Tutorials

Angular 8 Updates And Summary of New Features

0

Angular 8 Updates And Summary of New Features is today’s topic. Angular 8 arrives with an impressive list of changes and improvements including the much-anticipated Ivy compiler as an opt-in feature. You can check out Angular 7 features and updates if you have not seen yet. In this blog, we have written some articles about Angular 7 Crud, Angular 7 Routing, Angular ngClass, Angular ngFor.

Angular 8 Updates And Summary

See the following updates.

TypeScript 3.4

Angular 8.0 is now supported TypeScript 3.4, and even requires it, so you will need to upgrade.

You can look at what TypeScript 3.3 and TypeScript 3.4 brings on the table on official Microsoft blog.

What about Ivy and Bazel

We will have to wait for more for Ivy, the new rendering engine, and Bazel, the new build system, to be ready for proper use with an Angular.

An opt-in preview of the two should be available shortly.

Ivy is a massive part of this release, and it took most of the effort from a team these last month.

Ivy is a new compiler/runtime of Angular.

It will enable the cool features in the future, but it is currently focused on not to break any existing web applications.

Angular 8 is a first release to offer a switch to opt-in into Ivy officially.

There are no real gains to apply changes right now, but you can give it a try to see if nothing breaks in your angular application.

Because, at some point, probably in Angular version 9, Ivy will be the by default.

So the Angular team hopes that the community will anticipate a switch and provide the feedback and that we will catch all the remaining issues before Angular 9.

Brad Green, a technical director behind the Angular team at Google, mentions at ng-conf 2019 that Ivy will allow the noticeable improvement of bundle sizes in compatibility mode in combination with differential loading.

Thrill-seekers can thus already try out a future Ivy API.

Ivy mode contains a significant amount of potential for optimization explicitly. The API is still marked as a private though. You can tell by looking at the classes and functions as they start with a unique character ɵ.

One of the new features of Angular 8.0 is a possibility to (more quickly) build your CLI application with Bazel. The key advantages of Bazel are:

  1. The chance of making your backends and frontends with a same tool.
  2. The incremental build and tests.
  3. It has a possibility to have remote builds and cache on the build farm.

The second point is most useful for most developers. Bazel allows us to declare tasks with precise inputs and outputs.

Then when you run the command, Bazel builds the task graph, and only runs a necessary ones, depending on which the inputs and outputs changed since the last run (very similar to what the Gradle does in the Java world). This can bring an impressive gains on rebuild times.

This talk by Alex Eagle at ng-conf 2019 can be interesting to learn more about what Bazel can do.

Be warned though: the first build will be painfully slow, as Bazel is aiming for precisely reproducible builds. For example, if you launch your tests on the Firefox browser, it will download the complete version of Firefox, to make sure all developers are running the criteria in the same browser!

So if you want to launch the tests on the big project (like the Angular framework), you can grab the coffee. But after the first build, the change in the codebase will only trigger the smallest rebuild possible. It’s especially useful if your web application is made of several modules and libraries.

CLI workflow improvements

The CLI is continuing to improve, and now the ng build, ng test and ng run are equipped to be extended by 3rd-party libraries and tool. For example, AngularFire already makes use of these new capabilities with a deploy command.

Web workers

JavaScript is single threaded by definition. Because of this, it is common for more critical tasks like data calls to take place asynchronously. This doesn’t help with elaborate calculations. Those especially are becoming more and more common with an extensive JavaScript solutions, which is why we support the almost all browser web workers by now. They are the scripts that a browser runs in an own thread. Communication with a thread in the browser tab takes place via sending messages.

While web workers have nothing to do with Angular per se, they must be taken into consideration in the build. The goal is to provide one bundle for every web worker. The new Angular CLI accomplishes this task.

Web Workers allow you to run the CPU intensive computations in the background thread, freeing the main thread to update the user interface.

If you find your application becomes unresponsive while processing data, using Web Workers can help.

To outsource such a calculation to a background, we must first create the web worker using the Angular CLI.

ng generate worker n-queens

Dynamic imports for lazy routes

Lazy-loaded routes now use the standard dynamic import syntax instead of a custom string. This means that TypeScript and linters will be better able to complain when modules are missing or misspelled.

So a lazy-loaded import that looked like this.

{ path: '/student', loadChildren: './student/student.module#StudentModule' }

Will now look like this.

{ path: `/student`, loadChildren: () => import(`./student/student.module`).then(s => s.StudentModule) }

The change in syntax will be taken care of for you if you’re using the ng upgrade command to upgrade your app.

Differential loading

Your Angular 8 apps will now be automagically more performant, thanks to differential loading.

With differential loading, two bundles are created when building for production: a bundle for modern browsers that support ES2015+ and a bundle for older browsers that only support the ES5 version of JavaScript. The correct bundle will be loaded automatically by the browser, thanks to the support of ES6 modules in newer browsers.

This new feature results in the most significant single performance improvement for Angular v8. More modern browsers will be able to load less code and load a much smaller amount of polyfills.

Finally, Angular 8 Updates And Summary of New Features article is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.