The Obsorne Effect

The Angular team faces a problem. How do you talk the great new features of Angular 2.0 under development without damaging use of the current 1.x? This effect is often called the Obsborne effect, named after a 1980s computer company whose marketing contributed to putting the company out of business. In short, the better 2.0 sounds, the less people will want to start or continue projects built with 1.x.

But the secrets out. Angular 2.0 is available on github and you can play around with it using npm install angular@2.0.0-alpha.6. Keep in mind, it is NOT ready for production and subject to (likely a lot of) change.

Angular 1.x vs. 2.0

It's important to see why the Angular team are making such drastic changes. Angular isn't just trying to keep up, they're pushing forward a lot of standards, enhancements and better app architecture.

The more you look at the elegance of 2.0, the more 1.x looks like a bunch of hacks strewn together and prefixed with 'ng-'. While 1.x was all about adding features and getting stuff done, 2.x should have a simpler API while simultaneously targeting performance & web standards.

2-way data binding

2.0: 1-way data binding

In larger apps, 2-way binding can develop into spaghetti. Angular 2.0 will use a concept called Directed Acyclic Graph, a kind of unidirectional architecture.

This sounds a lot like what React is doing right with Flux. This kind of architecture can be used with Angular as well. Read more.

Though 2-way binding will disappear, Misko has stated that Angular 2.0 may function in a way that data bindings appear 2-way, though behind the scenes data flows 1-way.

watchers

2.0: Zone.js

$scope.$watch, $scope.$apply, $timeout. No more. Whew! Using these was part of the reason Angular 1.x had such a huge learning curve.

Zone.js helps Angular to do change detection automatically. This sounds similar to React's reconciliation diffing algorithm.

The Angular team explained change detection is now faster, uses less memory and less power. Change detection may improve further with object.observe coming to other browsers (currently just Chrome).

Zone.js also supports using immutable objects for even faster processing. This is because the compiler can assume the data objects won't change and optimize.

[edit March 11, 2015] For a more indepth look at how change detection will work in Angular 2.0 watch Change Detection Reinvented by Victor Sakvin @ngConf.

component communication

2.0: Instead of $broadcast & $emit, 2.0 has a few differences: 1) You can emit messages in the DOM, rather than the scope.
2) You can put components inside eachother and link them directly. This may be similar to components using isolate scope now.

DOM

2.0: In many ways, Angular 2.0 seems to handle DOM style manipulation with something similar to React.js's virtual DOM, which they referred to in a recent presentation as the "view". In response to a recent question about 'Angular Native?', Misko mentioned that this View could be run on a web worker or even potentially on native.

scope

Data will be organized in a tree like architecture.

Angular 2.0 will also use Web Components standards. For example, the shadow DOM could be used to create an isolate scope. The Angular team explained that there is also a shadow DOM emulated mode (for browsers not support web component features yet.) This would allow additional options for isolating css styles as well. Cool!

Modules

2.0: 2.0 is of course going to use ES6 module syntax. On top of that, Angular 2.0 is expected to have 'amazing' dependency injection with lazy-loading. Rather than using singletons, 2.0 will have a kind of hierchical data structure likely offers inheritance features. You will also be able to control the lifetime of modules such as services.

Directives

[edit March 11, 2015]

2.0: Now called "Components" Still called directives. In Angular 1.x, directives are available everywhere on instantiation, creating name-space overlap problems for large projects. In 2.0, you must import your directives which avoids this problem.

Although I'm not clear on how it works, Angular 2.0 will create a prototypical template of all potential bindings to optimize for compiler speed.

There are currently three types of directives:

• Component Directive - Made up of a view & controller. What we might recognize as a .directive style directive.

• Decorator Directive - adds behavior to a directive. Similar to the ng-directive attributes you add, like ng-click or ng-show.

• Viewport Directive - handles html transformations as in ng-if or ng-repeat.

Router

2.0: Check it out: 2.0 router. It should be back-ported to 1.x as well, though without the feature of lazy-loading which was deemed unstable for 1.x.

[edit: March 8, 2015]

Brian Ford gave a presentation about the new router @ng-conf that's worth a watch. In it he describes how the new router can use both Angular 1.x & 2.x modules, allowing teams to gradually change from one router to the other. He also proposed a possible migration path from the popular ui-router.

Ui-router is great, but lacks some important features. For example, resolve can only pass data before a page is loaded. What if you want to check if a users current data is saved in a form before routing to the next page? Ui-router's resolve is a one-time trigger. Instead, the new router will provide 'Lifecycle Hooks' that let you specify exactly when you want an action to take place.

Component directives can be routed to using the new-angular-router. If this sounds crazy to you, you can already do something similar in angular 1.x by dropping controllers for directives and routing to a template. Check out this example for inspiration.

HTML

2.0: Though the syntax looks very different, keep in mind that the differences have good reasons behind them.

ng-directives

Components in the HTML are broken up into two types: (events) & [properties]. They are wrapped in round or square brackets to help both humans and the computer differentiate and optimize for the two types.

(events)

(events) refer to user initiated actions.

[properties]

[properties] now link directly into the DOM properties.

*foreach

!foreach is the proposed replacement for ng-repeat.

<ul>  
<li *foreach="#item in itemService.items"></li>  
</ul>  

#item

Items prefixed with a # can bind directly in the html. No more ng-model.

<input type="text" #userName />  

{{ }}

Double curlys are still in 2.0. See! Not everything will change.

directive names

No more camelCase & snake-case confusion. Now you specify the directive name in the component. Assuming Angular 2.0 follows web component standards, it will require a '-' in the name.

@Component {
    selector: 'myApp-component'
}

Final Thoughts

Angular 2.0 looks fantastic. It's not ready yet, but you can play around with it today. Checkout the github for more. There are also some examples available, such as ng2do.

[edit March 11, 2015] Definitely catch the keynotes from ng-conf 1 & 2 as well as the fresh faced new angular.io site.

If you're looking to prepare for the learning curve, there are a few things you can do now.

• Try out Rob Eisenbergs new framework: Aurelia. It's definitely worth a look.
• Learn more about web components and shadow DOM.
• Use ES6 - (now ES2015?) - with Angular 1.x. There's a great example using ES6 & JSPM here.
• Learn more about Facebook's React.js. A lot of great concepts are stemming from the great work there, including Flux.

At a glance, Angular 1 & 2 have very little in common. 2.0 looks more like a complete overhaul than an episode of Pimp my Framework. So with the learning curve for 1.x, why continue sinking time into a framework that may quickly become vaporware?

[edit March 11, 2015]

Recently, I've had this questioned answered. Seeing that 1.x & 2.x apps can work together with the new router is a strong case towards continuing with Angular 1. I also now see efforts towards a migration path, as well as a lot of similarities in code style.

Embracing change can be a good thing, but you have to do it at the right time. Too early, and your efforts may outweigh the benefits. Too late, and you're, well... you're too late. For now, I remain enthusiastic about 1.x, and for that I thank the fantastic Angular community.