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é.

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

45. #XebiConFr
UTILISATION D’UN MODULE
import myThing, {MyDirective, MY_CONST} from 'my-module';
depends-on-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