Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

XebiConFr 15 - Brace yourselves Angular 2 is coming

1,060 views

Published on

Après de longs et interminables et TERRIBLES mois d'attente, ce qui devait arriver arrivera ! L'annonce de l'arrivée d'Angular 2 arrive !

Après de longs et interminables et TERRIBLES mois d'attente, ce qui devait arriver arrivera : l'annonce de l'arrivée d'Angular 2 arrive ! Courant mai 2015, la team d'Angular a flaggé la version 2.0.0-alpha.27 (version actuelle : alpha.36) en version dite de "Developer Preview". Bonne nouvelle : les développeurs, c'est nous ! C'est donc l'occasion de faire ensemble un petit tour d'horizon de cette jeune -et non moins prometteuse- mouture de notre framework JS préféré ! Durant 45 minutes, nous examinerons Angular 2 sous toutes ses coutures : ce qu'il apporte de nouveau, comment l'utiliser, le migrer voire même le tester sans le detester ! Ce rapide tour d'horizon servira de tremplin à un atelier pratique et encadré d'environ un heure ou vous prendrez en main le framework.

N'ayez crainte, nul besoin d'être un expert toutes catégories Front confondues, de simples notions de programmation en Javascript suffiront ! Il faudra toutefois vous munir d'un ordinateur sur lequel vous aurez préalablement installé Node.js, Git (optionnel) ainsi que votre IDE préféré.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

