Modulariser son application AngularJS avec Browserify

Cet article est issu d’une session de live-coding ayant été présentée à Devoxx France, le mercredi 8 avril 2015.

D’aveu de développeur, node.js est une plateforme très agréable à programmer. Elle bénéficie notamment :

  • d’un gestionnaire de packages efficace – npm – et d’un dépôt public associé, portés par une société solide et une communauté Open Source prolifique et de qualité,
  • d’un système de modularisation – basé sur le standard CommonJS – qui favorise la production de petits programmes spécialisés que l’on va ensuite combiner entre eux pour obtenir des comportements avancés.

Cet article présente les intérêts d’utiliser ces mécaniques venues du back-end, pour développer nos front-end web, notamment avec le framework AngularJS.

Le code présenté dans cet article est issu d’une application d’exemple affichant une liste de “mets gastronomiques” (dishes en anglais) à l’écran. Retrouvez-la sur Github.

npm

npm est le gestionnaire de packages de node.js (il est inclus dans l’installeur). L’équipe d’AngularJS publie chaque version du framework sur npm. Il est donc possible d’installer le framework dans notre projet ce cette façon :

$ npm install angular@1.3.x --save-dev

Angular est ainsi téléchargé dans un dossier node_modules et inscrit en tant que dépendance de développement dans le fichier package.json décrivant notre application.
npm a pour vocation d’héberger toutes nos dépendances Javascript, qu’elles soient destinées au back-end ou bien aux navigateurs. Il remplace ainsi avantageusement Bower.

CommonJS

Dans un environnement CommonJS comme node, chaque fichier constitue un module de code isolé des autres (ce qui n’est pas le cas dans nos navigateurs). Chaque fichier va alors déclarer ses dépendances à l’aide du mot clé require et exposer son API via exports ou  module.exports (à retrouver ici).

Dans ce cadre, pour utiliser l’API d’AngularJS, par exemple pour créer un module, nous allons écrire ceci :

var angular = require(‘angular’);
angular.module('dishes', []);

Nous pouvons également utiliser require pour nos propres fichiers en précisant un chemin relatif :

var truc = require('./truc.js'); // l’extension .js est facultative

Je vous propose d’utiliser ce mécanisme pour structurer notre code AngularJS de la façon suivante :

  • Chaque élément (fonction) de notre logique métier sera implémenté en pur Javascript et stocké dans son propre fichier,
  • L’assemblage de ces différents éléments via framework AngularJS aura lieu ailleurs, dans un fichier responsable de la configuration applicative.

Voici ce que nous obtenons concrètement sur une factory Angular tirée du projet d’exemple :

Le fichier src/dishes/data/dishes.js expose une fonction implémentant la logique de notre factory :

module.exports = function() {

 var dishes = [
   { name: 'Galette-saucisse', type: 'Plat principal', image: 'images/1.jpg' },
   /* ... */
 ];

 return {
   list: function() {
     return dishes;
   }
 }

};

Le fichier src/dishes/index.js, créé un module AngularJS et instancie chacun de ses composants :

var angular = require('angular');

angular.module('dishes', [])
 .factory('dishesData', require('./data/dishes'))
 .controller(/* ... */);

Les avantages d’une telle structuration sont multiples :

  • La maintenabilité de notre application est améliorée grâce à la séparation de la logique métier et de l’assemblage de ces différentes briques avec AngularJS,
  • La logique métier étant uniquement portée par du code Javascript/CommonJS, elle ne nécessite pas de navigateur pour être testée unitairement : nos tests seront exécutables directement dans node (avec mocha par exemple),
  • Si votre code serveur est écrit en node.js, vous partagez le même standard de modularisation entre vos sources client et serveur.

Browserify

Il nous reste un petit détail à régler : un code tel que présenté ci-dessus n’est pas exécutable directement dans nos navigateurs (qui ne supportent pas CommonJS)… C’est là qu’intervient la magie de Browserify ! Cet outil permet de transformer du code CommonJS en code exécutable par les navigateurs. Une fois Browserify installé (via npm install -g browserify), nous pouvons transformer notre code à l’aide de la commande :

$ browserify src/app.js > bundle.js

src/app.js étant le point d’entrée de notre application, et bundle.js le fichier transformé par Browserify. Ce « bundle » porte l’ensemble de notre code et ses dépendances. Pour l’utiliser, il suffit de le référencer dans notre index.html :

<script src="bundle.js"></script>

N’hésitez pas à aller plus loin en parcourant le code présent sur le dépôt Github.

0 commentaires

votre commentaire

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

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

Inscription newsletter

Ne manquez plus nos derniers articles !