Why Angular 5 is “Faster, Smaller, and Easier”

Angular 5

 

5 MINUTE READ

 

Updates for Angular, Google’s popular JavaScript framework, are coming at a rapid pace. In the past 14 months the framework has had two major updates.

 

Angular 2 was released in September 2016 and Angular 4 in March 2017. (If you are unsure why Google skipped Angular 3, check out this post from Infoq for clarification.)

 

The framework reached its next milestone with the release of Angular 5 on November 1. However, it took quite a bit longer than expected, missing two previous release targets set for September 18 and October 23.

 

Google announced that the theme of the update was to make the framework “faster, smaller, and easier to use”.

 

It’s important to note that the changes implemented in each successive Angular update are made ‘under the hood’ i.e. they do not have any affect on syntax or the way developers actually write their code. Everything that applies to Angular 2 also applies to 4, 5, 6, and beyond.

 

Therefore Angular 5 shouldn’t be thought of as an entirely new framework. It’s basically just Angular 4 with a few additional features that enhance performance. Developers will be glad to hear that updating their Angular 4 applications to Angular 5 is unlikely to introduce any frustrating breaking changes.

 

In this post we explore a few of the main features introduced in Angular 5 that help drive greater performance.

 

Progressive Web Applications

 

The concept of a progressive web app is about enabling the development of browser-based applications that deliver a flawless native-like user experience – regardless of the browser running them. One of the main benefits of Angular 5 is that it makes building such apps easier. While some improvement have been made, the process hasn’t been perfected yet. The end goal of the team behind Angular is to make building progressive web apps the default option for most developers. It is safe to expect improved support for progressive web apps in future Angular updates.

 

Build Optimiser

 

This feature is designed to make the application smaller by removing unnecessary code. It does this by marking parts of the app as ‘pure’ and getting rid of the rest. It also removes the decorators from the application’s runtime code as these are only used by the compiler and they are not actually needed at runtime. This allows for the creation of smaller production bundles and speeds up applications.

 

Ahead-of-time Compiler On By Default

 

The AOT compiler is much faster than it was in Angular 4 and it is also switched on by default. Basically, the AOT compiler converts Angular TypeScript into efficient JavaScript code before the browser downloads it and runs it.

 

This is different to the just-in-time (JIT) compiler which compiles apps in the browser at runtime which is what most Angular developers were using up until now. Using AOT gives faster rendering, fewer asynchronous requests, smaller download sizes, and it can also detect template errors earlier. This makes Angular 5 faster in both development and production.

 

Angular Universal Transfer API

 

Angular Universal provides server-side rendering of Angular applications which helps boost performance. In version 5 it’s now easier to share code between server and client-side versions of an application. A new module called ‘ServerTransferStateModule’ has now been added which optimises the process of fetching data over HTTP. For example, by transferring the state from the server, there is no need to then make a second HTTP request once the app reaches the client.

 

Changes With Pipes

 

A pipe is a technique for transferring information from one program process to another. Basically, it passes a parameter such as the the output of one process to another process which accepts it as the input.

 

In Angular 5, the Number, Date and Currency pipes have been internationalised to increase standardisation across browsers and eliminate the need for polyfills. Before version 5, apps relied on the browser to provide Number, Date and Currency formatting, but now Angular is using its own implementation.

 

New Router Lifecycle Events

 

A lifecycle event (or ‘hook’) allows developers to specify a certain point in the loading of components. With Angular 5, this can now also be done with the router. This allows for tracking of router cycles from the beginning of running guards until completion of activation.

 

RxJS 5.5 Imports

 

The RxJS reactive programming library has been updated to version 5.5.2 or later, featuring operators that eliminate the side effects of code-splitting and tree-shaking problems. Also, RxJS now distributes a version using ECMAScript modules, pulled in by default by the Angular CLI.

 

How do I update to Angular 5?

 

Google has issued guidance on how to move to Angular 5 from previous versions.

 

When can I expect Angular 6?

 

Following Angular 5, Google will offer Angular 6 in March or April 2018, if the current release pace holds. Google has emphasised that Angular 6 would repeat themes of Angular 5 as Google Engineering Director Brad Green explained:

 

“Easier, smaller, faster is the theme for version 5. We’ll continue that theme for version 6, just making developers’ lives easier, making it possible to deliver apps better for their users,”

 


 

 

Looking for your next tech job? We can help. Quick send your CV today.