Introduction à Javascript – Zoom sur les concepts de base

JavaScript est un sujet assez complexe à traiter dans le cadre d’un article de blog.

Nous avons malgré tout relevé le challenge, car c’est un langage fondamental pour la création de sites web (avec le HTML et le CSS). Apparu en 1995, le JavaScript est un langage de plus en plus utilisé :

Ce guide pratique a une ambition modeste mais on l’espère pédagogique (il faut bien commencer par les fondamentaux !) : vous présenter sous forme de glossaire les principaux concepts qui entourent ce langage de programmation.

Qu’est-ce que JavaScript ? [Définition]

En deux mots, JavaScript est un langage de programmation qui permet d’implémenter des features complexes sur un site web, essentiellement des « animations », des éléments dynamiques. Le Javascript est le langage qui permet de créer de l’interactivité sur un site, de lui donner plus de vie – par contraste avec les langages « statiques » mais ô combien fondamentaux que sont le HTML et le CSS.

Une page web est construite, structurée, grâce à du code HTML et à des propriétés CSS. C’est la base. HTML et CSS sont les fondations. Le JavaScript est un langage qui permet d’ajouter une nouvelle couche, d’animer, d’enrichir, de booster les codes HTML et CSS à l’aide de scripts. Un script est un ensemble d’instructions destinées à être interprétées par un programme, dans le cas de JavaScript : par le navigateur web utilisé par l’internaute ou directement par le serveur HTTP (nous y reviendrons). Tous les navigateurs web ont développé des « interprétateurs » pour lire et exécuter les scripts JavaScript. Avec plus ou moins de réussite…Certains navigateurs – et pas des moindres (Google…) – échouent toujours à exécuter certains scripts JavaScript, ceux écrits avec les standards d’écriture les plus récents (nous y reviendrons).

Pour résumer, le JavaScript est le deuxième étage de la fusée, le premier étant le code source construit en HTML/CSS. Quand on créé un site web, on utilise forcément le HMTL pour la structure et le CSS pour le style. Le JavaScript permet de faire un bond en avant, d’ajouter des features impossibles à implémenter avec les langages basiques (sans jugement de valeur) HTML et CSS. Aujourd’hui, tous les sites dignes de ce nom, modernes, utilisent du JavaScript.

Sans JavaScript, cette action est impossible :

Pour la petite histoire, le langage JavaScript a été créé en 1995. Il devait s’appeler au départ « LiveScript », mais, pour des raisons marketing, il a finalement été décidé de l’appeler « JavaScript ». Pourquoi ? Pour capitalise sur la notoriété du langage…Java. La technique a marché…mais du coup on continue encore aujourd’hui de confondre « Java » et « JavaScript » alors que ce sont deux langages différents, qui n’ont que peu de points de communs.

Découvrez comment créer les maquettes de son site web.

Document Object Model (DOM)

Le Document Object Model d’une page web est créé automatiquement par le navigateur au moment du chargement de la page. C’est un standard de programmation qui interprète tous les éléments HTML comme des objets, c’est-à-dire comme des éléments individuels ayant un ensemble de propriétés. Le DOM est constitué de nœuds et d’objets qui cartographient tous les éléments et attributs de la page. Il représente de manière structurée tous les éléments de la page, leurs liens, leurs rapports les uns avec les autres. Le DOM est une autre manière d’afficher et de comprendre une page web dans son contenu et dans sa structure.

Voici à quoi ressemble une page web en version DOM, schématisée :

Tous les objets HTML organisés sous forme d’arborescence dans le DOM peuvent être modifiés quant au style ou au contenu en utilisant le langage JavaScript. Le DOM joue le rôle d’interface de programmation dans la mesure où l’on ne peut ajouter des scripts JavaScript que sur une page web affichée en DOM. Le DOM donne prise au JavaScript.

Découvrez le Top 10 des meilleurs sites pour apprendre à coder.

ECMAScript

L’ECMAScript est un ensemble de normes définissant un standard pour l’utilisation du langage JavaScript. L’ECMAScript a été créé par l’organisation européenne Ecma international et normalise en réalité tous les langages de script : de JavaScript à C++ en passant par ActionScript.  Le première édition de l’ECMAScript date de 1997. Depuis, de nouvelles éditions de l’ECMAScript ont vu le jour afin d’intégrer les dernières mises à jour et évolutions de JavaScript. La cinquième édition (ES5) reste la plus suivie, mais la dernière édition, ES6, publiée en 2015, gagne du terrain. Bon à savoir : on utilise parfois le terme ES pour désigner le langage JavaScript.

Transpiling

Un « transpiler »est un outil qui permet de transformer un code source d’un langage à un autre. On peut faire une analogie : Google Translate est aux langues ce qu’un transpiler est aux langages de programmation. Avec un transpiler, il est possible, par exemple, de convertir un code JavaScript en C++ ou du Python en Ruby.

Dans le contexte de JavaScript, les transpilers sont surtout utilisés pour transformer du JavaScript ES6 en ES5. Pratique quand on sait que Google gère encore très mal l’ES6. Ce qui fait la transition avec le concept suivant :

Chrome 41

GoogleBot utilise toujours la version 41 de Google Chrome pour interpréter JavaScript et afficher la page à l’internaute via le moteur de rendu. Chrome 41 a été publié en 2015, ce qui commence à remonter et explique pourquoi Google Chrome gère encore assez mal le rendu d’ES6. Pour information, la dernière version de Chrome est Chrome 72. Qu’est-ce que fait Google ? On se le demande…

