Mais je n’aime pas le web moi

Désolé, mais le JavaScript est partout

Bonne nouvelle ! Ce n'est pas que pour le web !

• Le Web : HTML / CSS / JavaScript (navigateur)
• Les applications : Electron / React Native / …
• Les serveurs : NodeJS / Deno / BunJS

JavaScript = ECMAScript

Une nouvelle version de la norme chaque année (ES2015, ES2020, ES2024, …)

Votre navigateur bouge, évolue

Beaucoup de différences… Donc attention au support !

L'Asynchrone

Pouvez-vous me dire à quoi ça correspond ?

let resultat = "";
 
ajax("http://api/getRandom", (randomValue) => {
  resultat = randomValue;
});
 
console.log(resultat);
let resultat = "";
 
ajax("http://api/getRandom", (randomValue) => {
  resultat = randomValue;
});
 
console.log(resultat);
let resultat = "";
 
ajax("http://api/getRandom", (randomValue) => {
  resultat = randomValue;
});
 
console.log(resultat);
let resultat = "";
 
ajax("http://api/getRandom", (randomValue) => {
  resultat = randomValue;
});
 
console.log(resultat);

• Pouvez-vous me dire ce que va afficher le console.log() ?

Les nouveautés

• Votre navigateur / la console / les dev tools
• Global
• Les Arrays (Tableau)
• Les Objets
• L'Ajax (Fetch)
• Les Promises (Promesses)
• Async / Await

Votre navigateur

Votre navigateur est puissant ! Découvrons quelques-unes des fonctionnalités.

Global

• Fonctions anonymes (λ) / fléchées
• let / const
• string template
• export

Fonctions anonymes

let / const

String template

Le but : Rendre le code plus lisible.

Export

« Activer » les exports dans le navigateur

« De base », cette notation est ignorée par le navigateur, mais l'activation est simple.

Les Arrays (Tableau)

La manipulation des tableaux est maintenant simplifiée et performante.

map

Est-ce valide ?

NON… Enfin Oui…

Mais non, le mieux pour ça, on utilise un forEach

forEach

Quelle est l'autre écriture du forEach ?

includes

filter

• Rendre la syntaxe plus lisible et concise.
• Tout est « chainable ».
• L'utiliser tout le temps (disponible depuis très longtemps).

Les Objets

Comme les tableaux, les objets sont maintenant manipulables plus simplement.

Rappel

• Le mot-clé new existe.
• Vous pouvez créer des class.
• Vous pouvez créer des méthodes.

Object.keys()

Object.values()

L'Ajax

Une « librairie / fonction / méthode » simple permettant de faire de l'Ajax intégrée

Fetch

Allez plus loin

wretch (lib)

lib

Hey! then?

Les Promises (Promesses)

L'objet Promise (pour « promesse ») est utilisé pour réaliser des traitements de façon asynchrone. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur voire jamais.

Pour faire « simple », ça remplace les callback et évite les callback hell.

Exemple

then

Exécuté en cas de réussite.

catch

Exécuté en cas d'échec (Erreur, Throw, …).

Promise.all

Promise.all() est un outil de composition qui permet de mener des opérations asynchrones en parallèle.

Promise
    .all([promesse1(), promesse2(), promesse3()])
    .then(([resultat1, resultat2, resultat3]) => {
        // Code
    });

finally

Appelée dans tous les cas de terminaison (réussite comme échec).

Pratique pour masquer un indicateur de chargement par exemple.

Async / Await

Le but des fonctions async/await est de simplifier l'utilisation synchrone des promesses et d'opérer sur des groupes de promesses. De la même façon que les promesses sont semblables à des callbacks structurés, async/await est semblable à la combinaison des générateurs et des promesses.

Simplifier… Mais…

Async / Await permet de rendre « synchrone » du code asynchrone.

• Attendre le retour d'une requête Ajax avant de continuer.
• À votre avis, quels sont les risques ?
• Catch.
• Blocage de l'interface.

Compiler - Distribuer

Compiler ?

• Les bundlers (Webpack)

Mais maintenant… nous avons ViteJS 🎉

Récapitulatif

• Le JavaScript est partout : navigateur, serveur, applications.
• Fonctions fléchées, let / const, string templates, modules.
• Des tableaux et objets faciles à manipuler (map, filter, forEach).
• L'asynchrone : Fetch, Promises, async / await.

Des questions ?

Place au TP 🚀