Angular 2
le framework de demain pour les agences web d'aujourd'hui
Vladimir de Turckheim
- Ingénieur projet @ Steamulo
- Ancien consultant en Cyber-Sécurité
- JavaScript full stack
- DevOps
- Contributeur Open-Source
Who are you, Angular ?
- 2009: création pour servir un projet de stockage en ligne
- A l'abandon du projet, il est rendu open source et Google s'y interesse
- Après 12 release candidates: la v1 sort en 2012
- 1.3 en 2014, 1.4 en 2015 et finalement 1.5 en 2016
En mars 2016, Angular.js c'est 1.3 million de développeurs dans le monde.
Angular 2 ?
- Angular.js est très inspiré des applications Java, mais porte un gros héritage.
- JavaScript n'est pas adapté au monde google
- Le monde des applis web et mobile a été tranfiguré depuis 2009
- Un framework plus moderne est mis en chantier le 18 septembre 2014
- Une béta au début de 2016
Angular 2 n'est pas angular.js 2
- Le Typescript est mis en avant face au JS
- Le framework est orienté composant
- Les fonctionnalités des frameworks modernes sont présentes (rendu serveur, web-workers, X-platform, ...)
Un peu de code
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import {Injectable} from 'angular2/core';
@Injectable()
export class HeroService {
getHeroes() {
return Promise.resolve(HEROES);
}
// See the "Take it slow" appendix
getHeroesSlowly() {
return new Promise<Hero[]>(resolve =>
setTimeout(()=>resolve(HEROES), 2000) // 2 seconds
);
}
}
Un service,
import {Component} from 'angular2/core';
import {Hero} from './hero';
@Component({
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`,
inputs: ['hero']
})
export class HeroDetailComponent {
hero: Hero;
}
un composant ...
import {Component, OnInit} from 'angular2/core';
import {Hero} from './hero';
import {HeroDetailComponent} from './hero-detail.component';
import {HeroService} from './hero.service';
@Component({
selector: 'my-app',
template:`
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="#hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
`,
styles:[`
.selected {
background-color: #CFD8DC !important;
color: white;
}`],
directives: [HeroDetailComponent],
providers: [HeroService]
})
export class AppComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private _heroService: HeroService) { }
getHeroes() {
this._heroService.getHeroes().then(heroes => this.heroes = heroes);
}
ngOnInit() {
this.getHeroes();
}
onSelect(hero: Hero) { this.selectedHero = hero; }
}
... dans un composant
Et sinon, on y gagne quoi ?
des applis plus intelligentes :
- Les composants sont réutilisables entre les applis
- Rx est partout: on manipule des observables, pas des promesses ni des callbacks
- Les web-workers séparent la partie rendu de la logique métier
des applis mieux codées :
- Le Typescript permet de rendre le code plus propre
- On peut toujours faire du JS quand on en a besoin
- Les tests sont plus simples à mettre en place qu'avec angular.js
et un bonus :
- La génération de la couche DAO côté serveur (Java) pourrait au passage fournir les interfaces typescript ...
- voire même un squelette d'API (avec Srping) ...
- et une DAO Angular 2
Les plus nostalgiques retrouveront les émotions des anciens frameworks Java EE.
Ici c'est déjà demain
Angular 2 n'est pas prêt...
- Les librairies sont peu nombreuses
- L'API n'est pas stable
- Les best practices ne sont pas écrites
... mais on peut s'y préparer ...
- Passer les projets en ES6
- Utiliser des classes comme controllers
- Utiliser les 'components'
- Se familiariser avec le typescript
... et même faire des projets
des
questions
?
angular 2
By Vladimir de Turckheim
angular 2
- 1,242