L’un des motos de tout bon développeur est DRY, don’t repeat yourself. Pourtant, une très grosses partie de nos projets ont des besoins similaires : valider un email, uploader des fichiers…

À ce titre, conformément à un autre moto de tout bon développeur – ne pas réinventer la roue – on utilise des outils et modules déjà existants et éprouvés. Voici donc un petit listing des modules que j’utilise régulièrement.

Nous parlons ici de JavaScript, il va donc sans dire que tous ces outils se trouvent sur npm, le package manager du monde JS.

Par ailleurs, vous avez aussi très certainement vécu la situation où vous vous retrouvez à copier d’un projet à un autre des petits helpers ou lib maison. C’est donc peut-être le moment d’en faire un module npm et de le publier afin de pouvoir l’utiliser plus facilement.

À ce titre, certains modules de ce listing sont des modules que j’ai moi-même développé et mis à disposition de tous sur npm.

Modules front-end

Je parle ici des modules qui sont utilisés pour le front et se retrouvent dans le build final envoyé au navigateur du client.

• humanTime est un module qui permet d’afficher des dates dans un format human readable. Le format s’adapte en fonction de la date – par exemple “il y a 37 mn” ou “le 24 décembre 2017”, selon la récence de la date – et des préférences de langue navigateur de l’internaute (ça repose sur l’API d’Internationalisation des navigateurs).
• autoTimer est un petit module fournissant un timer automatiquement unbounced. C’est à dire que s’il est appelé plusieurs fois avant le timeout défini, seul le dernier appel sera exécuté. C’est très utile pour tout ce qui s’exécute suite aux fonctions d’évènements (frappe clavier, resize du navigateur…).
• resize-image permet de compresser (et automatiquement cropper) des images dans le navigateur afin de pouvoir les uploader plus rapidement.
• BigPicture est un module lightbox permetant de visualiser photos et vidéos. Il est léger et offre des transitions morphing de type scale to fit du plus bel effet.
• similar to BigPicture, PhotoSwipe supports fullscreen and offers more controls over the gallery.
• huge-uploader gère les uploads de très gros fichiers de manière intelligente en “coupant” le fichier et en l’envoyant par petits bouts. De cette manière, il est possible de mettre en pause l’upload et les erreurs du réseau ne mettent pas l’upload en échec.
• ƒlightDom ou functional light DOM est une bibliothèque destinée à faciliter l’utilisation du DOM de manière fonctionnelle. Depuis que les navigateurs modernes nous permettent de nous passer de jQuery, on travaille souvent directement avec les API natives du DOM. Leur syntaxe est souvent lourde et non adaptée à la programmation fonctionnelle. Ce module permet donc d’adresser cette situation avec une API fonctionnelle et légère.
• Fuse.js est un module extrêmement léger pour faire des recherches dans des tableaux ou objets de manière très performante. La recherche reste fonctionnelle malgré quelques fautes de frappe. À titre indicative, c’est ce qui est utilisé pour la recherche de ce blog.
• Rough.js permet de dessiner (Canvas et SVG) dans un style “crayon”. Il possède de nombreuses formes prédéfinies mais ses possibilités sont illimités.
• Base sur le précédent, RoughNotation permet de de créer des annotations de texte (entourer, barrer, sur-ligner, sous-ligner…) dans un style “main levée”.

Comme je travaille beaucoup avec Vue.js, il y a certains modules front forts utiles qui sont spécifiques à Vue. Les voici.

• V-Hotkey permet de facilement binder des touches ou combinaisons de touches à un comportement. Pratique pour mettre en place des raccourcis clavier.
• V-click-outside permet à un composant d’être averti lorsqu’un click est effectué à l’extérieur de celui-ci. On l’utilisera pour fermer un champ de recherche autocomplete, une lightbox ou mettre en pause un player vidéo.
• V-Clipboard permet de copier un texte dans le presse-papier de l’utilisateur.

Modules back-end

Le but n’est pas ici de lister tous les modules que l’on utilise régulièrement en back, mais plutôt de mettre en évidence ceux qui sont pratiques et que l’on a pas tout de suite en tête.

• Valider une adresse email est une opération que nous avons constamment à faire. Aussi simple que cela puisse paraître, il est possible d’appliquer plusieurs niveaux de vérification : validation syntaxique, vérification des enregistrements DNS et validation SMTP. Si la première étape se fait avec une simple REGEX, les autres permettent d’aller plus loin. isemail permet d’appliquer une simple vérification syntaxique, avec un algorithme plutôt avancé. email-domain-check vérifie si le domaine possède des enregistrements MX. Enfin, email-deep-validator vous fait la totale (REGEX, MX et SMTP) !
• Express.js est le framework web de Node.js. Son usage n’est pas impératif mais il apporte son lot d’outils très utiles et aide à structurer le code dès lors que le projet n’est pas trivial.
• knex.js est un SQL query builder. À ce titre, il permet simplement de gérer la plupart des bases de données SQL (MSSQL, MySQL, Postgres, SQLite). Ainsi, si vous changez de base de données en cours de route, votre code reste le même. C’est aussi également très pratique pour un projet qui veut offrir une compatibilité maximale à ses utilisateurs. C’est ce que j’utilise pour Jamments. On profite également d’une syntaxe familière pour ceux qui sont un peu allergiques au SQL.
• mysqljs permet à l’inverse, d’écrire du SQL directement pour MySQL ou MariaDB. Il y a plusieurs clients possibles pour MySQL, mais celui-ci est mon préféré. Très performant, son API est simple et logique. On peut faire du bulk insert, streamer les résultats, profiter du pseudo UPSERT avec ON DUPLICATE KEY UPDATE… Il ne lui manque pour l’instant que les promises, mais un petit wrapper fait l’affaire dans 99% des cas.
• bad-request-error est un constructeur d’erreur dédié aux erreurs dans les paramètres de requête HTTP. On lui passe un message d’erreur ainsi que le code d’erreur HTTP. Il vise à permettre l’automatisation des réponses HTTP au client.
• express-body-validator est un module de validation des paramètres des requêtes HTTP : never trust user input ! Orienté promise et basé sur v8n, ce module rend la validation des paramètres aussi simple qu’efficace. Les données sont passées directement à then en cas de succès, et si un paramètre n’est pas validé, on catch une erreur BadRequestError. Fini les conditions et REGEX qui polluent vos controlleurs, le flux des données est maintenant préservé. Le module existe aussi pour Node.js sans framework : node-body-validator.
• emailjs permet d’envoyer des emails directement en SMTP, une tâche elle aussi assez récurrente en back.
• huge-uploader-nodejs est la partie serveur du module huge-uploader listé dans la partie frontend. Il réceptionne les “morceaux” envoyés par le navigateur et les assemble à la fin de l’upload afin de récupérer le fichier complet.
• Dans le domaine des modules d’upload de fichiers, plusieurs options existent côté Node.js. Les quatre principales solutions sont Multer, Busboy, Formidable et Multiparty. Chaque module présente des avantages et inconvénients. Vous pouvez consulter cet article [en] pour faire un choix avisé.
• winston se passe presque de présentation. C’est le logger roi de Node.js, on ajoute les transports (plugins) qui vont bien et les logs partent vraiment où vous voulez (fichier, ELK, Graylog…).
• winston-log2gelf est un transport Winston pour envoyer vos logs vers un serveur Graylog ou GELF.

Modules isomorphiques

Nous parlons ici des modules que l’on utilise aussi bien en front qu’en back. Je considère plus le cas d’usage que le potentiel technique à tourner en front ou back.

• uniqid permet, comme son nom l’indique, de générer des id uniques, de manière similaire à la fonction éponyme de PHP. Pour des besoins plus complexes avec des ids de longueur personnalisable (plus longs, ou plus courts), on peut se diriger vers Nono ID.
• v8n pour validation, est un module permettant de valider les données (type, valeur etc). Il remplace très avantageusement des conditions et des regex. De plus, son api est chainable, ce qui la rend vraiement conviviale à l’usage pour crééer des règles de validation.
• validator est un autre module de validation. Contrairement au précédent, il ne permet pas de créer des règles de validation mais propose un set de règles prédéfinis pour les cas souvent rencontrés : numéro de téléphone (nombreux pays disponibles), numéro de carte bancaire, email, url…
• socket.io n’est pas à proprement parler isomorphique, mais une partie s’exécute dans le navigateur tandis qu’une autre tourne sur le serveur. Cette librairie – qu’on ne présente plus – est une surcouche à l’api websockets, qui permet facilement de tirer profit de cette technologie full duplex. La bibliothèque fallback automatiquement sur du polling si la configuration (réseau ou navigateur) ne permet pas l’usage des websockets.
• color.js Il s’agit ici d’une collection de modules pour travailler avec les couleurs. La majorité – je ne sais pas si c’est le cas de tous – tournent aussi bien en front qu’en back.

Modules de développement

Ce sont ici les modules qui restent sur nos machines de dev, mais dont on pourrait difficilement se passer… Certains de ces modules s’utilisent de manière différentes selon que l’on travaille sur un modèle de pages “classiques” ou avec un bundler tel que Webpack.

Je vais donc commencer par l’usage classique – lequel est détaillé dans mon article sur Rollup – puis on verra comment gérer les choses avec Webpack (dans un cadre type Vue.js ou React).

• eslint le linter JavaScript, celui-ci est dans absolument tous mes projets. Il se marie idéalement avec eslint-config-airbnb-base, on lui adjoint aussi eslint-plugin-import afin de bien valider la syntaxe ESModules. De plus, pour les projets Node.js, on peut également avantageusement utiliser eslint-plugin-security, lequel permet de détecter certaines erreurs menant à des failles de sécurités.
• stylelint même chose mais côté styles. Je l’utilise conjointement à stylelint-config-standard afin d’avoir une config de base qui fait sens et stylelint-order afin de forcer un ordre dans les styles. C’est meilleur pour la compression et pour s’y retrouver. Là il y a deux écoles : ceux qui veulent de l’alphabétique et ceux qui veulent grouper les choses sémantiquement proche (width et height devraient être à côté…).
• postcss-cli permet, toujours au rang des styles, de faire énormément de choses selon les plugins qu’on luit adjoint. Je considère comme indispensable de l’utiliser avec autoprefixer.
• less permet de compiler le LESS en CSS. Bien que les récentes version de CSS permettent beaucoup, je reste un utilisateur habitué au confort de LESS. On verra dans quelques années si la situation évolue.
• cssmin est indispensable afin de compresser les styles qui seront envoyés à nos visiteurs.
• purgecss parse vos fichiers CSS et supprime tout ce qui n’est pas utilisé. Un outil qui fait fondre vos feuilles de style comme neige au soleil.

Rollup

Là où on utilisait avant Browserify avec le CommonJS, on aura maintenant plutôt tendance à utiliser un module bundler capable de gérer les module ECMAScript.

J’utilise pour ma part Rollup. On l’installe avec ses indispensables plugins que sont :

• node-resolve afin d’importer des modules installés via npm,
• commonjs afin de prendre en charge les modules qui ne sont qu’au format commonjs (require),
• babel et @babel/preset-env pour compiler du code moderne vers une cible plus large,
• et terser afin de minifer le code pour le rendre plus léger à télécharger.

Webpack & Vue.js

Dès lors que le projet est un peu plus complexe (ou selon les préférences), on a tendance à utiliser Webpack. C’est par exemple le bundler par défaut avec Vue CLI et il accompagne quasi automatiquement les projets React.

Bon nombre des dépendances sont directement installées et configurées par Vue CLI lorsqu’on l’utilise pour initialiser un projet. Il n’est donc pas forcement utile de les détailler ici car elles ne sont pas manuellement installées.

• less-loader permet de charger et convertir les fichiers LESS.
• worker-loader permet de charger comme il se doit les web workers.

Comme je l’ai mentionné en introduction, il ne s’agit absolument pas d’une liste exhaustive de tous les modules utiles ou que j’utilise, mais plutôt de ceux que l’on retrouve presque systématiquement dans la plupart des typologies de projets. N’hésitez pas à me faire part de vos propres préférences et conseils en commentaires.