vendredi 30 octobre 2015

Angular 2 : Découverte des outils et premiers pas

Angular2, la Béta approche

La version 2 du célébre framework javascript est sur le point d'accoucher d'une première béta. Nous sommes actuellement en version alpha 46, l'API est quasiment figée, il reste des bugs à corriger et la moitié de la documentation à écrire.

L'équipe de chez Google utilise la puissance de nouveaux outils et standards pour emmener le développement Front dans une nouvelle ère:
ES6, Typescript, RxJS, WebComponent, WebWorker, CLI, modules natifs, NodeJS,..

Etudions en détails certains aspects.


ES6

ES6 est un raccourci de ECMA Script 6, norme sur laquelle est basée Javascript. Appelé également ES2015, cette nouvelle version ajoute de nombreuses fonctionnalités.

Nous allons en voir seulement quelques une ici:

  • Déclaration de variables avec let:

    Let est le nouveau var. Il permet de déclarer une nouvelle variable mais avec un scope (portée) local contrairement à var.

    function swap(x, y) {
        if (x != y) {
            var old = x;
            let tmp = x;
            x = y;
            y = tmp;
        }
         
        console.log(typeof(old));   // number
        console.log(typeof(tmp));   // undefined
    }
  • Arrow functions:

    Nouvelle manière d'écrire des fonction plus concise (utile pour les callbacks) et qui conserve le this du scope courant.

    let values = [65, 7, 78, 1, 32, 66];
    values.sort((a, b) => { return b - a });
  • Les paramètres par défaut:

    On peut maintenant mettre des valeurs par défaut aux paramètres des fonctions. Ces valeurs seront utilisées lors des appels omettant de fournir ces paramètres.

    function multiply(x = 1, y = 10) {
     return x * y;
    }
  • Utilisation des classes:

    Comme dans de nombreux autres langages objet, l'utilisation des classes est maintenant possible avec les différents mots-clés comme extends, constructor, super,..

    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }
         
        toString() {
            return `Nom: ${this.name} - Age: ${this.age}`;
        }
    }
    
    class Developer extends Person {
        constructor(name, age, language) {
            super(name, age);
            this.language = language;
        }
         
        toString() {
            return `Nom: ${this.name} - Age: ${this.age} - Language: ${this.language}`;
        }
    }
     
    let john = new Developer('John', 85, 'Java');
    console.log(john.toString());
    
    // Nom: John - Age: 85 - Language: Java

TypeScript

TypeScript est un langage de programmation open-source développé par Microsoft qui améliore et sécurise la production de code JavaScript. C'est un sur-ensemble de JavaScript qui ajoute des nouvelles fonctionnalités. Le code TypeScript est transpilé en JavaScript, pouvant ainsi être interprété par les navigateurs web.

Cette nouvelle version d'Angular 2 est écrite avec Typescript.
En aucun cas, vous êtes forcé à l'utiliser en codant avec Angular 2 même si c'est conseillé. Vous pouvez utiliser ES5 (la version actuelle de Javascript) ou bien ES6 (vu précédemment).

Typescript embarque toutes (ou presque) les avancées d'ES6 et ajoute le typage de tous les objets et l'ajout d'annotations (ou Decorator). Le typage (bien q'uniquement utilisé à la compilation) est une grande avancée pour produire du code sur et maintenable.

Voici un exemple:

class Person {
    constructor(public name: string, public age: number) {}
     
    toString() {
        return `Nom: ${this.name} - Age: ${this.age}`;
    }
}

class Developer extends Person {
    constructor(name: string, age: number, public language: string) {
        super(name, age);
    }
     
    toString() {
        return `Nom: ${this.name} - Age: ${this.age} - Language: ${this.language}`;
    }
}
 
let john:Person = new Person('John', 85); // ok
let jacky:Developer = new Developer('Jacky', '92', 'Cobol'); // erreur de compilation: le deuxième paramètre doit être de type number!

 


RxJS

Angular avait démocratisé l'utilisation des promesses (promises) qui permettent de standardiser les retours asynchrones et d'éviter un enchevetrement de callbacks (callbacks hell). A noter que les promesses sont supportées nativement par ES6.

Mais elles posent problème dans certains cas de figure et sont maintenant remplacées par des observable grâce à l'utilisation de RxJS.
Les observables sont beaucoup plus souples et puissants que les promesses. On utilise maintenant myObservable.subscribe(nextFct, ErrorFct, completeFct) au lieu de myPromise.then(successFct, ErrorFct).

Le service Http d'Angular 2 (version remasterisé de $http) retourne maintenant des observables RxJS. Voici un exemple de son utilisation:

getRandomQuote() {
  this.http.get('http://localhost:3001/api/random-quote')
    .map(res => res.text())
    .subscribe(
      data => this.randomQuote = data,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

logError(err) {
  console.error('There was an error: ' + err);
}

Premiers pas avec Angular 2

Les applications se présentent maintenant sous la forme d'un arbre de composant avec un seule composant en haut qui fait office de démarreur (bootstrap).

Voici la syntaxe pour écrire un composant:

import {Component, View, NgFor, Inject} from 'angular2/angular2';
import {MovieListItemComponent} from './MovieListItemComponent';
import {MovieListService, Movie} from '../services/MovieListService';

@Component({
    selector: 'movie-list'
})

@View({
    directives: [NgFor, MovieListItemComponent],
    template: `
      <div class="bloc"> 
        <ul> 
          <li movie-list-item *ng-for="#m of list" [item]="m"></li> 
        </ul> 
      </div>
    `
})

export class MovieListComponent {
    list: Array

    constructor(public movieList: MovieListService) {
        this.list = movieList.list;
    }
}

Examinons cela en détail:

  • On trouve en premier l'import des modules nécessaires provenant d'angular2 et de notre application.
  • Les 2 decorators (ou annotations):
    • @Component: L'attribut selector désigne sous quelle forme notre composant sera appelé dans le DOM.
    • @View: On retrouve le template de notre composant ainsi qu'un tableau listant tous les composants utilisés dans celui-ci.
  • Une classe qui représente notre composant avec une fonction 'constructor' appelée à l'instanciation. L'injection d'un service de notre application (MovieListService) en paramètre s'effectue grâce au typage de Typescript.

Aller plus loin

Vous pouvez d'ores et déjà expérimenter et vous familiariser avec Angular 2 même s'il est encore déconseillé de démarrer un projet de production.

Vous avez deux possibilités:

  • Vous pouvez utiliser un "starter" disponible sur GitHub, celui de Pawel Kozlowski est un des plus répandus: https://github.com/pkozlowski-opensource/ng2-play
  • Sinon, il y a encore plus rapide pour coder rapidement: Utiliser le service en ligne Plunker!
    Dans le Header, cliquez sur Editor, puis AngularJS > 2.0.X Vous avez alors le choix entre Typescript, ES6 et ES5.
    En bonus, une mini application est présente par défaut, vous pouvez ainsi apprécier les différentes syntaxes.