Angular 2 : le réveil de la force

1. Angular 2Angular 2 Le reveil de la forceLe reveil de la force #BzhCmp #Ng2BzhCmp BreizhCamp 2015 #BzhCmp

2. BreizhCamp 2015 #BzhCmp Nicolas PennecNicolas Pennec @NicoPennec@NicoPennec Full-Stack Web Developer Co-Fondateur de @RennesJS #Ng2BzhCmp #BzhCmp

3. BreizhCamp 2015 #BzhCmp Grégory HoullierGrégory Houllier @ghoullier@ghoullier Architecte Web, passionné par le Front-End Co-Fondateur de @RennesJS #Ng2BzhCmp #BzhCmp

4. @RennesJS@RennesJS rennesjs.orgrennesjs.org meetup.com/RennesJS/meetup.com/RennesJS/ #Ng2BzhCmp #BzhCmp Meetup le dernier jeudi de chaque mois 25/06/2015 à Epitech

5. Angular 1.XAngular 1.X #Ng2BzhCmp #BzhCmp Framework JS MV* Projet open-source porté par Google Version 1.X très populaire, 1er sur GitHub (39K stars) Concepts : Orienté Single Page Application (SPA) Étendre le langage HTML (directives) Data Binding bi-directionnel Dependency Injection, $scope, ...

6. Annonce d'Angular 2Annonce d'Angular 2 #Ng2BzhCmp #BzhCmp Octobre 2014: Première annonce Rupture de concepts Pas de rétrocompatibilité Nouveau langage (AtScript)

7. Annonce d'Angular 2Annonce d'Angular 2 #Ng2BzhCmp #BzhCmp Mars 2015 Rétropédalage de Google Opération séduction des devs Roadmap de la branche 1.X Nouveau langage (TypeScript)

8. PhilosophiePhilosophie #Ng2BzhCmp #BzhCmp Apprendre des erreurs d’Angular 1 2-way data binding, dirty-checking, $scope, ... Se baser sur les futurs standards du web WebComponents ES6 / ES7 / TypeScript* EverGreen Browsers Emulation due à la concurrence React et Ember Amélioration des performances

9. ES6, ES7, TypeScriptES6, ES7, TypeScript #Ng2BzhCmp #BzhCmp ES5 ES6 ES7 TS ES5 : ES6 : ES7 : draft TS : es5.github.io git.io/es6features typescriptlang.org Traceur: github.com/google/traceur-compiler

10. #Ng2BzhCmp #BzhCmp Surcouche à ES6/ES7 Créé par Microsoft Collaboration avec Google Merge avec AtScript Actuellement en version 1.5-beta

11. Exemple TypeScriptExemple TypeScript #Ng2BzhCmp #BzhCmp import { Annotation } from 'angular2/angular2'; import { Api as ApiSpeakers } from './api/speakers'; @Annotation({ property: 'value' }) class Talk { speakers: Array<String>; thread: String; constructor(thread: String, api: ApiSpeakers) { this.thread = thread; api.get().then((speakers) => { this.speakers = speakers; }); } } TS

12. Production Ready ?Production Ready ? #Ng2BzhCmp #BzhCmp NO!NO!

13. Production Ready ?Production Ready ? #Ng2BzhCmp #BzhCmp Version Alpha "Developer Preview" Solution instable API changeante Documentation en cours Pas de Roadmap

14. PoC Ready ?PoC Ready ? #Ng2BzhCmp #BzhCmp YES!YES!

15. BreizhCamp 2015 Ce qui va changer ?Ce qui va changer ? #Ng2BzhCmp #BzhCmp Angular 1 Controller Service Module $scope jQlite Directive Dependency Injection Angular 2 Controller Service Module $scope jQlite Directive Dependency Injection (TypeScript) Component Classes (ES6)

16. BreizhCamp 2015 #BzhCmp Directives/ComponentsDirectives/Components #Ng2BzhCmp #BzhCmp Directives Angular 1.X Directives Angular 2.X Components Angular 2.X Etendre le DOM Encapsule un template

17. BreizhCamp 2015 #BzhCmp A quoi ça va ressembler?A quoi ça va ressembler? #Ng2BzhCmp #BzhCmp

18. BreizhCamp 2015 #BzhCmp Bootstrap your codeBootstrap your code #Ng2BzhCmp #BzhCmp <!DOCTYPE html> <html> <head> <title>Angular 2 - BreizhCamp</title> <script src="//github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.90/traceur-runtime.js"> { bootstrap } { MyComponent } </scrip <script src="//jspm.io/system@0.16.js"></script> <script src="//code.angularjs.org/2.0.0-alpha.23/angular2.dev.js"></script> </head> <body> <my-component></my-component> <script type="module"> import from 'angular2/angular2'; import from 'app/my-component'; bootstrap(MyComponent); </script> </body> </html> HTML

