Frameworks Javascript : Par où commencer ?

23 juin 2018 · 7 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.

2006

jQuery

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.
Utilisation : Front-end
Voir aussi : Ember, Angular, React, VueJS
Site officiel : https://jquery.com/

2009

Angular

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.
Utilisation : Front-end
Voir aussi : Ember, jQuery, React, VueJS
Site officiel : https://angularjs.org/

CommonJS

Ce projet avait pour but d’exécuter du Javascript hors du navigateur. C’est NodeJS qui a gagné la course.
Utilisation : Back-end
Voir aussi : Deno , Node,
Site officiel : http://www.commonjs.org/

Node

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.
Utilisation : Back-end
Voir aussi : CommonJS, Deno
Site officiel : https://nodejs.org/

2010

CoffeeScript

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.
Utilisation : Front-back-end
Voir aussi : TypeScript
Site officiel : https://coffeescript.org/

Jasmine

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.
Utilisation : Tests unitaires
Voir aussi : Mocha
Site officiel : https://jasmine.github.io/

NPM

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.
Utilisation : Gestionnaire de dépendances
Voir aussi : Yarn
Site officiel : https://www.npmjs.com/

2011

Ember

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.
Utilisation : Front-end
Voir aussi : Angular, jQuery, React, VueJS.
Site officiel : https://www.emberjs.com/

Browserify

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.
Utilisation : Module bundler
Voir aussi : Parcel, Rollup, Webpack
Site officiel : http://browserify.org/

Mocha

Un autre framework pour tester votre application.
Utilisation : Tests unitaires
Voir aussi : Jasmine
Site officiel : https://mochajs.org/

2012

Lodash

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…
Utilisation : Front-end
Site officiel : https://lodash.com/

TypeScript

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.
Utilisation : Front-back-end
Voir aussi : CoffeeScript
Site officiel : https://www.typescriptlang.org/

2013

ESLint

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.
Utilisation : Linter
Site officiel : https://eslint.org/

React

Développé par Facebook, son but est de créer des applications web mono-page.
Utilisation : Front-end
Voir aussi : Angular, Ember, jQuery, VueJS
Site officiel : https://reactjs.org/

2014

Babel

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é.
Utilisation : Compilateur
Site officiel : https://babeljs.io/

Vue

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.
Utilisation : Front-end
Voir aussi : Angular, Ember, jQuery, React
Site officiel : https://vuejs.org/

Webpack

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. Son challenger est FuseBox , basé sur TypeScript.
Utilisation : Module bundler
Voir aussi : Browserify, Parcel, Rollup
Site officiel : https://webpack.js.org/

2015

Rollup.js

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.
Utilisation : Module bundler
Voir aussi : Browserify, Parcel, Webpack
Site officiel : https://rollupjs.org

2016

Electron

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.
Utilisation : Création d’applications Windows, Mac, Linux
Site officiel : https://electronjs.org

Yarn

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.
Utilisation : Gestionnaire de dépendances
Voir aussi : NPM
Site officiel : https://yarnpkg.com

2017

Parcel

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.
Utilisation : Module bundler
Voir aussi : Browserify, Rollup, Webpack
Site officiel : https://parceljs.org/

2018

Deno

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. Ce projet vient de naître, il est encore au stade de développement. Il est écrit en TypeScript et toujours basé sur V8.
Utilisation : Back-end
Voir aussi : CommonJS, Node
Site officiel : https://github.com/ry/deno

Conclusion

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 ?


#angular   #typescript   #jquery   #vuejs   #parcel   #webpack   #npm   #yarn   #mocha   #eslint   #react   #javascript   #electron   #nodejs  

PARTAGER VIA

 Twitter    Facebook    LinkedIn    Reddit    Email

A LIRE EGALEMENT


comments powered by Disqus