BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

Angular 4.0 Released with a Focus on Shrinking App Size

| by David Iffland on Mar 28, 2017. Estimated reading time: 2 minutes |

Google has released version 4.0 of their popular Angular JavaScript framework, focusing on shrinking the size of the generated code and keeping the framework on a streamlined release schedule.

Because Angular switched to using Semantic Versioning, the release of version 4.0 is not as big of a deal as the release of version 2.0. It just means that there are breaking changes that developers will need to watch out for. Thankfully, these breaks are tame, and don't require relearning the entire framework. "Most developers should be able to simply update their dependencies and rebuild," says Rob Wormald, an Angular team member.

There was no version 3. Angular skipped to version 4 in order to sync up the Angular router's version which was already in 3.X.

There are plenty of new features, most of which are small. One of the biggest improvements was in the way Angular's Ahead-Of-Time (AOT) compiler generates code. In a design document, Angular Team Member Tobias Bosch wrote that a sample template that only took up 245 bytes of source code was compiled into 7,951 bytes of TypeScript code- 32.5 times bigger. While the use of the AOT compiler has a positive impact on Angular performance, the payloads delivered to the browser were large. In his prototype, Bosch was able to get the compiled TypeScript code down to 1,833 bytes; 7.5 times bigger than the source but less than 25% of the original results. In the version 4.0 announcement post, Google wrote that developers should see a dramatic improvement:

We’ve made changes under to hood to what AOT generated code looks like. These changes reduce the size of the generated code for your components by around 60% in most cases. The more complex your templates are, the higher the savings. During our release candidate period, we heard from many developers that migrating to 4 reduced their production bundles by hundreds of kilobytes.

On Hacker News, developers wrote that "upgrading from v2 to v4 has been painless" and Angular developer Cory Rylan told InfoQ "it has never been a better time to try out Angular. The performance improvements have been astounding!"

This version of Angular has also made the TypeScript jump to version 2.1. Previously, TypeScript 1.8 was used and there was no backwards compatibility. Other important changes are:

  • Animation pulled to its own package
  • Angular Universal (server-side rendering) is back in sync with Angular and is now maintained by the Angular team
  • Source Maps for Templates
  • Improved *ngIf and *ngFor

With this release, the Angular team has fulfilled the commitment they made to release every six months. The next major version bump (to 5.0), should arrive sometime in September of October of 2017. The full release schedule is available on GitHub.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT