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 (201X, 2017, 2020, …)

Votre navigateur bouge, évolue

Beaucoup de différences… Donc attention au support !

L'Asynchrone

Pouvez-vous me dire à quoi ça correspond ?

var resultat = "";
 
ajax("http://api/getRandom", (randomValue) => {
  resultat = randomValue;
});
 
console.log(resultat);
var resultat = "";
 
ajax("http://api/getRandom", (randomValue) => {
  resultat = randomValue;
});
 
console.log(resultat);
var resultat = "";
 
ajax("http://api/getRandom", (randomValue) => {
  resultat = randomValue;
});
 
console.log(resultat);
var 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).
• Polyfill

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

Éxécuté en cas de réussite.

catch

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

Promise.all

Promise.all() 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.

⚠️ Attention ne fonctionne pas partout ⚠️

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.
• Bloquage de l'interface.

Compiler - Distribuer

Compiler ?

• Les bundler (Webpack)

Mais maintenant… nous avons ViteJS 🎉

Conclusion

Des questions ?