The evolution of Angular 2 Angular 1 was born in 2009. Since that a lot of web standards are born and supported by most of the browsers natively. So it's time to use the new possibilities. That's how Angular 2 started. It's not just a major update. It's a whole rewrite! The key theme of this talk it to get an overview of Angular 2. I’ll walk you through what you need to know to stay up to date, explain the main concepts behind A2 and the current state. It is rounded off with some practical suggestions on how to proceed today - to make the transition from Angular 1.x to Angular 2.x easier. Original slides with animated gifs can be found here: https://docs.google.com/presentation/d/122ptcLESkfSw8omK9ekG8FksD_zvegGrqOL2GR5PE80/edit?usp=sharing

1. The evolution of
Angular 2

2. @jowe
Johannes Weber
JS Craftsman & Angular Styler

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

4. 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

5. 3 weeks
with Angular
1,500 LOC
6 months
x 3 devs
Before
17,000 LOC
feedback

7. Jan 2010

8. “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

9. https://angular.io

10. 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

11. 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

15. Angular 2
Angular 2.0 is written in TypeScript
You can write your code either in TS, ES6 or ES5

17. 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'];
}
}

18. Annotations
@Component({
selector: 'angular-js-munich-app',
})
@View({
url: 'angular-js-munich.html'
})
customize the components

19. 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

20. Controllers
class AngularJSMunichApp {
todos: [string];
constructor() {
this.todos = ['this', 'usergroup', 'is', 'awesome'];
}
addTodo(title: string) {
this.todos.push(title);
}
}
Holds the components JS logic

21. Controllers in ES5
function AngularJSMunichApp() {
this.todos = ['this', 'usergroup', 'is', 'awesome'];
}
AngularJSMunichApp.prototype.addTodo = function(title) {
this.todos.push(title);
};
Holds the components code

22. @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

23. Template Syntax
Consists of 3 main features
#localVar - Local Variables
[innerText] - Property Binding
(click) - Event Handler

24. Template Syntax
Consists 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>

25. Template Syntax
Nofity 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>

26. Template Syntax
Nofity about errors immediately

27. Features

29. 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

30. There is no migration
path to 2.0

32. There is no migration
path to 2.0
are some

33. Migration path

34. Apply Angular 2 concepts in
Angular 1

35. Step 1 - Alignment
1.
x
1.
x
myApp
A
CB
ED
myApp

36. Step 1 - Alignment
1.
x
1.
x
myApp
A
CB
ED
myApp
Component
Router
ng2-now

37. Step 2 - Migration
1.
x
2.
0
myAppmyApp
A
CB
ED
A
CB
ED

38. ES6
Migrating your code to ES6 is easier than you think.

39. ES5 Angular 1 Service

40. It’s better with ES6!

41. Angular 2 Service

43. 1. Do 5 min quickstart at
angular.io
2. Try sample code at
learnangular2.com
3. Ask questions at gitter.
im/angular/angular

44. BTW: Services, Factories, … ?
• They are all gone!
• Replaced by (ES6) Classes
• simpler definition
• DI still available

45. Upgrade to the latest
stable Version

46. Future of Angular 1.x

47. Shorter release cycles

48. Thank you!
Further Questions?
Tweet me: @jowe

49. Links
Performance
● 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