1
C’est moi !
Clément Dubois
@Clement_D
Consultant chez Octo Technology depuis 2013
Développeur Web AngularJS
Mais a...
2
ng-europe
3
AngularJS 2.0
Quoi de neuf Angular ?
4
L’environnement
Javascript
Les nouveautés
d’AngularJS 2.0
5
EcmaScript
AngularJS
1.x
Javascript EcmaScript 5
Standard
AngularJS 2 Javascript EcmaScript 6
6
EcmaScript 6
EcmaScript 5 EcmaScript 6
7
TypeScript
8
TypeScript
TypeScript
EcmaScript 5
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
AngularJS 1.3
ng-controller="SantaTodoController"
<div SantaTodoController">
<input type="text" newTodoTit...
16
Syntaxe
AngularJS 2.0
<div>
<input type="text" newTodoTitle">
<button addTodo()">+</buton>
<tab-container>
<tab-...
17
Directives
Directives are dead,
long live directives !
“
”
Saying
18
Utilisation de AtScript
Directives
La fin du DDO
Decorator Directive
Ajout de comportement au HTML
Ex : ng-show
...
19
Directives
Component Directive
@ComponentDirective({
selector:'tab-container',
directives:[NgRepeat]
})
class Ta...
20
Hécatombe
AngularJS 1.x AngularJS 2
Controller
Directive
ES6 Module
$scope
JqLite
angular.module
Raw DOM
21
En bref
Les standards du web évoluent
AngularJS 2.0 évolus avec le web
Des changements majeurs
Pas de rétrocompati...
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 ...
23
Merci
24
Quelques liens
Hello World Angular 2.0 : http://bit.ly/15FR75R
All About Angular 2.0 : http://bit.ly/1Ay4dQ5
Typing...
of 24

Le futur de AngularJS (2.0)

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
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Le futur de AngularJS (2.0)

  • 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

Related Documents