Slides de ma présentation du 27/11/2014 au meetup Angular à l'école 42. Je parle des nouveautés annoncées à ngEurope pour AngularJS 2.0 ainsi que de l'environnement javascript dans lequel le framework sera écrit (AtScript + ES6 + Traceur). mon twitter : @Clement_D

1. 1
C’est moi !
Clément Dubois
@Clement_D
Consultant chez Octo Technology depuis 2013
Développeur Web AngularJS
Mais aussi Ruby On Rails et Symfony 2

2. 2
ng-europe

3. 3
AngularJS 2.0
Quoi de neuf Angular ?

4. 4
L’environnement
Javascript
Les nouveautés
d’AngularJS 2.0

5. 5
EcmaScript
AngularJS
1.x
Javascript EcmaScript 5
Standard
AngularJS 2 Javascript EcmaScript 6

6. 6
EcmaScript 6
EcmaScript 5 EcmaScript 6

7. 7
TypeScript

8. 8
TypeScript
TypeScript
EcmaScript 5

9. 9
AtScript

10. 10
AtScript
AtScript
EcmaScript 6

11. 11
Le tout

12. 12
Traceur
5
6

13. 13
AngularJS 2.0

14. 14
Objectifs
Pourquoi ???
Framework conçu pour le futur du web
Meilleure Developer Experience
Meilleure performance

15. 15
Syntaxe
AngularJS 1.3
ng-controller="SantaTodoController"
<div SantaTodoController">
<input type="text" newTodoTitle">
<button ng-click="addTodo()">+</button>
<tab-container>
<tab-pane title="Tobias">
<div tobias')">
<input type="checkbox"
ng-model="todo.done">
done"
{{todo.title}}
<button todo)">
X
</button>
</div>
</tab-pane>
...
ng-model="newTodoTitle"
addTodo()"
ng-repeat="todo in todosOf('tobias')"
ng-click="deleteTodo(todo)"

16. 16
Syntaxe
AngularJS 2.0
<div>
<input type="text" newTodoTitle">
<button addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div good')">
<input type="checkbox"
done">
<button todo)">
X
</button>
</div>
</tab-pane>
...
[value]="newTodoTitle"
(click)="addTodo()"
[ng-repeat|todo]="todosOf('good')"
[checked]="todo.done"
{{todo.title}}
(click)="deleteTodo(todo)"

17. 17
Directives
Directives are dead,
long live directives !
“
”
Saying

18. 18
Utilisation de AtScript
Directives
La fin du DDO
Decorator Directive
Ajout de comportement au HTML
Ex : ng-show
Component Directive
Template Directive
HTML as template
Ex : ng-if, ng-repeat
Controller + View

19. 19
Directives
Component Directive
@ComponentDirective({
selector:'tab-container',
directives:[NgRepeat]
})
class TabContainer {
constructor(panes:Query<Pane>) {
this.panes = panes;
}
select(selectedPane:Pane) { ... }
}

20. 20
Hécatombe
AngularJS 1.x AngularJS 2
Controller
Directive
ES6 Module
$scope
JqLite
angular.module
Raw DOM

21. 21
En bref
Les standards du web évoluent
AngularJS 2.0 évolus avec le web
Des changements majeurs
Pas de rétrocompatibilité
Ça va encore beaucoup bouger

22. 22
On fait quoi ?
On va devoir tout réécrire en 2.0 ?!
Au vu des changements majeurs : OUI
J’ai combien de temps pour le voir arriver ?
Sortie au mieux fin 2015 Maintenance 1.x : 3 ans
Pas de Angular sur mon nouveau projet ?
Répond au besoin ? Durée de vie ?
Keep Going !

23. 23
Merci

24. 24
Quelques liens
Hello World Angular 2.0 : http://bit.ly/15FR75R
All About Angular 2.0 : http://bit.ly/1Ay4dQ5
Typing in AtScript, TypeScript and Flow : http://bit.ly/1zZQ1LY
Quelques nouveautés ECMASCRIPT 6 : http://bit.ly/1tosIa4
AtScript Primer : http://bit.ly/1xPnh5s
AngularJS Pour aujourd’hui et pour demain : http://bit.ly/1Go7P7L
Ngeurope AtScript : http://bit.ly/115fgAa
Ngeurope AngularJs2.0 : http://bit.ly/1wwXqP3