30 avril 2022[email protected]

De jQuery à Angular (via AngularJs)

En deux dizaines d’années les technologies web ont beaucoup évolué. La manière de les aborder aussi : dans les années 2000 la pratique du Javascript, issue de l’ECMAscript, était encore naissante et donc un peu… « freestyle ». Petit historique de jQuery à Angular.

jQuery met de l’ « ordre »

Dans les années 2010 j’abordais dans ma vie professionnels jQuery, une librairie javascript bien implantée et pleine de promesse : manipulation du DOM simplifiées, animations moderne, requêtes ajax (via XHR), traitement du Json facilités etc. En gros jQuery est une fonction ; elle se simplifie en « $ » et permet d’indiquer rapidement les éléments du DOM en les nommant via « #container » pour un id=container ou via « .bold » pour les class= »bold »

var $container = $("#container");
//revient à
var container = document.getElementById("container");

Ensuite, un ensemble de méthode permet de cloner, changer de classe, d’insérer du contenu, de faire apparaître un bloc display:none avec une anim etc.

var $container2 = $container.clone();
$container.addClass("cache");
$container.append("Le text qui va apparaître dans le id=container ");
$container.slideDown(1000);

…et on se rend compte facilement qu’on peut finalement facilement boucler sur un tableau de donnée pour construire des éléments à la volée et les insérer dans un conteneur, tout cela avec des styles adaptées à certaines données.

Bref : c’est plus court que le javascript, c’est pratique, on recharge pas la page… mais ça fait encore beaucoup de choses sans imposer une structuration des données rigoureuses.
Mais que demander de plus à ce moment là ?

AngularJS ?

En 2012, pendant que j’utilisais à fond jQuery, on m’évoquait déjà AngularJS (née en 2009 de papa Google) comme quelque chose de nouveau mais qui promettait. « Nouveau peut-être, » ai-je pensé, amère, « mais moi j’me suis bouffé la syntaxe jQuery pour faire quelque chose que je maitrise un peu donc, votre nouveauté, … » et donc j’ai continué un moment sur jQuery (l’avenir a finalement fait que j’ai finalement bifurqué sur des langages logiciels, plus strictes et organisés, éloigné du web).

En attendant, voici ce que proposait notamment la librairie javascript AngularJS, en substance : à partir d’un tableau de donnée, une syntaxe adaptée (basée sur des directives représentés sous la forme d’attribut HTML) permettait de se servir d’une balise comme modèle et la reproduire autant de fois que le tableau avait d’occurrence de la donnée :

<div id="container">
  <div class="element" ng-repeat="tabElement in tabArray">
     {{tabElement.name}}
  </div>
</div>

Ajoutons à ça du DataBinding (qu’on retrouve notamment en C# avec le MVC/MVVM), un système de routage des urls, la mise en place de brique html (les components) et on obtient un résultat similaire au jQuery mais avec l’avantage d’une différenciation « Code Behind »/ »Interface visuelle » plus marquée (et donc une meilleur répartition des « responsabilités » de l’application). En plus, c’est parfois encore plus court…

Mais alors, Angular c’est trop bien !

Attention mon brave ! Angular n’est pas AngularJS. Mais un successeur, une évolution.
Là où AngularJS et jQuery sont des librairies javascript,
Angular est un Framework Front Typescript nécessitant une compilation du code destiné (avant tout) au Web.

Alors, dans les faits, il a été fondé par Google aussi sur le principe d’AngularJS mais s’en est aujourd’hui assez éloigné pour que même ses mots clés ne soit plus tout à fait les mêmes : par exemple « ng-repeat » est devenu « *ngFor » (et @for). Et le langage derrière a changé (typescript au lieu de javascript, donc compilateur nécessaire). Et l’organisation des fichiers à changé (orga très focalisées sur les composants). Et la mise en place de l’environnement a changé (npm est nécessaire pour installé un CLI propriétaire à angular).

Bref, on peut aujourd’hui présenter AngularJS comme une version démo facile à mettre en place (simple librairie à référencer dans le projet) d’un Framework complet « Angular » qui va demander un compilateur pour transformer le typescript en javascript, proposer un serveur local pour recharger la page web de preview à la volée, embarquer moulte librairies facilitant les imports etc. De plus, l’architecture des dossiers s’appuie sur un design pattern MVC garantissant une maintenabilité et une professionnalisation de l’ensemble.

D’ailleurs, pour renforcer son idée de démo, AngularJS n’est plus maintenu par Google depuis le 31/12/2021…

Les bases d’Angular

Donc, Angular, actuellement c’est du Typescript. Donc il faut coder en typescript qui est sensiblement la même chose que javascript en plus typé. Ceux qui ont pratiqué des langages strict ne seront pas perdus, mais pour les autre ça veut notamment dire écrire cela :

monNombre : number = 5;

Aussi, le typescript d’angular s’utilise pour des SPA, soit Single Page Application. Ca veut pas dire que votre application n’aura qu’un affichage mais qu’une page HTML : Angular étant TRES construit autour du routage, le contenu chargé sera relatif à la route.

De même il faut pensé en terme de composant : chacun à son code HTML (ex : header.component.html), son « controleur » (header.component.ts – typescript) et son style (header.css ou .scss).

Et pour finir sur les bases : pas moyen d’éviter l’Angular CLI qui vous permettra de créer les bases d’un premier projet, lancer le serveur qui compilera le code en plusieurs fichiers html+javascript+css tournant en cache accessible via un localhost:4200, et créer de nouveau composant de manière propre.

Depuis plusieurs décennies le javascript a su se professionnalisé pour passé d’un langage de scripts à un langage de programmation professionnel, et ce grâce à des framework tels que React, Vue ou encore Angular, détaillé plus précisément ici.

Sources

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *