Angular 8 new features: how they will improve your app

The major version of Google’s most popular framework is here at last. It has come with several important updates that will have a positive impact on development speed and performance of Angular-based apps.

We must admit that v8 hasn’t brought in substantial breakthroughs. The long-awaited Ivy rendering engine is not ready yet, being available as an opt-in preview only. Yet, with every new release, Angular becomes a bit lighter, faster and more convenient to build apps with.

The DA-14 team has already migrated several projects from v7 to v8 and thus tested all the improvements. Let’s take a quick peek at the most important changes your app can benefit from. 

Differential loading

No doubt, differential loading is the most outstanding improvement delivered in the latest release. The feature enables the Command Line Interface (CLI) to create two different JavaScript bundles depending on the browser you are going to run your app on. 

By default, the CLI builds applications for evergreen browsers. To load your code to the older versions you need to specify it in the browser list file and the corresponding bundle will be generated automatically. In the end, it means that modern browsers will be able to work with smaller and more performant app bundles with far better loading time. 

Benefits: The bundle size for modern browsers reduces by 7 to 20%. This considerably improves your application startup time. 

differential loading angular 8

Image source: Angular.io

Web worker support

JavaScript is a single-threaded language, so multiple pieces of code cannot be run at the same time. Fortunately, Angular has web workers that enable you to offload large files (animations, videos, etc) in background threads and keep the main thread that interacts with users free. Web workers significantly speed up the execution of CPU-heavy tasks. 

In Angular 8, you can generate web workers directly from the CLI and use them in the application.

Benefits: Better development speed, better loading time, and enhanced user experience.

CLI updates

In the eighth version, the CLI is equipped with new stabilized builders APIs that allow you to customize and augment the processes of building and testing. 

There is also an improvement to AngularFire, the official library that connects Angular with Google’s mobile development platform, Firebase. Now you can deploy your code straight from the CLI. This makes everything faster and easier than ever. 

Another welcome feature gained by the CLI is opt-in usage sharing. It will allow the Angular team to collect telemetry about how your developers use the CLI. The anonymous information about things like the build speed or widely used commands will help the creators of the framework to make further improvements. 

Benefits: Better speed of building, testing, and deployment; better understanding what improvements should be made in the future. 

Ivy demo

The Angular framework has come a long way since its v2 release in terms of size and space occupied. However, it is still too heavy and takes up a lot of memory if compared with React or Vue. An Ivy renderer is designed to fix this problem.

What is Ivy? Literally, it’s the framework’s engine. Currently Angular uses View Engine, which will be completely replaced by Ivy. Despite the fact that it is a significant change, Angular apps will function as usual, but with the following improvements: 

  • simplicity in coding
  • improved type checking for templates
  • smaller bundles (IVY reduces the bundle size of “Hello, World” by 93%, from 36 Kb to 2.7 Kb).
  • faster tests 
  • faster compilation
  • lower memory requirements 
  • enhanced tools for locating and fixing bugs
  • backward compatibility. 

ivy hello world size

With the eighth release, you can test a demo version of Ivy. The preview lets you understand how well your existing apps work with the new engine. However, even if everything goes well, Ivy is not recommended for production yet. 

The good news is that the Angular team prepared migration scripts to make your current applications Ivy-ready. As soon as the time comes, your code will be compatible with the new renderer. When exactly will it happen? Probably, in Angular 9 version, but nobody can say for sure. 

Benefits: The promise is that apps will be lighter and faster. 

Other changes and improvements

Support for TypeScript 3.4 and higher. New applications generated via the CLI will utilize the latest version of TypeScript by default. 

Optimized size of PNG files. You can use pngcrush, a new open-source command-line utility, to reduce the size of PNG files without compromising the quality. 

Router backwards compatibility. Angular 8 is backward-compatible, which means that it still works with previous versions of the framework and facilitates migration to the latest release. 

Improvements for migration from AngularJS.  Features added to ngUpgrade make it easier for engineers to move large apps from AngularJS to the latest version. 

Experimental support for Bazel.Bazel is a fast and scalable build system used by Google for over a decade. In fact, Angular itself was created with Bazel. Currently, the Angular team is aiming at integrating this super-powerful tool to the Angular ecosystem. You can try Bazel’s opt-in preview in the CLI, while the fully-fledged support is expected to be available in Angular 9. 

Should you upgrade your app to Angular 8 right now?

Angular 7 will be supported until April 2020, so you have enough time to upgrade your project to v8. However, we recommend that you move to the latest version as soon as possible. The earlier you implement the improvements, the better for your app. Besides, migrating to Angular 8 will allow you to be sure that your app is Ivy-ready and you’ll be able to become an early adopter of this long-awaited feature. 

Don’t hesitate to start moving to the new release and thus benefit from its advantages which include enhanced performance and better loading time. If you want to migrate to Angular 8 right now or have an idea of a new Angular app, let us know, and our experts will do their best to help you. 

 

↑ Go up

Similar post