23 juin 2018 · 8 min de lecture
Avec le JavaScript à papa dans les années 1990, on pouvait afficher des flocons de neige à noël sur sa page web. Aujourd’hui ce langage a considérablement évolué. Il est utilisé pour créer des applications smartphone, des applications de bureau, des serveurs web…
Mais si vous mettez un pied dans l’apprentissage du JavaScript vous allez vite avoir le tournis. Il existe une multitude de frameworks et d’outils. Voici un petit tour d’horizon par date de sortie. La liste n’est pas exhaustive.
Mis à jour le 12 novembre 2021.
Les navigateurs implémentaient leurs propres version de Javascript. Ceci était un vrai casse-tête pour les développeurs. jQuery est une surcouche gérant cette problématique. Vous codez la partie front-end (interface utilisateur) dans une seule syntaxe, et elle fonctionne sur tous les environnements. jQuery est la librairie la plus utilisée au monde mais en perte de vitesse face à React ou VueJS.
Créé par Google, ce framework permet de créer des applications sur une seule page web. Le but est d’alléger le travail de rendu effectué habituellement par le serveur. C’est le début des interfaces “data-driven”, où le contenu est modifié automatiquement selon les données à afficher.
Ce projet avait pour but d’exécuter du Javascript hors du navigateur. C’est NodeJS qui a gagné la course.
Node.js a été créé par Ryan Dahl et c’est une petite révolution. Basé sur le moteur V8 de Google, le Javascript s’exécute désormais sur un serveur. Il est auto-suffisant pour créer un serveur web et se passer de Apache ou Nginx. On peut aussi accéder au système de fichier, à la mémoire vive, bref, au système d’exploitation, ce qui n’est pas le cas des navigateurs web.
CoffeeScript est une surcouche au langage Javascript. C’est un langage de programmation, qui est “transpilé”, c’est à dire converti en Javascript. Son but est d’améliorer la syntaxe du Javascript. Il sera détrôné par TypeScript.
Coder c’est bien, tester c’est mieux. Est-ce que votre code est robuste ? Si vous modifiez une fonction, est-ce que vous ne détruisez pas la bonne exécution d’une autre portion de code ? Avec Jasmine vous pouvez écrire et automatiser toute une batterie de tests pour vérifier à tout moment le bon fonctionnement de votre application.
Ne réinventez pas la roue : du code a déjà été écrit pour tout et n’importe quoi. Les développeurs mettent à disposition leurs librairies dans des paquets. Le code est libre, éprouvé et maintenu. Il serait donc dommage de s’en passer. NPM (pour Node Package Manager) est un utilitaire qui gère l’installation et la mise à jour de ces modules dans votre projet. Ils sont inscrits dans un fichier nommé package.json.
Comme Angular, ce framework a pour but la création d’application mono-page avec un système de template et une gestion des évènements.
A cette époque avec Node et NPM on disposait de librairies pour écrire du code sur le serveur. Mais les navigateurs ne connaissent pas le fameux require pour les importer dans un projet “front-end”. C’est là qu’intervient Browserify qui va réencoder votre code pour le faire fonctionner dans le navigateur. Cela a permit l’utilisation de NPM également pour le “front-end”. Aujourd’hui Browserify est détrôné par Webpack.
Un autre framework pour tester votre application.
Lodash est un ensemble de fonctions et de méthodes très pratiques qui complètent celles natives de Javascript. Il aide à la manipulation de tableaux, objets, chaînes de caractères…
Diffusé après deux ans de développement interne chez Microsoft, TypeScript est un langage de programmation. C’est une surcouche au Javascript comblant ces lacunes de typage des variables (chaîne de texte, nombre…). Le code TypeScript est ensuite transcompilé en la version de Javascript de votre choix.
Un “linter” est une application capable d’analyser le code statique et de détecter les erreurs. Il est vraiment très utile que votre éditeur de code souligne une variable que vous avez déclaré et pas utilisé. Les erreurs de syntaxes sont détectées lorsque vous écrivez. Bref, c’est pratique et important.
Développé par Facebook, son but est de créer des applications web mono-page.
Babel est un compilateur, ou transpilateur de Javascript. Il modifie votre code source en d’autres versions de Javascript afin de l’utiliser dans les différents navigateurs du marché.
Créé par un ancien employé de Google, c’est le framework tendance qui dépasse React en 2018 en terme d’étoiles sur Github. Il permet de créer des applications web mono-page.
Webpack est un “module bundler”. Comprenez un assembleur de dépendances, ou empaqueteur. Son but est d’assembler toutes vos dépendances Javascript en un seul fichier réduit et compacté. Ainsi au lieu d’indiquer 36 librairies dans votre page web, vous importez un seul fichier bundle.js. Le code inutile est supprimé. Il est dans sa catégorie le plus populaire et le plus utilisé. Mais aussi le complexe.
Concurrent direct de Webpack, mais avec une approche différente. Le fichier de sortie est plus épuré. Il retire le code inutile et les variables non utilisées. Il remplit parfaitement son rôle pour l’empaquetage d’une librairie car il injecte moins de code que Webpack dans le fichier final. Il est utilisé pour construire React.
Initié par Github, ce framework permet de développer des applications desktop multi-plateformes avec JavaScript, HTML et CSS. Il inclut Node.js permettant ainsi l’accès au système hôte. Le développeur est libre d’utiliser jQuery, React, VueJS ou tout autre framework Javascript front-end pour construire l’interface utilisateur.
Jeune concurrent de NPM, il gère les dépendances de votre projet. Il est le fruit du travail de Facebook et Google pour combler les lacunes de NPM, notamment la rapidité. Le fonctionnement est très proche de NPM. Les dépôts des librairies sont les même.
Parcel est un empaqueteur, concurrent de Webpack. Il est le plus simple de sa catégorie. Ses atouts étant la rapidité et la simplicité. Il est donc parfaitement adapté pour des petits projets, mais passez votre chemin si vous souhaitez personnaliser la construction de votre bundle.js.
Svelte est similaire à Vue et React. Il permet de créer des applications web mono-page. A la différence que ce framework n’est pas embarqué dans l’application. Il compile en Javascript et n’utilise pas le DOM virtuel. Il est donc plus léger et plus rapide.
SWC peut être utilisé à la fois pour la compilation et l’empaquetage. Il est 70x plus rapide que ces homologues car écrit en Rust. Utilisé par de grandes marques.
Ryan Dahl, le retour ! Pour combler les lacunes de Node.js son créateur repart de zéro avec Deno. L’un des points négatifs de Node étant la taille incommensurable que prennent les dépendances. Il est écrit en TypeScript et toujours basé sur V8.
Prettier est un formateur de code. Il ré-écrit votre code et en tenant compte des régles de formatage que vous pouvez définir : 2 espaces en guise de tabulation, longueur de ligne de 100 caractères… Pour une meilleur lisibilité.
Outil de compression et de transpilation de JavaScript. Il permet de réduire la taille de votre script en supprimant les espaces, raccourcissant les noms de variables… Il est également capable de retranscrire votre code ES6 en ES5 et autres versions.
Esbuild est un “module bundler”, comme Webpack, Rollup ou Parcel. Mais il est écrit en Go et donc entre 75x à 350x plus rapide que ses concurrents.
Je n’ai pas cité Grunt ni Gulp (2013) qui sont des exécuteurs de tâches, remplacés aujourd’hui par les scripts de NPM ou Yarn.
Je n’ai pas parlé non plus de Bower qui avait pour objectif de gérer les dépendances coté client (NPM et Yarn s’en chargent désormais).
Vous souhaitez toujours apprendre le Javascript ? Vous voulez écrire de belles applications “mono-page” et éventuellement les embarquer dans un exécutable ? Je conseillerais tout d’abord de vous documenter sur le Javascript pur, et apprenez à utiliser des dépendances avec Yarn. Ensuite, renseignez-vous sur VueJS (ou React). Pour créer des applications natives Windows, Mac et Linux, utilisez Electron.
Comme environnement de développement, mon coup de coeur va à Visual Studio Code, un éditeur libre et gratuit, créé par Microsoft avec Electron.
Au fait, savez-vous que le vrai nom de Javascript est ECMAScript ?