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

BLOG:NG-Conf 2015: Planning for the Future of Angular

NG-Conf 2015: Planning for the Future of Angular

Introduction

The ng-europe conference in October 2014 unveiled significant changes coming in version 2.0 of the Angular framework. This was met with some uncertainty and trepidation by many members of the community. At ng-conf 2015, the Angular team took the opportunity to share more details around Angular 2.0 and the rationale behind many of the new design decisions. The migration path to 2.0 became much more clear thanks to the content of several presentations. The Angular team also stressed continued support for version 1.x and looked ahead to future releases on the 1.x branch. There was also a big announcement around the future of AtScript and TypeScript.

Angular 2

While ng-europe was the introduction of Angular 2, ng-conf provided significantly more detail around the new features and changes in the next version of the framework. Also announced was the launch of a new website dedicated to Angular 2: angular.io. The Angular team will use traffic metrics to the new and old Angular sites to better understand the community’s interest in each and help drive development priorities.

New Template Syntax

The most significant announcement at ng-europe was around the new template syntax in Angular 2. Gone were the dozens of familiar Angular directives like ng-click and ng-model in favor of syntax like (click)=”” and [value]=””. At the time, the rationale for these significant changes was not explained and created concern within the Angular community. Fortunately ng-conf 2015 helped shed light on the situation.

The new template syntax aims to ease integration with native and custom elements by allowing Angular to interact directly with their attributes and properties. Rather than requiring a custom ng-model directive to bind to a input element’s “value” attribute, the developer can bind directly to “value”. Similarly, rather than using ng-click, the developer uses “click” directly. By adopting this approach, 35 different Angular directives can be eliminated in Angular 2, allowing the developer to interact directly with standard HTML attributes.

Furthermore, a distinction is made between data flowing into a component (using square brackets) or out of a component (using parentheses). Attributes wrapped in square brackets tell Angular to evaluate the attribute as an expression and pass the result to the element. Attributes wrapped in parentheses invoke the attribute as an expression when the corresponding event is propagated. This distinction can help drive better performance in Angular and allow tooling to more effectively validate template syntax.

This new syntax not only obviates the need for many of the standard directives shipped in Angular 1.x, it also paves the way for an overhaul of custom directives in Angular 2.

Angular 2 Component Model and Web Components

Angular 1 introduced the concept of directives for handling a variety of different use cases including reusable UI components. This led to an API that was confusing even for experienced developers. Over the past few years, the Web Components spec has evolved to provide much of the functionality available via directives through features like the Template Element and Shadow DOM.

Angular 2 will provide a new component model to replace directives with three specialized APIs that are aligned toward major use cases. This new model will align with the Web Components spec, leveraging this new functionality while eliminating the need to learn many concepts that were specific only to Angular. Web Components will be a first class citizen in Angular 2 and work out-of-the-box, eliminating much of pain that exists today when integrating pre-existing UI components in an Angular application. Since Web Components expose properties and events via attributes just like native HTML elements, the new template syntax is crucial in allowing for easy integration with Web Components that are not built specifically with Angular in mind.

Another part of this shift includes retiring the concept of the $scope in Angular in favor of component controllers whose internal state is bound directly to the supporting template, just as in Web Components. This concept was hinted at with the controllerAs syntax introduced in version 1.2. This has been recommended as a best practice and now we know why: aligning code with the controllerAs syntax will ease the migration of directives toward the new component model in Angular 2.

Performance in Angular 2

Performance has been a focus in Angular 2 since the very beginning. The internals of Angular 2 have been redesigned to use unidirectional data flow, a single-pass change detection algorithm and view caching to reuse existing DOM where possible. Benchmarks show performance improvements between 3X and 10X. Angular 2 provides additional performance benefit through the use of immutable objects and observables. Angular 1 does not provide a means for the developer to identify immutable or observable objects to the change detection algorithm and therefore change detection may run more frequently than necessary.

AtScript and TypeScript

ng-europe also brought about the announcement of AtScript, an extension of JavaScript that provided additional features such as annotations and a type system to support the development of large enterprise applications. AtScript would be completely optional, with ES5 or ES6 both being fully-supported by Angular 2. Along with the other large changes announced in Angular 2, the introduction of AtScript fueled widespread concern and uncertainty in the community, while AtScript joined an already crowded field of JavaScript alternatives including CoffeeScript, Dart and TypeScript..

At ng-conf, the Angular team announced a collaboration with Microsoft to bring the annotations functionality of AtScript to the next version of the TypeScript language. AtScript has been retired, with TypeScript being a well-supported option for teams looking to leverage advanced features such as annotations, types and generics. While it was stressed that ES5 and ES6 are both still fully-supported in Angular 2, the Angular team seems bullish on the potential of TypeScript for Angular 2. While ES5 and ES6 aren’t going anywhere, it looks as though leveraging TypeScript will allow for greater expressivity and more concise code when writing apps for Angular 2.

ES6 Modules

Angular 1 was conceived before various Javascript module systems like CommonJS, and AMD (RequireJS) became popular. As a result the Angular team developed their own system for registering modules of code to be used elsewhere in the application. ES6 brings with it a module system designed to provide the feature set of both CommonJS and AMD. For Angular 2, this module system has been adopted over the Angular 1 approach. Just like with the template changes designed to provide support for new web standards, the shift to ES6 modules accomplishes the same goal of migrating to web standards. In addition, Angular 2 will support lazy, or incremental, loading of modules so that all code does not have to be loaded when the application initially starts. This incremental loading feature was not ready for demonstration at ng-conf, but the Angular team stated this was a core requirement for applications at Google and it will be in Angular 2.

