Des callbacks nus à async/await en passant par les promesses, tout ce qu'il faut savoir pour maîtriser l'asynchronie JS sur le bout des doigts !
Enfin un cours de référence sur l’asynchrone !
Marre de ne trouver que des ressources parcellaires sur la programmation asynchrone en JavaScript ? Ne cherchez plus, voici le cours tout-en-un qui couvre aussi bien les notions fondamentales de l’asynchrone que les dernières évolutions de async/await.
Fini le code bidouillé qui « tombe en marche » et l’incompréhension devant des erreurs classiques ! Avec ces 3h de vidéos découpées en petits segments thématiques digestes entre 1 et 10 minutes chacun, vous pouvez repartir sur des connaissances solides et bétonnées, et une compréhension en profondeur !
Jetez un coup d’œil aux témoignages et leçons gratuites (liens "Aperçu" du contenu) ci-dessous !
Fini le code bidouillé qui « tombe en marche » et l’incompréhension devant des erreurs classiques ! Avec ces 3h de vidéos découpées en petits segments thématiques digestes entre 1 et 10 minutes chacun, vous pouvez repartir sur des connaissances solides et bétonnées, et une compréhension en profondeur !
Jetez un coup d’œil aux témoignages et leçons gratuites (liens "Aperçu" du contenu) ci-dessous !
Témoignages
Je trouve ce cours très instructif. Les sujets sont abordés de manière détaillée et progressive. Même si je fais du JS depuis plusieurs années, ça m’a été utile. Je me suis bien retrouvé dans les pièges à éviter !
Étienne Voilliot, Lead Developer, Homair Vacances
Je dois dire que ces screencasts sont très bien faits : courts, compréhensibles et didactiques.
Il s'agit d'une excellente ressource pour monter en compétences ! Vous pouvez y aller les yeux fermés. :)
Il s'agit d'une excellente ressource pour monter en compétences ! Vous pouvez y aller les yeux fermés. :)
Corinne Schillinger, consultante web front-end
Ça m’a pris des années pour maîtriser les callbacks, les promesses et async/await. Si seulement j’avais pu regarder ce cours de 3 heures… Je vais le recommander automatiquement pour ces questions désormais !
Christopher Chedeau, Front-end Engineer, Facebook
Promesse tenue avec ce nouveau screencast ! […] Une multitude de ressources existent déjà sur le sujet mais c'est la première fois que j'ai l'impression de comprendre ces concepts de manière claire courte et précise.
Juliette Temem, Computer Scientist, Adobe
Ce cours vidéo est très, très bien fait! Il traite de manière efficace, structurée, et complète un sujet précis. Avec les explications claires et un brin d'humour, je me suis parfois retrouvée en formation ;-)
Julie Escoffier, Front-end Developer, Equisoft
Ce cours sur l’asynchrone… C’est une tuerie! Je me battais avec un bug sur un algorithme de dispatch de commande, mais après avoir suivi le cours : problème résolu !
Manuel Birba, développeur full-stack
38 vidéos (env. 3h) et 3 archives Zip des exemples de code. Mises à jour gratuites à vie !
38 vidéos
Le contenu en détail
Partie 1 : juste des callbacks
Partie 2 : les promesses
Partie 3 : async/await
Des slides et du code
Parce qu’il est tout aussi important de bien saisir les concepts de fond et la théorie que de savoir les implémenter concrètement, le cours alterne entre des éléments de « cours magistral » clairs (à la Powerpoint) et des exemples concrets de code exécutables dans Node ou les navigateurs.
Qui plus est, le contenu des slides est soigneusement synthétique, et offre un complément bienvenu aux explications plus détaillées de la piste audio, tout en permettant de « suivre » même en regardant le cours dans un environnement bruyant.
L'ensemble des exemples de code sont fournis en plus des vidéos. Et vous conservez un accès gratuit à vie aux mises à jour et compléments que nous pourrions ajouter !
Qui plus est, le contenu des slides est soigneusement synthétique, et offre un complément bienvenu aux explications plus détaillées de la piste audio, tout en permettant de « suivre » même en regardant le cours dans un environnement bruyant.
L'ensemble des exemples de code sont fournis en plus des vidéos. Et vous conservez un accès gratuit à vie aux mises à jour et compléments que nous pourrions ajouter !
Les tutos, ça va bien deux minutes
Le web regorge de tutoriels sur tout et n’importe quoi, et leur principal problème c’est qu’ils se contentent de montrer le “Golden Path”, le déroulé parfait, sans accrocs ni obstacles.
Mais la vraie vie, c’est pas ça.
Nos cours vidéos, comme nos formations présentielles, s’attachent à illustrer tous les pièges potentiels et erreurs courantes pour mieux montrer leurs causes et détailler les solutions optimales. C’est ainsi que nous distillons toute l’expertise que seules de nombreuses années de pratique peuvent apporter, pour vous permettre de construire la vôtre en accéléré !
Mais la vraie vie, c’est pas ça.
Nos cours vidéos, comme nos formations présentielles, s’attachent à illustrer tous les pièges potentiels et erreurs courantes pour mieux montrer leurs causes et détailler les solutions optimales. C’est ainsi que nous distillons toute l’expertise que seules de nombreuses années de pratique peuvent apporter, pour vous permettre de construire la vôtre en accéléré !
Questions fréquentes
🎓 Quelle expérience faut-il déjà avoir de l’asynchrone ?
A priori, aucune expérience dédiée à l’asynchrone n’est nécessaire, mais en revanche, une expérience de JavaScript est requise. Et comme il est rarissime de faire du JS sans faire de l'asynchrone (écouter des événements, faire un appel Ajax…), en pratique, qui a l’une a l’autre.
🦕 Le cours est-il compatible avec IE ?
Le monde n’est pas compatible avec IE. 😜
Plus sérieusement, IE gèrera en natif la première partie (callbacks nus), mais ne prend pas en charge nativement les promesses et a fortiori async/await. Le recours à un outil comme Babel sera donc nécessaire, mais ce dernier permet une utilisation à partir de IE9 sans souci, voire IE6 pour certaines parties.
Plus sérieusement, IE gèrera en natif la première partie (callbacks nus), mais ne prend pas en charge nativement les promesses et a fortiori async/await. Le recours à un outil comme Babel sera donc nécessaire, mais ce dernier permet une utilisation à partir de IE9 sans souci, voire IE6 pour certaines parties.
🎁 Les exemples de code sont-ils fournis ?
Naturellement ! Chaque début de section contient un lien vers un Zip regroupant tous les exemples de code de la section.
Certains rares exemples ne sont pas exécutables tels quels (ceux supposant une base de données par exemple), mais dans leur immense majorité ils sont exécutables tels quels dans Node et/ou un navigateur moderne.
Certains rares exemples ne sont pas exécutables tels quels (ceux supposant une base de données par exemple), mais dans leur immense majorité ils sont exécutables tels quels dans Node et/ou un navigateur moderne.
📥 Puis-je télécharger les vidéos pour les regarder hors-ligne ?
Oui ! Chaque début de section contient un lien vers un Zip regroupant les vidéos MP4 de la section, que vous pouvez télécharger si vous souhaitez les voir ou revoir dans un contexte de connectivité pourrie. Notez qu'une faible bande passante suffit à les consulter en ligne, ceci dit, et puis vous bénéficiez ainsi des transcripts et autres contenus associés.
🆓 Avez-vous du contenu gratuit associé à ce cours ?
Oui ! Ça fait longtemps qu’on parle de tout ça en ligne, aussi vous pouvez déjà trouver nos articles, présentations et vidéos sur ce sujet :
- Deep-dive dans async/await (mai 2017 à Node.js Paris) : slides et vidéo.
- Asynchrone moderne en JS (octobre 2016 à Paris-Web)
- Modern Asynchronous JS (décembre 2015 à dotJS) : slides et vidéo
Remarquez que certains datent un peu et leurs explications seront parfois moins affinées / complètes que dans ce cours vidéo, mais ça reste pas mal !
🔬 Et les observables / RxJS alors ?
C’est un vrai sujet autour de l’asynchrone… Les observables sont dans la case « asynchrone pluriel » des primitives de gestion, où ils fonctionnent en mode “push”, là où les itérateurs asynchrones (que nous voyons dans le cours) sont en mode “pull”.
On ne les a pas mis ici car, primo, ils sont moins universellement utiles que le reste du cours, secundo, ils ne sont pas (encore) natifs au langage, et tertio, ils constituent un champ si large qu’ils méritent largement leur propre cours. En ne leur consacrant qu’une heure environ, on aurait à peine gratté la surface et on aurait déçu les fans. Peut-être un jour !
On ne les a pas mis ici car, primo, ils sont moins universellement utiles que le reste du cours, secundo, ils ne sont pas (encore) natifs au langage, et tertio, ils constituent un champ si large qu’ils méritent largement leur propre cours. En ne leur consacrant qu’une heure environ, on aurait à peine gratté la surface et on aurait déçu les fans. Peut-être un jour !
⏲️ Parlez-vous des primitives asynchrones des plates-formes ?
Certains slides et exemples évoquent process.nextTick, setTimeout ou requestAnimationFrame, pour en citer quelques-uns, mais ce sont là des Web APIs ou des API noyau de Node.js, qui sortent du champ spécifique du cours, au même titre par exemple qu’une description détaillée de la boucle d’événements de Node.js ou des tâches et micro-tâches des navigateurs. Nous ne les couvrons donc pas en détail.
Mais si ça vous intéresse…
Mais si ça vous intéresse…
- Bert Belder, l’implémenteur de la boucle d’événements de Node, a décrit en détail et surtout de façon exacte son fonctionnement dans cette présentation à Node.js Interactive Amsterdam.
- Jake Archibald a une présentation sublime pour la partie navigateurs, faite à JSConf.Asia.
🙃 En fait on serait plus tranquilles à ne faire que du synchrone, non ?
Si on aime geler tout le moteur et gaspiller le processeur pendant 99% du temps, c’est en effet l’option la plus simple. Espèce de troll, va. 😉
Un cours de Christophe
Christophe Porteneuve fait du JavaScript depuis… JavaScript. Et à titre pro depuis 1996. Ancien contributeur noyau à Prototype.js, co-auteur de spec au TC39 et expert JS de renommée internationale, fort de plus de 15 000 heures en tant que formateur et de dizaines de présentations en conférences, il transmet ici avec humour et clarté toute son expertise technique.