Nous voilà en 2019 et il est plus que jamais temps de se mettre au Javascript, vous entendez surement ce mot un peu partout, on sent la hype mais on ne sait pas forcément ce que c'est exactement ! Mais qu'est-ce dont avant tout et pourquoi faire du Javascript en 2019 ?

Qu'est-ce que le Javascript et pourquoi choisir ce langage en 2019 ?

C'est un langage de scripting[^1] très abordable et pratique de par son écosystème très riche. Il s'utilise côté serveur (via nodeJS) et côté client dans le navigateur web, une application mobile par le biais de diverses librairies de code telle que react-native ou encore cordova un outil développé par la fondation Apache.

Une des forces de Javascript étant son écosystème, c'est également l'une de ses faiblesses. On y trouve de tout et n'importe quoi, des librairies de code qui ne sont que des vestiges du passé, des librairies prototypes en voie de devenir des standards, bref c'est une vraie jungle !

Dans cet article je vais essayer de vous guider ou du moins de vous donner des pistes pour vous orienter sur vos choix d'apprentissages. Il est vrai que lorsqu'on arrive là-dedans cela peut faire peur, on se sent perdu, ne sachant où donner de la tête… Cependant vous le verrez très vite : si l'on débroussaille un peu en amont et que l'on optimise son temps en consolidant les fondamentaux on peut progresser très vite.

Quand on est perdu, il faut revenir aux fondamentaux. — Gilles Lartigot

Quels sont les fondamentaux de la programmation JS ?

Cet article suppose que vous possédez déjà les bases de la programmation, à savoir la déclaration de variables et les structures conditionnelles, bref les bases. Si ce n'est pas le cas jetez un oeil par ici : Les bases du JS

L'écriture de code Js est régie par différents standards. Le plus connu se nomme EcmaScript (Vous remarquerez leur site un peu vintage pour des régisseurs de standard sur JS…). Un standard de programmation apporte un certain nombre des règles notamment au niveau de la syntaxe du code et parfois de nouveaux mots-clés qui permettent de se simplifier la vie ou de répondre à de nouveaux besoins. En gros, sans standards personne ne pourrait développer d'outil interpretant le code écrit, cela serait l'anarchie. Le standard Ecmascript est souvent abbrégé ES et suivi de sa version, par exemple ES6 représente la version 6.

Le standard EcmaScript

Ce standard est versionné, de manière régulière des mises à jour y sont apportées permettant de l'améliorer.

Vous trouverez de tout à ce sujet et cela pourrait faire l'objet d'un article entier mais brièvement pour vulgariser retenez les choses suivantes :

  1. De nouvelles version du standard sortent régulièrement, apportant un nouveau lot de fonctionnalités et parfois en indiquant certaines comme dépréciées[^2].
  2. Les standards depuis la version 6 portent un nom qui est un alias, on parlera souvent avec deux mots de la même chose. Par exemple ES5, le standard le plus répandu en 2017/ 2018 sur le web n'en possède pas par contre ES6 peut également être dénommé ES2015 (l'année de sa proposition). De la même manière ES7 peut être appelé ES2016. La tendance d'aujourd'hui semble vouloir que nous ayons une révision par année… À voir si cela perdure dans le temps.
  3. Comme pour beaucoup de choses dans la vie, partez du principe que l'inertie d'adoption d'une innovation (et donc d'une nouvelle version d'un standard) est lente, ce qui veut dire que vous devrez utiliser des transpileurs[^3] lorsque c'est possible pour pouvoir utiliser des versions récentes de cette spécification partout, nous y reviendrons plus tard.
La courbe de roger, représentant l'inertie d'adoption
  1. La tendance actuelle fait que les nouveaux standards ne sont que du sucre syntaxique, c'est-à-dire qu'il n'apporte pas de nouvelle fonctionnalités à proprement parler mais des façons plus simple de les écrire.
  2. Si vous voyez une instruction avec une syntaxe inconnue, référez-vous au site suivant et utilisez la recherche, tout y est assez bien détaillé et c'est également possible de consulter en français la documentation même si je vous recommande l'anglais :

https://developer.mozilla.org/fr/docs/Web/JavaScript

La gestion des dépendances

Un gestionnaire de dépendances est un outil permettant d'installer des librairies de code additionnelles disponibles sur un dépot. Cela à pour but de réduire la redondance du code et favorisant la ré-utilisation de code.

Là aussi plusieurs vestiges du passé demeurent avec des librairies comme bower.

Aujourd'hui je vous recommande de n'utiliser que NPM, disponible de base quand on télécharge NodeJS ou Yarn.

Le système de boucle d'évènements « Event Loop »

La boucle évènementielle en JS est ce qui permet de gérer l'asynchronicité en Javascript. Certains langages tels que Java utilisent eux des Threads afin de paralléliser des tâches. En Javascript on part du principe qu'il n'y a qu'un seul processus (thread) qui éxecute tout, mais ce dernier n'est pas bloquant, ce qui signifie que certaines instructions ne vont pas forcément s'exécuter dans l'ordre où elles sont écrites.f

Bref exemple

console.log('Première instruction');
setTimeout(function() {
  console.log('Seconde instruction (qui en fait sera troisième)');
}, 1000);
console.log('Troisième instruction (qui en fait sera la seconde');

Le code suivant produit le résultat :

Première instruction
Troisième instruction (qui en fait sera la seconde)
Seconde instruction (qui en fait sera troisième)

Étrange n'est-ce pas ? Et si vous débarquez dans le Javascript vous n'avez problablement pas compris, ce n'est pas grave. La spec' définie l'idée générale cependant chaque « event loop » est sujette à son implémentation dans chaque programme d'interpretation de code (NodeJS avec V8 a la sienne, le navigateur Firefox à la sienne et react-native par exemple en a une en fonction de l'OS du téléphone…) je vous invite à consulter quelques articles en lien ci-dessous et vidéos bien rédigés sur le sujet pour comprendre en comprends le fonctionnement et bien l'assimiler :

Maintenant que faire ?

Développez plusieurs qualités :

  • Soyez curieux. Allez vous promener sur Github, lisez des articles sur ce blog, mais également sur d'autres. Le contenu anglais est très riche en informations, n'hésitez pas.
  • Expérimentez. Prototypez les outils que vous découvrez, selon le cône de l'apprentissage de Dale après deux semaines nous avons tendance à nous rappeller de 10 % de ce que nous lisons, 30 % de ce que nous voyons et 90 % de ce que nous disons et faisons. Il y a donc une forte corrélation entre ceux qui réussissent et progressent et ceux qui mettent en pratique. Faites-en parti !
  • Ne réinventez pas la roue. De nombreux cas d'usages et outils existent déjà, n'oubliez pas que le moins de code vous écrivez, le moins vous en aurait à maintenir et le moins vous aurez d'erreurs. Utiliser des libraries éprouvées par la communauté et open-source permet de construire des fondations solides pour vos programmes.

En guise de roadmap je vous redirige à ce superbe article, toujours valable en 2019, de nombreux outils disponibles dans ce graphe seront développés sur ce blog.

https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02

Graphique JS roadmap par adam golab

Le Javascript peut se trouver à deux endroits :

  • Le code côté client
  • Le code côté serveur

Un article traitera en détail des architectures clients / serveurs, cela sera d'ailleurs le prochain article. Bien que vous puissiez utiliser la plupart des concepts peu importe l'endroit il y a parfois certaines spécifités, mais nous n'en sommes pas là.

En attendant formez-vous aux fondamentaux, puis poursuivez en apprenant ES2015 :

Voilà de quoi démarrer et à bientôt pour d'autres thématiques :)