Comprendre JavaScript

Il n'est pas facile de se retrouver dans l'écosystème du développement front.

Voici un schéma résumant la situation tiré de medium.

Développement front

Comment comprendre les différentes versions de JavaScript ?

Il faut tout d’abord spécifier que la norme qui définit le langage se nomme EcmaScript. JavaScript n’est qu’une implémentation de la norme EcmaScript. Les versions de JavaScript sont donc définies à partir de la version EcmaScript.

La version la plus utilisée de nos jours pour JavaScript est basée sur la norme ECMAScript 5. C’est le JavaScript le plus utilisé de nos jours avec la programmation par prototype. La principale évolution est intervenue avec la version ECMAScript 6 aussi appelée ECMAScript 2015. Cette nouvelle version modifie considérablement le langage, Avec cette version JavaScript se rapproche des autres langages objets, il est désormais possible de construire des classes avec class et de faire facilement de l’héritage.

Peut-on utiliser ECMAScript 6 en production ?

La majorité des navigateurs récents supporte assez bien les dernières versions. Voir tableau. Par contre les anciens navigateurs ne supportent pas les nouvelles versions.

Il existe néanmoins des transpilers, un transpiler pour JavaScript est un programme qui va transformer le code ES6 en code ES5 automatiquement. Babel est le transpiler le plus connu. La majorité des entreprises utilisent ces outils pour commencer à utiliser ES6.

Doit-on utiliser JavaScript ou TypeScript ?

TypeScript est une surcouche à JavaScript développée par Microsoft en open-source. Le principal intérêt de TypeScript est comme son nom l’indique l’utilisation de variables typées qui peuvent apporter un plus grand confort pour le programmeur. TypeScript est ensuite retranscrit en code ES5 ou ES6. TypeScript est en avance par rapport à la prochaine version de JavaScript, par exemple la notion de décorateurs doit apparaître dans la prochaine version de JavaScript mais elle est déjà présente avec TypeScript même chose pour async/await.

Angular est écrit en TypeScript et la majorité des exemples sont écrits dans ce langage. Si vous utilisez Angular vous serez quasiment obligé d’utiliser TypeScript. On est de toute façon obligé d’utiliser des outils pour modifier le code JavaScript. Utiliser TypeScript ne fait que rajouter un outil de plus dans la chaîne de production.

Doit-on encore utiliser JQuery ?

JQuery est une surcouche à JavaScript, il y a plusieurs années manipuler en JavaScript natif les éléments d’une page HTML n’était pas aisé et JQuery était très utile. De nos jours JavaScript a évolué et JQuery devient moins indispensable.

Les plus : facilité d’utilisation, grande communauté, immense bibliothèque de composants (carrousels d’images, validation des formulaires…), pas besoin d’avoir un navigateur récent.

Les moins :il n’est plus à la mode…

Doit-on utiliser une librairie comme Angular/React/Vue ou rester avec Javascript et Jquery ?

Tout dépend de ce que vous voulez faire. Si vous désirez créer un site web classique avec peu de JavaScript (200-300 lignes) vous pouvez travailler avec JavaScript/JQuery et profiter de tous les composants JQuery déjà disponibles.

Les librairies Angular/React/Vue sont plutôt réservées à la création de Single Page Application où la majorité des traitements sont effectuées dans le navigateur du client. Le back-office ne servant qu’à sauvegarder ou lire les données en base de données. Ces librairies ne sont pas vraiment destinées à fonctionner sur les sites classiques où une nouvelle page est chargée à chaque clic sur un lien. Elles sont plutôt destinées à la création d’Intranet qui vont pouvoir remplacer les anciennes applications de bureau.

Les plus : Ces bibliothèques permettent de manipuler plus facilement et plus rapidement les éléments d’une page HTML, elles sont indispensables si vous désirez créer une application importante.

Les moins : La difficulté d’apprentissage et de mise en place des projets, ne plus pouvoir utiliser JQuery (on pourrait bien sûr mais les modifications de la page HTML devront plutôt se faire exclusivement par les bibliothèques), ne plus pouvoir utiliser Bootstrap qui est basé sur JQuery, ne plus pouvoir utiliser à leur pleine capacité les frameworks côté serveur, le contrôle de la vue dans le modèle MVC étant totalement assuré par Angular/React/Vue côté client, l’indexation des pages par Google peut aussi poser problème.

A noter que chaque librairie essaye de construire un bootstrap adapté à sa librairie. Exemple pour Angular

Comment choisir entre Angular/React/Vue ?

Question délicate qui dépend des opinions de chacun. Les trois bibliothèques sont surtout spécialisées dans le développement des interfaces graphiques. Le principe est de créer des composants qui vont constituer la page HTML, ce sont ces composants qui vont être mis à jour et pas la page complète Ce qu’il faut comprendre aussi c’est que ces 3 bibliothèques complexifient énormément le développement côté front. Le processus de développement devient très ardu il faut faire interagir plusieurs bibliothèques pour arriver à générer le fichier final. L’utilisation d’un bundler (webpack) et/ou de task-runner devient obligatoire.

Angular : il est à la mode chez les managers, crée par Google, il a l’ambition d’être un framework complet pour gérer le côté front. L’apprentissage est délicat, la mise en place et la programmation sont difficiles, les dépendances avec les autres librairies sont très nombreuses. Le tutorial de base contient 42 000 fichiers.

React : il commence à supplanter Angular, il est un peu plus simple car il se concentre surtout sur la partie Vue de la page. Avec React-native qui est une extension de React vous pouvez aussi développer des applications natives mobiles en JavaScript.

Vue : il a été créé par Evan You en 2014 et il est très populaire en Asie. C’est le petit dernier dont on parle le plus en ce moment, il se rapproche un peu de React. C’est clairement le plus simple à apprendre, il n’a pas pour l’instant autant d’extensions que les autres.

Il existe beaucoup d’autres bibliothèques pour créer des interfaces graphiques.

Qu’est-ce que Node.js ?

Normalement un programme JavaScript ne peut être exécuté que dans un navigateur Web. En utilisant Node.js vous pouvez faire tourner le programme n’importe où, plus besoin de navigateur car Node.Js contient le moteur JavaScript de Google (celui de Chrome). Il suffit donc d’intaller Node.js sur votre PC pour lancer des programmes JavaScript. Le concepteur de Node.js a aussi créé des bibliothèques supplémentaires pour gérer les entrées/sorties. Le principe de Node étant de ne pas bloquer le programme lors de sauvegarde sur le disque ou d’envoi de message sur le réseau ce qui rend les programmes Node.js plus rapide.

Les librairies contenues dans Node.js ne permettent pas de développer un site web facilement, Node.js ne contient que les commandes de base, si vous voulez utilisez JavaScript pour développer votre site web côté serveur il vous faudra ajouter un framework comme Express.

Le créateur a aussi ajouté un gestionnaire de package (NPM) qui permet facilement d’ajouter des librairies crées par la communauté et d’étendre les possibilités de Node.

Rédigé en octobre 2017, la programmation web apprend à être humble, la plupart de ce qui est écrit ici sera démodé dans un an.