Apprendre à programmer avec le framework Angular

La norme HTML 5 a été finalisée en octobre 2014. Elle a mis beaucoup de temps à accoucher (pour mémoire, HTML 4 date de 1997), mais HTML 5 n'est pas une simple évolution du HTML mais plus une Révolution ! Il a permis d'étendre le HTML et ainsi de créer ses propres balises HTML. Une Révolution ? Mais oui, car cela ouvre la porte à un rêve pour les développeurs front : pouvoir créer des composants graphiques réutilisables et totalement indépendants. Et ces composants ont un nom : les Web components.

Pour parvenir à ce miracle, plusieurs technologies du W3C sont utilisées :

• Les customs Elements : API permettant de déclarer de nouveaux éléments HTML.
• Les imports HTML : permet d'importer des fichiers HTML dans un autre.
• Les templates : permet de charger une portion de HTML sans l'afficher tout de suite.
• Le shadow DOM : permet de masquer la complexité d'un composant et d'isoler plus facilement les composants entre eux via un système d'encapsulation.

C'est ce savant mélange qui permet la création de composants Web réutilisables et totalement étanches entre eux.

Parallèlement aux travaux sur le HTML, le JavaScript a, lui aussi, subi de multiples transformations au fil du temps. La maturité du langage l'a fait passer de l'EcmaScript 3 à l'époque IE6 à l'ES6 en 2016. Avec les années, de nombreux frameworks JavaScript ont vu le jour.

Quelques années se démarquent :

• 2006 fut une année charnière avec l'arrivée du Framework JQuery qui a permis de manipuler brillamment le DOM HTML.
• 2009 a été l'année d'introduction de framework AngularJS qui a introduit la démocratisation du data binding 2-way et de la SPA.
• 2013 signe l'entrée de Facebook dans l'open source JavaScript avec son Framework React.JS.
• 2014 pose les fondations d'une nouvelle technologie avec Polymer (année de finalisation du HTML 5).
• Et 2016… c'est au tour d'Angular 2 d'arriver.

Mais peut-on vraiment utiliser les Web Components aujourd'hui ? Eh bien, pas forcément. À ce jour, tout n'est pas encore tout rose malheureusement. Peu de navigateurs supportent les Web Components, principalement à cause du shadow DOM qui n'est réellement supporté que par les navigateurs Chrome et Opera. Développer une application dans ces conditions ne serait pas réaliste aujourd'hui.

Mais côté JavaScript, ça bouge plus rapidement et il y a quelques projets pionniers qui nous ont développé des polyfills afin de pallier aux lacunes des navigateurs, dont le projet initié par Google :

Ces polyfills permettent de s'abstraire des limitations liées aux navigateurs afin de proposer les fonctionnalités manquantes pour réaliser des Web components. Il s'agit donc du premier Framework JavaScript permettant de créer et manipuler les composants à la manière « Web Component ». Évidemment, si je vous parle de Web Component depuis le début, c'est bien pour introduire le framework Angular qui est résolument orienté Component.

Le Component est issu de la mouvance « Web components » comme vous pouvez vous en douter. Les Components reposent sur un certain nombre de règles :

• Un component ne gère que sa vue et ses données. Il n'a pas à modifier les données ou le DOM qui est en dehors de son scope.
• Chaque component a son propre cycle de vie.
• Les components communiquent entre eux via les évènements, il n'y a pas d'interactions directes.

Les dernières releases d'AngularJS ont introduit ce concept dans le framework et cela n'a finalement pas été trop dur puisqu'un component n'est autre qu'un fragment HTML et un controller pour interagir avec. Mais ce « Component » est loin d'être aussi poussé que chez son successeur. Point de shadow DOM à l'horizon.

Il faut plutôt voir ça comme une façon d'aider les développeurs AngularJS à aller vers Angular. Dans Angular, les components sont partout : l'application est un Component qui affiche des components contenant des components… Bref, Angular, c'est des components, components et des components !

Angular a adopté dès le début les standards ES6, mais a souhaité ajouter une « surcouche » JavaScript permettant le typage des variables via des annotations. Après avoir penché un certain temps vers AtScript, Google a finalement choisi le langage TypeScript de Microsoft. TypeScript est devenu le langage de prédilection dans Angular ! Bon, il est tout à fait possible de développer une application sans ES6 et sans TypeScript si cela vous chante… mais pourquoi ?

Dès lors, même si la syntaxe peut effrayer au premier abord, la déclaration d'un component dans Angular, dans la pure tradition du TypeScript, se résume à très peu de code :

import { Component } from '@angular/core';
 
@Component({
    selector: 'mon-premier-component',
    template: `
        <h2>Mon premier Component</h2>
        <img src="http://gabarit.developpez.be/images/logo.png" />
    `
})
export class MonPremierComponent  {
}

Ce premier exemple décrit très bien la structure de tous les Components Angular. On y retrouve :

• Un espace réservé aux importations de code d'autres modules. Dans notre exemple, cet espace nous sert à charger la classe « Component » du module @angular/core qui n'est autre que le module « cœur » d'Angular ;
• @Component est ce que l'on appelle un décorateur. Les décorateurs sont issus du langage TypeScript. Ils permettent de rajouter du comportement à une classe et ses membres (à l'origine, TypeScript n'incorporait pas la notion de « Decorator ». Cela a fait l'objet d'un travail collaboratif entre Google et Microsoft). Ce décorateur ajoute donc un ensemble de propriétés à la classe MonPremierComponent pour la « transformer » en Web Component Angular. Cet ensemble s'appelle les MetaDatas. On y retrouve notre template HTML (l'Import HTML W3C) et le selector (le Custom Element W3C) dont nous parlions dans la partie précédente.
• Une classe qui contrôle l'apparence et le comportement de notre Component. Cette classe est exportée pour pouvoir être utilisée par l'application.

Si nous devions résumer finalement ce qu'est techniquement un Component Angular : une simple class avec un décorateur @Component.

Une fois notre component instancié, il ne reste plus qu'a l'utiliser directement dans notre page index.html. Cela fonctionne exactement de la même façon qu'une directive AngularJS de type element « E ». Il suffit de déclarer une balise HTML avec le nom du selector qui a été défini lors de la création du @Component.

<html>
 
...
 
<body>
 
<h1>Test de mon premier Component</h1> 
 
<!-- Ajout de mon premier component -->
<mon-premier-component>Loading...</mon-premier-component>
 
</body>
</html>

Après rechargement de la page, voici le résultat tant attendu 

: