Cette annexe est une sélection de modules npm (https://npmjs.com)
à laquelle vous référer pour démarrer rapidement, mais aussi pour découvrir
des usages et des domaines d’application insoupçonnés.
J’ai bâti cette liste à partir de mon expérience personnelle et sur la confiance que je porte aux personnes à l’origine de ces modules.
Ces modules répondent à des besoins quotidiens, pour travailler plus rapidement sur des structures ECMAScript.
lodash (https://npmjs.com/lodash) est une collection de plusieurs dizaines de fonctions pour travailler plus facilement avec des chaînes de caractères, des tableaux, des fonctions et des objets.
Vous pourrez ainsi filtrer, sélectionner, fusionner, vérifier et composer de nouvelles variables, aussi bien pour Node que dans les navigateurs.
link:./examples/lodash.js[role=include]-
Affiche
Thor.
he (https://npmjs.com/he) est un utilitaire pour encoder et décoder des entités HTML dans des chaînes de caractères.
link:./examples/he.js[role=include]-
Affiche
<h1>Blog Post</h1>. -
Affiche
<h1>Blog Post</h1>.
chance (https://npmjs.com/chance) crée des données de manière aléatoire. Le module retourne aussi des prénoms fictifs, mais aussi des numéros de téléphone, des nombres, des paragraphes, des dates d’anniversaire, des identifiants Android ou Apple, etc.
Il s’utilise surtout pour générer des données factices à des fins de tests, en attendant les vraies données.
date-fns (https://npmjs.com/date-fns) est une collection de fonctions
pour travailler avec des dates, plus facilement qu’avec l’objet natif Date.
Vous pouvez formater, ajouter ou retirer des jours, vérifier si deux périodes de temps se chevauchent ou si deux dates font partie d’une même semaine calendaire.
tcomb (https://npmjs.com/tcomb) renforce la création de structures typées et non mutables. Cela réduit les effets de bord de nos applications lorsque les données n’ont pas la structure attendue.
link:./examples/tcomb.js[role=include]-
Définition d’une structure stricte qui a pour propriétés
latetlon, pour latitude et longitude. -
Cet appel va lancer une exception car la propriété
longest inconnue. -
Cet appel va lancer une exception car la propriété
londoit être un nombre.
eventemitter3 (https://npmjs.com/eventemitter3) sert à gérer des événements de manière uniforme dans un script Node et dans les navigateurs.
link:./examples/eventemitter3.js[role=include]-
Affiche
[ [Function], [Function] ]. -
Affiche
on: ping,pingpuisonce: ping,ping. -
Affiche
on: ping,ping. -
N’affiche rien, l’événement étant désormais déconnecté.
debug (https://npmjs.com/debug) rend optionnel l’affichage de messages de débogage. Les messages s’affichent en présence d’une variable d’environnement. Nous pouvons ainsi lancer un processus et retracer un cheminement complexe de données.
Par défaut, les messages ne s’affichent pas :
$ node examples/debug.js
Les messages du débogueur app s’affichent désormais :
$ DEBUG=app node examples/debug.js app fromages [ 'livarot', 'chaource' ] +0ms
Nous pouvons en afficher plusieurs en même temps, en usant du caractère *
ou en séparant les noms de débogueurs avec des virgules :
$ DEBUG=app* node examples/debug.js app fromages [ 'livarot', 'chaource' ] +0ms app:timer now 1531304027271 +0ms
link:./examples/debug.js[role=include]-
Création du débogueur
app. -
Création du débogueur
app:timer. -
La fonction de débogage s’utilise de la même manière que
console.log. -
Cette fonction fait appel au débogueur
app:timer.
nodemon (https://npmjs.com/nodemon) relance le processus actif dès qu’un fichier ECMAScript ou JSON est modifié. C’est un module exécutable particulièrement utile lorsque nous voulons prendre en compte les changements dans une application qui tourne en continu. C’est le cas des applications web, entre autres.
|
Note
|
Pour en savoir plus, rendez-vous à la section “Pendant le développement : relancer le serveur automatiquement” du chapitre 7. |
npm-run-all (https://npmjs.com/npm-run-all) est mon outil favori
pour composer avec les scripts npm.
Il a l’avantage d’être adaptable, de régler finement ce qui
doit être exécuté en parallèle ou séquentiellement.
Le module transfère les arguments aux sous-scripts.
{
"...": "...",
"scripts": {
"build": "npm-run-all -p 'build:*' -s start",
"build:css": "sass ...",
"build:js": "browserify ...",
"start": "node server.js"
}
}
husky (https://npmjs.com/husky) intègre Git aux
scripts npm.
Autrement dit, vous pouvez déclencher des scripts lors d’événements Git,
lors d’un push, avant un commit ou après avoir rapatrié des changements.
{
"...": "...",
"scripts": {
"precommit": "lint-staged",
"post-merge": "npm install"
}
}La liste complète des hooks Git se trouve dans la documentation officielle : https://git-scm.com/docs/githooks.
onchange (https://npmjs.com/onchange) observe une liste de fichiers en continu et déclenche une commande dès que l’un d’entre eux est modifié. C’est particulièrement utile pour reconstruire automatiquement des fichiers de configuration ou des fichiers front-end pendant le développement.
{
"...": "...",
"scripts": {
"build:css": "sass ...",
"dev": "npm-run-script -p 'watch:*' start",
"watch:css": "onchange '**/*.scss' -- npm run build:css",
"start": "node server.js"
}
}
tiny-lr (https://npmjs.com/tiny-lr) est une implémentation minimale du protocole livereload (http://livereload.com). Il s’intègre à un serveur HTTP ou à une application Express pour relayer la liste des fichiers modifiés côté client.
Le script ou l’extension navigateur client remplace les anciens fichiers par les nouveaux pour refléter les changements sans recharger la page.
livereactload (https://npmjs.com/livereactload) recherche les composants React à chaud, c’est-à-dire sans rafraîchir la page ni perdre l’état des données. C’est un module indispensable pour développer des applications front-end réactives.
|
Note
|
Rendez-vous dans la section “Changements en temps réel dans le navigateur” du chapitre 9 pour en savoir plus sur son installation et son intégration. |
Le code que nous écrivons se protège dès la conception et dans le temps. Certains modules filtrent les tentatives d’exploitation de nos applications, tandis que d’autres vérifient si le code déployé est toujours sûr.
sanitize-filename (https://npmjs.com/sanitize-filename) nettoie une variable de tout caractère ambigu ou qui ne serait pas attendu.
link:./examples/sanitize-filename.js[role=include]-
Affiche
aucun-problème.txt. -
Affiche
.....sshid_rsa– les caractères/sont nettoyés car il permettrait de créer des chemins compromettants pour l’application ou le système d’exploitation.
helmet (https://npmjs.com/helmet) est un module à intégrer systématiquement dans toute application Express. Il ajoute des en-têtes HTTP Content-Security Policy, Strict Transport Policy et d’autres qui empêchent le détournement d’informations.
Chacune de ses protections se configure aussi au cas par cas. Elles s’intègrent manuellement dans d’autres types d’applications web, y compris un serveur HTTP natif à Node.
dompurify (https://npmjs.com/dompurify) nettoie un contenu HTML pour le rendre affichable en toute sécurité. Il nettoie des scripts indésirés, des balises mal formées qui casseraient l’affichage, ou encore des iframes qui injecteraient des contenus tiers sans notre consentement.
filenamify (https://npmjs.com/filenamify) nettoie une valeur pour retirer tout caractère invalide dans un nom de fichier. C’est pratique pour laisser la possibilité à un utilisateur de choisir un nom de fichier sans pour autant mettre en danger le système ou l’application.
retire.js (https://npmjs.com/retire) sert à scanner soi-même des
vulnérabilités connues dans des fichiers JavaScript.
Il est complémentaire de la commande npm audit
car il inspecte des dépendances qui ne sont pas forcément sur npm.
snyk (https://npmjs.com/snyk) est à la fois un service en ligne et un module pour vérifier la présence de failles de sécurité connues dans les dépendances de nos projets.
La vérification syntaxique est un mécanisme s’assurant que votre code respecte la grammaire du langage associé. Elle révèle aussi des anomalies fondamentales (balise mal fermée, expression inconnue, etc.) et renforce des pratiques de programmation commune au groupe de développement.
Vérifier la syntaxe de notre code est une excellente première étape avant d’introduire des tests unitaires ou fonctionnels.
htmlhint (https://npmjs.com/htmlhint) vérifie la structure de
nos documents HTML.
Il rapporte les doublons d’attributs id, la présence de balises
mal formées, l’absence de balise fermante ou encore l’existence de chaînes de
caractères non imprimables dans des attributs critiques, entre autres.
Prenons en exemple le document suivant :
link:./examples/sample.html[role=include]Une lecture distraite pourrait nous faire passer à côté d’erreurs et d’incohérences de programmation. Les erreurs de ce genre passent d’autant plus inaperçues que la base de code devient volumineuse et change fréquemment.
L’exécution de htmlhint avec ses règles par défaut remontera les alertes suivantes :
$ ../node_modules/.bin/htmlhint sample.html sample.html: line 1, col 1: Doctype must be first. line 8, col 10: Id redefinition of [ btn ]. line 10, col 3: Tagname [ BUTTON ] must be lower case. ... line 10, col 52: Tagname [ BUTTON ] must be lower case.
eslint (https://npmjs.com/eslint) est l’outil de vérification syntaxique pour ECMAScript par excellence. Il est souple, rapide à mettre en œuvre et s’adapte à des contextes complexes. J’aime son mécanisme de configuration de règles : utilisation systématique du mode strict, nombre maximum de paramètres de fonctions, objets non déclarés, variables inconnues, etc.
eslint expose également des fonctions pour créer vos propres règles métier.
link:./examples/package-eslint.json[role=include]Le niveau de sévérité de chaque règle est représenté par un identifiant :
-
none: règle désactivée ; -
warn: affiche un avertissement ; -
error: affiche une erreur (le processus se terminera avec un code d’erreur).
Certaines règles demandent ou acceptent des arguments supplémentaires. Elles sont toutes documentées sur le site web du projet : http://eslint.org/docs/rules/.
|
Note
|
Documentation Règles personnalisées
Un exemple réutilisable de règles personnalisées se trouve sur le dépôt GitHub de Airbnb : |
csslint (https://npmjs.com/csslint) est un outil de vérification syntaxique de feuilles de style CSS. Il a été créé par deux anciens ingénieurs de Yahoo! dont les anciens travaux dans le domaine de la performance ont influencé l’architecture et le choix des règles par défaut.
csslint fournit les mécanismes de vérification adéquats pour alerter de
possibles effets de bord de box model, de déclaration incompatible de
@font-face, de vendor prefix dépréciés ou encore de combinaisons de
propriétés connues pour casser l’affichage dans certains navigateurs.
Prenons par exemple le fichier CSS suivant :
link:./examples/sample.css[role=include]csslint lancera trois alertes en lisant le fichier sample.css,
même si celui-ci est syntaxiquement parfaitement valide :
$ ../node_modules/.bin/csslint sample.css csslint: There are 3 problems in sample.css. sample.css 1: warning at line 4, col 11 Values of 0 shouldn't have units specified. border: 0px solid black; sample.css 2: warning at line 4, col 3 Using height with border can sometimes make elements larger than you expect. border: 0px solid black; ...
doiuse (https://npmjs.com/doiuse) est un utilitaire qui repose sur la base de données du site communautaire https://caniuse.com. Il nous alerte des possibles incompatibilités de syntaxe en fonction de la liste de navigateurs à gérer. Cette liste concerne aussi bien des versions spécifiques (Internet Explorer 8) que des parts de marché (tous les navigateurs avec plus de 5 % de parts de marché).
L’exemple suivant illustre les alertes relevées par doiuse dans le cas d’une recherche de compatibilité avec Internet Explorer 6 et Internet Explorer 7 :
$ ../node_modules/.bin/doiuse -b 'ie < 8' sample.css sample.css:1:1: CSS 2.1 selectors not supported by: IE (6) sample.css:8:1: CSS 2.1 selectors not supported by: IE (6) sample.css:12:1: CSS3 Transitions not supported by: IE (6,7) sample.css:14:1: CSS 2.1 selectors not supported by: IE (6)
Commentaires, indentations ou encore noms de variables : tout cela occupe de la place – autant d’octets transférés sur le réseau avant d’être exécutés par un client web. Les outils d’optimisation offrent l’opportunité aux développeurs et développeuses d’écrire du code sans compromettre sa lisibilité et sa maintenabilité.
Les minifieurs et optimiseurs mettent en œuvre différentes techniques pour réduire le poids de notre code :
-
suppression des commentaires et caractères non significatifs ;
-
renommage de variables ;
-
factorisation d’occurrences multiples similaires ;
-
suppression des instructions relatives au débogage/développement ;
-
suppression du code inutilisé ;
-
écriture automatique de code pour prendre en charge des environnements anciens ou futurs.
UglifyJS (https://npmjs.com/uglify-es) est un des premiers compresseurs à utiliser une représentation syntaxique en arbre (Abstract Syntax Tree – AST) en lieu et place des classiques optimisations avec expressions régulières.
Cette méthode élargit les perspectives de la compression via de la réécriture de code :
-
hoisting des variables (remontée de leur déclaration en début de portée) ;
-
combinaison des déclarations de variables ;
-
factorisation des valeurs de variables ;
-
réécriture partielle d’expressions ;
-
injection en ligne du contenu de variables.
UglifyJS s’utilise en ligne de commande ou comme un module Node.
PostCSS (https://npmjs.com/postcss) est une optimiseur CSS modulaire. Cet outil est construit autour d’un parseur CSS, d’un arbre syntaxique et d’un compilateur de texte. C’est la même recette qui a participé au succès et à la richesse fonctionnelle d’outils comme UglifyJS et ESLint.
Avec une ou plusieurs extension(s), vous basculez d’un optimiseur de code vers la possibilité de créer votre propre préprocesseur, comme Sass !
autoprefixer (https://npmjs.com/autoprefixer) est le module qui
vous épargnera l’écriture de centaines de lignes CSS.
Il ajoute automatiquement les préfixes navigateurs aux bons endroits :
-webkit, -moz, etc.
autoprefixer s’utilise comme extension au module PostCSS, en ligne de commande ou comme module Node.
$ ../node_modules/.bin/postcss sample.css \
--use autoprefixer | grep transition
transition: font-weight 0.2s ease;
Le choix de compatibilité avec les navigateurs repose sur la variable
d’environnement BROWSERSLIST, gérée par le module browserslist
(https://npmjs.com/browserslist) :
$ export BROWSERSLIST='firefox > 8'
$ ../node_modules/.bin/postcss sample.css \
--use autoprefixer | grep transition
-moz-transition: font-weight 0.2s ease;
transition: font-weight 0.2s ease;
uncss (https://npmjs.com/uncss) est le pendant inverse d'autoprefixer puisqu’il se charge de supprimer le code CSS inutilisé. Il s’utilise de manière autonome ou comme module PostCSS.
Le module charge une ou plusieurs page(s) web, calcule la différence entre les règles utilisées et celles qui ne le sont pas. Vous êtes libre de mentionner une liste blanche de règles à ne jamais supprimer.
csswring (https://npmjs.com/csswring) est un minifieur de code CSS qui s’interface lui aussi avec PostCSS. Vous lui donnez du code, il en ressort une version avec le minimum de caractères possible.
Google Closure Compiler (https://npmjs.com/google-closure-compiler-js) est un compilateur ECMAScript plus poussé qu'UglifyJS mais qui impose un style d’écriture plus strict, voire plus contraignant. Ses optimisations sont en général bien plus poussées et permettent d’atteindre des niveaux de finesse difficiles à obtenir autrement.
csso (https://npmjs.com/csso) est une alternative à csswring, écrite par l’équipe derrière la méthodologie BEM (https://en.bem.info).
csso ira jusqu’à réécrire les codes couleurs, les margin et padding et
factorisera les sélecteurs similaires.
svgo (https://www.npmjs.com/svgo) s’attaque au nettoyage des fichiers graphiques vectoriels au format SVG. Il simplifie les chemins et supprime les attributs et déclarations superflues.
Vous pouvez l’essayer en ligne sur https://jakearchibald.github.io/svgomg/ ou l’intégrer comme extension à PostCSS.
wawoff2 (https://npmjs.com/wawoff2) optimise des polices de caractères pour le Web. Le module convertit des polices au format TTF vers le format WOFF2 – à préférer car plus léger et donc rapide à charger.
Les préprocesseurs sont des outils de productivité pour CSS. Ils transforment un langage plus avancé dans quelque chose qui est compris par un navigateur web.
La même chose s’applique avec la compilation ou la transpilation pour ECMAScript, pour utiliser dès maintenant une version du futur.
less (https://npmjs.com/less) est un préprocesseur CSS. Il gère des variables, des mixins, des calculs de couleurs et des fonctions qui encouragent une écriture modulaire, plus logique et plus succincte.
link:./examples/stylesheet.less[role=include]L’exécutable lessc compile le fichier less:
$ ../node_modules/.bin/lessc stylesheet.less
sass (https://npmjs.com/node-sass) est un autre préprocesseur CSS. Il est issu du monde Ruby et est désormais tout aussi puissant dans Node grâce à LibSass, un module rapide et portable écrit en C++.
browserify (https://npmjs.com/browserify) transforme des modules et du code initialement écrit pour Node vers du code exécutable dans un navigateur web.
Un puissant mécanisme de transformations étend ses capacités au coup par coup.
|
Note
|
Nous en parlons plus en détail dans la section
“Importer des modules |
babel (https://npmjs.com/babel) est un outil qui permet de passer d’une version d’ECMAScript à une autre, fonctionnalité par fonctionnalité. C’est un outil indispensable pour écrire un code moderne et le faire fonctionner dans des navigateurs anciens.
TypeScript (https://npmjs.com/typescript) est un langage de programmation typé. Toute structure utilisée est décrite avec un schéma que TypeScript valide. Nous sommes prévenu·e·s des erreurs avant même d’avoir exécuté notre code car l’outillage sait si on manipule des données qui existent.
Au final, le code est transformé en ECMAScript et exécuté en tant que tel. Le code est tellement propre que nous pouvons arrêter d’utiliser TypeScript du jour au lendemain et travailler sur le code qu’il aura généré sans aucun problème.
Ces bibliothèques nous aident à écrire moins de lignes de code pour des besoins quotidiens de manipulation de fichiers.
mkdirp (https://npmjs.com/mkdirp) est identique à la
commande Unix mkdir -p, c’est-à-dire que les répertoires seront créés récursivement
s’ils n’existent pas au préalable.
Si nous utilisions le module Node fs, nous devrions créer l’arborescence de
répertoires par nous-même, niveau par niveau.
rimraf (https://npmjs.com/rimraf) est le pendant opposé de mkdirp.
Il supprime une arborescence de manière récursive.
C’est l’équivalent de la commande Unix rm -rf.
Si nous utilisions le module Node fs, nous devrions supprimer d’abord
les fichiers puis les répertoires, un par un.
glob (https://npmjs.com/glob) est un utilitaire pour obtenir une liste de fichiers en utilisant des motifs.
link:./examples/glob.js[role=include]-
Affiche une liste de fichiers dont l’extension est
.js. -
Affiche une liste de fichiers qui commencent par
reet dont l’extension est.js. -
Affiche une liste de fichiers qui s’appellent
sample, peu importe leur extension.
fs-extra (https://npmjs.com/fs-extra) est une collection de fonctions pour gérer les opérations de fichiers. Le module inclut rimraf et mkdirp en plus d’autres fonctions récursives, pour copier, déplacer ou supprimer des fichiers.
graceful-fs (https://npmjs.com/graceful-fs) est identique
au module Node fs.
La différence se situe sous le capot : le module gère les défaillances du système et tente d’accéder à nouveau aux ressources demandées si les erreurs sont liées à des problèmes de performance.
C’est un module à utiliser si notre application dépend fortement de la disponibilité du système de fichiers et si celui-ci est fortement sollicité.
chokidar (https://npmjs.com/chokidar) crée des observateurs du système de fichiers. Il gère les différences des systèmes d’exploitation et nous permet d’écrire un seul et même code.
C’est la bibliothèque vers laquelle se tourner lorsque nous avons besoin de déclencher des actions quand des fichiers sont modifiés.
Node sait communiquer avec tout type de bases de données grâce à l’écosystème npm.
Préférez les modules faisant état de pilote natif/binaire –
le transfert de données n’en sera que plus rapide.
db-migrate (https://npmjs.com/db-migrate) est un outil de gestion de migrations pour MySQL, SQLite, MongoDB et PostgreSQL. À l’aide de scripts de migration, il rend reproductibles des changements de structure dans une base de données – ajout ou suppression de champ, de table ou d’index.
knex (https://npmjs.com/knex) propose d’interagir et d’interroger des bases de données SQL comme PostgreSQL, MariaDB, MySQL et SQLite.
Les requêtes s’écrivent en SQL pur ou en utilisant une API dite “fluide”, pour ne pas écrire le SQL à la main.
link:./examples/knex.js[role=include]-
Indique que nous allons nous connecter à une base de données de type SQLite.
-
Spécifie l’emplacement de la base de données.
-
Effectue une recherche floue sur les lignes dont le titre contient le mot
'Node'. -
Compte le nombre de lignes et retourne le premier (et seul) résultat de la requête.
-
Affiche
[ { id: 1, title: 'Node.js ', created_at: '2018-07-11 10:34:33' } ]. -
Affiche
{ count: 3 }.
bookshelf (https://npmjs.com/bookshelf) est une surcouche à Knex, écrite par les mêmes personnes. Elle modélise les données sous forme d’objets et de schémas (ORM) pour automatiser des actions et ajouter plus d'“intelligence” à notre modèle de données.
sequelize (https://npmjs.com/sequelize) est une alternative à Knex et à Bookshelf. Elle gère des schémas de données de manière optionnelle, mais aussi les migrations. Ces dernières permettent de scripter les changements de structure d’une base de données, de les tester en local avant de les jouer en production.
mongoose (https://npmjs.com/mongoose) sert à composer des modèles de données pour la base de données MongoDB – dite NoSQL. Elle définit des comportements annexes comme des mixins ou des accesseurs dynamiques.
LevelDB (https://npmjs.com/levelup) est un système de bases de
données clé/valeur extrêmement modulaire.
Le stockage se fait sur disque par défaut, mais il peut évoluer vers du stockage
en mémoire (module memdown) ou même dans un navigateur web (avec IndexedDB).
link:./examples/levelup.js[role=include]-
Crée la connexion à la base de données en mémoire.
-
Recherche un enregistrement après l’avoir enregistré en mémoire.
-
Affiche
{ title: 'Node.js' }.
redis (https://npmjs.com/redis) est un gestionnaire de bases de données clés/valeurs distribuées et performantes.
link:./examples/redis.js[role=include]hiredis (https://npmjs.com/hiredis) est un pilote C++ qui augmente les performances de connexion à une base de données redis.
elasticsearch (https://npmjs.com/elasticsearch) est un client pour simplifier la connexion à une base de données Elasticsearch. Une base de ce type est particulièrement adaptée à l’indexation des données, pour des recherches performantes et complexes.
Ces modules complètent le panorama déjà très varié présenté dans le chapitre 8.
yargs-parser (https://npmjs.com/yargs-parser) est le module d’interprétation des arguments utilisé par le module yargs. C’est une alternative plus puissante et plus complexe que minimist.
args (https://npmjs.com/args) est un module minimaliste pour interpréter les arguments, les structurer et afficher une aide claire à nos utilisateurs et utilisatrices.
Cerise sur le gâteau : le module suggère un choix de commande en cas d’erreur de frappe.
caporal (https://npmjs.com/caporal) est un framework complet pour bâtir des applications en ligne de commandes. Il gère les classiques arguments et options ainsi que les sous-commandes, les types de valeurs et l’autocomplétion.
promptly (https://npmjs.com/promptly) est un utilitaire pour poser des questions, valider et travailler avec les réponses obtenues. Il est minimaliste et a un faible nombre de dépendances.
supports-color (https://npmjs.com/supports-color) vérifie si le contexte d’exécution du programme en ligne de commande supporte les couleurs.
Cela nous évite d’envoyer des codes ANSI, qui, seraient affichés au lieu d’être interprétés comme des couleurs.
Ces modules complètent le panorama déjà très varié présenté dans le chapitre 7.
fastify (https://npmjs.com/fastify) est un framework inspiré de Express. Il se focalise sur la simplicité de l’expérience de développement et sur de hautes performances. Il sait valider les données sortantes à l’aide de schémas.
Pour aller au-delà des données, il se combine avec le module point-of-view (https://npmjs.com/point-of-view). Vous avez ainsi accès à l’utilisation de modules de templating.
passport (https://npmjs.com/passport) est une bibliothèque modulaire d’authentification pour Express. Elle se branche à différents mécanismes pour vérifier les utilisateurs : utilisateur et mot de passe, compte GitHub, Twitter, OAuth, etc.
Les sessions d’utilisateurs se gèrent à côté – pour mémoriser qui est connecté ou non, et avec quel identifiant sécurisé et unique.
Référez-vous à sa documentation pour des exemples détaillés d’utilisation.
restify (https://npmjs.com/restify) est un framework web spécialisé dans la création d’API HTTP.
Il gère les versions de routes et expose un client permettant de consommer des données sur d’autres API REST – proxy.
link:./examples/restify.js[role=include]
faye (https://npmjs.com/faye) est un serveur WebSocket pour communiquer en temps réel entre un client et un serveur. Il sait débrayer vers Ajax ou JSON-P pour les navigateurs anciens qui ne comprennent pas WebSocket.
link:./examples/faye.js[role=include]Cet exemple de serveur minimaliste expose un point d’entrée auquel on peut accéder via le client Faye, dans un navigateur ou via un autre script Node.
Tout message émit par un client sera relayé auprès des autres clients connectés.
swagger-client (https://npmjs.com/swagger-client) sert à valider des requêtes et des réponses HTTP en fonction de schémas qui répondent à la spécification OpenAPI.
Cette spécification permet entre autres de gérer automatiquement les routes de notre application pour nous concentrer sur le code qui génère les données de sortie.
Les bibliothèques de templating proposent d’associer une structure de données à une logique de présentation. Pour la plupart, elles fonctionnent aussi bien sous Node que dans les navigateurs, ce qui est une excellente nouvelle pour partager des comportements d’affichage entre les deux environnements.
Tous les modules que nous allons voir généreront cette sortie HTML :
<!DOCTYPE html>
<html>
<head>
<title>Template demo</title>
</head>
<body>
<ul>
<li>CSS maintenables</li>
<li>Node.js</li>
<li>Open Sky</li>
</ul>
</body>
</html>nunjucks (https://npmjs.com/nunjucks) est un portage de Jinja, bibliothèque bien connue par les adeptes de Python. Sa syntaxe inclut des fonctionnalités comme les filtres, les blocs ou l’héritage de gabarit.
link:./examples/template.html[role=include]handlebars (https://npmjs.com/handlebars) et son prédécesseur mustache sont les vétérans du templating Node. Leur parti pris est de proposer le minimum de logique afin que celle-ci reste au plus près des données.
handlebars sait aussi précompiler les gabarits sous forme de fonctions ECMAScript.
link:./examples/template.hbs[role=include]pug (https://npmjs.com/pug) opte pour un parti minimaliste qui repose entièrement sur l’indentation. Son mécanisme de blocs facilite la réutilisation d’éléments de présentation.
link:./examples/template.pug[role=include]ejs (https://npmjs.com/ejs) part du principe qu’il n’y a pas besoin d’un langage de templating autre qu’ECMAScript. Donc c’est tout simplement ce qui vous sera proposé, impliquant de ce fait une faible courbe d’apprentissage.
link:./examples/template.ejs[role=include]React (https://npmjs.com/react) est une bibliothèque de présentation dite “réactive” et orientée composants. Elle génère un arbre visuel à partir de données passées en entrée. Cet arbre est ensuite transformé en HTML, en interface iOS ou Android, entre autres.
link:./examples/template.jsx[role=include]
storybook (https://github.com/storybooks/storybook) complète React et d’autres frameworks de templating en créant un catalogue de composants auto-documentés. Les composants sont affichés en même temps que le code nécessaire pour les utiliser dans une autre application.
Le module assert intégré à Node suffit pour démarrer.
Il existe cependant tout un outillage pour tester notre code à destination de
Node (tests unitaires) ou des navigateurs (tests fonctionnels) ainsi que pour
écrire des assertions plus facilement.
tape (https://npmjs.com/tape) est une bibliothèque d’exécution de tests minimaliste qui se base sur le Test Anything Protocol (TAP, https://testanything.org). Elle embarque aussi le minimum vital pour écrire des assertions.
link:./examples/tape.js[role=include]-
Création d’un test.
-
Écriture d’une assertion.
chai (https://npmjs.com/chai) est une bibliothèque poussée d’assertions. Son mécanisme chaîne permet de quasiment écrire des phrases pour exprimer l’intention des choses à vérifier.
link:./examples/chai.js[role=include]-
Vérification du type d’une variable.
-
Vérification stricte de valeur d’une variable.
-
Double vérification – il s’agit bien d’objet et il est vide, sans clé/valeur.
sinon (https://npmjs.com/sinon) est un compagnon idéal pour intercepter le fonctionnement interne de variables et d’objets. Le module propose de créer des écouteurs (spys) et des bouchons (stubs, mocks).
En d’autres termes, vous prenez la main sur des portions de votre propre code pendant la durée des tests. Ces techniques servent pour simuler des erreurs et différentes situations tout en observant le comportement réel de notre code.
link:./examples/sinon.js[role=include]-
Création d’un bouchon pour la méthode
now()d’un objetDate. -
Surcharge de la valeur retournée par la méthode
d.now(). -
Nous constatons le nombre de fois où la méthode
d.now()a été appelée.
Le module sinon-chai (https://npmjs.com/sinon-chai) intègre sinon avec le mécanisme d’assertions de chai.
nyc (https://npmjs.com/nyc) génère une couverture de code. Il inspecte le code exécuté pendant les tests et en déduit les portions qui n’ont pas été visitées et, donc, qui n’ont pas été testées. C’est un indicateur utile pour attester de la fiabilité d’une base de code – plus la couverture est importante, plus il y a de chances que les cas à la marge aient été vérifiés.
nyc se greffe sur n’importe quelle bibliothèque d’exécution de tests. Sous le capot, c’est le module istanbul (https://npmjs.com/istanbul) qui est utilisé pour effectuer les calculs de couverture de code.
karma (https://npmjs.com/karma) pilote l’exécution de tests depuis un ou plusieur(s) navigateurs web. Ces derniers (Chrome, Safari, Firefox, etc.) se pilotent sur notre ordinateur, depuis une machine virtuelle (VirtualBox) ou même par le biais d’un service en ligne (SauceLabs, BrowserStack, etc.).
supertest (https://npmjs.com/supertest) sert à tester une interface HTTP. Le module envoie des requêtes et nos assertions vérifient qu’elles retournent bien ce qui est attendu – code HTTP, structure de réponse etc.
Je trouve ce module pratique pour tester des choses qui seraient difficiles à couvrir uniquement avec des tests unitaires.
Node a bénéficié de l’engouement autour des objets connectés grâce à sa nature asynchrone et à sa légèreté. C’est une plate-forme de choix pour dialoguer ou embarquer dans des nano-ordinateurs, réfrigérateurs et autres ampoules connectées.
nitrogen (https://npmjs.com/nitrogen) gère les interactions entre différents périphériques, sur un même réseau local et à travers Internet.
La bibliothèque se base sur un mécanisme déclaratif de fonctionnalités et de terminaux ainsi que la publication de messages.
serialport (https://npmjs.com/serialport) est la bibliothèque de base pour communiquer avec le port série d’un appareil. Un câble USB suffit ensuite pour envoyer nos instructions à cet appareil.
firmata (https://npmjs.com/firmata) est un firmware, un protocole de communication, ainsi qu’une bibliothèque de communication pour microcontrôleur Arduino.
Le module Node apprend ainsi à communiquer avec un Arduino préalablement flashé avec Firmata. Cela nous permet notamment d’écrire des applications en JavaScript au lieu d’utiliser du C.
johnny-five (https://npmjs.com/johnny-five) est une bibliothèque haut niveau pour Arduino, Raspberry Pi et tout autre microcontrôleur. Elle simplifie les interactions avec des moteurs, des servo-contrôleurs, des capteurs etc.
node-red (https://npmjs.com/node-red) est une interface visuelle pour programmer des flux de données entre objets connectés. Le projet émane d’employé·e·s d’IBM.
L’exécutable démarre un serveur web dont l’interface nous sert à relier des sources de données, des réactions à des événements avec des objets prêts à recevoir les instructions.
L’écosystème npm a participé à un essor d’outillage lié à l’accessibilité
d’applications web.
Auparavant, les outils étaient difficilement automatisables.
a11y (https://npmjs.com/a11y) est un automate d’inspection de pages web. Il détecte des problèmes de contrastes, de calques qui masquent du contenu ou d’éléments qui ne seraient pas navigables au clavier, entre autres.
C’est un excellent outil pour améliorer la qualité d’une application tout en l’ouvrant à un public trop souvent mis de côté.
$ npx a11y https://thom4.net ✖ Controls and media elements should have labels #search > .form-control ✔ This element does not support ARIA roles ✔ Elements with ARIA roles must be in the correct scope ✔ This element has an invalid ARIA attribute ✔ ARIA state and property values must be valid
a11y.css (https://npmjs.com/a11y.css) est une feuille de styles CSS à injecter dans une page web pour rendre visible des incohérences. Parmi ces dernières, nous retrouvons des boutons sans intitulé, l’absence de langue du document ou encore l’absence de bouton de validation de formulaire ou de texte alternatif d’images.
lighthouse (https://npmjs.com/lighthouse) est l’outil d’analyse de performances, de référencement (SEO) et d’accessibilité embarqué dans le navigateur web Google Chrome.
Ce module npm le rend utilisable depuis un terminal et écrit le rapport
dans un fichier HTML.
storybook-addon-a11y (https://npmjs.com/storybook-addon-a11y) est une extension au module storybook. Le module signale les problèmes d’accessibilité au niveau de chaque composant. Le suivi est ainsi fait en continu, au plus proche des composants distribués et utilisés dans les applications.
sharp (https://npmjs.com/sharp) est un module de redimensionnement et de transformation d’images JPG, PNG et WebP écrit en JavaScript et C++. Il ne nécessite pas de programme externe et est compatible avec une approche en flux.