Archive for juin, 2014

Grunt, Gulp, quel outil pour automatiser vos tâches front-end ? (1/3)

Introduction

En tant que développeurs front-end, nous sommes amenés à réaliser nos projets web en ayant à l’esprit un certain nombre de bonnes pratiques telles que :

  •  La compression des feuilles de styles CSS et la minification des scripts Javascript pour qu’ils soient le plus léger possible en production
  •  L’optimisation des images en réduisant leur poids sans altérer leur qualité
  • Auto-générer des sprites d’images
  •  S’assurer que les scripts Javascript ne contiennent pas d’erreurs de syntaxe
  •  Retirer les alertes/console log en production
  •  etc …

Si  nous voulons avoir une webapp optimisée, nous devons réaliser absolument toutes ces tâches. Des tâches répétitives, quelque soit le projet, et fastidieuses car elles ne se limitent pas seulement aux 4 citées en exemple plus haut.

Automatiser ce genre de tâches est donc devenu quasi-vital dans le but, d’une part, de gagner un temps considérable à ne plus tout faire manuellement et d’autre part, d’être sûr de l’optimisation du code livré en production (minification, obfusquation etc…). Tout cela en moins de temps qu’il ne faut pour préparer votre café préféré !

Si votre quotidien est synonyme de tâches à répétition et que vous avez cherché à un moment donné à les automatiser, vous avez forcément entendu parler de Grunt ou encore de Gulp qui s’imposent comme des références en la matière d’outils d’automatisation Javascript.

Outils Javascript d’automatisation

Les outils js d’automatisation des tâches s’appuient sur Node.js, une plateforme software écrite en Javascript orientée serveur qui fut créé il y a quelques années. Elle utilise le moteur V8 de Google Chrome qui va analyser/exécuter ultra-rapidement du code js et qui fonctionne suivant un modèle non bloquant (programmation asynchrone). Node.js a ouvert la voie, entre autres, à de nouveaux outils d’automatisation tel que Grunt et c’est une vraie chance pour nous autres développeurs front-end que d’avoir à notre disposition ce genre d’outils pour :

  • déployer rapidement un serveur de développement
  • rafraîchir sa page lorsque l’on modifie un fichier
  • compiler les templates
  • bouchonner les données renvoyées par un web service,
  • supprimer tous les commentaires dans le code
  • minifier les feuilles de styles
  • obfusquer les scripts JS
  • etc…

Il n’y a pratiquement pas de limites à ce que l’on peut faire !

Grunt

Grunt est un outil basé sur des tâches exécutées en ligne de commande qui va grandement accélérer nos workflows classiques de développement en réduisant notre effort lors de la préparation des sources pour les mises en production.

Dans la plupart des cas, sachez que lorsque vous effectuez manuellement une tâche, son équivalent automatique existe sous forme de plugin Grunt comme par exemple la minification et la concaténation de scripts.

Grunt est également capable de gérer des tâches qui ne sont pas forcément liées à Javascript comme la compilation CSS depuis SASS ou LESS.

Enfin sachez qu’il dispose d’une incroyable communauté de développeurs et d’une énorme base de plugins mise à jour très régulièrement. Vous n’êtes donc pas seul à vous lancer dans l’aventure !

Installation

Comme évoqué précédemment, Grunt est basé sur Node.js. De ce fait il doit être installé sur votre machine pour que Grunt puisse fonctionner. L’installation de Grunt se fait via le npm (Node Packet Manager), il suffit d’ouvrir votre invité de commandes et d’exécuter cette instruction pour installer Grunt :

$ npm install -g grunt-cli

Package.json

Package.json est un fichier à créer à la racine de votre projet, il va vous permettre de tracker et d’installer toutes les dépendances liées au développement. Ainsi, tous les membres de votre team disposeront des toutes dernières versions des dépendances. Ce qui en fin de compte permet de garder un environnement de développement constamment synchronisé.

{
  "name": "Example",
  "description": "Un package de test",
  "version": "0.0.1",
  "private": "true",
  "author": "Prenom Nom ",
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}
$ npm install

La commande ci-dessus va dire à npm d’aller récupérer toutes les dépendances qui sont listées dans devDependencies puis de les installer dans le dossier node_modules.
 Dans cet exemple, si la commande réussie, Grunt version 0.4.5 ou supérieure sera installée localement dans le projet.

Gruntfile.js

Comme le fichier package.json, le fichier Gruntfile.js doit être placé à la racine du projet. Il contient toute la configuration des tâches automatiques à exécuter lorsque l’on exécute grunt depuis l’invité de commandes.

module.exports = function(grunt) {

    /* 1. Toute la configuration. 
     * L'ordre n'a pas d'importance.
     */
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

   /* 2. La configuration du plugin cssmin pour la minification de css.
    * Une sous tâche build qui va minifier index.css dans style.css
    */
        cssmin: {
                   build: {
                             src: 'app/css/index.css',
                             dest:'build/css/style.css'
                          } 
                }
    });
    
    /* Chargement du plugin
     * 3. On dit à Grunt que l'on compte utiliser le plugin grunt-contrib-cssmin.
     */
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    /* Déclaration des tâches
     * On dit à grunt ce qu'il faut faire lorsque l'on execute "grunt" dans l'invité de commandes.
     */
    grunt.registerTask('default', ['cssmin']);

};

À partir de maintenant il n’y a plus qu’à exécuter la ligne de commande suivante dans notre invité de commandes pour minifier notre feuille de style :

$ grunt

