angular 2 : le réveil de la force

Angular 2Angular 2Le reveil de la forceLe reveil de la force

#BzhCmp #Ng2BzhCmp

BreizhCamp 2015 #BzhCmp


Nicolas PennecNicolas Pennec

@NicoPennec@NicoPennec

Full-Stack Web DeveloperCo-Fondateur de @RennesJS

#Ng2BzhCmp #BzhCmp

https://twitter.com/NicoPennec

https://twitter.com/RennesJS


Grégory HoullierGrégory Houllier

@ghoullier@ghoullier

Architecte Web, passionné par le Front-EndCo-Fondateur de @RennesJS

#Ng2BzhCmp #BzhCmp

http://twitter.com/ghoullier

https://twitter.com/RennesJS

@RennesJS@RennesJS

rennesjs.orgrennesjs.org

meetup.com/RennesJS/meetup.com/RennesJS/

#Ng2BzhCmp #BzhCmp

Meetup le dernier jeudi de chaque mois25/06/2015 à Epitech

https://twitter.com/rennesjs

http://rennesjs.org/

http://www.meetup.com/RennesJS/

Angular 1.XAngular 1.X

#Ng2BzhCmp #BzhCmp

Framework JS MV*Projet open-source porté par GoogleVersion 1.X très populaire, 1er sur GitHub (39K stars)Concepts :

Orienté Single Page Application (SPA)Étendre le langage HTML (directives)Data Binding bi-directionnelDependency Injection, $scope, ...

Annonce d'Angular 2Annonce d'Angular 2

#Ng2BzhCmp #BzhCmp

Octobre 2014:

Première annonceRupture de conceptsPas de rétrocompatibilitéNouveau langage (AtScript)

Annonce d'Angular 2Annonce d'Angular 2

#Ng2BzhCmp #BzhCmp

Mars 2015

Rétropédalage de GoogleOpération séduction des devsRoadmap de la branche 1.XNouveau langage (TypeScript)

PhilosophiePhilosophie

#Ng2BzhCmp #BzhCmp

Apprendre des erreurs d’Angular 12-way data binding, dirty-checking, $scope, ...

Se baser sur les futurs standards du webWebComponentsES6 / ES7 / TypeScript*EverGreen Browsers

Emulation due à la concurrence React et EmberAmélioration des performances

ES6, ES7, TypeScriptES6, ES7, TypeScript

#Ng2BzhCmp #BzhCmp

ES5 ES6 ES7 TS

ES5 : ES6 : ES7 : draftTS :

es5.github.iogit.io/es6features

typescriptlang.org

Traceur: github.com/google/traceur-compiler

https://es5.github.io/

http://git.io/es6features

http://typescriptlang.org/

http://github.com/google/traceur-compiler

#Ng2BzhCmp #BzhCmp

Surcouche à ES6/ES7Créé par MicrosoftCollaboration avec Google

Merge avec AtScriptActuellement en version 1.5-beta

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

Production Ready ?Production Ready ?

#Ng2BzhCmp #BzhCmp

NO!NO!

Production Ready ?Production Ready ?

#Ng2BzhCmp #BzhCmp

Version Alpha "Developer Preview"Solution instableAPI changeanteDocumentation en coursPas de Roadmap

PoC Ready ?PoC Ready ?

#Ng2BzhCmp #BzhCmp

YES!YES!

BreizhCamp 2015

Ce qui va changer ?Ce qui va changer ?

#Ng2BzhCmp #BzhCmp

Angular 1

ControllerServiceModule$scopejQliteDirectiveDependency Injection

Angular 2

ControllerServiceModule$scopejQliteDirectiveDependency Injection (TypeScript)ComponentClasses (ES6)


Directives/ComponentsDirectives/Components

#Ng2BzhCmp #BzhCmp

Directives

Angular 1.X

Directives

Angular 2.X

Components

Angular 2.X

Etendre le DOM

Encapsule un template


A quoi ça va ressembler?A quoi ça va ressembler?

#Ng2BzhCmp #BzhCmp


Bootstrap your codeBootstrap your code

#Ng2BzhCmp #BzhCmp

<!DOCTYPE html><html> <head> <title>Angular 2 - BreizhCamp</title> <script src="//github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js">

{ bootstrap }{ MyComponent }

</script> <script src="//jspm.io/[email protected]"></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


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



#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



#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


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


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

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)

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


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); }); }}


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 servicesModules ES6 pour structurer son codeUtiliser le ngNewRouter qui est sera disponible en 1.4 1.5Préférer la syntaxe "controllerAs" et "bindToController" pourles directives

DocumentationDocumentation

#Ng2BzhCmp #BzhCmp

angular.ioangular.io

https://angular.io/

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

https://github.com/angular/angular

https://youtube.com/user/ngconfvideos

http://angular-tips.com/

http://tryangular2.com/

https://egghead.io/technologies/angular2

http://victorsavkin.com/

https://github.com/timjacobi/angular2-education

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, maispersonne ne sait si ça sera à lapersonne ne sait si ça sera à la

hauteurhauteur


#Ng2BzhCmp #BzhCmp

angular 2 : le réveil de la force

Software