01Nov 2017

What’s new in Angular 5: easier progressive web apps

Blog/News

Angular, Google’s popular JavaScript framework for building mobile and desktop applications, has had a whirlwind year, with two major upgrades in the past 14 months. It reached the next milestone with Angular 5.0.0’s arrival on November 1, 2017. However, planned support for Google-driven progressive web apps and Material Design capabilities are not expected to ship until late November 2017. The Angular 5.0.0 upgrade itself centers on making the framework faster, smaller, and easier to use.

Despite the “5” designation, the AngularJS upgrade is just the fourth release for the framework, which was initially called AngularJS and debuted in 2012. Angular 5’s release took longer than expected, missing previous release targets of September 18 and October 23, 2017.

Key features include:

An emphasis on making it easier to build progressive web apps, so apps can be cached in the browser. The progressive web apps concept, the product of a joint effort between Google and Mozilla, is about enabling development of browser-based apps that offer a superior, native-like experience. Google is still building support for capability in the command-line interface (CLI).
A build optimizer that makes the application smaller by eliminating unnecessary code. (The build optimizer is a command-line tool.)
Making Material Design components compatible with server-side rendering. Google needs to fix a few bugs before releasing this functionality.
Angular Universal State Transfer API and DOM support, for sharing code between server- and client-side versions of an application.
The compiler has been improved to support incremental compilation. The compiler operates as a TypeScript transform, for faster rebuilds.
Pipes for internationalized number, date, and currency. This increases standardization across browsers and eliminates the need for i18n polyfills.
To remove more polyfills, the ReflectiveInjector has been replaced with the StaticInjector. As a result, application size is reduced for most developers.
Multiple names are supported for components and directives, which is useful in helping users migrate without breaking changes.
Angular 5 has an updated Httpclient.
CLI 1.5, which generates Angular 5 projects by default.
For Angular forms, developers can run validation and value updates on blur and submit rather than on every input event.
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.
Router hooks have been added for tracking router cycles from the beginning of running guards until completion of activation.

Angular 5 does have an issue with production build source maps, with some maps resulting in undefined sources for errors. Also, many previously deprecated APIs, such as Opaque Token, have been removed.

Angular 5 will make progressive web apps easier

To date, supporting progressive web apps in Angular has required a lot of expertise on the developers’ part; Angular 5 is intended to make progressive web app support easier. “We’re trying to find the right set of defaults so that it just would be the default option for most developers, for both desktop and mobile web,” said Brad Green, a Google engineering director.

How to update to Angular 5

Google is providing guidance on how to move to Angular 5 from previous versions.

Angular 6 is on the horizon

Following Angular 5, Google will offer Angular 6 in March or April 2018, if the current release pace holds. Google has emphasized that Angular 6 would repeat themes of Angular 5: “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,” Green said.

Dependency injection, HTML template remain core Angular advantages

Angular’s selling points at the outset included dependency injection, particularly useful for assembling data services for applications, along with use of an HTML template to compose components. Over all the subsequent versions, these have remained key features. Developers still compose components with an HTML component that connects to TypeScript code for imperative parts of the program.

Google says Angular has succeeded because it offers a “batteries included” approach to development, with developers not burdened with figuring out which internationalization library or animation to to use, or how to do HTTP or forms.

The history of Angular’s versions

Angular 5 follows closely the releases of versions 2 and 4, which arrived in September 2016 and March 2017, respectively, skipping over a version 3 designation. (Because the router for Angular already had reached version 4 by the time Angular 3 was due, Google just went right to calling the upgrade itself Angular 4.)

Although the original AngularJS JavaScript development framework already was a hit with developers, Google undertook a rewrite for the second generation, focused on better performance. “We couldn’t get more performance out of the old architecture,” Green said. Angular 2 was rewritten in TypeScript, Microsoft’s typed superset of JavaScript. “TypeScript let us do static analysis of source code. This is something we can’t do in JavaScript, so it becomes much more predictable,” Green said. TypeScript also lets Angular show developers errors in HTML templates.

Another feature added in Angular 2 was a compiler that sits in between written code and output shipped to a production application. This compiler optimizes the generation of template-rendering; code then can run at maximum speed in JavaScript virtual machines.

Angular 2 also offered a much cleaner component model. Interoperation with technologies such as web components was also a focus in Angular 2.

Angular 4, meanwhile, offered view-engine improvements and code-generation reductions. The Angular 4.3 upgrade, was released in July and featured HttpClient, which provided a smaller, easier-to-use library for making HTTP requests.

Angular 4.3 also has an attribute, @.disabled, for conditionally disabling animations as well as new router life cycle events. Since the 4.0 version, Angular also enhanced animations so parent and child elements can be coordinated across page transitions.

Previous Post
Cray Teams Up With Microsoft on Azure Cloud Supercomputer-as-a-Service

Next Post
Visual Studio Code roadmap: The new features you can expect