19. BreizhCamp 2015 #BzhCmp Component (1/3)Component (1/3) #Ng2BzhCmp #BzhCmp <my-component></my-component> import { Component, View } from 'angular2/angular2'; @Component({ selector: 'my-component' }) @View({ template: '<div>Hello, BreizhCamp</div>' }) export class MyComponent { } HTML TS

20. BreizhCamp 2015 #BzhCmp Component (2/3)Component (2/3) #Ng2BzhCmp #BzhCmp import { Component, View } from 'angular2/angular2'; @Component({ selector: 'my-component' }) @View({ template: '<div>Hello, {{message}}</div>' }) export class MyComponent { constructor() { this.message = 'BreizhCamp'; } } <my-component></my-component> HTML TS

21. BreizhCamp 2015 #BzhCmp Component (3/3)Component (3/3) #Ng2BzhCmp #BzhCmp import { Component, View } from 'angular2/angular2'; @Component({ selector: 'my-component', properties: { message: 'msg' } }) @View({ template: '<div>Hello, {{message}}</div>' }) export class MyComponent { } <my-component msg="BreizhCamp"> </my-component> HTML TS

22. BreizhCamp 2015 #BzhCmp Directive (1/2)Directive (1/2) #Ng2BzhCmp #BzhCmp import { Directive } from 'angular2/angular2'; @Directive({ selector: '[tooltip]', properties: { text: 'tooltip' }, hostListeners: { mouseover: 'display()' } }) export class Tooltip { display() { console.log(this.text); } } <div tooltip="Hello BreizhCamp"> Hover Me! </div> HTML TS

23. BreizhCamp 2015 #BzhCmp Directive (2/2)Directive (2/2) #Ng2BzhCmp #BzhCmp import { Component, View } from 'angular2/angular2'; import { Tooltip } from './tooltip'; @Component({ selector: 'my-component', properties: { message: 'msg' } }) @View({ template: '<div tooltip="Yo!">Hi, {{message}}</div>', directives: [Tooltip] }) export class MyComponent {} <my-component msg="BreizhCamp"> </my-component> HTML TS

24. Templating (1/2)Templating (1/2) #Ng2BzhCmp #BzhCmp <div>Hello, {{username}}</div> <button [model]="message" (click)="hello(message)"> Click Me!! </button> <audio-player #player></audio-player> <button (click)="player.pause()">Pause</button> Interpolation Property binding / Event binding Local variable (référence)

25. Templating (2/2)Templating (2/2) #Ng2BzhCmp #BzhCmp <div *if="user">Hello, {{user.name}}</div> // Équivalent à <template if="user"> <div>Hello, {{user.name}}</div> </template> <ul *if="list.length"> <li *for="#item of list"> {{item.title}} </li> </ul> Whole template

26. BreizhCamp 2015 #BzhCmp Dependency InjectionDependency Injection #Ng2BzhCmp #BzhCmp import { MyService } from './my-service'; @Component({ selector: 'my-component', injectables: [MyService] }) @View({ templateUrl: '/path/to/my-component.html' }) class MyComponent { myService: MyService; constructor(myService: MyService) { this.myService = myService; } fetchData() { this.myService.get().then((list) => { console.log(list); }); } }

27. BreizhCamp 2015 #BzhCmp Migration 1.X vers 2.X ?Migration 1.X vers 2.X ? #Ng2BzhCmp #BzhCmp Pas de rétrocompatibilitéPas de rétrocompatibilité Mais comment anticiper ces changements?Mais comment anticiper ces changements? Classes ES6/TS pour la déﬁnition des services Modules ES6 pour structurer son code Utiliser le ngNewRouter qui est sera disponible en 1.4 1.5 Préférer la syntaxe "controllerAs" et "bindToController" pour les directives

28. DocumentationDocumentation #Ng2BzhCmp #BzhCmp angular.ioangular.io

29. RessourcesRessources #Ng2BzhCmp #BzhCmp github.com/angular/angulargithub.com/angular/angular youtube.com/user/ngconfvideosyoutube.com/user/ngconfvideos angular-tips.comangular-tips.com tryangular2.comtryangular2.com egghead.io/technologies/angular2egghead.io/technologies/angular2 victorsavkin.comvictorsavkin.com github.com/timjacobi/angular2-educationgithub.com/timjacobi/angular2-education

30. ConclusionConclusion #Ng2BzhCmp #BzhCmp Angular 2 c'est comme le prochain Star WarsAngular 2 c'est comme le prochain Star Wars tout le monde l'attend, maistout le monde l'attend, mais personne ne sait si ça sera à lapersonne ne sait si ça sera à la hauteurhauteur

31. BreizhCamp 2015 #BzhCmp #Ng2BzhCmp #BzhCmp

Angular 2 : le réveil de la force

Nicolas PENNEC

Angular 2 : le réveil de la force