function whoami() {
  console.log(this);
}
// selon le contexte (Navigateur ou Node ou "use Strict") :
whoami();             // 1. Appel direct -> Window (Browser) ou globalThis (Node) ou undefined ("use strict")
myObject.whoami();    // 2. Appel via objet -> myObject
new whoami();         // 3. Constructeur -> Le nouvel objet créé
            

Copier Exécuter

const user = {
  name: 'Alice',
  greet() {
    console.log(`Salut, je suis ${this.name}`);
  }
};
user.greet(); // (this = user)
            

Copier Exécuter

function Car(model) {
  // 1. Un objet vide {} est créé
  // 2. 'this' pointe sur cet objet vide
  this.model = model; 
  // 3. L'objet est retourné automatiquement
}
const myCar = new Car('Tesla'); // this = myCar
console.log('myCar', myCar)
            

Implémenter l'asynchrone avec JavaScript

• Les méthodes setTimeout(), setInterval(), setImmediate()
• Les fonctions callbacks utilisées dans la programmation événementielle (ex: .addEventListener())
• Les promesses à travers les objets Promise et XMLHttpRequest
• la fonction fetch(), une implémentation simplifié de l'objet Promise
• Les mots clés async / await

• Perte de contexte de this lors des callbacks (API Web, setTimeout, événements), l'exécution étant décalée dans le temps, "this" n'est plus rattaché à l'objet.
• Solutions pour garder le contexte initiale :
  • Stocker this dans une variable const self = this;
  • Utiliser la fonction .bind(this)
  • Utiliser la notation flechée () => { this.count++; }

Copier Exécuter

const user = {
  nom: "Alice",
  hello() {
    setTimeout(function() {
      console.log(this.nom); // undefined !
      // "this" pointe sur window/global car la fonction anonyme est appelée séparément.
    }, 1000);
  },
  helloArrowFn() {
    setTimeout(() => {
      console.log(this.nom); // "Alice", conserve le "this" de l'objet user.
    }, 1000);
  }
};
              

Copier Exécuter

class Counter {
  constructor() { this.count = 0; }
  start() {
    // Perte de this : la fonction est exécutée plus tard par le runtime
    setTimeout(function() {
      this.count++; // ❌ TypeError ou NaN !
    }, 1000);
  }
}
              

Copier Exécuter

const service = {
  data: [1, 2, 3],
  load() {
    fetch('/api/data')
      .then(function(reponse) {
        // PERTE DE CONTEXTE
        this.save(reponse); // ❌ TypeError: Cannot read properties of undefined
      });
  },
  save(data) { /* ... */ }
};
              

Copier Exécuter

class Counter {
  value = 0;
  async increment() {
    await new Promise(r => setTimeout(r, 100));
    this.value++; // Risque de perte si l'appel de la fonction est détachée
  }
}

const c = new Counter();
const action = c.increment

action(); // ❌ TypeError: Cannot read properties of undefined (reading 'valeur')     
              

Copier Exécuter

const counter = {
count: 0,
start() {
  // La fonction passée à setTimeout est appelée de façon DIRECTE !
  setTimeout(function() {
    this.count++; // ❌ TypeError: Cannot read properties of undefined (ou NaN)
    console.log(this.count);
  }, 1000);
  }
};
// Quand setTimeout exécute la fonction de callback 1 seconde plus tard,
// il l'exécute en invocation directe (fn()). Le lien avec counter est brisé.
counter.start();
              

• Définitions
  • Lexical environment (portée lexicale) : accessibilité d'une variable dans une structure imbriqué
  • Durée de vie d'une variable : cycle de vie determiné par la façon et l'endroit où la variable est déclarée
  • Closure : une fonction qui accède et conserve le scope parent même après la fin d'exécution de ce dernier.
  • Une closure permet à la fois de protéger les variables du scope parent et d'étendre leur durée de vie au-delà du temps d'exécution. Ses variables ne sont pas directement accessibles depuis l'extérieur, elles sont donc privées
  • Cas d'usage
    • Encapsulation/variables privées : les IIFE (pattern IIFE) et le prefixe # devant le nom de la variable
    • Le pattern Factory Function : création des fonctions à partir d'une fonction
    • Mémoïsation : stockage du résultat en cache pour une réutilisation future sans refaire le calcul
• Le piège à éviter, la closure partagée avec var dans une boucle

Copier Exécuter

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
              

Les tableaux en JavaScript possède des méthodes très riches pour effectuer des opérations de base et complexes en toute simplicité

Utilisation des fonctions de manière déclarative ou impérative

Liste non exhautive de toutes les fonctions déclaratives

Transformer chaque élément d'un tableau pour produire un nouveau tableau de même taille

map() passe 3 argument à la fonction callback

1. Valeur de l'élément actuel
2. index, position de l'élément dans le tableau
3. le tableau d'origine

// Pour comprendre le fonctionnement, créons notre propre map()
Array.prototype.myMap = function(callbackFn) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callbackFn(this[i], i, this));
  }
  return result;
};
          

Les pièges à éviter

• parseInt() dans un map()
• Modifier la valeur d'origine

// Erreur 
['1', '2', '3'].map(parseInt); // [1, NaN, NaN]
// parseInt prend (valeur, base numérique comprise entre 2 et 36 = radix) 
// parseInt reçoit ('1', 0), ('2', 1), ('3', 2). 
// radix 0 n'existe pas
    JS l'évalue dynamiquement ici à la base 10 (décimal)
    '1' en base 10 donne 1
// radix 1 n'existe pas => NaN
// radix 2 = base binaire (0 ou 1), 3 n'existe pas en binaire => NaN

// La correction :
['1', '2', '3'].map(num => parseInt(num, 10));
          

const users = [{ name: 'Alice' }, { name: 'Bob' }];
const copy = users.map(u => {
  u.role = 'admin'; // Modifie directement l'objet d'origine !
  return u;
});
// JS copie la référence de l'objet users (pas l'objet lui-même)
// Solution
const fix = users.map(u => {
  return {...u, role: 'admin'};
});
          

• Extraire des éléments selon un prédicat (une fonction qui renvoie un booléen true ou false).
• Le contenu est conservé par référence (pas de copie profonde des objets)
La règle d'or : La taille du tableau résultant est $\le$ à celle du tableau d'origine.
• Le chainage (Chaining) est possible mais coûteux en performance, filter().map() parcourt 2 fois le tableau d'origine
• Pour une meilleure performance sur un tableau volumineux (>= 10^6 éléments), lorsque l'on souhaite transformer et filtrer, il faut utiliser la fonction reduce()

const users = [
  { name: 'Alice', active: true, role: 'admin' },
  { name: 'Bob', active: false, role: 'user' },
  { name: 'Clovis', active: true, role: 'user' }
];

// Uniquement les noms des utilisateurs actifs
const activeUserNames = users
  .filter(user => user.active)
  .map(user => user.name);
              

• Agréger un tableau = transformer un tableau en une seule valeur
• Le piège de l'omission de la valeur initiale: Sans valeur initiale, le premier élément devient l'accumulateur et la boucle commence à l'index 1. Sur un tableau vide sans valeur initiale, JS lève une TypeError critique.

array.reduce((accumulator, currentValue, index, array) => {
  return newAccumulator;
}, initValue);
            

Cas d'usage 1 : Calcul d'agrégat (somme, moyenne, max)

const cart = [{ price: 39.99 }, { price: 12.95 }, { price: 19.99 }];
const total = cart.reduce((acc, article) => acc + article.price, 0);
              

Cas d'usage 2 : Restructuration de données (GroupBy par propriété)

const team = [
  { name: 'Alice', dept: 'Tech' },
  { name: 'Bob', dept: 'HR' },
  { name: 'Chantal', dept: 'Tech' }
];

const byDept = team.reduce((acc, emp) => {
const key = emp.dept;
if (!acc[key]) acc[key] = [];
  acc[key].push(emp.name);
  return acc;
}, {}); // Résultat : { Tech: ['Alice', 'Chantal'], HR: ['Bob'] }
          

Un script ou une fonction closure contenant toute la logique du JavaScript

Architecture module en séparant la logique en plusieurs fichiers et combiné aux transpilers comme babel, Webpack pour réintégrer tout le code dans un seul fichier

La majorité des variables déclarés avait le Function scope ou le Global Scope

Les librairies JS utilisées beaucoup la variable $, donc plusieurs librairies à cause du scope global pouvait rentré en collision à cause du scope global

• La logique d'un seul fichier contenant toute la logique de l'application
• 1 fichier = plusieurs fonctions = plusieurs responsabilités
• La maintenance difficile
• avec un code très dense

• Pollution du scope global : Tout est injecté dans l'objet window et déclarée au niveau supérieur (top-level)
  • variables
  • fonctions
• Absence d'isolation du code : Collision de noms identiques des variables (Name Collisions).
• Absence d'isolation sémantique : Impossible de déclarer des éléments « privés ».
  • Tout le code source est accessible et modifiable depuis n'importe quel autre script ou la console du navigateur.

// Code d'Alice (alice.js)
var currentUser = { name: 'Alice' };
// Code de Bob (bob.js chargé après alice.js)
var currentUser = 'Bob'; // Écrase la déclaration d'Alice !

• IIFFE Immediately Invoked Function Expression, ou expression de fonction immédiatement invoquée
• Mécanisme d'encapsulation qui s'appuie sur la portée de fonction (Function Scope)
• Le principe est d'utiliser une fonction anonyme exécutée immédiatement pour isoler de variables grâce aux closures.

(function(global) {
    // Variable privée isolée du reste du monde
    var privateCounter = 0;
    function log() {
      console.log('Compteur :', privateCounter);
    }
    // Exposition explicite sur l'objet global (API publique)
    global.myModule = {
      increment: function() {
        privateCounter++;
        log();
      }
    };
  })(window);
            

• Problème : Les IIFEs isolent le code, mais ne gèrent pas le chargement dynamique ni l'ordre de téléchargement des fichiers.
• Solution : Script loader, pour charger à la volée les dépendances (autres fichiers) dans l'ordre souhaitée
• Script loader, ancêtre des bundlers (webpack, vite, etc.)
• L'émergence des normes et des chargeurs ont permis de democratiser cette manière modulaire et dynamique de gérer les dépendances d'un projet.
• Les normes
  • RequireJS (le plus populaire et celui qui s'est imposé jusqu'à l'arrivée d'ECMAScript)
  • AMD (Asynchronous Module Definition)
  • LABjs / Script46 : Injection dynamique de balises <script> via le DOM pour télécharger en parallèle et exécuter dans l'ordre. Le passage à CommonJS (Node.js) : Mentionner brièvement l'arrivée de Node.js (2009) avec module.exports et require(), qui a posé les bases de ce qu'allaient devenir les modules ES2015 (ESM).
  • Etc.

// Utilisation de require() pour charger à la volée les dépendances
define(['jquery', 'mathUtils'], function($, mathUtils) {
  return {
    init: function() { /* ... */ }
  };
});
            

ECMAScript : comité de standardisation de JavaScript crée en

Une standardisation du langage qui s'est faite difficilement et avec un peu de retard par rapport au calendrier initialement fixé

• La version ES2015(ES6) a eu 6 ans de retard
• La stratégie initiale de tout déployé a été remplacé par des releases annuelle (ES2016, ES2017, etc.).

Le TC39 (Technical Committee 39) : Le comité chargé de faire évoluer ECMAScript.

Politique fixé en 5 étapes

1. Stage 0 (Strawman) : Idée brute.
2. Stage 1 (Proposal) : Cas d'usage et API préliminaire.
3. Stage 2 (Draft) : Spécification précise du comportement.
4. Stage 3 (Candidate) : Solution quasi finale, implémentée par les navigateurs/moteurs JS.
5. Stage 4 (Finished) : Inclusion officielle dans la prochaine version annuelle.

La portée (scope) définit l'accessibilité d'une variable en dehors du bloc où elle a été déclarée. Il y a 3 scopes :

• Global scope : le bloc de plus haut niveau
• Function scope : le bloc qui définit une fonction
• Block scope : blocs de condition, boucles, etc.

const user = { name: 'Alice' };
user.name = 'Bob'; // VALIDE ! La référence n'a pas changé.
user = {};        // TypeError: Assignment to constant variable.
            

//@see https://dasha.ai/blog/javascript-scope-and-scope-chain
// Global variable
const userName = "Peter";
// Outer function
function calcAge(birthyear) {
  const currentYear = 2021;
  const age = currentYear - birthyear;
   // inner block
  if (age <= 60) {
    var working = true;
    const message = `Peter is still employed!`;
    console.log(message);
  }
  // inner function
  function yearsToRetire() {
    const retirement = 60 - age;
    console.log(`${userName} will be retired in ${retirement} years!`);
  }
  yearsToRetire();
}
calcAge(1975);            
        

• Propriétés raccourcies (Property shorthand)

  
  function makeUser(firstname, lastname, birth) {
    return { firstname : firstname, lastname: lastname, birth: birth }
  }
  // Avec Property shorthand
  function makeUser(firstname, lastname, birth) {
    return { firstname, lastname, birth }
  }
                  

• Méthodes raccourcies

  
  // Avant
  { hello: function() {} }.
  // Après
  { hello() {} }
                  

• Clés calculées (Computed property names)

  
  { [key]: value }.
                  

String Templates (Gabarits de texte) :

• Interpolation de variables ${expr} sans concaténation +.
• Prise en charge native du multi-ligne.

const firstname = 'Glodie';
const lastname = 'Tshimini';
// Avant
console.info('Bonjour,\n c\'est ' + firstname + ' ' + lastname )
// Après
console.info(`Bonjour, 
c'est ${firstname} ${lastname}`
)
            

Fonctions fléchées (Arrow Functions) :

• Écriture plus compact
• Retour implicite des fonctions monophrases (sur une ligne)

  
  const hello = (name) => `Bonjour ${name}`
                  

• Pas de contexte this propre : capture le contexte du englobant (parent)

  
  const counter = {
    count: 0,
    start() {
      // Recupère le 'this' de start() -> 'counter'
      setTimeout(() => {
        this.count++; // ✅
        console.log(this.count); // 1
      }, 1000);
    }
  };
                  

// Avant
function hello(firstname, lastname || '') {}
// Après
const hello = (firstname, lastname = '') {}
            

Paramètre Rest (...args) : Remplace l'objet arguments en regroupant le reste des arguments reçus dans un tableau.

// Avant
function sumBefore(nb1, nb2, nb3) {
  var args = Array.from(arguments) // [nb1, nb2, nb3]
  console.log(
    arguments[0], // valeur de nb1
    arguments[1], // valeur de nb2
    arguments[2] // valeur de nb3
  )
}
// Après
function sumAfter(...args) {
  console.log(args)
}
sumAfter(1,2,3,4,5,6,7) // [1,2,3,4,5,6,7]
            

La boucle for...of parcourt les valeurs de tout objet itérable (Array, String, Map, Set, arguments).

Quant à la boucle for...in parcourt les clés (propriétés énumérables) d'un objet.

let nbs = [1, 2, 3];
const alice = { firstname: 'Alice', age: 32, city: 'London' };

for (let val of nbs) {
  console.log(nbs); // 1 2 3
}

for (const property in alice) {
console.log(`${property}: ${alice[property]}`);
// firstname: Alice age: 32 city: London
}
            

• Extraire et combiner les données de façon déclarative.
• Affectation par décomposition (Destructuring) sur les objets et les tableaux
  Copier Exécuter

  
    // Objet
    const user = { name : 'Alice', age : 21 };
    const { name, age: age } = user;
    console.log(name, age);
    // Tableau
    const numbers = [1, 2];
    const [first, second] = numbers;
    // avec permutation sans variable temporaire
    const [permutFirst, permutSecond] = [second, first];
    console.log(first, second, permutFirst, permutSecond)
                    

• Extraire et combiner les données de façon déclarative.
• Syntaxe de décomposition (Spread Operator)
  Copier Exécuter

  
  const numbers = [1,9,5,45,16];
  const original = { media: 'video', type: 'mp4', at: new Date() };
  const alice = { firstname: 'Alice', age : 40 }
  const address = { 
    street: 'Etienne Marcel',
    num : 155,
    city : 'Paris',
    postal: 75001 
  }
  
  // Éclatement
  const maxNb = Math.max(...numbers); // Avant Math.max(1,9,5,45,16);
  console.log('max', maxNb);
  // Copie surpefielle (Shallow Copy)
  const clone = { ...original, updated: true };
  console.log('original', original);
  console.log('clone', clone);
  // Fusion
  const fullFusion = {...alice, ...address };
  const partialFusion = { ...alice, address };
  console.log('full', fullFusion);
  console.log('partial', partialFusion);
                    

• Syntaxe de base des classes plus proche et fidèle aux autres langages objets Java/C++
  • Constructeur de l'objet avec la méthode constructor()
  • Méthodes de classe et méthodes statiques (static)
  • getters/setters (get/set)
  • Héritage prototypal : extends sur la classe et appel obligatoire au constructeur parent via super()
  • Propriétés privées

class JavaScript {
  // Propriété (prop.) privée (encapsulation)
  #creator = 'Brendan Eich';
  // Propriété statique (partagée au niveau de la classe)
  static createdAt = 1995;

  constructor(version, isDynamicallyTyped = true) {
    this.version = version; // Propriété publique
    this.isDynamicallyTyped = isDynamicallyTyped;
  }

  info() {  // Méthode d'instance
    return `JavaScript (${this.version}) - Créé en ${JavaScript.createdAt} par ${this.#creator}.`;
  }

  static compareVersion(v1, v2) {
    return `Comparaison entre la version ${v1} et la version ${v2}.`;
  }

  get creator() {
    return this.#creator;
  }
}

class TypeScript extends JavaScript {
  static createdAtTypeScript = 2012;   // Propriété statique propre à la classe fille

  constructor(version, versionCompiler) {
    super(version, false); // Appel du constructeur parent classe JavaScript
    this.versionCompiler = versionCompiler; // Propriété spécifique à TypeScript
  }

  info() { // Surcharge (override) de la méthode d'instance
    const basicInfo = super.info();
    return `${basicInfo}\n TypeScript y ajoute le typage statique (compilateur v${this.versionCompiler}).`;
  }

  compiler() {   // Méthode propre à la classe fille
    return `Transpilation du code TypeScript (v${this.versionCompiler}) vers JavaScript (${this.version})...`;
  }
}

// 1. Instanciation de la classe mère
const es6 = new JavaScript('ES6');
console.log('•', es6.info()); 

// 2. Accès à la méthode et propriété statiques
console.log('• Created : ', JavaScript.createdAt);
console.log('•', JavaScript.compareVersion('ES5', 'ES6'));

// 3. Instanciation de la classe fille
const ts5 = new TypeScript('ES2022', '5.0');
console.log('•', ts5.info()); 
console.log('• TS typage dynamique : ', ts5.isDynamicallyTyped);
console.log('•', ts5.compiler());
              

• Meilleur visibilité et gestion de l'asynchrone par rapport aux callbacks et notamment à l'imbrication des callbacks (Callback Hell)
• Les 3 états :
  1. pending (en attente)
  2. fulfilled (résolue)
  3. rejected (rompue).
• Chaînage via 3 méthodes :
  1. .then() : exécutée en cas de succès
  2. .catch() : exécutée en cas d'erreur
  3. .finally() : exécutée dans tous les cas de figure
• Combinaison de plusieurs promesses (agrégation parallèle) à travers 3 méthodes
  1. Promise.all()
     • Résolue si toutes les promesses réuississent, toute la promesse est rejectée dès le premier échec
     • Idéal lorsqu'on veut tout ou rien
  2. Promise.allSettled()
     • Attend que toutes les promesses soient terminés peu import le résultat (succès ou échec)
     • Idéal pour charger des ressources indépendantes
  3. Promise.race()
     • Renvoie le résultat du premier terminé (succès ou échec)
     • Idéal pour des ressources similaires externes avec des temps de chargement (timeout) différents

• async / await en utilisant du sucre syntaxique sur les promesses, rend le code
  • Plus lisible avec une illusion d'une exécution séquentielle.
  • Plus propre avec une gestion des erreurs via les blocs try...catch.
• Les mots-clés async et await fonctionnent généralement de pair.
• A éviter :
  • Melanger les async/await avec .then()
  • D'exécuter async/await en série (plus long que Promise.all())

function fetchData(resource, timeOut, isSuccess = true) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isSuccess) {
        resolve(`[OK] Données reçues de ${resource} en ${timeOut}ms`);
      } else {
        reject(new Error(`[Error] : Échec de connexion à ${resource}`));
      }
    }, timeOut);
  });
}

// async/await avec Promise.all()
async function all() {
  console.log('Async/Await avec Promise.all');
  // Démarrant toutes en parallèle et immédiatement
  const p1 = fetchData('API 1', 1000, true);
  const p2 = fetchData('API 2', 2000, true);
  const p3 = fetchData('API 3', 500, true);

  try {
    // await met en pause la fonction jusqu'à résolution de toutes les promesses
    const results = await Promise.all([p1, p2, p3]);
    console.log('Succès :', results);
  } catch (error) {
    console.error('Échec :', error.message);
  }
}

async function allWithError() {
  const p1 = fetchData('API 1', 1000, true);
  const pError = fetchData('API 2 Défaillante', 800, false);

  try {
    await Promise.all([p1, pError]);
  } catch (error) {
    console.log('Promise.all() échoue avec erreur attrapée via try/catch', error.message);
  }
}

// async/await avec Promise.race
async function race() {
  const p1 = fetchData('API 1', 1000, true);
  const p2 = fetchData('API 2', 2000, true);
  const p3 = fetchData('API 3 (plus rapide)', 500, true);

  try {
    const winner = await Promise.race([p1, p2, p3]);
    console.log('Le plus rapide est :', winner);
  } catch (error) {
    console.error('La plus rapide a rejeté une erreur :', error.message);
  }
}

