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