Upload
clement-dubois
View
1.171
Download
0
Embed Size (px)
Citation preview
1
C’est moi !
Consultant chez Octo Technology depuis 2013
Développeur Web AngularJS
Mais aussi Ruby On Rails et Symfony 2
Clément Dubois
@Clement_D
2
ng-europe
3
AngularJS 2.0
Quoi de neuf Angular ?
4
L’environnement
Javascript
Les nouveautés
d’AngularJS 2.0
5
EcmaScript
AngularJS1.x
Javascript EcmaScript 5
Standard
AngularJS 2 Javascript EcmaScript 6
6
EcmaScript 6
EcmaScript 5 EcmaScript 6
7
TypeScript
8
TypeScript
EcmaScript 5
TypeScript
9
AtScript
10
AtScript
AtScript
EcmaScript 6
11
Le tout
12
Traceur
5
6
13
AngularJS 2.0
14
Objectifs
Pourquoi ???
Framework conçu pour le futur du web
Meilleure Developer Experience
Meilleure performance
15
Syntaxe
<div ng-controller="SantaTodoController">
<input type="text" ng-model="newTodoTitle">
<button ng-click="addTodo()">+</button>
<tab-container>
<tab-pane title="Tobias">
<div ng-repeat="todo in todosOf('tobias')">
<input type="checkbox"
ng-model="todo.done">
{{todo.title}}
<button ng-click="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...
AngularJS 1.3
ng-controller="SantaTodoController"
ng-model="newTodoTitle"
ng-click="addTodo()"
ng-repeat="todo in todosOf('tobias')"
ng-click="deleteTodo(todo)"
ng-model="todo.done"
{{todo.title}}
16
Syntaxe
AngularJS 2.0
<div>
<input type="text" [value]="newTodoTitle">
<button (click)="addTodo()">+</buton>
<tab-container>
<tab-pane title="Good kids">
<div [ng-repeat|todo]="todosOf('good')">
<input type="checkbox"
[checked]="todo.done">
{{todo.title}}
<button (click)="deleteTodo(todo)">
X
</button>
</div>
</tab-pane>
...
[value]="newTodoTitle"
(click)="addTodo()"
[ng-repeat|todo]="todosOf('good')"
[checked]="todo.done"
{{todo.title}}
(click)="deleteTodo(todo)"
17
Directives
Directives are dead, long live directives !
“
”Saying
18
Utilisation de AtScript
Directives
La fin du DDO
Decorator DirectiveAjout de comportement au HTML
Ex : ng-show
Template DirectiveHTML as template
Ex : ng-if, ng-repeat
Component DirectiveController + View
19
Directives
@ComponentDirective({
selector:'tab-container',
directives:[NgRepeat]
})
class TabContainer {
constructor(panes:Query<Pane>) {
this.panes = panes;
}
select(selectedPane:Pane) { ... }
}
Component Directive
20
Hécatombe
Controller
Directive
ES6 Module
$scope
JqLite
angular.module
Raw DOM
AngularJS 1.x AngularJS 2
21
Les standards du web évoluent
AngularJS 2.0 évolus avec le web
Des changements majeurs
Pas de rétrocompatibilité
Ça va encore beaucoup bouger
En bref
22
Au vu des changements majeurs : OUI
On fait quoi ?
On va devoir tout réécrire en 2.0 ?!
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
Merci
24
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
Quelques liens