Single-page Application (SPA)

Une single-page application (en français : application web monopage) est, comme son nom l’indique, une application web ou un site web accessible via une page web unique. En clair, l’écriture et le rendu de la page évoluent au fur et à mesure des interactions de l’internaute dessus, sans chargement d’autres pages, sans nouvelles requêtes serveurs. Les frameworks JavaScript sont beaucoup utilisés pour gérer les éléments dynamiques des single-page applications. Les SPA permettent de fluidifier l’UX. La vidéo du formulaire de La Fabrique du Net que vous avez vue tout à l’heure est un exemple de single-page application.

Découvrez si oui ou non il faut apprendre à coder pour créer son site internet.

Angular, Polymer, React & Vue

Il s’agit de 4 frameworks JavaScript différents :

• Angular et Polymer ont été développés par Google.
• React a été développé par Facebook.
• Vue a été développé par un certain Evan You, qui travaillait avec l’équipe de Google qui gérait Angular.

Pour rappel, un framework est une bibliothèque de fonctions construites en JavaScript qui permet d’aller beaucoup plus vite dans la création d’applications en JavaScript. Chaque framework JavaScript a ses avantages et ses inconvénients, il faut choisir le framework qui convient le mieux au projet.

JavaScript Rendering

Le JavaScript Rendering décrit le process qui consiste à interpréter les scripts JavaScript (et les instructions qu’ils contiennent), à les interpréter puis à afficher le « rendu » visuel dans le navigateur. Il y a plusieurs méthodes possibles pour contrôler la manière dont le code JavaScript est rendu dans le navigateur.

Le rendu des codes JavaScript peut impacter négativement la vitesse de chargement du site web, mais aussi le crawling et l’indexation des pages par le Googlebot. En fonction de la méthode que vous utilisez, vous pouvez réduire le temps de chargement et améliorer le crawling et l’indexation des pages par les moteurs de recherche.

Le pre-rendering

Le pre-rendering consiste à afficher le rendu du contenu de la page avant qu’il ne soit requêté par l’utilisateur ou le moteur de recherche (dans le cas du crawling par un bot). Chaque page est générée de manière statique au moment de son chargement. Tout le contenu de la page s’affiche sans que l’utilisateur n’ait besoin de réaliser aucune action / interaction. Le pre-rendering est surtout utilisé pour améliorer le crawling et l’indexation mais il a un effet négatif : il appauvrit l’expérience utilisateur dans la mesure où cela empêche toute interactivité.

Le server-side rendering

Avec cette méthode, c’est le serveur HTTP qui fait le plus gros du travail et s’occupe du rendering du JavaScript. Les scripts sont déjà processés et le contenu est prêt à être remis au navigateur de l’utilisateur ou au crawler du moteur de recherche quand il en fait la requête. Autrement dit, le rendu des éléments de la page ne dépend pas des interactions du client avec eux.

Cette méthode permet de limiter tous les problèmes qui peuvent se produire quand c’est le navigateur du client qui processe le JavaScript et d’optimiser la vitesse de chargement des pages. Le server-side rendering permet aussi de s’assurer que tout le contenu de la page est lu et indexé par les moteurs de recherche.

Le client-side rendering

Avec cette méthode, c’est le navigateur de l’utilisateur (du client) ou le moteur de recherche qui processe le JavaScript requêté sur la page. C’est le « client », au sens technique du terme, qui fait le gros du travail. Le serveur HTTP (qui stocke les pages web) gère la requête initiale, mais le reste du travail de processing et de rendering de la page est géré par le device de l’utilisateur ou le moteur de recherche. Dit autrement, les contenus JavaScript ne sont envoyés au client que lorsque ce dernier les demande. On est dans le paradigme de l’affichage sur demande.

On conseille souvent d’éviter le client-side rendering dans la mesure où cela créé un délai entre le moment où Google crawle les pages et celui où il les affiche. Google met les pages qui ont besoin d’être rendues dans une fil d’attente et attend qu’il y ait assez de ressources disponibles pour les processer. Si vous comptez sur Google pour réaliser le rendu d’une page client-side, il peut y avoir un décalage important (parfois plus d’une semaine) entre le crawling de la page et son indexation. Malgré tout, JavaScript reste un langage de programmation essentiellement client-side. Cette technique est la plus répandue.

Le dynamic rendering

Le dynamic rendering ou rendu dynamique consiste tout simplement à utiliser des méthodes de rendu différentes suivant que la page est requêtée par le navigateur d’un internaute ou par un robot de crawling et d’indexation. Un schéma vaut mieux que des centaines de mots d’explication :

L’hybrid rendering

L’hybrid rendering ou rendu hybride désigne une combinaison du server-side rendering et du client-side rendering. Le contenu principal est pré-rendu server-side et envoyé au client suivant que ce soit le navigateur de l’utilisateur ou le crawler du moteur de recherche qui a requêté le contenu. Une fois que la page est chargée dans sa version initiale, du JavaScript est rendu client-side au fil des interactions de l’utilisateur.

Nous espérons vous avoir éclairé sur les principaux concepts liés au JavaScript. Evidemment, ce n’est pas avec cet article que vous réussirez à coder en JavaScriptn mais ce n’était clairement pas la vocation de cet article. Le but était surtout d’éveiller ou d’affirmer votre intérêt pour ce langage incontournable en programmation web.