The latest version of Google’s Angular app platform, the Angular 5 pentagonal-donut, hit the digital streets on November 1st. The new platform promises cleaner production code, faster compilation, better synchronization between server, client side code, and more.
Before we get started on the details, let’s talk about the weird naming convention. Angular 5 is actually the fourth release since Angular 2 adopted TypeScript in September 2014, broke with AngularJS, and started stacking the pieces for a progressive web apps and material design web.
The big news from this Angular 5 release is that it’s making Angular development more production ready. It’s doing it through the inclusion of Build Optimizer by default in production builds made with the Angular Command Line Interface (CLI). This means Build Optimizer now optimizes production code two ways: it removes Angular decorators such as @NgModule, decorators used by the compiler, but unnecessary at runtime. The Build Optimizer also removes unused code from the compiled version, reducing the size and increasing the speed of production code.
Adding the Build Optimizer to the development buildchain used by the CLI by default is only part of how Angular 5 changes the coding process for developers. Incremental builds are now significantly faster as the Angular compiler now operates as a TypeScript transform hooking into the standard TypeScript compilation process. How is this significantly faster? Google’s Angular Team reports the compiler pipeline can reduce a 40-second incremental compilation to two seconds, a 95% time savings for developers who want to develop and not stare at their terminal windows.
Server-side, Client-side, Your side
A second major feature of Angular 5, and one that lays the groundwork for progressive web apps (PWA) developer adoption, makes it easier to share states between the server portion of your Angular 5 application and the client portion. The inclusion of an Angular Universal State Transfer API also lets you do more server-side rendering. How? By adding a boost in perceived application speed and giving scrapers and crawlers that usually can’t process JavaScript more visibility to your site.
With the addition of ServerTransferStateModule and its partner BrowserTransferStateModule, data can now be processed on the server and transferred — not regenerated — on the client side. This cuts down on HTTP requests and lets your servers do what they do best: connect to the rest of the enterprise.
Angular 5 also adds the Domino project to the Angular runtime environment, supporting more DOM manipulations within server side contexts, improving support for thirdparty JavaScript and Component libraries that don’t play well with the server.
Other Improvements
Here are a range of further changes Angular developers will be getting used to in the weeks and months ahead:
- More standardization and better support for internationalized numbers, dates, percents and currency. As the Angular Upgrade Guide reports, you will see “minor changes to the format. For applications using locales other than en-us you will need to import it and optionally locale_extended_fr from @angular/common/i18n_data/locale_fr and registerLocaleData(local).”
- By replacing ReflectiveInjector with StaticInjector, most projects will need fewer polyfills, further reducing code size.
- A smaller and more developer-friendly HTTP client.
- Angular Forms can now trigger validation and value updates selectively on just the blur and submit events, rather than on each and every input event. This makes for better targeted code.
- The RxJS reactive programming library has been updated to 5.5.2, making for fewer problems between RxJS and Angular. The new RxJS version lets developers avoid problems with the prior import mechanism by using what RxJS called “lettable operators”. These new operators eliminate the side effects and the code splitting / tree shaking problems that existed with the previous ‘patch’ method of importing operators.
- Multiple names are supported for components and directives, useful in smoothing rough edges between codebases developed by different coding teams.
What’s Next?
Google has committed to a robust release pace, with Angular 6 planned for March/April 2018. Like Angular 5, Angular 6 will be focused on making it easier for developers to build apps such as progressive web apps without focusing on configuration options.