JavaScript

Téléchargement progressif avec fetch ()

SoC, , ,
Fetch est une API propre aux navigateurs qui permet de présenter des requêtes à un serveur HTTP par voie de programmation, autrement dit depuis du code JavaScript.
Fetch remplace XMLHttpRequest, dont elle est une version plus moderne. En particulier :
  • XMLHttpRequest est bien une API asynchrone, mais elle repose sur le recours à des callbacks. Or ECMAScript 2015 a introduit les promesses pour faciliter la programmation asynchrone en échappant au "callback hell", mais XMLHttpRequest n'en tient pas compte.
  • Du fait de Same-Origin Policy (SOP), XMLHttpRequest ne permet pas de récupérer une ressource dont l'origine est différente de celle de la page. Or SOP a été tempérée en introduisant Cross-Origin Resource Sharing (CORS), mais XMLHttpRequest n'en tient pas compte.
Pour se familiariser avec Fetch, l'on se propose d'écrire une API qui permet de récupérer une série de ressources tout en étant tenu informé de la progression du téléchargement de chacune.
Suivi de la progression de téléchargements simultanés avec fetch ()
Le code JavaScript devra être aussi simple que possible, mais on n'échappera pas à la mobilisation de quelques concepts fondamentaux : les promesses, la récursivité, les closures, etc. Pas d'affolement, tout est expliqué en détail !
Continuer la lecture de "Téléchargement progressif avec fetch ()" →
Téléchargement progressif avec fetch ()

CORS avec Node.js

SoC, ,
Pour faire face à la montée des menaces sur leurs utilisateurs, les navigateurs se sont au fil du temps enrichis de mécanismes qui visent à contrôler le contenu d'une page Web. En particulier, il faut évoquer :
CORS avec Node.js
Du fait qu'il ne fallait pas casser le Web en instaurant ces mécanismes, ces derniers ne changent pas grand-chose pour le développeur d'une application Web standard, au sens d'un ensemble de pages servies par un même serveur, qui n'affichent jamais que du contenu qui en provient.
C'est tout particulièrement vrai pour CSP, qui ne vient pas limiter des pratiques telles comme par exemple du script inline dans une balise <script>, tant que le développeur ne met pas lui-même en place CSP en accompagnant ses pages d'un header Content-Security-Policy.
Il est va autrement pour SOP et CORS, qui d'emblée limitent des pratiques. En particulier, il est impossible depuis le script d'une page Web de formuler une requête via l'API Fetch pour récupérer du contenu dont l'origine, entendue comme la composition du nom de domaine et du numéro de port, n'est pas celle de la page en question.
Or cela peut être nécessaire. Illustration avec une application Web où l'utilisateur accède à une page servie par un serveur Node.js (module http) à l'écoute sur le port 3000 de localhost, dans laquelle un script récupère du contenu en appelant un service exposé par un autre serveur Node.js (module http) à l'écoute sur le port 3001 du même localhost.
Continuer la lecture de "CORS avec Node.js" →
CORS avec Node.js

Chaîner les promesses en JavaScript

SoC,
Comme cela a été expliqué dans cet article, l'intérêt des promesses en JavaScript, c'est de permettre au développeur de pratiquer l'asycnhronisme sans tomber dans le "callback hell".
Pour autant, cela suppose de bien comprendre le fonctionnement de ce mécanisme alternatif, tout particulièrement cet aspect essentiel qu'est l'enchaînement, ou le chaînage, de promesses.
Pratique du chaînage de promesses en JavaScript
En cette matière, un examen trop superficiel du mécanisme peut conduire à s'en faire une idée fausse, et de là mal pratiquer le chaînage de promesses via .then () et .catch ().
Pour vous permettre d'honorer vos promesses, voici quelques éclaircissements pratiques...
Continuer la lecture de "Chaîner les promesses en JavaScript" →
Chaîner les promesses en JavaScript

Déboguer les promesses en JavaScript

SoC,
Le développeur adepte du débogueur de Firefox qui s'initie à la programmation asynchrone à l'aide de promesses de JavaScript peut assez rapidement en venir à s'arracher les cheveux.
En effet, le débogueur lui semblera parfois ne pas afficher des exceptions de syntaxe. Dur de localiser une erreur dans l'écriture du code et de la corriger dans ces conditions...
Déboguer les promesses en JavaScript
Cela tient à la manière assez particulière dont ce type d'exception est géré par le débogueur. Fort heureusement, il existe une solution technique... pour autant que l'on veille bien à la mettre en oeuvre !
Continuer la lecture de "Déboguer les promesses en JavaScript" →
Déboguer les promesses en JavaScript

Executer une file de tâches asynchrones en JavaScript

SoC, ,
Depuis l'introduction des promesses puis du sugar coating qui permet d'en faciliter l'usage, tout développeur JavaScript se doit de maîtriser l'art de la programmation asynchrone. Ce sera tout particulièrement le cas s'il souhaite s'investir dans Node.js, où toute fonction devrait en théorie pouvoir être exécutée de manière asynchrone.
Cela implique de repenser la manière de programmer les choses les plus simples. Par exemple, purger à l'infini une file (FIFO) de tâches asynchrones. Dans le monde asynchrone, il est inconcevable d'écrire une boucle où serait logé le programme principal, au seul prétexte de pouvoir régulièrement consulter l'état de la file et exécuter une tâche, s'il en reste, quand l'exécution de la précédente, s'il y en avait, s'est achevée. En un mot, il est hors de question de faire du polling.
Interface pour exécuter une file de tâches asynchrones
Comment faire ? C'est très simple, et cela constitue un excellent exemple pour s'initier à la programmation asynchrone en JavaScript. Explications dans ce qui suit.
Continuer la lecture de "Executer une file de tâches asynchrones en JavaScript" →
Executer une file de tâches asynchrones en JavaScript

