Blog
AngularJS pour les développeurs jQuery

Partager

Logo large AngularJS powered by Google AngularJS est LE framework JS à la mode. Développé et soutenu par Google, sa popularité est grandissante et la communauté est très active (release très fréquentes, nombreux plugins de qualité publiés).

Mais pour un développeur habitué à travailler avec jQuery et qui n’a jamais utilisé de framework JS, la prise en main peut s’avérer déroutante. Les single page applications/one page applications sont des... applications. Ce ne sont pas de simples pages webs. Il est nécessaire d’adopter une mentalité similaire à celle des développeurs back-end et penser en terme d’architecture. Il faut donc diviser notre application en différent composants extensibles et testables.

Dans cet article, nous essayerons de voir en quoi AngularJS est diffèrent de jQuery et pourquoi il faut changer d’état d’esprit pour bien l'aborder.

Ce n’est pas une librairie

Il n’est pas possible d’implémenter AngularJS sur un site réalisé en jQuery mais l’inverse est possible. Pourquoi cela ?

jQuery est une librairie, cela signifie que votre code décide d’appeler une fonction dans cette librairie pour produire le résultat attendu.

AngularJS est un framework MVC structurant vous imposant sa philosophie, vous implémentez des callbacks et le framework vous appelle lorsqu’il l’a décidé. Vous devez penser à l’architecture de votre application web avant de commencer à coder et angularJS vous offre une séparation clair entre :

  • La vue (votre page HTML).
  • Le contrôleur (les "controllers").
  • Le modèle (les "services").

Vos différentes briques métiers sont également regroupées dans des "modules".

Un contrôleur manipule le modèle de donnée envoyé par un service et transmet ces données à la vue en utilisant un scope. Lorsque la donnée enregistrée dans le scope change à l'intérieur du contrôleur, la vue est automatiquement mise à jour. Cela marche également dans l'autre sens : lorsque la vue change, les changements sont impactés dans le contrôleur. Angular appelle cela le "Two-Way Data Binding". Cette approche permet d'éviter beaucoup de manipulations de DOM.

Comprendre l'héritage de prototype

Il est possible d’utiliser jQuery sans savoir comment fonctionne l’héritage JavaScript de prototype. En revanche pour Angular, il est recommandé de comprendre comment cet héritage fonctionne pour éviter les écueils les plus courants.
AngularJS possède une courbe d’apprentissage plus ardue que celle de jQuery et il est plus simple de l’appréhender avec de solides bases en JavaScript.

Oubliez jQuery

Men in black with the magic device

Pour pouvoir pleinement profiter d’AngularJS, il est nécessaire de vous libérer de jQuery et de tous les réflexes acquis pendant des années de pratiques. Sans cela, le premier réflexe serait de recourir au "$" dès que vous rencontreriez un problème et serait un frein majeur pour adopter la philosophie Angular. Avec jQuery, le DOM est au centre de l'attention. Mais ces manipulations n'ont souvent pas lieu d'être avec Angular. Mixer ces 2 approches risqueraient juste de produire des effets indésirables et inattendus.
Cependant, pour toutes les petites fonctions indispensables, AngularJS implémente une version simplifiée de jQuery : jQLite.

Passez de l'impératif au déclaratif

Il y a plusieurs façons d’écrire du code. Parmi les paradigmes de programmation les plus courants, on distingue :

La programmation impérative : on ordonne à la machine ce qui doit se passer, étape par étape.

La programmation déclarative : on demande à la machine ce qu’on souhaite obtenir mais on ne décrit pas nécessairement comment l’obtenir (on déclare simplement le résultat attendu mais pas toutes les étapes).

Un exemple basique pour y voir plus clair : on souhaite afficher ses séries favorites selon qu’une checkbox soit cochée ou non.

Avec jQuery, nous ferions (live code) :

<body>
Display favorite series : <input type="checkbox" id="displayFavoriteSeries">    
    <ul id="favoriteSeries">
        <li>Game of thrones</li>
        <li>Breaking bad</li>
        <li>Spartacus</li>
    </ul>
</body>
<script>
$(function() {
     function toggle() {
        var isChecked = $('#displayFavoriteSeries').is(':checked');
        var favoriteSeries = $('#favoriteSeries');
        if (isChecked) 
            favoriteSeries.show();
        else 
            favoriteSeries.hide();
        
    };

    $('#displayFavoriteSeries').change(function() {
        toggle();
    });
    
    toggle();
});
</script>

JavaScript traite le DOM de manière impérative :

  • Prend ce nœud
  • Regarde sa value
  • Cache/affiche le

Avec AngularJS, nous ferions (live code) :

<body ng-app>
    Display favorite series : <input type="checkbox" ng-model="displayFavoriteSeries">
    <ul ng-show="displayFavoriteSeries">
        <li>Game of thrones</li>
        <li>Breaking bad</li>
        <li>Spartacus</li>
    </ul> 
  </body>

Et c'est tout ! Nous déclarons juste que nous désirons afficher le bloc en fonction de la checkbox.

HTML++

AngularJS vous permet d’étendre le langage HTML pour produire une version augmenté. Il est possible de créer vos propres balises et attributs HTML. Ces derniers seront parsés et interprétés par Angular au chargement de la page. Dans le jargon Angular, on appelle ça, les directives. C’est le seul endroit où vous manipulerez le DOM.
C’est assez proche des futurs Web Components (de nouvelles balises HTML réutilisables).

Ok, j'ai compris, je commence où maintenant ?

J’espère que cet article vous poussera à sauter le pas et à donner une chance à AngularJS. Pour prendre un bon départ, vous pouvez dès à présent consulter le tutorial officiel. Il couvre l’essentiel du framework et vous guidera pas à pas pour construire votre première one page application.

comments powered by Disqus