The evolution of Angular 2

@joweJohannes Weber

JS Craftsman & Angular Styler

Disclaimer

Angular 2 is still on a developer preview!Things will/might change!

1. History of Angular

2. Get an overview of Angular 2.0

3. Angualr 2 Features

4. Bridging the gap Between 1.x and 2

Outline

3 weeks

with Angular

1,500 LOC

6 monthsx 3 devs

Before

17,000 LOC

feedback

Jan 2010

“We’re designing Angular 2 for the way the world will look when we believe folks will use it. In particular, this means targeting modern browsers and using ECMAScript 6.”

from the official Angular announcement

https://angular.io

Angular 2

• For “evergreen” Browsers

• Chrome, Firefox, Opera, Safari and IE11

• Chrome on Android, iOS6+, Windows Phone 8+, FF mobile

• Instrumented

• Angular-wide logging service

• diary.js

Angular 2• Modular

• Every piece of Angular 2 is optional & replacable• Mobile first, Offline support

• Simplify• Directives• Templating• IDE can validate and analyze

• Performance• Improve first load time with prerendering• Superfast change detection

Angular 2

Angular 2.0 is written in TypeScript

You can write your code either in TS, ES6 or ES5

Components

<angular-js-munich-app></angular-js-munich-app>

@Component({ selector: 'angular-js-munich-app',})@View({ url: 'angular-js-munich.html'})class AngularJSMunichApp { todos: [string]; constructor() { this.todos = ['this', 'usergroup', 'is', 'awesome']; }}

Annotations

@Component({ selector: 'angular-js-munich-app',})@View({ url: 'angular-js-munich.html'})

customize the components

Annotations in ES5

// Constructor function

function AngularJSMunichApp() { }

// Annotations attached to function

AngularJSMunichApp.annotations = [

new Component({ selector: 'angular-js-munich-app' }),

new View({ url: 'angular-js-munich.html' })

];

customize the components

Controllers

class AngularJSMunichApp { todos: [string];

constructor() { this.todos = ['this', 'usergroup', 'is', 'awesome']; }

addTodo(title: string) { this.todos.push(title); }}

Holds the components JS logic

Controllers in ES5

function AngularJSMunichApp() { this.todos = ['this', 'usergroup', 'is', 'awesome'];}

AngularJSMunichApp.prototype.addTodo = function(title) { this.todos.push(title);};

Holds the components code

@Component({ selector: 'angular-js-munich-app',})@View({ url: 'angular-js-munich.html'})class AngularJSMunichApp { todos: [string]; constructor() { this.todos = ['this', 'usergroup', 'is', 'awesome']; }}

<angular-js-munich-app></angular-js-munich-app>

Components

Template SyntaxConsists of 3 main features

#localVar - Local Variables

[innerText] - Property Binding

(click) - Event Handler

Template SyntaxConsists of 3 main features

<!-- # creates a local variable inside the template --><input #textbox>

<!-- (event) registers an event handler --><button (click)="addTodo(textbox.value)"> Add </button>

<!-- [property] binds a value to a property of a DOM element or component --><div [innertext]="textbox.value"></div>

Template SyntaxNofity about errors immediately

<!-- # creates a local variable inside the template --><input #textbox>

<!-- (event) registers an event handler --><button (clikc)="addtodo(textbox.value)"> Add </button>

<!-- [property] binds a value to a property of a DOM element or component --><div [innertext]="textBox.value"></div>

Template SyntaxNofity about errors immediately

Features

Features...● HTTP

○ retry○ danymic Error handling○ short polling, etc.

● WebSockets● Broswer Storage

○ IndexedDB○ LocalStorage○ Session Storage

● Service Workers

● Angular 2 Data handling● Observables● Change Detection

○ Immutable, Mutable & Observable

● Promises vs. Observables● Forms● Formatters

There is no migration path to 2.0

There is no migration path to 2.0

are some

Migration path

Apply Angular 2 concepts in

Angular 1

Step 1 - Alignment

1.x

1.x

myApp

A

CB

ED

myApp

Step 1 - Alignment

1.x

1.x

myApp

A

CB

ED

myAppComponentRouter

ng2-now

Step 2 - Migration

1.x

2.0

myAppmyApp

A

CB

ED

A

CB

ED

ES6Migrating your code to ES6 is easier than you think.

ES5 Angular 1 Service

It’s better with ES6!

Angular 2 Service

1. Do 5 min quickstart at angular.io

2. Try sample code at learnangular2.com

3. Ask questions at gitter.im/angular/angular

BTW: Services, Factories, … ?

• They are all gone!

• Replaced by (ES6) Classes

• simpler definition

• DI still available

Upgrade to the latest stable Version

Future of Angular 1.x

Shorter release cycles

Thank you!

Further Questions?Tweet me: @jowe

LinksPerformance

● Gleb’s Angular 1.x performance guide bit.ly/ng-gleb

● Is Angular Fast Enough? whlp.ly/ng-fast-enough

● React + Angular = Speed bit.ly/ng-react-speed

Learning● A1 Link Collection https://goo.gl/86V7k● A2 Link Collection bit.ly/ng2-links ● Angular 2 mental model bit.ly/ng2-mental-

model ● Igor’s ng-conf keynote bit.ly/ngconf-igor ● Misko’s ng-conf keynote bit.ly/ngconf-misko ● Simple examples learnangular2.com● Core concept behind A2 http://goo.gl/GTfKii● Exploring ES6 Classes in A1 http://goo.

gl/znSSs1

Ability to Reason● Component-Driven Angular https://goo.

gl/EoCcfL

Talks● ng-conf 2015 Talks https://goo.gl/nx8YR3● ng-vegas 2015 Talks https://goo.gl/RR6rCU

Rendering● Isomorphic Angular whlp.ly/isomorphic-

angular● NG2 Rendering Architecture https://goo.

gl/mcFjSe● NG2 Server Rendering whlp.ly/ng2-server-

rendering● NG2 Native Script https://goo.gl/BVADyc

Migration● Angular 1.3 meets 2.0 bit.ly/ngconf-migration ● NG2 Now bit.ly/ng2-now

Angular 2 Change Detection● Change Detection in A2 http://goo.gl/j3H8bV● Change Deteciton Draft https://goo.gl/80tmGF● Untra Fast CD https://goo.gl/ndfulh● CD reinvented https://goo.gl/ffomFS

Typescript● Difference between Annotations and Decorators

http://goo.gl/KJE4cx● Learn TypeScript http://goo.gl/HSBT1Q