Il existe, pour la plupart des langages de programmation, ce que l'on appelle des bibliothèques. Ces bibliothèques sont en fait des ensembles de fonctionnalités qui viennent étendre, et bien souvent, simplifier les fonctionalités natives. Voyez-les donc comme des extensions de vos outils.

Elles vous permettent parfois de travailler plus vite mais surtout elles vous permettent souvent de faire des choses auxquelles vous n'auriez pas eu accès sans elles (en terme de complexité).

Un peu de la même manière qu'il vous est bénéfique de savoir utiliser à la fois Adobe Illustrator et Inkscape, il est intéressant pour vous de savoir lire (et écrire) du vanilla JS et de vous y retrouver dans des bibliothèques et frameworks externes.

Les bibliothèques elles-mêmes peuvent parfois être assez complexes et nécessiter un long temps d'apprentissage (ex: three.js) ou encore nécessiter d'autres compétences. Chaque bibliothèque a donc un site web dédié, une documentation (en général assez claire) expliquant son fonctionnement. Chez le lien "Getting started" ou quelque chose du genre.

Gardez cependant toujours en tête que votre projet dépendra alors de telle ou telle bibliothèque pour fonctionner correctement (pour fonctionner tout court, d'ailleurs..). C'est pour cette raison que nous perlerons de dépendances (dependencies) de votre projet.

Notez par ailleurs que vous tomberez de temps en temps sur des bibliothèques de mauvaise qualité (n'importe qui peut en créer une) ou obsolètes (qui ne sont plus maintenues, suivies, mises à jour). Cherchez toujours la dernière date de mise à jour de la bibliothèque (last update) ainsi que le nombre de contributeurs. Cela vous donnera déjà un indice de la vivacité du projet. Vous trouverez ces infos sur le dépôt Github (par exemple) de la bibliothèque. En général, elles en ont toutes un.

Liens + autres outils

• Les bibliothèques P5.js
• Moment.js
• Node-RED

Exemples avec P5.js

Vous croiserez rarement cette fonction print de p5.js (même dans des tutos dédiés à la bibliothèque):

print("Hello");

Par contre vous serez régulièrement confrontés à son équivalent en JS natif, la méthode log de l'objet console :

console.log("Hello");

Mais p5.js deviendra vite intéressante, même pour des opérations de base, comme le piochage au hasard dans un tableau (Array):

En Vanilla JS :

const matin = ["Oeuf", "Croissant", "Jus d'orange", "Confiture", "Beurre"];
const choix = matin[Math.floor(Math.random()*matin.length)];

L'équivalent avec P5.js :

const matin = ["Oeuf", "Croissant", "Jus d'orange", "Confiture", "Beurre"];
const choix = random(matin);

Cela n'a l'air de rien, mais cela peut simplifier grandement votre code, surtout à la relecture. L'exemple ici est minimal mais les bibliothèques peuvent parfois vous simplifier des opérations extrêmement complexes, notamment pour de plus grosses applications.

Le plus important pour vous est peut-être de ne pas utiliser un seul outil/langage/bibliothèque afin de rester indépendant et toujours en mesure de choisir la solution la plus adaptée à votre besoin (les bibliothèques peuvent aussi être des usines à gaz!)

Et par ici la fonction rect() de P5.js :

rect(0, 0, 80, 40);

Et sa définition sous le capot :

function rect(args) {
    var x = args[0];
    var y = args[1];
    var w = args[2];
    var h = args[3];
    var tl = args[4];
    var tr = args[5];
    var br = args[6];
    var bl = args[7];
    var ctx = this.drawingContext;
    var doFill = this._doFill,
    doStroke = this._doStroke;
    if (doFill && !doStroke) {
        if (this._getFill() === styleEmpty) {
        return this;
        }
    } else if (!doFill && doStroke) {
        if (this._getStroke() === styleEmpty) {
        return this;
        }
    }
    if (!this._clipping) ctx.beginPath();
    if (typeof tl === 'undefined') {
        // No rounded corners
        ctx.rect(x, y, w, h);
    } else {
        // At least one rounded corner
        // Set defaults when not specified
        if (typeof tr === 'undefined') {
        tr = tl;
        }
        if (typeof br === 'undefined') {
        br = tr;
        }
        if (typeof bl === 'undefined') {
        bl = br;
        }                  // corner rounding must always be positive

        var absW = Math.abs(w);
        var absH = Math.abs(h);
        var hw = absW / 2;
        var hh = absH / 2;
        // Clip radii
        if (absW < 2 * tl) {
        tl = hw;
        }
        if (absH < 2 * tl) {
        tl = hh;
        }
        if (absW < 2 * tr) {
        tr = hw;
        }
        if (absH < 2 * tr) {
        tr = hh;
        }
        if (absW < 2 * br) {
        br = hw;
        }
        if (absH < 2 * br) {
        br = hh;
        }
        if (absW < 2 * bl) {
        bl = hw;
        }
        if (absH < 2 * bl) {
        bl = hh;
        }                  // Draw shape

        if (!this._clipping) ctx.beginPath();
        ctx.moveTo(x + tl, y);
        ctx.arcTo(x + w, y, x + w, y + h, tr);
        ctx.arcTo(x + w, y + h, x, y + h, br);
        ctx.arcTo(x, y + h, x, y, bl);
        ctx.arcTo(x, y, x + w, y, tl);
        ctx.closePath();
    }
    if (!this._clipping && this._doFill) {
        ctx.fill();
    }
    if (!this._clipping && this._doStroke) {
        ctx.stroke();
    }
    return this;
}