Créé en 1995 par Brendan Eich, Javascript est depuis devenu un langage incontournable sur le web. Nous allons vous présenter ici ses principales propriétés, les notions importantes, puis ses différents frameworks et
Les propriétés de Javascript
Un langage côté client et serveur
Pendant longtemps, Javascript était un langage de « front-end », c’est-à-dire qu’il s’exécutait dans le navigateur de l’utilisateur, côté « client » et non côté serveur. Néanmoins, grâce à NodeJS, il peut maintenant tout faire. On a même vu apparaître des frameworks permettant de tout développer, le front et le back end, en javascript, comme NextJS et NuxtJS.
Les capacités
JavaScript permet de gérer les événements du navigateur, tels que les clics de souris, les entrées de clavier et les interactions tactiles, pour créer des expériences utilisateur interactives et réactives.
JavaScript permet de manipuler le Document Object Model (DOM) des pages web pour modifier dynamiquement le contenu, la structure et la présentation des éléments HTML.
JavaScript prend en charge la programmation asynchrone, ce qui permet d’exécuter des opérations en arrière-plan sans bloquer l’exécution du reste du code.
Notions importantes pour coder en javascript
Nous allons vous présenter plusieurs notions importantes en javascript:
- Classes et prototypes
- Des méthodes et objets natifs
- L’ordre d’exécution des fonctions et ses problématiques
- Les cycles de vie
- Les callbacks
Classes et prototypes
Lorsque vous faites « console.log » sur un objet, vous pourrez observer des résultats comme ci-contre. C’est qu’en fait il y a de nombreuses propriétés ou méthodes rattachées aux éléments que vous utilisez: ce sont des prototypes. Il y en a pour les objets (Objects), pour les tableaux (Array) et même pour les chaines de caractères (Strings) et les nombres (Number »).
Vous en avez d’ailleurs probablement déjà rencontrées: « toUpperCase() » est une méthode attachée aux Strings permettant de mettre en majuscule des caractères ; map() est une méthode attachée aux Array permettant d’itérer parmi les éléments.
Vous pouvez aussi en concevoir de nouveaux, par exemple si vous avez envie de créer un jeu avec un prototype « animal » et un prototype enfant « chien ».
Néanmoins, la syntaxe étant un peu lourde et pour se rapprocher des langages de Programmation Orientée Objets (POO), l’ES6 a créé les « classes ». Elles font ce que font les prototypes, mais sont plus faciles à écrire. On parle de « sucre syntaxique ».
Les méthodes et objets natifs
Comme nous venons de le voir, il y a des méthodes et objets que vous pourrez utiliser nativement dans javascript. En voici quelques-uns et leurs finesses.
map(), reduce() et filter()
map, reduce et filter sont des méthodes des Array souvent utilisées:
- map permet d’exécuter une action sur chaque élément d’un tableau.
- Reduce permet de rassembler tous les éléments du tableau en un seul, par exemple en faisant la somme d’un tableau de chiffres.
- Filter permet de créer un tableau ne contenant que les valeurs répondant à une condition.
Je les ai beaucoup utilisées dans mon logiciel de visualisation de données, que je présenterai en détails.
L’ordre d’exécution des fonctions et ses problématiques
JavaScript est mono-threadé, ce qui signifie qu’il peut exécuter une seule tâche à la fois. Les fonctions sont ajoutées à une pile d’exécution et sont exécutées les unes après les autres.
Toutefois il y a plusieurs complexité, notamment dans le cas de fonctions asynchrones ou de promesses. Il y a en fait 4 éléments importants:
- La « call stack », où vont les ordres prêts à être exécutés.
- La « Web API »: les fonctionnalités offertes par le navigateur, comme fetch ou le timer.
- La micro task queue, où vont attendre les ordres prioritaires
- La (macro) task queue, où vont attendre les programmes non prioritaires
On peut également mentionner l’event Loop, qui va dépiler les deux task queue lorsque la call stack est vide.
Fonctions asynchrones et promesses
Si une fonction prend beaucoup de temps à s’exécuter, elle peut « bloquer » la pile, rendant l’interface utilisateur non réactive.
Pour résoudre ce problème, JavaScript utilise des fonctions asynchrones. Une fonction asynchrone est une fonction qui opère de manière asynchrone via l’ « event loop ».
Les promesses quant à elles sont des objets qui représentent l’achèvement ou l’échec d’une opération asynchrone. Elle peut être dans l’un des trois états : en attente (pending), résolue (fulfilled), ou rejetée (rejected). On les utilise notamment pour enchaîner les fonctions devant se succéder, parce que leur notation est particulièrement claire (sinon on risque le « callback hell » et la « pyramid of doom »: des fonctions qui s’encastrent les unes dans les autres et deviennent illisibles) et facilite la gestion des erreurs.
Requêtes AJAX et fetch
Le cycle de vie en Javascript
Le cycle de vie en javascript décrit les différentes étapes dans l’existence d’un élément du code. Il peut s’agir des variables, d’un objet, du DOM ou encore des promesses.
L’importance va varier selon l’élément. Par exemple, comprendre le cycle de vie des variables et des objets est crucial pour écrire son code « dans l’ordre »: si vous utilisez un objet avant de l’avoir défini, votre code pourra se comporter de manière inattendue.
Pour le DOM, cela va être important pour cibler différents moments vécus par l’utilisateur: quand la page a fini de se charger, quand l’utilisateur s’apprête à la fermer, etc.
Autres
- La destructuration est une méthode compacte pour cibler les différentes propriétés d’un objet.
- Les « callbacks » sont des fonctions passées en argument à une autre fonction. Elles sont souvent utilisées avec les fonctions asynchrones, comme setTimeout; pour gérer les événements DOM et pour les itérations avec array.map(fonction).
L’écosystème Javascript (frameworks, librairie, environnement)
L’environnement NodeJS et Express
NodeJS est un environnement d’exécution permettant d’exécuter Javascript côté serveur. Il permet nativement de créer un serveur. Néanmoins, on utilise souvent pour cela un framework back-end: Express.
Les framework et librairies front-end
Les frameworks front-end sont conçus pour faciliter le développement d’interfaces utilisateur et la gestion des interactions côté client. Voici quelques-uns des principaux frameworks front-end :
- Angular : Un framework open-source développé par Google, Angular permet de créer des applications web dynamiques en utilisant le modèle de conception MVC (Modèle-Vue-Contrôleur).
- React : Créé par Facebook, React est une bibliothèque pour construire des interfaces utilisateur en utilisant des composants réutilisables et maintenables.
- Vue.js : Vue.js est un framework progressif et léger pour créer des interfaces utilisateur réactives et modulaires.
- Svelte : Svelte est un framework innovant qui compile les composants en code JavaScript optimisé au moment de la construction.
Les framework full-stack
Les frameworks full-stack permettent aux développeurs de créer des applications web complètes en utilisant un seul langage de programmation pour le côté client et le côté serveur. Voici quelques-uns des principaux frameworks full-stack JavaScript :
- Next.js et Nuxt.js sont des framework pour créer des applications (respectivement React et Vue) avec rendu côté serveur ou statique, améliorant les performances de rendu et le référencement.
- Gatsby est un générateur de sites statiques basé sur React.