Successfully reported this slideshow.

Le futur de AngularJS (2.0)

2 817 vues

Publié le

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

Publié dans : Technologie

Le futur de AngularJS (2.0)

  1. 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. 2 ng-europe
  3. 3. 3 AngularJS 2.0 Quoi de neuf Angular ?
  4. 4. 4 L’environnement Javascript Les nouveautés d’AngularJS 2.0
  5. 5. 5 EcmaScript AngularJS 1.x Javascript EcmaScript 5 Standard AngularJS 2 Javascript EcmaScript 6
  6. 6. 6 EcmaScript 6 EcmaScript 5 EcmaScript 6
  7. 7. 7 TypeScript
  8. 8. 8 TypeScript TypeScript EcmaScript 5
  9. 9. 9 AtScript
  10. 10. 10 AtScript AtScript EcmaScript 6
  11. 11. 11 Le tout
  12. 12. 12 Traceur 5 6
  13. 13. 13 AngularJS 2.0
  14. 14. 14 Objectifs Pourquoi ??? Framework conçu pour le futur du web Meilleure Developer Experience Meilleure performance
  15. 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. 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. 17 Directives Directives are dead, long live directives ! “ ” Saying
  18. 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. 19 Directives Component Directive @ComponentDirective({ selector:'tab-container', directives:[NgRepeat] }) class TabContainer { constructor(panes:Query<Pane>) { this.panes = panes; } select(selectedPane:Pane) { ... } }
  20. 20. 20 Hécatombe AngularJS 1.x AngularJS 2 Controller Directive ES6 Module $scope JqLite angular.module Raw DOM
  21. 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. 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. 23 Merci
  24. 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

×