Jumpstart about the upcoming version of the most important JavaScript framework

1. ANGULARJS 2.0 JUMPSTART

2. About me
Filipe Falcão
Computer Science, JavaScript, Python
+FilipeFalcaoBatista
@FilipeFalcaoS

3. Topics
1. Motivation
2. Old vs new concepts

4. Motivation
1. Performance
“Today,Angular 2 is 5 times faster than Angular 1”
–Misko Hevery

5. Motivation
2.Web standards
Shadow DOM replaces transclusion
ES6 Modules replaces Angular ones

6. Old vs new concepts
1. Components
2.AtScript and ES6
3. Bootstraping
4. Syntax changes and uniformity
5. Change detection

7. Before we get started…
AngularJS 2.0 is currently in Alpha
Preview, so things might/can/
definitely will change

8. Components
@Component ({
selector: 'my-component'
})
@View ({
inline: '<div>Hi from Angular 2</div>'
})
export class MyComponent {
constructor () {
this.name = 'Filipe'
}
sayMyName () {
console.log(‘'My name is ‘ + this.name)
}
}

9. AtScript
Syntax sugar on top of ES6 for meta-data annotations
@Component ({
selector: 'my-component'
})
@View ({
inline: '<div>Hi from Angular 2</div>'
})

10. ES6
Represents the “controller"
export class MyComponent {
constructor () {
this.name = 'Filipe'
}
sayMyName () {
console.log(‘'My name is ‘ + this.name)
}
}

11. Bootstraping in 1.x
1. Create module
2. Declare ng-app
3. Create controller
4. Manage $scope
5. Declare ng-controller
6. Create template

12. Bootstraping in 2.0
1. Create component
2. Create template
3. Bootstrap
4.Transpilation
import bootstrap from 'angular2'
bootstrap(MyComponent)

13. Syntax changes
1. Local variables
<input #name type=“text”>
{{ name.value }}

14. Syntax changes
2. Event handlers
<input #name type=“text”>
<button (click)=“addName($event, name.value)”>Add</button>
<button (dbclick)=“editName($event, name.value)”>Edit</button>

15. Syntax changes
3. Property bindings
<input #name type=“text”>
<span [textContent]=“name.value”></span>

16. Syntax uniformity
1. (event) - for HTML DOM events
2. [property] - for HTML properties

17. Change detection
1.Tree of components
2. Reactive system
3. Directed tree
4. Detection system walks the whole tree
5. Immutable/Observable objects - O(n) to
O(log n)
6. Zone.js

18. More resources
2. ng-conf and ng-vegas
1. angular.io
3. learnangular2.com
4. 2do app by David East

19. THANKS!
Any questions?
You can find me at:
+FilipeFalcaoBatista
@FilipeFalcaoS