Gagnez en productivité dans vos projets Javascript avec Brunch.io

Gagnez en productivité dans vos projets Javascript avec Brunch.io

Si vous bossez dans le domaine du développement web, vous avez certainement entendu parlé de grunt, vous savez, le truc qu’on utilise durant le développement pour effectuer des taches comme :

  • Minification de code
  • Rafraîchissement automatique de la page
  • conversion du code LESS ou SASS en CSS

après pour configurer grunt c’est souvent 4 kilomètres de lignes de code pour faire ce qu’on veux.

Cependant à ma grande surprise, il existe une alternative au nom de Brunch, c’est  plus ancien que la concurrence ( 5 ans déjà ), plus performant, et surtout beaucoup plus facile à prendre en main.

Besoin d’une preuve ? voila un fichier de configuration typique de Brunch.js :

module.exports = config:
  files:
    javascripts: joinTo: 'app.js'
    stylesheets: joinTo: 'app.css'

et comme si ça ne suffisait pas, tout le processus de build s’effectue en général en moins de 200 ms, (c’est à dire que le temps que vous basculiez sur votre navigateur pour voir le résultat votre code est déjà mis à jour.

Je vous invite à regarder la vidéo de christophe porteneuve qui explique tout cela très bien:

Exemple avec une application de prise de notes

On va créer une petite application de prise de notes avec AngularJS et Bootstrap, le tout buildé avec Brunch.js.

Prérequis

Pour ce tutorial on aura besoin d’installer en plus de NodeJS les outils suivants:

Brunch:

npm install -g brunch

Bower:

npm install -g bower

 Structure du projet

structure

Contrairement aux outils concurrents qui nécessite une configuration détaillée de toutes les étapes de build, Brunch préfère suivre des conventions d’utilisation, l’avantage de cette approche est que plus on suis la convention d’utilisation de brunch moins on aura besoins de mettre du code de configuration.

les dossiers qu’on va utiliser:

  • app: contient tout le code source de l’application angularJS
  • vendor: contient les librairies à utiliser, le contenu de ce dossier sera buildé avant celui du dossier app.
  • assets: contient les images, fichiers html et toute ressource statique.
  • public: le code compilé sera mis dans ce dossier.

Package.json


{
  "name": "simpleDemo",
  "version": "1.0.0",
  "description": "Simple Demo using Brunch AngularJS and Bootstrap",
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "angularjs-templates-brunch": "^1.0.0",
    "brunch": "^1.8.5",
    "javascript-brunch": "^1.7.1",
    "less-brunch": "^1.8.1"
  }
}

Pour notre exemple on va utiliser les dépendences suivantes :

  • brunch: notre outil de build
  • javascript-brunch: plugin brunch pour compiler le javascript
  • angularjs-templates-brunch: plugin brunch pour compiler toutes les vues d’AngularJS dans un fichier Javascript
  • less-brunch: pour pouvoir compiler du less en css.

à propos de bootstrap:

Pour pouvoir customiser bootstrap, on va utiliser sa version less qu’on va directement mettre dans le dossier vendor.

petite astuce: vous remarquerez dans les sources de l’exemple ( disponibles ici ) que les noms des fichiers bootstrap sont préfixés par un « _ » sauf le fichier bootstrap.less, ça indique à brunch qu’il faut ignorer de compiler ces fichiers car ils seront inclus par bootstrap.less.

Installation d’AngularJS

on va utiliser bower pour installer angularJS


bower install angular angular-route --save

Explication du code source:

On pose une structure de base pour une application de prise de notes:

app/assets/index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title>Notes</title>

    <link rel="stylesheet" href="app.css"/>
  </head>
  <body>

  <div class="container" ng-view></div>


  <script src="vendor.js"></script>
  <script src="templates.js"></script>
  <script src="app.js"></script>

  </body>
</html>

le point d’entrée de notre application, ce fichier va contenir un lien vers les fichiers compilés, en effet brunch.js est compile tellement rapidement le js et le css qu’on peux utiliser les versions compilés en cours de développement.

app/application.js

angular.module('myApp', ['ngRoute', 'templates']);

angular.module('myApp').config(function($routeProvider){
  $routeProvider.when('/', {
    templateUrl: 'app/views/page.html',
    controller: 'pageController'
  })
  .otherwise({
    redirectTo: '/'
  });
});

ici on intègre ngRoute, on ne va pas utiliser d’autres routes dans cet exemple mais je l’ai intégré quand même pour montrer qu’on peux le faire 🙂

notez la présence d’une dépendance vers un module nommé « templates », ce module sera créé par brunch durant le processus de compilation pour compiler toutes les vues HTML dans un fichier Javascript, grâce à ça on obtient un gain considérable en performances.

app/controllers/page/pageController.js


'use strict';

angular.module('myApp').controller('pageController', function($scope){
  $scope.noteList = [];

  $scope.addNote = function(){
    if($scope.noteInput !== undefined && $scope.noteInput !== ""){

      $scope.noteList.push({
        text: $scope.noteInput
      });
      $scope.noteInput = "";
    }
  };
});


app/views/page.html


<div class="row">
  <div class="col-md-12">
    <h1>Prise de notes</h1>

    <form ng-submit="addNote()">
      <input type="text" class="form-control" ng-model="noteInput" />
    </form>

  </div>
</div>

<br/>

<div class="row">
  <div class="col-md-12">

      <ul class="list-group">
        <li class="list-group-item" ng-repeat="note in noteList">{{note.text}}</li>
      </ul>

  </div>
</div>

ici on crée un champ text qui nous servira à remplir une liste, pour le moment on garde les choses assez simples.

Configuration de Brunch

config.coffee

module.exports = config:
  modules:
    definition: false
    wrapper: false
  files:
    templates:
      joinTo:
        'templates.js': /^app\/views/
    javascripts:
      joinTo:
        order:
          before: ['app/application.js']
        'app.js': /^app\//
        'vendor.js':   (path) ->
                            /^bower_components/.test(path) and not /\.min\.js$/.test(path)

    stylesheets:
      joinTo:
        'app.css': /^(app|vendor)/


  server:
    run: yes
    port: 9192


On configure Brunch à faire les choses suivantes :

  • modules: par défaut Brunch va encapsuler les fichiers Javascript dans des modules CommonJS, pour faciliter l’intégration d’angularJS on va désactiver cette fonctionnalité.
  • templates: Brunch va compiler toutes les vues d’angularJS dans un fichier Javascript (templates.js)
  • Javascript -> JoinTo -> ‘app.js’ : Compiler tout les scripts dans le dossier app/ dans le fichier app.js
  • Javascript -> JoinTo -> ‘vendor.js’ : Compiler tout les fichiers javascript dans le dossier bower_components (en ignorant les fichiers se terminant par .min.js) et les mettre dans le fichier vendor.js.
  • stylesheets -> JoinTo -> ‘app.css’: va compiler bootstrap et toutes ressources css ou less dans le fichier app.css.

Testons notre code :

on va utiliser la commande brunch watch pour tester notre code, cette dernière va compiler le code dès qu’une modification est détectée.

brunch watch

à cette vous pouvez tester le code en accédant à : http://localhost:9192/

vous devriez voir à ce stade un résultat qui ressemble à ça.

Le code de la démonstration est disponible sur github.

Je n’ai abordé dans cet article qu’une minuscule portion de ce que Brunch peut faire, j’espère que ça aurait quand même été suffisant pour vous donner envie d’essayer.