(async function() {
  await all();
  await allWithError();
  await race();
})();
              

function fetchData(resource, timeOut, isSuccess = true) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isSuccess) {
        resolve(`[OK] Données reçues de ${resource} en ${timeOut}ms`);
      } else {
        reject(new Error(`[Error] : Échec de connexion à ${resource}`));
      }
    }, timeOut);
  });
}
(async function(){
  // OK bonne pratique
  console.time('all')
  const p1 = fetchData('API 1', 1000);
  const p2 = fetchData('API 2', 1000);
  const results = await Promise.all([p1, p2]); // Durée totale ~1000ms
  console.log('Promise.all', results)
  console.timeEnd('all')
  // KO mauvaise pratique
  console.time('asyncAwait')
  const r1 = await fetchData('API 1', 1000); // Attend 1000ms
  const r2 = await fetchData('API 2', 1000); // Attend 1000ms (Total ~2000ms)
  console.log('asyncs', r1, r2)
  console.timeEnd('asyncAwait')
})()
              

Un module est un fichier JavaScript répondant à un besoin spécifique et qui peut être partagé ou réutilisé dans d’autres scripts JS. Plusieurs standards d’utilisation existent en JavaScript : CommonJS et ESM sont les deux les plus utilisés.

• Le standard ECMAScript à utiliser pour les modules
  • Module avec le Standard ECMAScript est supporté nativement par les navigateurs
  • Syntaxe (import / export)
  • Export nommés
  • Export défault
  • Balise type="module"
  • Mode strict
  • Chargement differé (attribut defer sur la balise script) après le chargement complet du DOM
• L'utilisation des modules avec les bundlers(Vite, Webpack, Rollup, etc.) apporte des fonctionnalités supplémentaires tels que
  • Optimisation du code
  • Retrocompatibilité avec les vieux navigateurs (polyfills)
  • Regrouper le CSS et tous modules JS dans une seule fichier principal chargé par le HTML (bundling)
  • Suppression du code et des dépendances mortes (Tree-Shaking)
  • Transpiler le code écrit en une autre version de JS (transpilation)

// Module src/utils/fech-data.js
const fetchData = () => {};
const interneFn = () => {};
export {
  api: fetchData
};

// Module src/utils/format.js
export const formatDate = () => {};
export const formatMessage = () => {};
const formatFinance = () => {};

// Module src/classes/product.js
export default class Product {};

// Point d'entrée de l'application src/main.js
mode 'strict';
import { api } from '../utils/fetch-data.js';
import Article from '../classes/product.js';
import { formatDate, formatMessage } from '../utils/format.js';

// Fichier /index.html
<body>
  <script src="src/main.js" type="module"></script> 
</body>
              

• CommonJS est le standard historique de Node.js
• N'est pas supporté nativement par les navigateurs, nécessite l'utilisation d'un transpiler tels que Webpack, Babel pour fonctionner côté Front
• Le chargement des fichiers se fait depuis le module fs de système de fichiers (file system)
• Le chargement des modules est synchrone, dynamique
• Import dynamique, il est possible d’appeler la fonction require() depuis n’importe quel endroit dans son code (pas spécialement en haut comme ci-dessous)
• Syntaxe
  • Exportation : module.exports = { ... } ou exports.myFunc = ...
  • Importation : const fs = require('fs');
  • Extension des fichiers : .cjs
  • Type de module dans le package.json : "type": "commonjs"

• NPM (Node Package Manager) est un gestionnaire de dépendances de Node
• NPM est aussi un registre permettant d'installer les dépendances d'un projet et gérer le dossier /node_modules
• Le dossier /node_modules contient toutes les dépendances d'un projet (les modules installés)
• L'orchestration des dépendances s'effectue en ligne de commande (CLI) et en utilisant les fichiers package.json et package-lock.json
• Environ 4.4M de packages disponibles sur le site officiel https://www.npmjs.com/
• Il existe d'autres gestionnaire de paquet pour JS
  • Yarn : 10 fois plus rapide, plus fiables dans les versions, il partage de dépendances entre plusieurs projets et a une meilleure gestion de l’espace mais ça passe par les serveurs de Facebook
  • PNPM : Plus performant et plus optimisé pour la gestion de l’espace (dépendances avec des liens symboliques vers un cache centralisé), il n'est pas compatible avec tous les paquets
  • Bun : Un seul outil qui remplace npm/yarn/Node et Webpack, c'est le plus rapide, il est compatible avec les paquets npm. Pas suffisamment mature mais concurrent très redoutable pour devenur leader Back-end JS

Le fichier package.json est une pièce maitresse d'un projet JS, contenant :

• Les informations sur votre projet (nom, description, auteur, etc.) et la configuration (version du projet, version npm, node, etc.)
• Les scripts disponibles en CLI à exécuter (par exemple le lancement de l'application, les tests, la compilation, etc.)
• Les versions des dépendances principales au format MAJOR.MINOR.PATCH, par exemple "typescript": "^5.6.0"
  • ^ autorise les mises à jour PATCH et Minor, la version précédente de TypeScript peut être téléchargée en 5.*.* par exemple 5.6.8 dans le projet
  • ~ autorise uniquement les mises à jour PATCH donc 5.6.* par exemple 5.6.9
  • Sans symbole, il s'agit d'une version fixe, plus sécurisée
• Les dépendances en production et en développement
  • Les dépendances en production identifiées par la clé dependencies, ce dernier contient les modules nécessaires au fonctionnement de l’application en production par exemple le module pour la base de données MySQL, SQLite, MongoDB, etc.
  • Les dépendances en développement par la clé devdependencies, modules utilisés uniquement lors du développement par exemple pour tester votre application ou compiler le JS.
    Des modules qui ne sont pas indespensables pour le production et à ne surtout pas déployer (alourdir le projet pour rien)

Le fichier package-lock.json

• stocke les dépendances sécondaires (modules utilisés par vos modules) de vos dépendances principales, indispensable pour garantir les mêmes versions du projet entre 2 développeurs
• Ne jamais modifier ce fichier, npm le gère à partir de vos commandes CLI

// Fichier package.json
{
  "name": "shopping",
  "private": true,
  "author": "John Doe <john@doe.com>",
  "license": "ISC",
  "version": "1.4.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "npx serve -s dist -p 80"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.3.2",
    "@tailwindplus/elements": "^1.0.22",
    "@types/leaflet": "^1.9.21",
    "tailwindcss": "^4.3.2",
    "typescript": "~6.0.3",
    "vite": "^8.1.3"
  },
  "dependencies": {
    "leaflet": "^1.9.4",
    "nanoid": "^6.0.0",
    "simplycountdown.js": "^3.0.1"
  }
}
// Extrait fichier package-lock.json
{
  "name": "shopping",
  "version": "1.4.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "shopping",
      "version": "1.4.0",
      "dependencies": {
        "leaflet": "^1.9.4",
        "nanoid": "^6.0.0",
        "simplycountdown.js": "^3.0.1"
      },
      "devDependencies": {
        "@tailwindcss/vite": "^4.3.2",
        "@tailwindplus/elements": "^1.0.22",
        "@types/leaflet": "^1.9.21",
        "tailwindcss": "^4.3.2",
        "typescript": "~6.0.3",
        "vite": "^8.1.3"
      }
    },
    "node_modules/@emnapi/core": {
      "version": "1.11.1",
      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.1.tgz",
      "integrity": "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ==",
      "dev": true,
      "license": "MIT",
      "optional": true,
      "dependencies": {
        "@emnapi/wasi-threads": "1.2.2",
        "tslib": "^2.4.0"
      }
    },
    ...
  }
}
            

