Up close with Google's Angular 2 JavaScript framework

Here's all you need to know about Angular 2, the exciting new successor to Google's wildly popular JavaScript framework, AngularJS

Two years ago Google promised a major rewrite of AngularJS, which back then was already topping the charts as the most popular JavaScript framework. Now the new version, dubbed Angular 2, is finally nearing a beta release.

Angular 2 draws on the perspectives of experts who have both learned from experience and have an eye toward future standards. Now’s a great time to see what the framework authors are bringing to the next version.

[ Need a JavaScript tool for your dev shop? InfoWorld looks at 17 JavaScript editors and IDEs ready for adoption. | Keep up with hot topics in programming with InfoWorld's Application Development newsletter. ]

The rise of Web Components

In AngularJS, nearly everything to control page rendering is done with directives. There are lots of existing directives ranging from the very simple (for example, ngIfis a directive you can use to conditionally show/hide part of the page) to the complex (such as data binding with ngBind). You often create your own directives to add custom behavior to an element or simply to render a template.

Angular 2 largely replaces directives with “components.” This approach looks forward to future Web Components specifications, including Shadow DOM and HTML Imports. Meanwhile, the component pattern is already showing up in many JavaScript libraries.

When you compare AngularJS’s directive approach with Angular 2's component approach side by side, they appear very similar. But conceptually, they're different:

Angular 1	Angular 2
angular.module('App', [])  .directive('example', function() {    return {      template: '<p>Some DOM content</p>'    };  });	var AppComponent = ng  .Component({    selector: 'my-app',    template: '<p>Some DOM content</p>'  })  .Class({    constructor: function () { }  });

As a standard, Web Components have some issues. Browser vendors still need to shake things out a bit for Web Components to be implemented. As an architectural component of an client-side application, however, the Web Components approach is something to be reckoned with.

Componentization within the interface allows behavior and presentation to be modularized, testable, and reusable. Furthermore, the developers of Angular 2 plan to make it compatible with Web Components created with such libraries as Polymer and X-tag so that Angular 2 will be very friendly to code reuse.

The bottom line is that, once the kinks are ironed out, you'll want to use Web Components. As it turns out, using a performant framework -- as Angular 2 intends to be -- may be one of the best ways to incorporate Web Components into your applications, while letting the framework authors and the community manage compatibility with evolving standards.

Reactive programming

Angular 2 builds on a reactive programming style using event-driven streams of data, rather than on the object-oriented approach you might see in MV* frameworks. In fact, data flow is the most interesting thing you won’t see mentioned on Angular 2's features page.

It all starts with how the framework gets its data: Promises versus Observables. Promises are a method of triggering an asynchronous action, then handling the result when it's ready. In contrast, Observables are a proposed standard type that allows subscription to a stream of values.

In his talk on data flow in Angular 2, Rob Wormald provides examples of “typeahead” functionality in AngularJS versus Angular 2, demonstrating the work required to debounce requests -- that is, to not waste HTTP requests while the user is still typing, yet still provide nearly instantaneous “typeahead” search results.

I’ve modified the code here to make it more understandable out of context. The value of this.searchResults is modified based on a typeahead field.

Angular 1

Angular 2

// change event to be fired // whenever the search box value changes // creating timeouts to debounce the request onSearchChanged() {  var searchText = this.searchText;  if(typeof this.searchTimeout !== 'number') {    clearTimeout(this.searchTimeout);    this.searchTimeout = null;  }  this.searchTimeout = setTimeout(() => {    this.doSearch(searchText);    this.searchTimeout = null;  }, 200) } doSearch(searchText) {  this.currentRequest = fetch('/someendpoint?search=${searchText}')      .then(res => res.json())      .then(results => this.searchResults = results) }

this.searchResults = Observable.from((<EventEmitter>this.searchText.valueChanges).toRx())    .debounceTime(200)    .switchMap((val:string) => myService.load(val))    .merge(this.clear.toRx().mapTo([]));

As you can see, a simple reactive action (debounceTime) is required for Angular 2 to provide the same debounce functionality as AngularJS to get values intothis.searchResults.

In order to leverage Observables and reactive actions, Angular 2 employs the next version of RxJS. That means users of Angular 2 also benefit from access to this reactive tooling (the ability to simply debounce a stream of events serving as an example), and Angular 2 users are likely provide more fuel for reactive programming champions.

Choose your own language

While AngularJS is a JavaScript framework, Angular 2 is a “whatever compiles to JavaScript” framework. As long as what you want to write in can compile to JavaScript, you can (probably) use Angular 2.

In the new Angular documentation, you’ll notice a drop-down for JavaScript, TypeScript, or Dart. While this might change (it looks like a beast of documentation work), it’s an indicator of the community’s intentions.

Angular 2 itself is written in TypeScript, a typed superset of JavaScript. You can think of it in shorthand as “ES2015 with types.” While this may give TypeScript an edge in adoption, it’s clear that the framework authors intend Angular 2 to be friendly to transpiled languages in general.

Thanks to AngularJS's popularity, adoption of Angular 2 will probably be huge. The new framework has a lot to show you regarding trends to pay attention to: JavaScript apps won’t have to be written in JavaScript (if they can make the compile target work). Reactive programming is on the rise, especially for browser apps. And the Web Components standard is sticking around -- even if the browser vendors haven't ironed out how they will support it.

This story, "Up close with Google's Angular 2 JavaScript framework" was originally published by InfoWorld.