Angular 6: What’s new?

New rendering engine: “Ivy”

In the race for performance led by Google with each new version, Angular 6 brings nothing less than a brand new rendering engine, named “Ivy”!

This new engine promises faster compilation, reduced bundle size, better debugging, and more flexibility, while remaining backward-compatible (so you do not have to specifically modify your apps to take advantage of of these benefits).

There are few benchmarks on the subject, but there is an example of application “Hello World” whose size is barely 3.3ko (compressed) against nearly 50ko without this new engine, which promises a significant improvement performs !

However, this new engine is not yet fully compatible and will probably not be compatible with the final release of Angular 6.0.0. To be able to test it, you have to activate it via the enableIvy flag in the compilation options.

Simplified updates

Angular CLI, the command-line tool that makes it possible to generate an Angular application, will offer in its new version (Angular CLI 1.7) a new “ng update” command to automatically update the dependencies of an application.

Note that this new feature is based on Schematics, the tool to transform a project by generating new components or changing its sources.

Component Dev Kit (CDK)

Although not quite new to Angular 6 (existing since Angular 5.1), the CDK (Component Dev Kit) is a component development kit. It is the heart of the Angular Material component library, and allows you to create your own components without reinventing the wheel, while benefiting from the best practices implemented by Google in Angular Material.

It is thus possible to create quite simply its own floating panels (to create for example a context menu, a drop-down list or a tooltip), personalized tabs or tables of data starting from the basic components of the CDK.

Version 6 provides a new tree component for managing trees.

Angular Elements

Being able to create your own components is good, but being able to share them between different projects is even better! It is to meet this need that Google offers “Angular Elements”.

Angular Elements will package Angular components as Web Components.

As a reminder, the Web Components are a standard (https://www.webcomponents.org/specs) allowing in particular to create its own HTML components (called “Custom Elements”). Supported natively by most recent browsers (or via the use of polyfills for others), they make it possible to create truly reusable components that are independent of the development framework used (Angular, React, Vue, etc.).

Angular Elements will allow for example to create reusable Angular components in a React application.

Service Workers and PWA

Progressive Web Apps (PWA) are web applications that can work offline, manage push notifications or even be “installed” on the home of smartphones, like a mobile application.

For the creation of PWA, since Angular 5, the framework allows the management of Service Workers (key component of PWA).

In Angular 6, the implementation of Service Workers will benefit from patches and some new features like the ability to uninstall a Service Worker.

Other news

RxJS, the library for responsive programming by manipulating asynchronous data feeds, will be updated to version 6. For those who do not know RxJS, Angular provides a user guide.

RxJS 6 will reduce even more the size of the bundles.

TypeScript, the typed JavaScript programming language used by Angular, will be updated to version 2.7. You will find all the news of this version here.

Angular Buildtools Convergence (ABC): Google wants to offer its internal tools for everyone to builder Angular applications “as Google does.” For this, Google will propose a new build tool named Bazel. This tool should in particular make it possible to not completely recompile an application with each modification but only the impacted code, thus making it possible to significantly improve the compilation time.

Conclusion

Angular 6 brings many new features to boost application performance and speed up compilation times.

New features around components such as CDK and Angular Elements should also make it much easier to create libraries of reusable components in different projects and even with different frameworks.

Improved Service Workers will also enable Progressive Web Apps to consistently deliver a mobile experience that rivals native apps.