Les commandes NPM

1. Initialiser un nouveau projet : npm init
2. Installer toutes les dépendances du projet à partir du fichier package.json en autorisant des versions différentes selon les symboles utilisées : npm install
   • Notation courte : npm i
   • Installer avec exactement les mêmes dépendances définis dans package-lock.json : npm ci
3. Installer un paquet de manière globale (sur toute la machine indépendamment d'un projet) : npm i -g webpack
4. Installer les modules pour tous les environnements : npm install react mongodb
5. Installer les modules uniquement pour le développement : npm install -D typescript vitest supertest cypress
6. Désinstaller un module : npm uninstall supertest
7. Mettre à jour un module : npm update cypress
8. Publier un module pour la communauté : npm login et npm publish --access public
   Pour ce dernier point, il faut respecter les conditions de création d'un module et les recommandations de publication de npmjs

• Concept fondamental en programmation qui consiste à faire évoluer un langage tout en s'assurant que le code écrit avec les nouvelles ou anciennes versions continu de fonctionner avec les environnements (navigateur ou Node) récents et anciens.
  • Un code écrit avec la dernière version ES2025 fonctionnera sur un vieux navigateur ou une vielle version de Node
  • Un code écrit avec une syntaxe pré-ES2015 fonctionnera sur la dernière version de votre navigateur.
• Attention à rester vigilant sur les fonctionnalités dépréciées (délais suffisamment longues pour faire la migration), dans ce cas de précis, l'application ne fonctionnera plus
• Il y aura toujours un décalage entre la vitesse d'évolution du langage et la mise à jour des environnements d'exécution.
• La rétro-compatibilité répose sur 2 concepts clés :
  1. Transpilation : Traduire une syntaxe récente non supportée vers une syntaxe ancienne équivalente, par exemple, tranformer une arrow function () => {} en function() {}
  2. Polyfill (API) : Rajouter au runtime une méthode ou un objet manquant dans le prototype, par exemple, apporter Array.prototype.includes

• Babel est un transpileur (transpiler) : Compilateur permettant la retrocompatibilité du code JS pour transformer du code JS moderne en pré-ES2015 (ES5)
• Son fonctionnement en 3 étapes :
  1. Parsing (analyse lexicale et syntaxique) : Le code JS brut est converti Arbre de Syntaxe Abstrait (Abstract Syntax Tree (AST)).
  2. Transformation : Des plugins parcourent cet AST et modifient/remplacent les nœuds syntaxiques modernes par des nœuds ES5.
  3. Generation : L'AST modifié est reconverti en chaîne de caractères de code JavaScript exécutable.

  
  code Source (ES2015+) => [ Parsing ] => AST => [ Transformation ] => AST modifié => [ Generation ] => Code Cible (ES5)
                  

Les transpilers les plus populaires

• Webpack : le plus connu et abouti, cependant sa configuration peut être longue et pénible
• Vite : rapide à mettre en place, écosystème Vue JS
• Esbuild : sans configuration, commandes via le terminal et le plus performant (rapide)
• Parcel : sans configuration également, des fonctionnalités supplémentaires via l'ajout de des plugins
• Tsc : compiler le TypeScript en JS
• Babel : le compilateur le plus connu pour assurer la rétrocompatibilité

• Les plugins Babel permettent d'étendre les fonctionnalités du module
• Chaque module effectue une transformation spécifique
• Les plugins peuvent être configurés depuis les fichiers babel.config.json ou .babelrc
• Quelques modules Babel facilement installable avec npm i --save-dev [nom plugin]
  • @babel/plugin-transform-arrow-functionstransformer
  • @babel/plugin-transform-typescript
  • @babel/plugin-transform-for-of
  • @babel/plugin-transform-destructuring

• Preset : ensemble de plugins pré-packagés pour répondre à un besoin global et éviter de faire une installation un à un
• A partir d'un environnement cible, le preset est capable d'appliquer les transformations nécessaires
• Quelques presets :
  • @babel/preset-env pour toute la syntaxe ES2015+
  • @babel/preset-typescript pour TypeScript
  • @babel/preset-react pour React

// babel.config.json
{
  "presets": ["babel-preset-myPreset", "@babel/preset-env"]
}
// babel-preset-myPreset/index.js
module.exports = function(api, options) {
  return {
    plugins: [
      "@babel/plugin-transform-typescript"
    ]
  };
};
           

• Créé par Microsoft (Anders Hejlsberg, concepteur de C#) en 2012
• Pour permette à Microsoft de migrer ses logiciels notamment la suite Office sur le web. JavaScript n'était pas suffisamment robuste pour permettre cette migration
• La stratégie a été de créer un superset (sur-ensemble syntaxique) qui vient s'ajouter à JavaScript pour combler les lacunes du langage JS dont notamment les erreurs à l'exécution

• TypeScript est un sur ensemble typé de JavaScript (Typed Superset) qui se compile (ou transpiles) en JavaScript native.
• Tout code JS valide est du code TS valide
• Les navigateurs ne comprennent pas le TypeScript
• Les versions récentes de Node sont directement compatible avec TypeScript
• Fonctionnalités phares : les types et les classes.

1. Installer TypeScript : npm i -D typescript
2. Configurer TypeScript depuis le fichier tsconfig.json à créer ou placer à la racine du projet
3. Créer ou transformer les fichiers js en TypeScript en commançant par modifier l'extension [m|c].js en .ts
4. Ajouter la nouvelle syntaxe que nous allons voir dans vos fichiers .ts
5. Compiler avec l'outil CLI tsc mise à disposition par TypeScript pour transformer du TypeScript en JS
6. Compiler le TypeScript en JS : npx tsc ou vérifier la syntaxe sans créer les fichiers .js npx tsc --noEmit

• Zoom sur le fichier de configuration tsconfig.json
  • target : Version cible du code JS finale généré (ex: ES2024, ESNext)
  • module : Système de gestion des modules (ex: NodeNext, ESNext, commonjs)
  • strict: Vérifications strictes ou non du typage
  • rootDir: Dossier contenant vos sources (ex: /src)
  • outDir: Dossier de sortie des sources compilés et à servir pour la production (ex: /dist)

// tsconfig.json
{
  "compilerOptions": {
    "module": "CommonJS",
    "moduleResolution": "Node",
    "lib": ["ES2020"],
    "target": "ES2019",
    "strict": false,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "noEmitOnError": true,
    "noImplicitThis": true,
    "outDir": "dist",
    "rootDir": "."
  },
  // Include root, all ts files, js files
  "include": ["./", "./**/*.ts", "./**/*.js"],
  "exclude": ["node_modules/", "build/", "dist/", ".cache/", ".tmp/"]
}
            

• TypeScript est aligné avec l'évolution de JS parce qu'il suit strictement les spécifications du TC39
• Dès qu'une fonctionnalité syntaxique atteint le Stage 3/4 dans ECMAScript, elle est intégrée dans TS

• Définir ses propres types
• Les différentes manière de nommer ces types
  1. Types basiques :

     type User = { firstname: string, age: number, newsletter: boolean }

  2. Types unions :

     type Status = 'pending' | 'success' | 'error';

  3. Types intersections :

     type Admin = User & { permissions: string[] };

• L'inférence de type (Type Inference) désigne la capacité de TypeScript à déduire automatiquement le type à partir de la valeur de la variable sans annotation explicite

  
  const age = 19 ; // déduction type nombre
  const alice = {
    firstname: 'Alice',
    age,
    isAdmin : false
  } // déduction également
                  

• Une Interface est un contrat de classe ou une description d'une structure objet
• Principalement utilisé pour étendre les objets
• 2 Interfaces portant le même nom fusionnent (Declaration Merging)
• Quelles différences avec le typage traditionnelle ?

• Nous avons vu que la POO avec JS était possible partiellement par l'intermédiaire du sucre Syntaxe (derrière utilisation du prototypage)
• TypeScript va un peu plus loin en ajoutant des nouvelles fonctionnalités
  1. Modificateurs d'accès : public (par défaut), private, protected
  2. Le modificateur readonly : La valeur d'une propriété ne peut plus être modifié après l'initialisation
  3. Raccourci de la déclaration du constructeur (absence de corps)
  4. Implémentation d'interfaces
  5. Classes abstraites (abstract) : classe non instanciable qui sert de base d'héritage pour les autres classes
  6. Etc.

Copier

// src/entities/user.ts
class User {
  constructor(
    public firstname: string,
    private age: number,
    public readonly id: string
  ) {}
}

// src/interfaces/storage.ts
export default Interface Storage {}
// src/utilities/my-mongodb.ts
import Storage from '../interfaces/storage'
class MongoDB implements Storage { ... }

// src/views/base.ts
export default Abstract class Base {
  abstract render();
  abstract fetchData();
}
// src/views/user-view.ts
import BaseView from './base'
Class UserView extends BaseView {
  render(){...}
  fetchData() {...}
}

              

• Typer les paramètres d'entrée (valeurs simples ou callbacks) et retour (valeur retourné ou absence de valeur void par la fonction)
• Les spécificités du typage d'une fonction
  • Paramètres par optionnels identifiables par ? après le nom du paramètre
  • Valeurs par défaut
  • Surchage des fonctions (Function Overloads) en déclarant plusieurs signatures pour la même fonction

Copier

/**
* tax valeur par défaut 0.2
@return un nombre
*/
function vat(price: number, tax: number = 0.2): number {
  return price * (1 + tax);
}
// fullname est optionnel
function register (email: string, password: string, fullname?: string) {}

// typage des callbacks
type CustomPromise = (
  url : string,
  onSucces: (data: string) => void,
  onError: (error: { message: string, status: number = 500 }) => void
  onEnd? : () => void
) : void {};

// Surchage
function makeDate(timestamp: number): Date;
function makeDate(m: number, d: number, y: number): Date;
function makeDate(mOrTimestamp: number, d?: number, y?: number): Date {
  if (d !== undefined && y !== undefined) {
    return new Date(y, mOrTimestamp, d);
  } else {
    return new Date(mOrTimestamp);
  }
}
const fromTimestamp = makeDate(Date.now());
const fromNumbers = makeDate(9, 7, 2026);
              

• La généricté permet d'avoir un typage flexible
• Elle permet la réutilisation du code et donc facilite la maintenance
• Comment cela fonctionne ?
  • Les types génériques sont des alias, on utilise généralement la lettre T
  • S'il y a plusieurs types génériques à la suite, on utilise T, U, V, etc.
  • L'inférance effectue les traductions de types à partir des valeurs

Copier

// La fonction conserve le type de l'élément passé en paramètre
function firstElement<T>(arr: T[]): T | undefined {}
const num = firstElement([1, 2, 3]); // Inférance T est un number
const str = firstElement(['a', 'b']); // Inférance T est un string

// extension du type T qui doit obligatoirement posséder une propriété length de type number
function logLength<T extends { length: number }>(arg: T): T {
  console.log(arg.length);
  return arg;
}
Interface ApiResponse<T> {...}
Class Entity<T> {...}
              

• PWA (Progressive Web App) est une application web qui offre une expérience utilisateur quasi-identique à celle d'une application mobile native
  • Une PWA utilise les matériels (gps, bluetooth, caméra, micro, gyroscope, capteur luminosité, etc. ) et des fonctionnalités (notifications, mode hors-ligne, etc.) disponibles sur un smartphone
  • L'expérience enrichie par le PWA est possible grâce à l'exploitation des web APIs
  • S'installe et s'ajoute sur l'écran d'accueil
  • Ne nécessite pas d'installation depuis un Store d'applications (AppStore ou PlayStore)
  • Tout le fonctionnement répose sur les services workers

• L'API Web Storage (window.localStorage & window.sessionStorage) permettent de réaliser du stockage côté client (sur le navigateur).
• Le stockage repose sur un couple clé-valeur n'acceptant que des strings (chaînes de caractère)
• Le stockage est synchrone
• Pour stocker les objets, il faut les sérialiser(transformer un objet en string) à l'aide de la fonction JSON.stringify(object)
• Pour récupérer un objet depuis le storage (stockage), il faut déserialiser(transformer un string en objet) avec la fonction JSON.parse(string)
• Sécurité faible à cause des attaques XSS (Cross-Site Scripting), il convient de ne pas stocker des données sensibles dans le Storage

• Le cache est uns système de stockage clé/valeur stockant des ressources réseau (requêtes et réponses HTTP) de manière asynchrone
• Le cache du navigateur met en cache les informations à partir des en-têtes HTTP de la réponse du serveur
  Par exemple, la plus part des serveurs sont configurés pour demander au navigateur de mettre les images en cache pendant 30 jours
• 3 stratégies pour le cache
  1. Cache First, falling back to Network : recherche d'abord dans le cache, si l'information est absente, recherche sur le réseau. idéal pour le contenu statique
  2. Network First, failing back to Cache : réseau -> échoue -> cache, idéal pour les données mis à jour fréquemment et gestion du hors-ligne (perte de connexion Internet)
  3. Stale-While-Revalidate : renvoie le courant courant et met à jour le nouveau cache via un appel réseau
• Comment l'Interface Cache fonctionne ?

Copier

// Création d'un espace de cache
const myCache = await caches.open('assets-v1.0.0');

// Mise en cache
await myCache.addAll(['/main.css', '/index.js', '/favicon.ico', '/logo.svg']);

// Récupérer une ressource depuis le cache
const styleCss = await cache.match('/main.css');

              

• fetch() est une notation simplifée d'une promesse(Promise) avec du sucre syntaxique
• Les specificités de fetch() par rapport à une Promesse classique
  1. fetch ne rejette la promesse qu'en cas d'erreur réseau (pas de connexion).
     Il convient d'avoir une étape intermédiaire pour vérifier que le serveur répond favorable
  2. Les codes HTTP 40x ou 50x ne sont pas considérés comme un échec pour l'API fetch()
  3. Gère les en-têtes HTTP grâce à un objet Headers que l'on peut passer dans les options (2ème paramètre de la fonction)

Copier Exécuter

(async function() {
  try {
    const res = await fetch('https://api.github.com/users/defunkt');
    // étape intermédiaire pour vérifier la réponse du serveur
    if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
    const data = await res.json();
    console.log('userGithubInfo', data);
  } catch (error) {
    console.error('[KO] :', error);
  }
})()

              

Copier Exécuter

// POST en utilisant les options (2ème paramètre)
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // valeurs possibles GET (par défaut), POST, PUT et DELETE
  // Données attendues par le serveur toujours en chaîne de caractère (sérialisation de l'objet)
  body: JSON.stringify({
    title: 'Cours sur JavaScript avancé',
    body: 'Incroyable 😉',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log('réponse du serveur', json))
  .catch(error => console.log('[KO]', error));

              

• l'API geolocation permet d'obtenir les coordonnées géographiques (latitude et longitude) d'un utilisateur
• Ses caractéristiques
  • Fonctionne uniquement avec le protocole HTTPS
  • Asynchrone
  • Temps réel
  • Demande d'une autorisation explicite (navigateur affiche un onglet pour accepter ou refuser la géolocalisation)
  • Signatures des fonctions de l'API
    1. navigator.geolocation.getCurrentPosition(successCallback, errorCallback?, options?)
    2. navigator.geolocation.watchPosition(successCallback, errorCallback?, options?)
    3. navigator.geolocation.clearWatch(id)

• Un service worker est un fichier JavaScript exécuté dans un thread séparé (Web Worker), sans accès direct au DOM.
• C'est un programme s'exécutant en arrière plan
• Il joue le rôle de middleware pouvant intercepter toutes les requêtes HTTP sortantes du programme principal
• Il communique avec le thread principal (programme principal) grâce aux événements
• Cycle de vie associées aux événements
  1. Enregistrement : le programme principale souscrit (déclenche) le service Worker
  2. Installation (associé à l'évenement install) : premier événement envoyé au service worker
  3. Activation (associé à l'événement activate) : une fois que l'installation ou une nouvelle version a été réalisé avec succès
• Les autres événements applicatifs (fonctionnels)
  1. fetch : reception d'un message depuis le thread principal ou interceptions des requêtes sortantes
  2. sync : diffère les actions pour les exécuter lorsque la connexion réseau sera retablie
  3. push : envoyer des notifications même lorsque le navigateur n'est pas actif (lancé)
• Usages :
  • Support hors-ligne : resiliance de l'application en mode dégradé (perte ou connexion instable)
  • Performance : réponse plus rapide depuis le cache
  • Notification push
  • Application plus réactif: le lancement des opérations lourdes ou critiques en arrière plan ne bloquent pas l'interface utilisateur

• Un test automatisé (par oppisition à un test manuel) est l'écriture d'un code supplémentaire permettant de vérifier qu'une brique, un scénario ou une fonctionnalité complète correspond au comportement ou résultat attendu
• Pourquoi tester ?
  1. Documenter les comportements et les résultats attendus
  2. Rendre l'application plus robuste en détectant les problèmes avant la mise en production
  3. Faire évoluer et maintenir son application en toute confiance
  4. Faciliter le refactoring
  5. Améliorer la qualité du code avec une approche TDD (Test-Driven Development) qui consiste à tester avant de coder
  6. Réduire le coût de la maintenance en cas de bug (le temps passé à écrire un test est un investissement rentable pour le futur)
  7. Etc.

Pyramide des tests de Mike Cohn

Plus on monte dans la pyramide, plus le temps d'écriture, le coût, le temps d'exécution et le niveau de confiance sur la fonctionnalité ou l'application augmentent.

• Principe : isoler et tester la plus petite unité de code
• Caractéristiques
  • Rapide d'écriture et d'exécution < 1 seconde
  • Périmètre : fonctions et classes métiers
  • Stable dans le temps, ne dépend pas de l'interface utilisateur (UI) et de la base de données (BDD)
  • S'abstraire de la complexité de certaines fonctions ou API en utilisant les tests doublés pour l'isolation du code.
    Vocabulaire des tests doublés
    • Stub : remplace un composant externe par une réponse prédéfinie
    • Spy : observe les appels faits à une fonction (combien de fois, avec quels arguments)
    • Mock : objet pré-programmé avec des attentes précises sur les interactions qu'il doit recevoir
• Les librairies disponibles pour réaliser les tests unitaires
  • Test Runner (node:test) : librairie native et embarquée par Node
  • Jest : librairie de référence pour les tests unitaires avec JavaScript
  • Vitest : plus rapide et compatible Jest, développé par les créateurs des solutions et outils VueJS et Vite, support nativement le standard ECMAScript
  • Mocha
  • Etc.

1. Installez une librairie dédié au tests unitaires : npm i -D vitest
2. Ajoutez un script dans le fichier package.json

   
   // package.son
   {
     "scripts" : {
       "test" : "vitest"
     }
   }
                   

3. Ajoutez la configuration de Vitest dans le fichier vitest.config.js pour qu'il détecte automatiquement les fichiers dediés aux Tests

   
   // vitest.config.js
   import { defineConfig } from 'vitest/config'
   export default defineConfig({
     test: {
       globals: true,
       testTimeout: 100,
       coverage: {
         reporter: ['html'],
         reportsDirectory: './tests/coverage'
       },
       environmentMatchGlobs: [
         [
           'tests/*/*.test.[c|m]js',
           'tests/*/*integration*.test.{js,mjs,cjs,ts}',
           'node',
         ]
       ],
       exclude: ['node_modules', 'tests/*']
     }
   })
   
                   

4. Écrivez votre test en respectant le pattern AAA (Arrange, Act, Assert) et dans cet ordre d'écriture (Assert->Act->Arrange)
   • Arrange : préparation du contexte (charger les fonctions, les données nécessaires à l'exécution)
   • Act : appeler la fonction à tester
   • Assert : vérifier le comportement ou le résultat est bien celui attendu

Copier

// tests/cart/index.test.mjs
import  { describe, test, it, expect } from 'vitest';
import { computeTotal } from '../src/cart/index'
describe('Testing compute function', () => {
  test('It should be 80 € When price=100 and discount=0.2 (20%)', () => {
    // 1. ARRANGE
    const cart = [ { price: 100 } ];
    const discount = 0.2;
    // 2. ACT
    const result = computeTotal(cart, discount);
    // 3. ASSERT
    expect(result).toBe(80);
  });

  // it() alias de test()
  it('Should be 500€ without discount', () => {
    expect(computeTotal([{ price: 100}, { price: 400}], 0)).toBe(500);
  })
})
              

• Principe : vérifier que plusieurs briques de votre appplication fonctionnent correctement ensemble.
• Caractéristiques
  • Connecter plusieurs briques de code ensemble et sans isolation.
  • Moins rapide que les tests unitaires, cependant, les doublures peuvent être utilisées pour reduire la complexité et le temps d'exécution
  • Périmètre: APIs externes, connexion à la base de données, les routes d'une application, module, le DOM
  • Les libraires
    • Supertest
    • Jest
    • Vitest
    • Cypress
    • Puppeteer
    • TestCafe
    • Playwright

1. Installez les librairies vitest et supertest pour tester les routes d'une application : npm i -D vitest supertest
2. Ajoutez un script dans le fichier package.json

   
   // package.son
   {
     "scripts" : {
       "test" : "vitest" // déjà présente (lance à la fois les unitaires et d'intégration)
     }
   }
                   

3. Reprenez la configuration de vitest.config.js cf. l'étape 3 de la mise en place d'un test unitaire
4. Écrivez votre test en respectant le pattern AAA

Copier

import { describe, expect, it } from "vitest";
import request from "supertest";
import app from "../src/app.mjs";
describe("Testing /teams routes", () => {
  describe("Testing GET /teams", () => {
    it("Should have JSON content", () => request(app).get("/teams").expect("Content-Type", /json/));
    it("Should have status 200", () => request(app).get("/teams").expect(200));
    it("Should have an array of teams", () => {
      return request(app)
        .get("/teams")
        .then((response) => {
          expect(Array.isArray(response.body)).toBe(true);
        });
    });
  });

  describe("Testing POST /teams", () => {
    it("Should have 201 status", () => {
      return request(app)
        .post("/teams")
        .send({ id: "10", name: "Lyon" })
        .set("Accept", "application/json")
        .expect(201);
    });
    
    it("Should have JSON content", () => {
      return request(app)
      .post("/teams")
      .send({ id: "10", name: "Lyon" })
      .set("Accept", "application/json")
      .expect('Content-Type', /json/);
    });

    it("Should have body response { message, success: true }", () => {
      return request(app)
      .post("/teams")
      .send({ id: "10", name: "Lyon" })
      .set("Accept", "application/json")
      .then(response => {
        expect(response.body).toEqual({ message: 'Team created', success: true})
      });
    });

    it("Should have status 500 (bad JSON sent)", () => {
      return request(app)
      .post("/teams")
      .send({})
      .set("Accept", "application/json")
      .expect(400)
      .then(response => {
        expect(response.body).toEqual({ 
          message: 'new team should have an id and a name', 
          success: false
        });
      })
    });
  });
});
              

• Principe : tester le parcours réel d'un utilisateur depuis l'interface utilisateur (UI) de bout en bout (end to end, abrégé E2E)
• Caractéristiques
  • Exécuté dans un navigateur piloté par la librairie de test
  • Moins stable dans le temps dépend fortement de l'UI et des informations stockées en base de données
  • Périmètre : parcours utilisateur au complet avec les intéractions sur l'UI (utilisation souris, clavier), automatisation d'une recette (livraison)
• Les livrairies
  • Cypress
  • Playwright
  • NightWatch

1. Installez une librairie dédiée : npm i -D cypress
2. Ajoutez un script dans le fichier package.json

   
   // package.son
   {
     "scripts" : {
       "e2e" : "cypress open" // mode interactive en lançant et en suivant les tests en direct
       "e2e:headless" : "cypress run" // arrière-plan sans le lancement du navigateur
     }
   }
                   

3. Lancez votre application disponible sur un port par exemple http://localhost:8080
4. Configurez Cypress depuis cypress.config.js pour définir le point d'entrée (lien de votre application)

   
   // cypress.config.js
   import { defineConfig } from 'cypress';
   export default defineConfig({
     e2e: {
       baseUrl: 'http://localhost:8080',
       specPattern: 'cypress/e2e/*/*.cy.{js,mjs,jsx,ts,tsx}',
       supportFile: false
     },
   });
                   

5. Ecrivez votre test E2E

Copier

// cypress/app/homepage.cy.js
describe("Testing homepage", () => {
  beforeEach(() => cy.visit('/'););
  it("Should have h1", () => cy.get("h1").should("exist"););
  it("Should have 2 links", () => cy.get("a").should("have.length.at.least", 2););
  it("Should go to /users", () => {
    cy.get("a[href=/users]").click();
    cy.get(".card").then((cards) => expect(cards.length).toBe(20););
  });
});
// cypress/app/login.js
describe("Testing Login page", () => {
  it("Should go to /login", () => {
    cy.visit("/login");
    cy.get('input[type=email]').type('john@doe.com', { delay: 100 });
    cy.get('input[type=password]').type('Admin123!', { delay: 100});
    cy.get('input[type=email]').should('have.value', 'john@doe.com');
    cy.get('input[type=password]').should('have.value', 'Admin123!');
    cy.get('input[type=submit]').click();
    cy.url().should('eq', 'http://localhost:8080/dashboard');
  });
});
              

• Un test runner est un outil en ligne de commande (CLI) qui lance les fichiers de tests à partir d'un fichier de configuration qui lui permet de les reconnaitre
• Le module s'accompagne des fonctions dédiées aux tests tels que before(), beforeEach(), after(), afterEach(), describe(), it(), test(), expect()
• Rappels sur les runners vues précedemment
  • Vitest : moderne ultra-rapide basé sur Vite. Supporte nativement le standard ESM et TypeScript sans configuration
  • Cypress : pour les tests E2E
  • Node.js Native Test Runner (node:test) : runner intégré nativement dans Node.js pour tester sans dépendances extérieur à partir des versions Node >= 18
  • Etc.

• Une librairie est un ensemble de fonctionnalités repondant à un besoin précis par exemple JQuery dont l"objectif était de simplifier l'écriture du code et son exécution sur différents navigateurs.
• Le développeur utilise les outils mises à sa disposition comme il entend
• Absence de cadre de travail ou ce dernier très léger et libre
• Vous êtes le seul maître à bord

• A l'inverse d'une librairie, un framework est un cadre complet et strict
• Le développeur écrit le code en fonction du cycle de vie (création, montage, mise à jour, etc.) et des conventions imposées
• C'est le framework qui met le cap sur la direction à prendre dans le projet

• La logique derrière les composants est de découper l'interface en plusieurs briques autonomes et réutilisables
• Ainsi une page HTML est composé de plusieurs composants indépendantes, mis les uns après les autres pour obtenir l'affichage final
• Un composant Parent est un composant qui utilise d'autres composants considérés comme des composants enfants
• Comment est constitué un composant ?
  1. La structure HTML/JSX (JavaScript XML) : code HTML ou JSX (HTML melangé avec du JS) responsable de l'affichage
  2. La logique : code JS responsable du comportement et des intéractions avec les éléments HTML affichés
  3. L'apparence (style) : code CSS
• Comment les données sont échangées entre les composants ?
  1. Le flux de transmission des données est unidirectionnel du parent vers l'enfant et en lecture seule appelé props
  2. La communication de l'enfant au parent s'effectue à travers des événements et des callbacks exécutées par le parent

• Node est un environnement (technologie) d’exécution Javascript côté serveur crée en 2009 par Ryan Dahl
• Composé de :
  • Moteur V8 (C++) de chrome : interprète et exécute le code JavaScript
  • NPM (Node Package Module)
  • Libuv : gère des opérations asynchrones et de la boucle d'événements
  • OpenSSL : ajoute une couche de sécurité réseau TLS/SSL
  • Zlib : compresse/décompresse les fichiers, requêtes, etc.
  • TCP, UDP, HTTP, QUIC: modules qui gèrent les protocoles de communication TCP/UDP
• Les autres modules au coeur du fonctionnement de Node (core modules)
  • fs : gestion des fichiers
  • http / https : serveur web
  • url : formatage d’URL
  • path : gestion des chemins
  • os : informations sur le système d’exploitation
  • stream : gestion des flux de données (chunk, paquets)
  • util : fonctions utilitaires

2 éléments graphiques natives pour la création ou la restitution du contenu image

• Permet d'économiser de la batteroe et du CPU côté client lorsque l'application n'est plus visible au premier plan par l'utilisateur
• Les traitements coûteux en ressource tels que les timers (setTimeout, setInterval), animations et les requêtes d'API externes peuvent être mise en pause lorsque l'application passe en arrière plan
• Comment l'API visibility fonctionne ?
  • La propriété document.visibilityState peut prendre 2 valeurs, hidden ou visible
  • L'événement visibilitychange détecte le changement du passage de l'écran en arrière-plan ou premier-plan
  • La callback de l'événement précédent se déclenche, c'est ici que vous agir pour