Boucle d’événements et multithreading dans Node.js

SoC,
En un peu plus d'une dizaine d'années, Node.js s'est imposé comme un élément central des architectures Web. A en lire des articles inventoriant les grandes entreprises qui l'utilisent, comme ici, Node.js est utilisé par Netflix, eBay, PayPal, et j'en passe.
Node.js
Joli succès pour cette technologie sortie de l'esprit de Ryan Dahl, qui a su repenser "out of the box" une manière de fonctionner des serveurs HTTP que plus personne ou presque n'interrogeait, se reposant dessus comme sur un acquis.
Pourtant, en dépit de sa popularité, il apparaît que les bases du fonctionnement de Node.js sont très mal maîtrisées. Au coeur du sujet : le fonctionnement de la boucle d'événements, et la place qu'elle laisse au multithreading.
Retour à base, pour tenter de comprendre non seulement ces aspects, mais aussi les raisons pour lesquelles ils peuvent être encore méconnus.
Continuer la lecture de "Boucle d’événements et multithreading dans Node.js" →
Boucle d’événements et multithreading dans Node.js

La promesse des promises en JavaScript

SoC, ,
L'implémentation de la spécification ECMAScript 2015 sur laquelle JavaScript est fondé a conduit à introduire un nouvel objet standard en JavaScript : Promise. Il s'agit bien d'un objet standard, c'est-à-dire propre au langage comme String et non au navigateur, comme XMLHttpRequest.
Cet objet permet de faciliter et de sécuriser l'écriture d'un appel à une fonction asynchrone, c'est-à-dire à une fonction qui rend la main sans avoir encore retourné son résultat, s'engageant à signaler au programme qui l'a appelée quand ce résultat sera disponible, par exemple en appelant une fonction que le programme lui a fournie - une callback.
Le Serment des Horaces par David
Tout développeur JavaScript a très probablement déjà utilisé ce type de fonction, notamment pour charger des fichiers via l'objet XMLHttpRequest, ou pour déclencher une action après expiration d'un timer programmé via window.setTimeout ().
Avec l'objet Promise, l'asynchronisme a en quelque sorte été dégagé des objets qui viennent d'être cités pour accéder au rang d'aspect fonctionnel fondamental de JavaScript, au même titre que l'héritage basé sur les prototypes ou les closures. Partant tout développeur JavaScript doit maîtriser l'asynchronisme.
Pour autant, qui met le nez dans la spécification ne peut être que rapidement rebuté par l'opacité de cette dernière. Fort heureusement, il existe de nombreuses autres sources auxquelles se référer. Apportons ici une modeste contribution avec une présentation détaillée du système des promises destinée à qui découvre le sujet.
Mise à jour du 06/10/2021 : Correction d'une erreur mineure à la fin du propos sur le chaînage.
Continuer la lecture de "La promesse des promises en JavaScript" →
La promesse des promises en JavaScript

Copier des données dans le clipboard en JavaScript

SoC, ,
Comment copier des données quelconques dans le clipboard en JavaScript dans le contexte d'une page Web ? Ce problème est assez simple à régler. Il suffit d'ajouter un gestionnaire de l'événement copy à l'objet document.
Le problème se complique s'il est exigé que ce gestionnaire d'événement soit anonyme et par ailleurs qu'il soit strictement éphémère, c'est-à-dire qu'il se retire de l'objet document une fois que l'événement copy est survenu, comme ce serait le cas si l'utilisateur cliquait sur un bouton "Copier" à usage ponctuel. En effet, en mode strict, il n'est plus possible d'utiliser arguments.callee pour faire référence à une fonction anonyme dans le corps de cette dernière. Par conséquent, impossible de faire référence à la fonction dans un appel à removeEventListener ().
Mise à jour du 26/12/2018 : Il est désormais possible d'utiliser l'option "once" lors de l'appel à addEventListener () (ex: addEventListener ("click", function (e) {}, { once: true })) pour ajouter un gestionnaire d'événement éphémère. Plus simple !
Continuer la lecture de "Copier des données dans le clipboard en JavaScript" →
Copier des données dans le clipboard en JavaScript

Itérateur et générateur en JavaScript

SoC, ,
Comment créer facilement une liste d'éléments qu'il sera possible de parcourir à l'aide de l'instruction for... of... (à ne pas confondre avec for... in...) ?
Cette liste doit pouvoir être totalement spécifique, et non seulement une liste prédéfinie dans JavaScript, comme notamment un tableau. En particulier, ses éléments doivent pouvoir n'être générés qu'au fil de l'itération.
Continuer la lecture de "Itérateur et générateur en JavaScript" →
Itérateur et générateur en JavaScript

Closures pour gérer les événements en JavaScript

SoC, ,
La fonction addEventListener () permet d'associer une fonction (le gestionnaire d'événement) à un événement. Lorsque l'événement survient, le navigateur appelle le gestionnaire d'événement en lui transmettant un unique argument sous la forme d'un objet décrivant l'événement.
Comment transmettre autre chose à ce gestionnaire, comme par exemple une référence sur un objet spécifique ?

Continuer la lecture de "Closures pour gérer les événements en JavaScript" →

Closures pour gérer les événements en JavaScript