How can we help?

Design? Check. Strategy? Check. Bulletproof code? Check! People who can manage it in an agile and efficient manner? Check. Someone to help you create your next big product? Of course.

Denver

- 1201 18th St. Suite 250, Denver, CO 80202

Grand Rapids

- 125 Ottawa Ave NW Suite 270, Grand Rapids, MI 49503

Blog

NG Conference Blog

Ng-conf 2017 - Charting the future of Angular

The annual Angular developers conference was held April 5th through April 7th in Salt Lake City, Utah. It was my fourth year attending the conference and the tone of this year’s conference was a bit different than in the past 2 years. Back in 2015, Angular 2 was on the horizon but few people, including the Angular team itself, knew exactly what Angular 2 would look like when in use. The announcement that Angular 2 was in development raised concerns from developers on how significant the changes would be over AngularJS (Angular 1.x) and prompted some to ponder switching frameworks. By the time ng-conf 2016 rolled around, some release candidates for Angular 2 were out, and the shape of the next generation of Angular was much more precise. The 2016 conference was very focused on getting people up to speed on Angular 2 now that the APIs were reasonably firm. Therefore, the 2015 and 2016 conferences were very much focused on change and predicting what the future might hold.

If the 2015 and 2016, conferences were about revolution and change, the 2017 conference was about evolution and consistency. Let’s face it, the Angular community has been through a lot of change over the last couple of years and the injection of some stability is welcomed by the numerous enterprises that rely on Angular. That’s not to say there weren’t some new announcements this year, but things were not in quite the sea of change as in the past. This article will summarize some of the key items that were announced. These are worth keeping in mind as you plan for Angular development within your enterprise in the coming year.

As in year’s past, attendance was capped by the limit of the conference facility at 1,500 people. Many of the attendees were from enterprises that utilize a mixture of AngularJS and Angular applications. During the conference, Google mentioned that they have over 200 internal applications now running built on Angular. For most enterprises, Angular apps are internally facing, and Google’s statistics show that 90% of Angular apps live behind a firewall. Of course, this means Google has a lot riding on the future of Angular, and they are well aware of its importance to enterprises.

The conference focused on three main themes:

  • Speed and Size
  • Smooth Updates
  • Simplicity

Speed and Size:
Angular 4 was released about a week and a half before to the start of the conference. Unlike the jump from Angular 1 to Angular 2, this is a much more evolutionary release. The biggest enhancement is a reduction in application code size. In fact, AOT generated code from your custom components can be reduced by as much as 60 percent. In our applications, I’ve seen a reduction of at least 50 percent simply by upgrading to Angular 4. Keep in mind this is a reduction for your application code bundles, not the core Angular framework, related libraries, and polyfills. Therefore, the 60 percent drop will only be reflected in the bundles containing your application code and not overall. Much of this reduction in size comes as result of more efficient code generation as part of the AOT (Ahead Of Time) compiler. The Angular team announced that they are already hard at work continuing to push for further reductions in code size and have some preliminary results showing an additional 20 percent improvement future versions.

Another way to reduce code size is through more complete modularization. The animation support in Angular 4 was moved out of @angular/core into a separate module. This means applications that don’t need animation support, no longer have this code in their production bundles.

Speed is critical to mobile applications and was the focus of several conference presentations. The Angular team shared some statistics from DoubleClick (a division of Google) that showed 53% of visits to mobile sites are abandoned if they take more than three seconds to load. 77 percent of current sites take more than ten seconds to load and the average load time is over 19 seconds on 3G connections. Angular aims to address this in two ways:

  • Server side rendering, or pre-rendering, allows all or a portion of an application to be generated on the server. The browser does not have to wait until all content has been downloaded and the Angular app has bootstrapped before content can be displayed. The Angular Universal project, which allowed Angular applications to be rendered server side, has now been adopted by the Angular team itself as part of the @angular/platform-server module. Given Google’s continued interest in web application performance, this increased emphasis on alternative rendering techniques is not surprising. More documentation on platform server is forthcoming. Meanwhile, a demo application is available as is a conference video on this subject.
  • Pre-rendering is not the only way to achieve an improvement in application load speed. One approach is to leverage PWA (Progressive Web Application) techniques using service workers as a means of loading and locally caching application content. By doing this, when a user makes a repeat visit to your site, the already pre-fetched content can be instantly loaded. This also permits the development of Angular applications that run offline, which is a necessity for some mobile applications. The mobile project that was first announced nearly a year ago has evolved into the @angular/service-worker module. At the moment, this module is still considered experimental and is not yet officially documented on the Angular.io site. However, some documentation is provided as part of the service-worker repository and a conference video provides more detail.

Smooth Updates:
As mentioned earlier, updates, and their impact on code from release to release have been a major concern over the last two years. In October of 2016, the Angular team announced it’s version strategy, releasing major updates every six months and minor updates monthly. While this approach was reiterated during the conference, one surprising addition was the announcement of an LTS release for Angular. The Angular team announced that Angular 4 would be an LTS release with support extended to October 2018. This is the first time I recall any Javascript framework offering to support a stable release for as long as 18 months. I believe this will go a long way to appease corporate developers who cannot perform major version upgrades every six months. The transition from Angular 2 to Angular 4 has generally been trouble free and the Angular team has suggested that the upgrade path for Angular 5 in October 2017 should be similarly straightforward.

