Les 4 Concepts JavaScript urgents que tout Développeur doit maîtriser

le logiciel dévore le monde le web dévore le logiciel et JavaScript dévore le web cette citation vient d'un des Titans de la Silicon Valley qui s'appelle Mark Andron et qui est notamment connu pour investir dans des petites entreprises comme Facebook ou encore Twitter mais il est également cofondateur d'une entreprise qui a tout simplement créé un des premiers navigateurs au monde qui s'appelait Netscape Navigator dont on retrouve aujourd'hui une partie de la code base dans Mozilla Firefox ce que j'aime beaucoup avec cette citation c'est que ça met en avant JavaScript comme étant un langage de premier plan pour développer aujourd'hui même si JavaScript a cette image de vilain petit canard par rapport à de vrais langages comme C++ qui serait plus performant ou alors Java qui serait mieux typé sur le fond on est 100 % d'accord le problème c'est que ce que j'ai remarqué ces dernières années c'est que c'est pas la technologie en soi ou les outils que vous utilisez qui vont vous sauver mais ce sont plutôt les compétences des gens et dites-vous bien que si les 10 meilleurs ingénieurs de Google qui développent en Javascript Inter sur votre projet et bien il s'en sortirait probablement mieux que quelqu'un qui utiliserait le C++ qui serait une meilleure technologie en soi et donc ces dernières années j'ai passé beaucoup de temps à apprendre JavaScript et je me suis synthétisé tout ce que j'ai appris dans la matrice que vous voyez à l'écran et l'objectif et bien c'est de développer des compétences solides sur JavaScript qui feront de vous un bon développeur même si le langage est réputé mauvais et le schéma que vous voyez à l'écran j'ai appelé ça la matrice de JavaScript que je pourrais d'ailleurs appeler le cadrant de Javascript pour un petit peu avoir une roadmap une boussole pour apprendre ce langage qui est très populaire mais qui est un peu dur à apprivoiser sur ce schéma on remarque qu'il n'y a que quatre choses qui sont réellement importante à apprendre sur JavaScript et qui m'ont servi ces dernières années premièrement c'est comprendre les valeurs c'est-à-dire vous manipulez une donnée en synchrone vous devez également être capable d'être très à l'aise et efficace avec des collections de données synchrones qu'on appelle modestement des tableaux ensuite vous devez être capable de traiter également et bien le temps ces fameux traitements asynchrones qui sont si durs à modéliser dans du code mais qui peuvent être fait relativement facilement avec la promesse qui permet de gérer une donnée qui va arriver ou non dans le temps et ensuite on a un dernier objet qui permet de modéliser plusieurs données dans le temps ce qui nous donne une souplesse incroyable mais qui demande de raisonner à un niveau d'abstraction un peu au-dessus et donc il y a une montée en compétence c'est les observable donc je vous propose de voir rapidement chacun de ces blocs pour monter en compétence sur javascript très rapidement premier cadrant et bien les valeurs en Javascript vous entendrez souvent que Javascript est un langage pourri puisque il n'y a pas de typage fort et il est plus ou moins possible d'écrire n'importe quoi et tant que j'ai eu cette croyance je n'ai jamais réussi à faire grand-chose avec mon code javascript je me sentais pas autonome sur ce langage et je n'arrivais pas vraiment à avoir confiance dans les programmes que j'écrivais en Javascript mais la question que je vous recommande de vous poser c'est est-ce que c'est vrai est-ce que les Typs ne sont pas importants en Javascript et personnellement ce qui m'a beaucoup beaucoup aidé à progresser en Javascript et bien c'est de comprendre que la réalité est exactement l'inverse les types sont important en Javascript puisqu'ils vont ni plus ni moins que déterminer le rôle des opérateurs que vous utilisez qu'est-ce que ça veut dire prenez le code suivant vous faites une addition entre 1 et 1 vous obtenez 2 jusque-l tout va bien ensuite vous prenez un nombre 1 et vous l'additionnez et cette fois-ci vous utilisez l'opérateur plus mais sur une chaîne de caractère qui vaut 1 et bizarrement vous obtenez 11 ce que vous devez comprendre ici c'est que l'opérateur plus va se comporter différemment en fonction du type des opérandes sur laquelle il opère donc quand on a dit iitionne 1 et 1 avec des valeurs qui sont des nombres et bien l'opérateur plus se comporte comme une addition par contre si vous utilisez ce même opérateur sur des opérandes qui sont respectivement un nombre et une chaîne de caractère et bien vous allez obtenir un autre type d'opération qui va être une concaténation ici le rôle de l'opérateur c'est-à-dire le traitement que vous êtes en train d'effectuer va dépendre du type des opérandes que vous utilisez puisque l'opérateur en lui-même plus est identique dans les deux cas donc tant que vous ne vous souciez pas du type des opérandes que vous utilisez et bien vous ne savez pas comment se comportent les opérateurs que vous utilisez et donc vous ne savez pas réellement ce que fait votre programme donc ce que je vous recommande pour progresser en Javascript et bien c'est de développer les bonnes intuitions sur les types des opérandes et les opérateurs que vous utilisez et pour ça et bien il faut repartir des bases et essayer de développer des intuitions là-dessus et ce que je vous recommande c'est de bombarder le type off et le console log pour essayer de comprendre comment JavaScript détermine tous les traitements qu'il doit effectuer donc dans le code que vous voyez à l'écran je vous ai mis tous les types typ de base on voit qu'il n'y en a pas tant que ça qui sont intéressants le type symbole et Big int je les ai barré puisque vous en avez pas réellement besoin quand vous démarrer de zéro sur JavaScript les cinq types que vous allez utiliser le plus souvent sont string number Boulen undefined et object il existe aussi le type fonction mais c'est rarement une valeur qu'on va manipuler avec un plus ou un moins ça donne des choses très étranges une fois que vous avez compris le type des valeurs que vous manipulez et bien vous allez pouvoir vous exercer appliquer des opérateurs dessus et voir que en fonction du type de toutes les opérandes que vous manipulez et bien vous allez avoir tel ou tel traitement qui est effectué par JavaScript donc là encore je vous ai mis une capture d'écran sur laquelle j'utilise l'opérateur plus une fois avec deux opérandes et une fois avec une seule opérande pour regarder un peu comment tout ça se comporte quand j'utilise le plus avec deux opérandes généralement j'ai soit une addition soit une concaténation et si j'utilise simplement l'opérateur plus devant une opérande donc c'est-à-dire que cette fois j'ai le même opérateur plus mais avec une seule opérande et bien j'obtiens un comp ortement différents qui correspond à un caste de valeur vers le type nombre donc par exemple je vois qu'ici une chaîne vide est évaluée à zéro qu'une chaîne de caractère qui vaut 2 est évalué au nombre 2 mais par exemple si je passe hello dans cette opérande j'obtiens le type not a number j'obtiens la valeur not à number qui est de type number et pareil si j'essaie de caster la valeur nan vers un nombre je retombe sur nan donc je vous encourage vraiment à essayer de jouer avec ça pour développer les bonnes intuitions sur les opérateurs les types et les opérandes ça m'a beaucoup aidé pour A appréhender des traitements basiques avec JavaScript et être capable de développer des programmes de meilleure qualité en comprenant réellement ce qui se passe dans l'arrière boutique deuxième cadrant les tableaux en Javascript alors les tableaux c'est quelque chose quand vous programmez puisque tout ce qui est une collection de données et bien vous allez être amené à manipuler ça pratiquement toute la journée et généralement quand on veut manipuler des tableaux et bien on passe par des boucles avec la fameuse boucle for regardez plutôt le code qui à l'écran est-ce que vous avez la moindre idée de ce que fait ce code pour ma part il faudrait que je me pose peut-être même avec un crayon que je relise chaque ligne de code pour comprendre ce que fait réellement ce code à moins que le nommage de la fonction en question vienent me sauver dans tous les cas si je dois être amené à modifier ce code et bien je vais devoir passer du temps à le relire et comprendre réellement comment ça tourne derrière ce que je vous propose c'est de réécrire ce code sans la boucle fort comme vous pouvez le voir à l'écran le code est beaucoup plus efficace que ce soit en terme de maintenabilité et d'intention que vous mettez dans le code c'est-à-dire qu'on va comprendre à la fois plus vite comment le code fonctionne et si on est amené à le bouger on va pouvoir effectuer plus vite cette modification et avec moins de risque de casser le code existant et pour faire ça tout ce que vous avez à faire c'est d'arrêter d'utiliser la boucle fort et d'utiliser à la place trois fonctions qui vous permettent de manipuler vos tableaux à l'infini la fonction map qui va vous permettre d'effectuer une transformation sur chacun des éléments de votre tableau la fonction filter qui va vous permettre d'appliquer un critère sur les éléments du tableau pour savoir si vouslez gardez ou non et la méthode reduce qui va vous permettre de parcourir tout vot votre tableau et d'en tirer une valeur par exemple quelle est la valeur maximum dans ce tableau ou est-ce que ce tableau contient un nombre impaire oui ou non en vous débarrassant de la boucle fort et en utilisant simplement ces trois méthodes vous allez être capable d'effectuer des opérations complexes avec une rapidité une facilité qui va rapidement vous faire oublier la boucle fort troisième cadrant de la matrice JavaScript et bien ça va être de manipuler une valeur en asynchrone maîtriser le temps maîtriser les traitements asynchrones et les accès concurrentiel à des ressources fait partie des tâches difficiles qu'un développeur doit savoir faire pourtant de mon expérience 80 % du temps on doit gérer des traitements asynchrones c'est des choses en réalité assez basiques et vous n'avez que deux traitements fondamentaux à connaître premièrement la notion de séquençage dans le temps c'est-à-dire je vais lancer un traitement asynchrone je sais pas exactement quand il est fini mais quand il sera fini je veux déclencher un deuxième traitement asynchrone donc si vous avez des traitements séquentiels comme ça avec les promesses c'est assez simple vous pouvez utiliser promise.zen et vous avez fait ce fameux traitement séquentiel deuxièmement il se peut que vous ayez des traitements qui doivent être fait en même temps dans ce cas c'est difficile parce que vous balancez deux requêtes mais vous avez besoin que les deux soient finis avant d'effectuer un autre traitement mais on peut pas savoir s'il y en a une qui va finir avant l'autre et cetera donc tout ce qu'on veut dire au programme c'est tiens-moi au courant quand ces deux traitements asynchrones sont terminés là aussi c'est pas très compliqué puisque la PII des promesses nous propose promise.hul qui règle ce problème pour nous donc je vous ai mis à l'écran deux exemples de code un pour utiliser des accès qui doivent être fait en même temps avec promise.all et maintenant vous voyez s'afficher à l'écran un deuxième exemple de code où ici on affiche des traitements en séquence avec promise.zen une fois que vous savez faire ça vous pourrez vous en sortir dans la plupart des cas que vous allez rencontrer en entreprise et ce qui est vraiment génial c'est que vous pouvez combiner ces deux motsclés donc vous pouvez dire que ce paquet de requête doit être terminé et qu'ensuite je vais faire un autre paquet de requête vous avez simplement à combiner promise.all avec des promise.zen et vous pouvez imbriquer et enchaîner ses traitements comme vous voulez pour résoudre des cas plus compliqués juste avant de passer au 4e élément du cadrant je me présente rapidement pour ceux qui sont nouveaux sur la chaîne je m'appelle Simon je suis développeur depuis plus de 7 ans et mon objectif à travers cette chaîne et bien c'est de faire connaître le code d'entreprise c'est-à-dire comment on résout des problématiques spécifiques pour un client qui sont généralement beaucoup plus complexes que ce qu'on peut voir dans des tutoriels si vous devez construire un site de réservation de billets d'avion en ligne généralement ce sera plus compliqué que ce que vous avez vu dans un tutoriel/viture/1/viture/2 vous allez pas forcément vous en sortir comme ça ce sera probablement beaucoup plus difficile de modéliser le problème de votre client donc si le sujet du code en entreprise vous intéresse et bien vous pouvez repasser sur la chaîne quand vous en avez besoin généralement je publie une vidéo par semaine sauf quand je travaille en parallèle sur une grosse formation ou dans ce cas je ralentis un petit peu les vidéos YouTube et on passe au 4e cadrant qui est de gérer plusieurs valeurs dans le temps avec les observable la première fois que j'ai lu la définition d'un observable et bien j'ai absolument rien compris je vous l'affiche à l'écran et vous me dites si vous comprenez quelque chose un observable est un objet qui permet de produire une série de valeurs asynchron au fil du temps ces valeurs peuvent être des données des erreurs ou des signaux indiquant la fin de la série de valeurs cette définition est tellement abstraite qu'il est très difficile de comprendre concrètement dans votre code qu'est-ce qui va se passer la bonne nouvelle c'est que vous n'avez probablement pas besoin de maîtriser les observable pour démarrer dans le code j'ai souvent rencontré des développeurs qui codaient depuis des années en Javascript même sur des fras mors comme react ou angular et qui n'était pas très à l'aise ou qui comprenaient pas réellement ce quiétait les observable donc si vous êtes à la recherche d'une première mission un premier poste pour démarrer dans le code honnêtement je pense que vous avez pas besoin d'en savoir énormément là-dessus je vous donne quand même le 2080 à savoir sur les observable si le sujet vous intéresse ce qu'il faut comprendre c'est qu'un observable doit vraiment être vu comme un producteur de données c'est-à-dire que l'analogie à comprendre c'est que Netflix par exemple serait un observable c'est quelque chose que vous pouvez observer et vous vous êtes l'observeur c'est-à-dire celui qui va venir consommer ses données à observer donc imaginez que vous êtes en train de regarder votre série préférée et bien Netflix va agir comme un observable où à chaque fois qu'un nouvel épisode est disponible il va le pousser dans l'observable et vous vous allez vous y abonner et en tant qu'observeur et bien chaque fois que vous allez recevoir un épisode vous allez pouvoir faire une action comme par exemple regarder ce nouvel épisode ce qui est génial avec les observable c'est qu'on peut pousser plus que des données on peut aussi émettre deux notifications qui sont très intéressantes la première c'est pousser une erreur qui va dire que le flux est terminé parce qu'il y a eu un problème dans ce cas Netflix pourrait pousser quelque chose en disant que suite à des coupures budgétaires par exemple et bien la série n'aura pas de suite dans ce cas vous en tant qu'observeur vous êtes informé et vous pouvez prendre une décision spécifique par rapport à cet événement qui est qu' a eu une erreur comme par exemple couper votre abonnement et enfin le dernier type de notification que peuvent émettre les observable en plus des données et des erreurs et bien c'est une notification de compléion pour dire que le flux n'émettra plus jamais de données donc dans ce cas si vous êtes sur le dernier épisode de la dernière saison de la série et bien Netflix a cas l'observable pourrait là aussi pousser une notification spéciale et vous en tant qu'observeur et bien vous pouvez prendre une troisième action ici comme par exemple aller sur Twitter pour dire à quel point vous êtes triste que cette série est terminée je vous ai mis un exemple de code à l'écran qui illustre un petit peu cette analogie mais grosso modo ce qu'il faut comprendre c'est l'observable va être un producteur de données on va venir s'y abonner prendre un abonnement et passer à cet abonnement un Observeur pour réagir soit à une nouvelle donnée une erreur qui est arrivée ou la fameuse notification de complessionion si vous voulez aller plus loin sur le sujet des observable et notamment de leur implémentation avec la librairie rxjs j'ai fait une autre vidéo dédiée sur des concepts plus avancés qui est le mapping asynchrone on va pouvoir gérer des flux de données asynchrone de manière très efficace et aller plus loin que ce qu'on peut faire avec les promesses point zen et point voilà en tout cas j'espère que cette matrice JavaScript va vous aider à prendre en main ce langage extrêmement populaire plus rapidement qu'avec les méthodes d' apprentissage que vous êtes en train d'utiliser actuellement et sachez que si vous voulez aller plus loin et vous former sur javascript pour être prêt pour votre premier jour en entreprise et bien je propose sur mon site angularenior.fr un workshop complètement gratuit qui dure entre 3 et 4 Hees dans lequel on creuse le code derrière ces quatre cadrants donc si le sujet vous intéresse ce workshop est encore disponible 48h vous pouvez vous y inscrire vous y aurez accès ensuite pendant autant de temps que vous voulez en tout cas tant que le site angulersenior.fr existe par contre dans 48 he je fermerai définitivement l'accès à ce workshop pour en ouvrir un nouveau je vous tiendrai au courant du nouveau workshop la semaine prochaine en tout cas merci d'avoir pris le temps de m'écouter ça fait plaisir de reprendre un peu les vidéos YouTube j'étais vraiment dans le dur pour préparer le prochain workshop depuis plusieurs semaines il y a quelque chose qui commence à sortir ça fait plaisir en tout cas je vous souhaite bon code senior d'ici là et je vous retrouve la semaine prochaine Ciao