advertisement

XebiConFr 15 - Brace yourselves Angular 2 is coming

44 %
56 %
advertisement
Information about XebiConFr 15 - Brace yourselves Angular 2 is coming

Published on November 27, 2015

Author: XebiaFrance

Source: slideshare.net

advertisement

1. Brace yourselves ANGULAR 2 is coming Alexandre Hebert @dijxdream Dmytro Podyachiy @dimapod79

2. #XebiConFr PRÉSENTATEURS Dmytro Podyachiy @dimapod79 Alexandre Hebert @dijxdream

3. #XebiConFr TOUR D’HORIZON

4. #XebiConFr ● Natif : ↗ performances ● Expressif : ↘ boilerplate ↗ productivité ● Orienté mobile : ↗ expérience utilisateur ● Orienté composant : ↗ modularité MOTIVATIONS “The Changing Web”, V. Georgiev

5. #XebiConFr APPROCHE WEB COMPONENT Respect des nouveaux standards du Web

6. #XebiConFr ● AtScript ? ● TypeScript ? ● EcmaScript 5, 6 ? ● CoffeeScript ? ANGULAR 2, ENKOIKÇÉKODÉ ?

7. #XebiConFr TYPESCRIPT

8. #XebiConFr ● TypeScript avec décorateurs ● ES 6 avec annotations ANGULAR 2, ENKOIKONKODE ? NB : Traceur + SystemJs = Mandatory ● ES 5 avec beaucoup de courage

9. #XebiConFr ✓ Navigateurs modernes ≈ IE 9 supporté (avec Polyfills) ANGULAR 2, OUÇÉKÇAMARCHE ?

10. #XebiConFr ✗ BYE BYE QUID D’IE 7 & 8 ?

11. #XebiConFr BREAKING CHANGES

12. #XebiConFr THE FIRST ANGULAR 2 EFFECT

13. #XebiConFr ● Two-way data binding ● Controllers ● Scope, Root scope ● $watch, $observe, $apply ● Digest cycles ● angular.module(... ● ... IL ÉTAIT UNE FOIS ANGULAR 1...

14. #XebiConFr ● ng-repeat ● ng-model ● ng-class ● ng-if ● ... ET LES DIRECTIVES ?

15. #XebiConFr ET LES DIRECTIVES ? Enfin presque...

16. #XebiConFr FINAL ANGULAR 2 EFFECT

17. #XebiConFr $ ./MIGRATION NG 1>&2 ?

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. #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. #XebiConFr Pas de miracles... MIGRATION

21. #XebiConFr PRODUCTION READY?

22. #XebiConFr ● Nouvelle version / 15 jours ● Maturité des navigateurs ● Pas de Release Candidate PAS ENCORE ! Version courante : alpha.37 Developer Preview

23. #XebiConFr GET /ANGULAR/2/RELEASEDATE Très bientôt - Fin 2015

24. #XebiConFr COMPONENTS Pierre angulaire de l’application Angular 2

25. #XebiConFr ARBORESCENCE DES COMPOSANTS

26. #XebiConFr @COMPONENT @Component({ selector: 'my-component' }) class MyComponent { } <div> <my-component></my-component> </div> Decorator Utilisation

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. #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. #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. #XebiConFr @VIEW @Component({ selector: 'my-component', templateUrl: 'cmp.html', directives: [] }) class MyComponent { message:string; constructor() { this.message = 'World'; } } dans @Component

31. #XebiConFr PROPERTIES: [...] Input API

32. #XebiConFr PROPERTIES <input type="text" value="foo"> Html input: ... type: "text" value: "foo" ... Node

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. #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. #XebiConFr EVENTS: (...) Output API

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. #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. #XebiConFr ONE WAY DATA BINDING Two-Way data-binding

39. #XebiConFr FLUX DE DONNÉES ● Entrées via "bindings" des proprietés ● Sorties via "bindings" des événements

40. #XebiConFr LOCAL VARIABLES: # <input type="text" #user (keyup)> {{user.value}} <button (click)="user.focus()" >Grab focus</button>

41. #XebiConFr Les composants sont auto-descriptifs Component = Application

42. #XebiConFr MODULES La fin d’angular.module(...)

43. #XebiConFr ES 6 EVERYWHERE !

44. #XebiConFr PARTAGE DE MODULE export default i => i + MY_CONST; export class MyDirective {}; export const MY_CONST = 1; my-module.js

46. #XebiConFr SERVICES La fin d’ angular.factory(...) et angular.provider(...)

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. #XebiConFr INJECTION DE DÉPENDANCES

49. #XebiConFr Défauts : ● Cache interne ● Seulement synchrones ● Collision d’espace de noms ● Indivisible du framework Injection de dépendances en Angular 1

50. #XebiConFr Angular 1 vs Angular 2 Angular 1 Angular 2 Visibilité : Chaîne de prototypes

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. #XebiConFr Utilisation (Providers)

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. #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. #XebiConFr DIRECTIVES

56. #XebiConFr ● directive : décorateur sans vue ● component : directive avec une vue DIRECTIVES

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. #XebiConFr NEW ROUTER Inspiré par Ember.Js / RouteReconizer

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. #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. #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. #XebiConFr Questions ?

63. #XebiConFr WORKSHOP http://github.com/xebia-france/slot-angular2

64. #XebiConFr TESTS Tester, ce n’est sûrement pas douter !

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. #XebiConFr ZONE.JS Le dirty-checking version 2.0

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. #XebiConFr PERFORMANCES Du mieux, en mieux

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

#xebiconfr presentations

Add a comment

Related pages

Brace Yourselves...Racing is Coming - YouTube

Brace Yourselves...Racing is Coming ... 15:54 GRID Autosport ... GRID 2 Uncovered ...
Read more

Brace yourself | Meme Generator

15 Brace yourself ... Create a Brace yourself image. 1; 2; 3; 4; 5; 6; 7 ...
Read more

Imminent Ned / Brace Yourselves, Winter is Coming | Know ...

Imminent Ned (also know as “Winter is Coming”) is an image macro series featuring the character Eddard “Ned” Stark from the HBO series ...
Read more

Brace Yourselves, The Feminazis Are Coming - YouTube

Brace Yourselves, The Feminazis Are Coming ReviewTechUSA. Subscribe Subscribed Unsubscribe 426,453 426K. ... 15. by ReviewTechUSA 52,530 views. 6:15
Read more

The Dentist 2: Brace Yourself (1998) - Rotten Tomatoes

... photos and cast info for The Dentist 2: Brace Yourself. ... $15.0M: 64%: Spectre: $5.5M: 66%: The ... The Peanuts Movie: $3.6M: 98%: Spotlight: $2.8M ...
Read more

Brace yourselves: a Fallout 4 Xbox One bundle is coming

... Fallout 4, is coming this November. ... 2 hours ago. Major update to LinkedIn App launched: ... Brace yourselves: ...
Read more

Dan Wahlin - My Thoughts on AngularJS 1.3 and 2.0

I'll definitely be keeping a close eye on Angular 2.0 though over the ... Yes, AngularJS 2.0 appears to ... and future risks in pinning yourself to the ...
Read more

Brace yourself, bikini season is coming (58 photos)

Brace yourself, bikini season is coming (58 photos) Share. ... 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34 ...
Read more