Simplicity:
The Angular CLI has been around for some time now, and when Angular 4 was released the CLI moved to its official 1.0 release as well. The CLI is now supported by dedicated Google engineers from the Angular core team. Some relatively recent updates include a new “eject” command that allows you to assume complete control over webpack config file. There is now little reason to avoid using the CLI as you can always eject your project should you require full control over the solution. The Angular team intends to continue to extend the CLI to support new features like the mobile and service-worker support mentioned earlier. For more tips and tricks on using the CLI, John Papa tips session which includes some material on the CLI and Hans Larsen from the Angular team provided a full session on the CLI.

Simplicity extends to making some processes with animations easier than in the past. Matias Niemela offered a presentation on animation enhancements that is planned for a future release of Angular. Among the new features is a mechanism to create reusable animations via the animation() function, which permits a given animation to be defined and then referenced from transitions on a component. These reusable animations can also accept input variables, which provides the transition with the ability to influence how the animation works. Other new changes include the ability to query child components and animate them. Additionally, support has been added to perform animations on routes. During the conference it was announced that these features were planned for Angular 4.1, but Angular 4.1 was subsequently released without them. Hopefully, they’ll appear in 4.2.

During the development process the Angular compiler is running in JIT (Just In Time) mode. In this mode, templates are processed at runtime via the Angular JIT compiler running in the browser. Generally speaking, when applications are released a production build is done with the AOT (Ahead Of Time) compiler enabled. This removes the JIT compiler from the Javascript that has to be loaded as part of the Angular framework and also enables tree-shaking to remove as much un-needed Javascript as possible from your deployment bundles. The AOT compiler is notably slower than the JIT compilation process, so it is not used for iterative development efforts. There are some differences in how the code is compiled via the two approaches. In some cases a piece of code will work properly under the JIT compile but fail to compile successfully with the AOT compiler. To avoid this issue, the Angular team is continuing to work on the performance of the AOT compilation process, the ultimate goal being a single compilation mechanism for Angular apps in both development and production builds.

Ionic 3
While not an official part of Angular itself, Ionic is well known as an Angular based framework for developing hybrid mobile applications. Ionic version 3 was announced during a keynote session at the conference with support for Angular 4 and new performance improvements. Ionic recognizes an opportunity in Google’s promotion of Progressive Web Applications (PWAs). This allows you to create performant mobile web pages that don’t have to be deployed as traditional mobile apps through the iOS App Store or Google Play. In this way, Ionic has benefits over other mobile development solutions like NativeScript or React Native in that the code you build can be both deployed as a traditional mobile app or as mobile web page. At the moment, several benefits of PWAs require service-worker and web application manifest support, neither of which are present in iOS. However, the Mobile Safari team has confirmed that they are investigating service worker support for a future release. This could be a major boost for PWAs.

In my opinion, one of the best features in Ionic 3 is the support for desktop and tablet applications. In the past, Ionic apps worked best on phone sized displays. But now, through the use of a new grid component and a new sidebar component, it’s possible to build responsive applications that work across a broad range of device sizes. The availability of desktop support may mean that we see Electron support for Ionic apps at some point. While Ionic has confirmed nothing, it seems to be a logical next step for them to pursue.

The Ionic team has also completely rewritten the Ionic CLI to improve performance and provide more useful error messages. They have also enhanced the cordova:resources generation, which builds splash screens and app icons in various sizes and resolutions, to meet the requirements of both the iOS and Android app markets.

Sessions worth checking out.
All the sessions are online in the ng-conf YouTube account. Here are a few of my favorites:

Embrace Components - This session provides some strategies around components and component communication as well as the overhead costs of adding more components to your application. Everyone should be aware of these issues and how to mitigate them.

RxJS The Good Parts - Still confused by RxJS? Are you overloaded with operators? This session is for you. RxJS can be daunting to learn, and in my opinion, it’s probably one of the more challenging aspects of getting up to speed with Angular. The presenters focus on some basic operations that most developers will need.

Form Freaks - This session shows how Redux can be applied to perform validations on a large scale application with complex forms. The technique employed here involves submitting actions as the form state changes and the using selectors to determine if the form content is valid. This subject is Rangle.io Angular 2 training book.

From inactive to reactive: Redux is a very popular means of managing shared state in React applications. It can be applied to Angular apps as well. The ngrx project extends the concepts of Redux with observables and provides an implementation that is tailored to Angular. This session is one of the best explanations I’ve seen on ngrx and does a great job of showing how async operations are handled via @ngrx/effects.

Lazy Loading Modules - This session provided a good overview of enabling lazy loading for modules via the Angular Router. Some of this material is already covered in the official Angular documentation. However, there is a good discussion near the end of the presentation about how to handle shared services being instantiated from lazy loaded modules.

Upgrading Enterprise Angular apps - If you are upgrading from AngularJS to Angular there are various strategies you can follow to migrate your application. This session does a good job of summarizing some of the challenges and possible solutions to performing the upgrade.

Docker for developers - While not an Angular-specific topic, the use of Docker should be of interest to many developers. Dan Wahlin gives an excellent intro to Docker and shows how Docker Compose can be used to build a complete stack of development services.

Summary: I think 2017 will be marked as a year of Angular maturity. Much of the uncertainty that swirled around Angular 2 over the past two years is behind us. The Angular team seems well aware of the concerns of developers for platform stability. Some ancillary projects like Angular Universal, and the Angular CLI have been brought into the Angular core team and now have direct Google support. This shows how important those projects are to the future of Angular and where Google is placing increased emphasis. Activities in the area of server-side rendering and progressive web applications open some new opportunities for the use of Angular and I hope to see them fully documented and supported later this year so they can obtain widespread adoption.

Receive our Newsletter

A monthly curation of everything you need to know about designing and developing cool digital stuff. And making it profitable.