Et voila ! Notre feuille de style a été minifiée en une fraction de seconde. grunt-command-line
Imaginez maintenant toutes les tâches que l’on peut automatiser exactement avec la même simplicité! 
Pour vous en rendre compte, je vous invite à jeter un œil à l’impressionnant listing de plugins disponible pour Grunt. Pas moins de 3000 plugins pour faciliter notre quotidien.

Grunt est donc un outil très simple d’usage, qui consiste en un fichier de configuration js facilement lisible, dans lequel on paramètre les plugins que l’on souhaite utiliser pour automatiser nos tâches.
Sachez qu’il n’est pas le seul sur le marché… 
La suite, dans la deuxième partie de ce dossier qui sera consacrée au petit nouveau, Gulp !

UX sketching

Comment imaginer la meilleure UX pour vos utilisateurs ? C’est ce qu’Alvin Berthelot a enseigné lors d’un elaboratoire de SudWeb 2014 auquel j’ai participé le week end dernier. Pas besoin de logiciels aux licences inabordables ou de connaissances techniques approfondies. Du papier, des crayons et des gens ! Ce sont les ingrédients nécessaires pour réaliser un sketch d’interface graphique avant de réaliser des spécifications ou des users stories.

Un sujet

Commençons par définir le sujet. La problématique doit être claire et concise. Toutes les contraintes obligatoires doivent être définies. Lors de l’atelier, Alvin nous a proposé de nous mettre à la place du service IT d’une entreprise chargé de réaliser une application mobile destinée aux commerciaux qui perdent trop de temps à déclarer leurs notes de frais auprès de la comptabilité. Ils veulent une application leur permettant de prendre leurs factures en photo en temps réel, d’enregistrer le type de note de frais, la date, le montant et de suivre l’état des notes précédemment enregistrées.

Des gens

Nous allons maintenant rassembler des personnes pour constituer un groupe hétérogène. Ne prenez pas que vos collègues développeurs, demandez la participation de tous les corps de métiers possibles : commerciaux, graphistes, comptables… vous serez surpris de voir comment chacun à sa propre idée bien particulière de l’ergonomie. Choisissez entre quatre et six personnes. N’hésitez pas à choisir des personnes généralement timides qui pourront profiter de l’occasion pour s’exprimer.

Ça y est, tout le monde est autour d’une table, un calepin et des crayons, feutres à dispositions ? Alors c’est parti pour la première étape :

La réflexion individuelle

Une fois que tout le monde a bien lu et compris le sujet, nous lançons le chrono pour cinq minutes. Le timeboxing est primordial lors de cet exercice afin de se concentrer sur l’essentiel et aussi ne pas faire perdre trop de temps à toutes ces personnes qui ont d’autres tâches à faire dans leur emploi du temps. Cinq minutes durant lesquelles chacun va dessiner sur son calepin une interface graphique qui correspondrait à la demande. Des dessins très schématiques, des traits, des rectangles, des triangles, quelques annotations, il faut aller vite !

Les cinq minutes sont écoulées, c’est le moment d’expliquer son point de vue aux autres. Tour de table, on montre ses dessins, on explique ses choix, mais surtout, on n’interrompt pas ! On discutera lors de l’étape suivante :

Le dessin collaboratif

C’est maintenant que les choses deviennent amusantes. On remplace les calepins par une grande feuille de papier qu’on place au centre de la table. Tout le monde doit pouvoir y accéder car il n’y a pas de dessinateur attitré. Celui qui veut prend le crayon et dessine. C’est le moment où les critiques peuvent fuser. Il faut savoir dire qu’on n’est pas d’accord avec son collègue et savoir écouter les critiques. Le résultat ne sera que meilleur s’il est constitué d’un maximum d’idées.

C’est un exercice vraiment très intéressant. On peut avoir l’impression d’avoir la meilleure UX lors de la première étape individuelle puis se rendre compte que certains détails n’auraient finalement pas marché car on a interprété le sujet différemment des autres ou parce qu’on est conditionné par les outils qu’on utilise au quotidien. Au final, on agrège des idées qu’une seule personne, même techniquement spécialiste en UX n’aurait peut être pas trouvées toute seule. Dans notre exercice par exemple, nous avions choisi d’activer le mode photo en tant que première étape lors de l’enregistrement d’une note alors que d’autres avaient placé un petit bouton à l’intérieur d’un formulaire complexe. Dans l’autre sens, nous n’avions pas pensé à la possibilité d’afficher des notifications pour indiquer qu’une note de frais étaient passée au statut invalide.

Cette phase a duré dix minutes puis 15 minutes lors de l’atelier, selon les projets, à vous de choisir la timebox adéquate. Choisir une durée assez courte permet de pousser les participants à ne pas s’attarder sur les détails, quitte à relancer une ou deux itérations. L’important est de bien respecter la durée imposée au départ. Pour une UX un peu plus complexe on pourrait par exemple viser quatre itérations de quinze minutes.

Le pitch

L’étape finale consiste à mettre tout ça au propre, repasser les crayonnés au feutre, rajouter une ou deux couleurs, et si vous le pouvez, faire votre pitch auprès de votre client. Si le client est content, ce sketch pourra servir de base aux graphistes pour l’élaboration de maquettes graphiques et fonctionnelles ou au product owner pour l’écriture des users stories.

Voici le résultat pour mon groupe :

Sketch UX

Sketch UX

L’UX n’est pas une science exacte et est très subjective. Profitez de vos collègues et votre entourage pour rendre votre produit le plus adapté à ses utilisateurs.