Angular 2 is still very much an alpha product. In the May 2015 timeframe, the Angular team will be working to convert some internal Google apps to Angular 2. Based on the learnings from that process they will be able to provide a better timetable on when Angular 2 might be released. It’s likely Betas and Release Candidates of Angular 2 will appear later this year. However, in our estimation, the fully released version of Angular 2 might not happen until 2016. Until Angular 2 is released the recommended approach is to start with the current version of Angular 1.x and try to make use of as many best practices as possible. We offer several steps a developer can take in the section on preparing for Angular 2. Developers’ goals for the remainder of 2015 should be to get as comfortable with ES6 and TypeScript as you can while also trying to structure code in a such as way that makes it more consistent with the Angular 2 way of thinking (eg: components, isolate scope, etc).

Preparing for Angular 2:

Migrating to Angular 2 will not be an all-or-nothing proposition. Versions 1 and 2 of the framework can be run side-by-side, allowing for a mix-and-match approach and a gradual evolution of the code base. An Angular 1 application can embed components written in Angular 2 and vice-versa.

Preparing for Angular 2 is mostly of a process of following “best practices” in Angular 1.x development. A session at ng-conf was dedicated to preparing for the migration from Angular 1 to Angular 2. Among the techniques suggested are:

  • Write ES6 code - the new Component API in Angular 2 can be leveraged more succinctly in ES6. Getting comfortable with using ES6 features, such as arrow functions, native class support, and the ES6 promise syntax now will position you for success with Angular 2. Many of the ES6 features can already be used in your Angular 1.x codebase.
  • Consider TypeScript - the annotation support in particular will allow for even more concise component declarations in Angular 2. While you wait for Angular 2 to to arrive you can already leverage the strong typing support found in TypeScript. When TypeScript 1.5 arrives shortly, it will provide access other ES6 features as well. A session on TypeScript and ES6, led by Dan Whalin and Andrew Connell, will provide some insight on how you can leverage TypeScript today.
  • Use controllerAs syntax instead of referencing $scope. The new component model will reference data and methods directly on the controller, just as with the controllerAs syntax in Angular 1. It’s worth getting used to this approach versus continuing to reference $scope.
  • Think in terms of components. Don’t just use a series of nested controllers, use directives with isolate scope.
  • Directives should also use the bindToController option that first appeared in Angular 1.3
  • Consider using the Angular 1.4 router as the same router will be in Angular 2.
  • Keep an eye on Angular 1.5 for a new “angular.component” function. This will be an alternative to angular.directive which exposes an API that aligns more closely with Angular 2 components. This will make it easier for developers to create components rather than dealing with the sometimes verbose directive syntax.

It’s worth noting that in terms of “migration”, you will need to do the work of adopting the new syntax and code structure used by Angular 2. There is no magical conversion tool that will do this work for you. If you write Angular 1 code using the strategies outlined above, your conversion process will be much easier but there will still be some work to do. Fortunately, since Angular 1 and Angular 2 applications can co-exist on the same page, you will be able to migrate portions of your application to Angular 2 over time.

Angular 1.x

Significant announcements were made for Angular 1.x. A release candidate version of Angular 1.4 is slated to be available within the next week. This version includes several interesting enhancements:

  • New Router - The new router is a complete rewrite from the one that shipped with earlier versions of Angular. Support has been added for multiple “router viewports” for each route which is a feature sorely lacking from the present router. In addition, a complete set of lifecycle events is supported. This new router will also act as the router for Angular 2 applications and provides one of the pathways to migration for Angular 2.
  • Animation Improvements - New support for animation “anchors” allow items to transition from one view to another. There are now callbacks to inform your code when an animation has completed. This animation support will also find its way into Angular 2.

  • Internationalization Improvements - changes include tooling support to support data formats for various translation data formats. Support for pluralization and gender in phrases has also been added. These internationalization improvements will find their way into Angular 2 as well.

  • Performance improvements - the Angular team has measured up to a 30% performance improvement in the digest cycle in Angular 1.4 versus Angular 1.3. Memory pressure has been further reduced as well.

The Angular team shared some statistics on the popularity of Angular 1.x. Google now has over 2,000 internal application based on Angular. The angularjs.org web site receives over 964,000 active users every 30 days. While details were released on Angular 1.4, the Angular team also mentioned Angular 1.5 and 1.6. It was very obvious that considerable attention is being made to improving Angular 1.x even while Angular 2 is in development. Given Google’s own internal investment in using Angular for 2,000 internal apps their support for 1.x is likely to continue for quite some time.

Material Design

Google has rapidly been migrating their applications on Android, iOS and the web to material design concepts. While not strictly an Angular 1.4 feature, the Angular Material project is slated to provide some impressive UX functionality for Angular 1.x developers in 2015. This is a set of UX components that every Angular developer should look at. Angular Material supports responsive layout features that enable your app to scale from mobile devices to large desktop displays. The Angular Material project is currently in beta while the team continues to add functionality. A production release is expected this summer. Angular Material components will also be supported in Angular 2.

Getting There:

Success with the future of Angular requires a solid foundation in Javascript and strong knowledge of Angular 1.x. By following the strategies outlined in this document, your development team will be better positioned to embrace Angular 2 and adapt to the ever changing web development landscape. Universal Mind is ready to help your team adopt the best practices needed for Angular 1.4 and versions beyond. Contact us to learn how we can help with your journey to Angular 2.

All of the sessions from ng-conf are available on YouTube. In addition, links to slide decks are available on Google Docs.