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.
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,
ngIf is 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.
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:
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.
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.
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 into
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