Successfully reported this slideshow.

Angular 2 : le réveil de la force

7

Share

Upcoming SlideShare
Introduction à Angular 2
Introduction à Angular 2
Loading in …3
×
1 of 31
1 of 31

Angular 2 : le réveil de la force

7

Share

Download to read offline

"Angular 2 : le réveil de la force" est un talk co-présenté par Grégory HOULLIER et Nicolas PENNEC, lors du BreizhCamp 2015 à Rennes (France).

Cette présentation a pour but de faire le point sur les nouveautés du framework AngularJS 2.

http://www.breizhcamp.org/

"Angular 2 : le réveil de la force" est un talk co-présenté par Grégory HOULLIER et Nicolas PENNEC, lors du BreizhCamp 2015 à Rennes (France).

Cette présentation a pour but de faire le point sur les nouveautés du framework AngularJS 2.

http://www.breizhcamp.org/

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Angular 2 : le réveil de la force

  1. 1. Angular 2Angular 2 Le reveil de la forceLe reveil de la force #BzhCmp #Ng2BzhCmp BreizhCamp 2015 #BzhCmp
  2. 2. BreizhCamp 2015 #BzhCmp Nicolas PennecNicolas Pennec @NicoPennec@NicoPennec Full-Stack Web Developer Co-Fondateur de @RennesJS #Ng2BzhCmp #BzhCmp
  3. 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. 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. 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. 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. 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. 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. 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. 10. #Ng2BzhCmp #BzhCmp Surcouche à ES6/ES7 Créé par Microsoft Collaboration avec Google Merge avec AtScript Actuellement en version 1.5-beta
  11. 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. 12. Production Ready ?Production Ready ? #Ng2BzhCmp #BzhCmp NO!NO!
  13. 13. Production Ready ?Production Ready ? #Ng2BzhCmp #BzhCmp Version Alpha "Developer Preview" Solution instable API changeante Documentation en cours Pas de Roadmap
  14. 14. PoC Ready ?PoC Ready ? #Ng2BzhCmp #BzhCmp YES!YES!
  15. 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. 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. 17. BreizhCamp 2015 #BzhCmp A quoi ça va ressembler?A quoi ça va ressembler? #Ng2BzhCmp #BzhCmp
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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éfinition 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. 28. DocumentationDocumentation #Ng2BzhCmp #BzhCmp angular.ioangular.io
  29. 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. 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. 31. BreizhCamp 2015 #BzhCmp #Ng2BzhCmp #BzhCmp

×