Why Angular 2 is going to be successful?

I have a very simple answer to this burning question – because it is built by the same people who built Angular 1.

Have you considered why TypeScript has been successful even while coming from Microsoft? Because it is designed (and built) by Anders Hejlsberg, the language designer of C#. But why is C# successful – because Anders also designed Turbo Pascal. But why was Turbo Pascal successful – OK, let’s stop here, we are going way too far down the rabbit hole.

Yes, it is that simple. The same team that built Angular 1 is working on 2, and they are bringing all their hard-learned knowledge with them. They are not going to repeat their mistakes.

The team is also entirely dedicated and open to the community. First, they are posting everything they are doing in the weekly meeting notes. Second, they are collaborating closely with the community to deliver integration with two widely popular frameworks for mobile app development – Ionic (for hybrid) and NativeScript (for native).

Why is Angular 2 the future?

Allow me to list the items that I personally believe are done well in Angular 2.

SIMPLE, BUT NOT SIMPLISTIC

Angular 2 framework is simpler than Angular 1 and has far fewer concepts, making it easier to understand. But being simple does not mean that it is less powerful – just the opposite.

For example in Angular 2 everything is encapsulated in a Component, no need for Controller because the Component acts as one. No need for$scope or ViewModels. Even the View can be embedded in theComponent using decorators and multi-line strings.

Here is a definition of a simple Component in Angular 2 (written in TypeScript):

@Component({
  selector: 'messenger'
})
@View({
  template: '<div>Hello, {{message}}</div>'
})
class Messenger {
  message: string;

  constructor() {
    this.message = 'World';
  }
}

The @Component decorator defines a selector that matches the messenger tag similar to ng-controller in Angular 1. The component’s view defined in @View will be bound and inserted in the elements matched by the selector. The binding context used when generating the view is theCompoment itself, so its properties are accessible in the Mustache template defined in the @View.

MOBILE FIRST

Angular 2 is designed from the ground-up for mobile and optimized for memory efficiency and less CPU cycles. It has first-class support for touch events and gestures that work across all devices. All the benchmarks that Angular team is exercising are public and part of the GitHub repo, so everyone can look at them and even run them locally.

Speaking about performance recently the Meteor team did a front-end frameworks performance shoot-out and Angular 2 came out first, overtaking React.

BETTER FOUNDATIONS

The main building blocks of Angular 2 are just better.

ROUTER

Take for example the Router. It is declarative and way more flexible. Here is an example router configuration:

@Component({selector: 'inbox-app'})
@View({templateUrl: "inbox-app.html", directives: [RouterOutlet, RouterLink]})
@RouteConfig([
  new Route({path: '/', component: InboxCmp, as: 'Inbox'}),
  new Route({path: '/drafts', component: DraftsCmp, as: 'Drafts'}),
  new Route({path: '/detail/:id', component: InboxDetailCmp, as: 'DetailPage'})
])
export class InboxApp {
}

The route configuration is streamlined and each route maps to aComponent. If you want to dive deep into 2.0 routing, I would recommendthis session from the recent AngularConnect conference.

The router itself is even backported to Angular 1.

DEPENDENCY INJECTION

Another building block that has improved is the Dependency Injection. Let’s look at the following example:

@Injectable()
export class TodoService {
}

@Component({selector: 'todo-app'})
@View({templateUrl: 'todo.html'})
class TodoApp {
  constructor(public todoService: TodoService) {}
}

Using TypeScript’s type annotation makes obsolete the need for “magic” strings. Combined with the declarative nature of decorators, we end up with something that we can easily reason about.

Another great feature of the Dependency Injection system is that it ishierarchical. This is especially useful when we have complex Componenttrees and want a clear separation between component boundaries.

DATA-BINDING

Data-binding is another core aspect of the framework that has evolved in Angular 2. The change detection implementation was rethought from the ground up, eliminating all issues currently present in Angular 1.

The most notable improvement to data-binding is that the graph of change detectors in 1 is transformed to a tree which reduces the complexity of determining when a change should be applied, thus resulting in better performance. Combined with Observable or Immutable objects you can even further optimize the change detection strategy

Also listening to the community feedback, the Angular team implemented two-way data-binding using the well known ng-model directive that can be used in Angular 2 forms.

TEMPLATES

Templates are another part that has improved from the previous version. Yes, for the untrained eye, it might look like just a “facelift” (using [], (), [()], # and *), but actually the whole template system was redesigned from the ground up to support web components and even native elements. This means that popular frameworks like NativeScript can plug in their own Renderer and, all of the sudden, Angular will render a cross-platform native UI for iOS and Android.

Decoupling the rendering pipeline from other parts of the frameworks allows for other interesting scenarios like server-side rendering.

TYPESCRIPT

I’m a big fan of TypeScript and I believe it is the right way to solve the complex problem of building large scale applications in JavaScript with a team of developers. TypeScript is first-class citizen in the Angular 2 ecosystem but how did it end up there?

Earlier this year, the TypeScript and Angular teams met to discuss the possible ways of using TypeScript as a substitution for AtScript, which resulted in shifting the priorities for the TypeScript team for the better. Decorators were implemented along with plenty of other ES6 features.

The Angular team jumped on it as well and refactored a big portion of the codebase into an idiomatic TypeScript. The end result was a better TypeScript and a better Angular.

Being first-class means not only that the source of the framework is written in TypeScript, but the documentation and tutorials will have TypeScript examples as well. Also Angular’s npm package comes with TypeScript declaration files (.d.ts), which will ease the framework’s getting started experience if your editor supports TypeScript.

JavaScript (ES5) will also be supported as first-class citizen in Angular 2 in the form of a nice, fluent API for component definitions.

Still running away from TypeScript? There is absolutely no reason to. EvenBurke Holland loves TypeScript, so you will love it too.

MIGRATION FROM ANGULAR 1

When Angular 2 was announced there was no clear migration path from Angular 1. The community immediately criticized this, and the Angular team listened. This is how ngUpgrade was born.

ngUpgrade is a collection of best practices, guides and interop strategies covering how you can augment your existing Angular 1.x apps so that they are 2.0 friendly. The community also did not stand still and introduced ng-forward, which is a concrete implementation of an upgrade strategy.

If you are interested in using those tools and guidelines you can watch this talk.