XebiConFr 15 - Brace yourselves Angular 2 is coming

  1. 1. Brace yourselves ANGULAR 2 is coming Alexandre Hebert @dijxdream Dmytro Podyachiy @dimapod79
  2. 2. #XebiConFr PRÉSENTATEURS Dmytro Podyachiy @dimapod79 Alexandre Hebert @dijxdream
  3. 3. #XebiConFr TOUR D’HORIZON
  4. 4. #XebiConFr ● Natif : ↗ performances ● Expressif : ↘ boilerplate ↗ productivité ● Orienté mobile : ↗ expérience utilisateur ● Orienté composant : ↗ modularité MOTIVATIONS “The Changing Web”, V. Georgiev
  5. 5. #XebiConFr APPROCHE WEB COMPONENT Respect des nouveaux standards du Web
  6. 6. #XebiConFr ● AtScript ? ● TypeScript ? ● EcmaScript 5, 6 ? ● CoffeeScript ? ANGULAR 2, ENKOIKÇÉKODÉ ?
  7. 7. #XebiConFr TYPESCRIPT
  8. 8. #XebiConFr ● TypeScript avec décorateurs ● ES 6 avec annotations ANGULAR 2, ENKOIKONKODE ? NB : Traceur + SystemJs = Mandatory ● ES 5 avec beaucoup de courage
  9. 9. #XebiConFr ✓ Navigateurs modernes ≈ IE 9 supporté (avec Polyfills) ANGULAR 2, OUÇÉKÇAMARCHE ?
  10. 10. #XebiConFr ✗ BYE BYE QUID D’IE 7 & 8 ?
  11. 11. #XebiConFr BREAKING CHANGES
  12. 12. #XebiConFr THE FIRST ANGULAR 2 EFFECT
  13. 13. #XebiConFr ● Two-way data binding ● Controllers ● Scope, Root scope ● $watch, $observe, $apply ● Digest cycles ● angular.module(... ● ... IL ÉTAIT UNE FOIS ANGULAR 1...
  14. 14. #XebiConFr ● ng-repeat ● ng-model ● ng-class ● ng-if ● ... ET LES DIRECTIVES ?
  15. 15. #XebiConFr ET LES DIRECTIVES ? Enfin presque...
  16. 16. #XebiConFr FINAL ANGULAR 2 EFFECT
  17. 17. #XebiConFr $ ./MIGRATION NG 1>&2 ?
  18. 18. #XebiConFr ● ✗ Controllers / ✓ Directives (et attributs ‘&’) ● Éviter l’usage de $scope : controllerAs ● Privilégier les services ● Utiliser ‘angular.component’ (NG 1.5) et… Basculer en TypeScript ANTICIPATION
  19. 19. #XebiConFr ● Intégrer NG2 avec l’existant ● Adopter un approche opportuniste : ○ Si modification directive => component ○ Modifier les services associés ● Utiliser NG1.5 et le shortcut “.component()” COHABITATION
  20. 20. #XebiConFr Pas de miracles... MIGRATION
  21. 21. #XebiConFr PRODUCTION READY?
  22. 22. #XebiConFr ● Nouvelle version / 15 jours ● Maturité des navigateurs ● Pas de Release Candidate PAS ENCORE ! Version courante : alpha.37 Developer Preview
  23. 23. #XebiConFr GET /ANGULAR/2/RELEASEDATE Très bientôt - Fin 2015
  24. 24. #XebiConFr COMPONENTS Pierre angulaire de l’application Angular 2
  25. 25. #XebiConFr ARBORESCENCE DES COMPOSANTS
  26. 26. #XebiConFr @COMPONENT @Component({ selector: 'my-component' }) class MyComponent { } <div> <my-component></my-component> </div> Decorator Utilisation
  27. 27. #XebiConFr @VIEW (1/3) @Component({ selector: 'my-component' }) @View({ template: "<span>Hello {{message}}!</span>" }) class MyComponent { message:string; constructor() { this.message = 'World'; } } Inline
  28. 28. #XebiConFr @VIEW (2/3) @Component({ selector: 'my-component' }) @View({ template: ` <span> Hello {{message}} ! </span> ` }) class MyComponent { message:string; constructor() { this.message = 'World'; } } Inline multi-ligne
  29. 29. #XebiConFr @VIEW (3/3) @Component({ selector: 'my-component' }) @View({ templateUrl: 'cmp.html' }) class MyComponent { message:string; constructor() { this.message = 'World'; } } Avec template <span>Hello {{message}} !</span> cmp.html
  30. 30. #XebiConFr @VIEW @Component({ selector: 'my-component', templateUrl: 'cmp.html', directives: [] }) class MyComponent { message:string; constructor() { this.message = 'World'; } } dans @Component
  31. 31. #XebiConFr PROPERTIES: [...] Input API
  32. 32. #XebiConFr PROPERTIES <input type="text" value="foo"> Html input: ... type: "text" value: "foo" ... Node
  33. 33. #XebiConFr PROPERTIES <img src="{{myImage}}"> Angular 1 <img [src]="myImage"> Angular 2 <div ng-hide="isHidden">Hidden if isHidden is true </div> <my-component model="{{something}}" ></my-component> <div [hidden]="isHidden">Hidden if isHidden is true </div> <my-component [model]="something"></my-component>
  34. 34. #XebiConFr PROPERTIES Déclaration Utilisation <my-component [model]="data"></my-component> @Component({ selector: 'my-component' }) class MyComponent { @Input() model:any; // <-- declaration des properties show() { console.log(this.model); } }
  35. 35. #XebiConFr EVENTS: (...) Output API
  36. 36. #XebiConFr EVENTS <my-component select="myFunction()" ></my-component> Angular 1 <my-component (select)="myFunction()" ></my-component> Angular 2 <div ng-click="doSomething()" ></div> <div (click)="doSomething()" ></div>
  37. 37. #XebiConFr EVENTS @Component({ selector: 'my-component' }) class MyComponent { @Output() event:EventEmitter = new EventEmitter(); // declaration fireMyEvent(data:string) { this.event.next({value: data}); } } Déclaration Utilisation <my-component (event)=”myFunction($event.value)”></my-component>
  38. 38. #XebiConFr ONE WAY DATA BINDING Two-Way data-binding
  39. 39. #XebiConFr FLUX DE DONNÉES ● Entrées via "bindings" des proprietés ● Sorties via "bindings" des événements
  40. 40. #XebiConFr LOCAL VARIABLES: # <input type="text" #user (keyup)> {{user.value}} <button (click)="user.focus()" >Grab focus</button>
  41. 41. #XebiConFr Les composants sont auto-descriptifs Component = Application
  42. 42. #XebiConFr MODULES La fin d’angular.module(...)
  43. 43. #XebiConFr ES 6 EVERYWHERE !
  44. 44. #XebiConFr PARTAGE DE MODULE export default i => i + MY_CONST; export class MyDirective {}; export const MY_CONST = 1; my-module.js
  45. 45. #XebiConFr UTILISATION D’UN MODULE import myThing, {MyDirective, MY_CONST} from 'my-module'; depends-on-my-module.js
  46. 46. #XebiConFr SERVICES La fin d’ angular.factory(...) et angular.provider(...)
  47. 47. #XebiConFr SERVICE my-service.js export class SlotService { getSlots() { return fetch('http://localhost:8000/xke-slots.json' ) .then((response) => response.json()); } } import {SlotService} from 'slots-service'; ... class MyComponent { // injection des service } Utilisation
  48. 48. #XebiConFr INJECTION DE DÉPENDANCES
  49. 49. #XebiConFr Défauts : ● Cache interne ● Seulement synchrones ● Collision d’espace de noms ● Indivisible du framework Injection de dépendances en Angular 1
  50. 50. #XebiConFr Angular 1 vs Angular 2 Angular 1 Angular 2 Visibilité : Chaîne de prototypes
  51. 51. #XebiConFr @Component({ selector: 'app' }) @View({ template: '<h1>Hello {{ name }} !</h1>' }) class App { constructor() { this.name = 'World'; } } bootstrap(App); Utilisation (Root injector) @Component({ selector: 'app' }) @View({ template: '<h1>Hello {{ name }} !</h1>' }) class App { constructor() { this.name = 'World'; } } bootstrap(App, [NameService]); class NameService { getName() { ... } } @Component({ selector: 'app' }) @View({ template: '<h1>Hello {{ name }} !</h1>' }) class App { constructor(@Inject(NameService) nameService) { this.name = nameService.getName(); } } bootstrap(App, [NameService]); @Component({ selector: 'app' }) @View({ template: '<h1>Hello {{ name }} !</h1>' }) class App { constructor(nameService: NameService) { this.name = nameService.getName(); } } bootstrap(App, [NameService]);
  52. 52. #XebiConFr Utilisation (Providers)
  53. 53. #XebiConFr Utilisation (Providers) @Component({ selector: 'app'}) @View({ template: '<h1>Hello <name-comp></name-comp>!</h1>' }) class App { ... } import {NameService} from 'name-service' ; @Component({ selector: 'name-comp', providers: [NameService] }) @View({ template: '...'}) class NameComponent { constructor(nameService: NameService) { ... } }
  54. 54. #XebiConFr Injecter “à la main” import { Injector } from 'angular2/angular2'; var injector = Injector.resolveAndCreate([Car, Engine, Tires, Doors]); var car = injector.get(Car); class Car { constructor(engine: Engine, tires: Tires, doors: Doors) { ... } } import { bind } from 'angular2/angular2'; var injector = Injector.resolveAndCreate([ bind(Car).toClass(Car), bind(Tires).toClass(Tires), bind(Doors).toClass(Doors), bind(Engine).toClass(OtherEngine) ]);
  55. 55. #XebiConFr DIRECTIVES
  56. 56. #XebiConFr ● directive : décorateur sans vue ● component : directive avec une vue DIRECTIVES
  57. 57. #XebiConFr NG-IF, NG-FOR ... import {NgFor, NgIf} from 'angular2/angular2' ; ... @Component... @View({ template: `Hello <span * ng-if="fl">World</span> ! <div * ng-for="#item of items" >{{item}}</div>`, directives: [NgFor, NgIf] }) export class MyComponent { fl:Boolean = false; items:Array<string> = ['First item', 'Second item', 'Third item']; constructor() { setTimeout(() => this.fl = true, 2000); } }
  58. 58. #XebiConFr NEW ROUTER Inspiré par Ember.Js / RouteReconizer
  59. 59. #XebiConFr 1 ROUTE → 1 COMPOSANT @View({ template: "Contenu page 1" }) export class Route1 {} @View({ template: "Contenu page 2" }) export class Route2 {} my-routes.js
  60. 60. #XebiConFr 1 DÉCORATEUR → N ROUTES import {Route1, Route2} from 'my-routes'; @RouteConfig([ {path: '/', component: Route1}, {path: '/route1', component: Route1, as: 'Route1'}, {path: '/route2', component: Route2, as: 'Route2'} ]) @Component(...) export class App {} my-app.js
  61. 61. #XebiConFr 1 VUE → 1 “OUTLET” <a [router-link]= "['./Route1']" >Page 1</a> <a [router-link]= "['./Route2']" >Page 2</a> <router-outlet></router-outlet> my-app.html
  62. 62. #XebiConFr Questions ?
  63. 63. #XebiConFr WORKSHOP http://github.com/xebia-france/slot-angular2
  64. 64. #XebiConFr TESTS Tester, ce n’est sûrement pas douter !
  65. 65. #XebiConFr ✓ Tests de services : avec Jasmine + Angular ✗ Tests de composants (avec / sans DOM) ✗ Tests bout-en-bout MATURITÉ PAR NIVEAU DE TEST https://angular.io/docs/ts/latest/testing/
  66. 66. #XebiConFr ZONE.JS Le dirty-checking version 2.0
  67. 67. #XebiConFr C’est quoi ? un contexte d'exécution partagé Oui mais… pour faire quoi ? ● éviter les $apply explicites ● un seul $digest cycle ● debugging : des erreurs console intelligibles ZONE.JS D’APPLICATION
  68. 68. #XebiConFr PERFORMANCES Du mieux, en mieux
  69. 69. #XebiConFr time (ms) / # of items source : http://info.meteor.com/blog/comparing-performance-of-blaze-react-angular-meteor-and-angular-2-with-meteor COMPARATIF

×