Angular 2Angular 2
Le reveil de la forceLe reveil de la force
#BzhCmp #Ng2BzhCmp
BreizhCamp 2015 #BzhCmp
BreizhCamp 2015 #BzhCmp
Nicolas PennecNicolas Pennec
@NicoPennec@NicoPennec
Full-Stack Web Developer
Co-Fondateur de @Renn...
BreizhCamp 2015 #BzhCmp
Grégory HoullierGrégory Houllier
@ghoullier@ghoullier
Architecte Web, passionné par le Front-End
C...
@RennesJS@RennesJS
rennesjs.orgrennesjs.org
meetup.com/RennesJS/meetup.com/RennesJS/
#Ng2BzhCmp #BzhCmp
Meetup le dernier ...
Angular 1.XAngular 1.X
#Ng2BzhCmp #BzhCmp
Framework JS MV*
Projet open-source porté par Google
Version 1.X très populaire,...
Annonce d'Angular 2Annonce d'Angular 2
#Ng2BzhCmp #BzhCmp
Octobre 2014:
Première annonce
Rupture de concepts
Pas de rétroc...
Annonce d'Angular 2Annonce d'Angular 2
#Ng2BzhCmp #BzhCmp
Mars 2015
Rétropédalage de Google
Opération séduction des devs
R...
PhilosophiePhilosophie
#Ng2BzhCmp #BzhCmp
Apprendre des erreurs d’Angular 1
2-way data binding, dirty-checking, $scope, .....
ES6, ES7, TypeScriptES6, ES7, TypeScript
#Ng2BzhCmp #BzhCmp
ES5 ES6 ES7 TS
ES5 :
ES6 :
ES7 : draft
TS :
es5.github.io
git....
#Ng2BzhCmp #BzhCmp
Surcouche à ES6/ES7
Créé par Microsoft
Collaboration avec Google
Merge avec AtScript
Actuellement en ve...
Exemple TypeScriptExemple TypeScript
#Ng2BzhCmp #BzhCmp
import { Annotation } from 'angular2/angular2';
import { Api as Ap...
Production Ready ?Production Ready ?
#Ng2BzhCmp #BzhCmp
NO!NO!
Production Ready ?Production Ready ?
#Ng2BzhCmp #BzhCmp
Version Alpha "Developer Preview"
Solution instable
API changeante...
PoC Ready ?PoC Ready ?
#Ng2BzhCmp #BzhCmp
YES!YES!
BreizhCamp 2015
Ce qui va changer ?Ce qui va changer ?
#Ng2BzhCmp #BzhCmp
Angular 1
Controller
Service
Module
$scope
jQlit...
BreizhCamp 2015 #BzhCmp
Directives/ComponentsDirectives/Components
#Ng2BzhCmp #BzhCmp
Directives
Angular 1.X
Directives
An...
BreizhCamp 2015 #BzhCmp
A quoi ça va ressembler?A quoi ça va ressembler?
#Ng2BzhCmp #BzhCmp
BreizhCamp 2015 #BzhCmp
Bootstrap your codeBootstrap your code
#Ng2BzhCmp #BzhCmp
<!DOCTYPE html>
<html>
<head>
<title>Ang...
BreizhCamp 2015 #BzhCmp
Component (1/3)Component (1/3)
#Ng2BzhCmp #BzhCmp
<my-component></my-component>
import {
Component...
BreizhCamp 2015 #BzhCmp
Component (2/3)Component (2/3)
#Ng2BzhCmp #BzhCmp
import {
Component, View
} from 'angular2/angula...
BreizhCamp 2015 #BzhCmp
Component (3/3)Component (3/3)
#Ng2BzhCmp #BzhCmp
import {
Component, View
} from 'angular2/angula...
BreizhCamp 2015 #BzhCmp
Directive (1/2)Directive (1/2)
#Ng2BzhCmp #BzhCmp
import {
Directive
} from 'angular2/angular2';
@...
BreizhCamp 2015 #BzhCmp
Directive (2/2)Directive (2/2)
#Ng2BzhCmp #BzhCmp
import {
Component, View
} from 'angular2/angula...
Templating (1/2)Templating (1/2)
#Ng2BzhCmp #BzhCmp
<div>Hello, {{username}}</div>
<button [model]="message" (click)="hell...
Templating (2/2)Templating (2/2)
#Ng2BzhCmp #BzhCmp
<div *if="user">Hello, {{user.name}}</div>
// Équivalent à
<template i...
BreizhCamp 2015 #BzhCmp
Dependency InjectionDependency Injection
#Ng2BzhCmp #BzhCmp
import { MyService } from './my-servic...
BreizhCamp 2015 #BzhCmp
Migration 1.X vers 2.X ?Migration 1.X vers 2.X ?
#Ng2BzhCmp #BzhCmp
Pas de rétrocompatibilitéPas d...
DocumentationDocumentation
#Ng2BzhCmp #BzhCmp
angular.ioangular.io
RessourcesRessources
#Ng2BzhCmp #BzhCmp
github.com/angular/angulargithub.com/angular/angular
youtube.com/user/ngconfvideos...
ConclusionConclusion
#Ng2BzhCmp #BzhCmp
Angular 2 c'est comme le prochain Star WarsAngular 2 c'est comme le prochain Star ...
BreizhCamp 2015 #BzhCmp
#Ng2BzhCmp #BzhCmp
Prochain SlideShare
Chargement dans…5
×

Angular 2 : le réveil de la force

2 638 vues

Publié le

"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/

Publié dans : Logiciels
1 commentaire
6 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
2 638
Sur SlideShare
0
Issues des intégrations
0
Intégrations
103
Actions
Partages
0
Téléchargements
124
Commentaires
1
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×