Glossaire

Web

Voici quelques informations sur les angliscismes usuels utilisés dans le contexte web.

Ces mots n'ont pas de réelle traduction en français, ou alors celle-ci n'est que très rarement utilisée. Nous préférons donc laisser leur version anglaise dans la documentation pour rester au plus près de l'usage courant.

ARIApermalink

ARIA est l'acronyme de "Accessible Rich Internet Applications", et a pour objectif la popularisation d'applications internet riches d'un point de vue de l'accessibilité. Il s'agit plus concrètement d'un ensemble d'attributs et de rôles HTML permettant de rendre le contenu d'une page web plus accessible.

Backendpermalink

Bodypermalink

Bundler / Packagerpermalink

Un bundler (ou packager) est un outil de développement qui permet à une application web répartie sur plusieurs fichiers sources d'être ramenée à un nombre réduit de fichiers (voir en un unique fichier).

L'étape de bundling est donc une sorte de compilation spécifique au contexte du web. C'est souvent lors de cette étape que l'on transforme notre code source pour l'optimiser pour le navigateur.

Les transformations classiques effectuées lors d'un bundling sont :

Typescript => Javascript
JSX => Javascript
Svelte => Javascript, HTML et CSS
Minification
ES20XX => ES6
Réorganisation des dossiers et fichiers

CDNpermalink

Checkboxpermalink

Une checkbox est une boîte à cocher permettant à un utilisateur ou utilisatrice de faire des choix dans des formulaires.

Client-side renderingpermalink

Le rendu côté client, ou client-side rendering (CSR) est l'action de générer une page web avec tout ou partie des données métier dans le navigateur. Il est à mettre en opposition avec le rendu côté serveur, ou server-side rendering, où les pages viennent charger leurs données métier d'abord sur le serveur.

Le CSR permet notamment de naviguer au sein d'une application sans jamais reconstruire intégralement la page, puisque les différents éléments de la page sont ajoutés au fur et à mesure de la navigation. Le CSR est la stratégie de rendu naturelle des SPAs.

Une stratégie CSR nécessite néanmoins d'avoir JavaScript disponible dans son navigateur.

CMSpermalink

code-splittingpermalink

La division du code, ou code splitting est le fractionnement du code en divers bundles ou composants qui peuvent ensuite être chargés à la demande ou en parallèle.

Cross-sitepermalink

Desktoppermalink

Desktop signifie "bureau" en anglais et désigne un ordinateur dans un contexte de développement. Dans le milieu du web, on distingue parfois une navigation desktop d'une navigation mobile pour des questions de design ou de comportements différents.

DOMpermalink

Le Document Object Model (DOM) est la représentation objet d'un document HTML chargé dans le navigateur web. Cette représentation du document permet de le voir comme un groupe structuré de nœuds et d'objets possédant différentes propriétés et méthodes. On parle souvent d'"arbre DOM".

Le DOM relie les pages web aux scripts, fichiers de styles, ressources externes ou langages de programmation. Il peut être manipulé à l'aide du JavaScript.

DNSpermalink

Edgepermalink

Endpointpermalink

Un endpoint (ou "point de terminaison") est un point d'accès d'une API permettant d'interagir avec cette API.

Dans un contexte web, on parle souvent d'un endpoint d'API REST, permettant de requêter les données d'un serveur.

Frameworkpermalink

Un framework est une libraire complète proposant des outils ainsi qu'une philosophie de travail permettant de réaliser une tâche particulière du début à la fin.

Il existe toutes sortes de frameworks, notamment serveur (Express, ...), de composants client (React, Vue, Svelte, ...) ou d'application (SvelteKit, Next, ...).

Frontendpermalink

Un header ou "en-tête" est un information que l'on fournit à une requête ou réponse HTTP pour préciser des informations sur la requête ou la réponse.

Hot Module Reloadingpermalink

Le Hot Module Reloading (ou HMR) est un outil de développement permettant de rafraîchir instantanément l'état d'une page web lorsque le code source est modifié, afin de fluidifier le travail de développement. Cet outil est aujourd'hui proposé par la plupart des bundlers modernes.

Iframepermalink

Une iframe est un élément HTML (<iframe>) permettant d'intégrer une page web au sein d'une autre page web, affichant ainsi le contenu d'un site dans un autre site. Les communications entre l'iframe et la page principale sont volontairement limitées pour des raisons de sécurité.

ISRpermalink

JSONpermalink

Le JSON ("JavaScript Object Notation") est un format de données représentant un objet JavaScript sous forme de chaîne de caractères. C'est un format très populaire pour transmettre des données sur le web.

ts
{
	"name": "Lucie",
		"age": 43,
		"pets": [{
			"name": "Cookie",
			"age": 3,
			"type": "dog"
		}, {
			"name": "Chouquette",
			"age": 7,
			"type": "cat"
		}]
}

Keyframepermalink

Une keyframe représente une étape lors d'une animation CSS. L'usage de keyframes permet de contrôler précisément le déroulé d'une animation CSS.

Language Serverpermalink

Un language server est un algorithme exécuté par un IDE. Il permet d’exécuter les aides au développement (autocomplétion, accès rapide, liste des utilisations, etc.) adaptées à un langage de programmation. L'interface entre l'IDE et le language server est défini par un protocole, le Language Server Protocol (LSP).

Plus d'infos sur le site de la documentation du LSP.

Layoutpermalink

Dans le web, un layout désigne un composant particulier qui a pour but de formaliser une mise en page donnée. Elle peut alors être utilisée pour tout ou partie de l'application voire être composée avec d'autres layouts.

Lazy loadingpermalink

Le lazy loading (ou "chargement différé" ou "chargement paresseux") est l'action de charger de l'information au moment où elle nécessaire. Par exemple, il est courant d'utiliser cette technique pour charger les images d'une page de site web uniquement lorsqu'elles sont censées être visibles, mais pas avant. Cela permet de rendre le chargement initial de la page plus léger, car la plupart des images ne seront alors pas chargées.

Load balancerpermalink

Lockfilepermalink

Markuppermalink

Un langage de markup est un langage de balisage, c'est-à-dire décrivant l'information au sein de balises telles que <image> ou <article>. Les langages HTML et XML sont deux exemples de langages de markup.

Lorsqu'on parle de markup, on désigne l'ensemble des balises présentes dans un document ou une page.

Metadatapermalink

Les metadata, ou "meta-données", sont des données non essentielles mais permettant d'enrichir le contexte des données auxquelles elles se réfèrent. Par exemple, la langue d'une page n'est pas la donnée principale de la page — le texte de la page est la donnée principale —, mais est une meta-donnée permettant de mieux interpréter le contenu de la page.

Middlewarepermalink

MIMEpermalink

MPApermalink

Une Multi Page Application, ou "Application Multi-Page", est un type d'application web se déployant sur plusieurs pages distinctes que l'on charge au fur et à mesure de la navigation. C'est le type d'application historique du web.

Les MPAs sont à mettre en opposition avec les SPAs, applications sur une seule page, permettant de ne pas recharger intégralement la page à chaque navigation.

Les MPAs sont souvent utilisées conjointement à une stratégie de rendu côté serveur.

Preprocessingpermalink

Le preprocessing désigne le fait de préparer préalablement du code ou de la donnée afin de l'optimiser ou l'adapter à son futur traitement.

Le développement JavaScript moderne implique souvent plusieurs étapes de preprocessing, comme par exemple :

transformer du code JavaScript moderne en code JavaScript plus ancien, mais compatible avec plus de navigateurs
transformer du code TypeScript en code JavaScript
transformer du code SASS en code CSS
minifier le code JavaScript pour le rendre plus léger à transporter

Svelte utilise également des préprocesseurs pour convertir les composants Svelte en code JavaScript natif, compréhensible par le navigateur.

Prerenderingpermalink

Le prerendering, ou "rendu préalable", est une stratégie de rendu d'une page web construisant les pages à l'avance. À la différences des stratégies CSR ou SSR, les pages prérendues sont construites une seule fois, au moment de la compilation (dans le cas où l'application nécessite une étape de compilation).

Toutes les pages d'une application ne sont pas compatibles avec cette stratégie, car il est nécessaire que les pages soient statiques, c'est-à-dire que leur contenu soit le même quel que soit la personne visitant la page ou quel que soit le moment de la visite.

Le SSG permet d'avoir une application construite entièrement avec des pages prérendues.

Proxypermalink

REPLpermalink

Un REPL (de l'anglais "Read-Eval-Print-Loop") est un outil permettant de modifier et d'exécuter du code sur une page web et dans un environnement restreint, afin de tester certaines fonctionnalités. Svelte propose son propre REPL.

Routingpermalink

Le routing, ou "routage", est le fait d'aiguiller un utilisateur ou une utilisatrice sur les différentes pages d'un site web, éventuellement via des redirections. Normalement géré par le serveur recevant les requêtes — on parlera alors de routing serveur —, il est également possible de gérer cet aiguillage directement sur le client dans une stratégie CSR — on parlera alors de routing client.

Sourcemappermalink

Une sourcemap est un fichier ou une structure de données associée à un code source, généralement utilisée dans le développement web et la programmation front-end. Elle sert à établir une correspondance entre le code source original, tel qu'il est écrit dans un langage de programmation comme JavaScript, et le code résultant après compilation, minification ou transpilation, qui lui sera réellement exécuté par le navigateur. Cela permet de facilement retrouver dans le code source l'origine d'un bug qui aura été généré par le code compilé.

SEOpermalink

Le SEO ("Search Engine Optimization") désigne l'ensemble des stratégies appliquées à un site web pour optimiser le référencement de ses pages au sein des moteurs de recherche, permettant une meilleure visibilité du site sur internet.

Serverlesspermalink

Service workerpermalink

Server-side renderingpermalink

Le rendu côté serveur, ou server-side rendering (SSR) est l'action de générer une page web avec tout ou partie des données métier directement sur le serveur. Il est à mettre en opposition avec le rendu côté client, ou client-side rendering, où les pages viennent charger la logique dans un premier temps et les données métiers avec des requêtes supplémentaires, ce qui implique de construire une grande partie de la page dans le navigateur. Le SSR est une stratégie de rendu s'intégrant naturellement dans des MPAs.

Le SSR a pour avantages :

une exécution plus rapide car nécessitant moins de requêtes
le fait de pouvoir générer l'entièreté d'une page à la première requête, ce qui permet d'afficher une page même si JavaScript n'est pas disponible côté client
bénéficie d'un meilleur référencement SEO, car les balises de référencement sont générées côté serveur et disponibles pour les outils d'indexation

SvelteKit propose le SSR par défaut, qui peut être désactivé au cas par cas.

Sitemappermalink

Socketpermalink

SPApermalink

Une Single Page Application, ou "Application sur une seule page" est un genre d'application web popularisée par le frameworks React et AngularJS. Le principe est de construire tout le HTML de son application côté client (donc dans le navigateur), et de naviguer dans les différentes sections de l'application sans recharger la page.

Le fait de ne pas avoir besoin de recharger la page permet des fonctionnalités comme ne pas interrompre la lecture d'un flux audio ou vidéo lors de la navigation. Mais ce type d'application a également de gros inconvénients parmi lesquels un temps de chargement potentiellement allongé ainsi qu'une forte dégradation du référencement.

Les SPAs sont à mettre en opposition avec les MPAs, applications multi-pages, nécessitant un rechargement complet entre chaque page.

Les SPAs nécessitent une stratégie de rendu côté client, et à ce titre sont plutôt considérées comme des mauvaises pratiques, sauf dans quelques cas très particuliers.

On leur préfère des stratégies comme le SSR, le SSG, ou encore des stratégies hybrides.

SSGpermalink

SSG est l'acronyme de "Static Site Generation", ou "Génération de Site Statique". Il s'agit d'une stratégie de rendu d'une application web où l'intégralité des pages est généré automatiquement au moment de la compilation, utilisant des méthodes de prerendering.

Cette stratégie requiert que toutes les pages de l'application soient statiques, c'est-à-dire que leur contenu soit le même quel que soit la personne visitant la page ou quel que soit le moment de la visite.

Streampermalink

TLSpermalink

Trailing slashpermalink

Un trailing slash est le slash que l'on retrouve parfois à la fin d'une url, par exemple https://www.mon-super-site.com/bonjour/.

La présence ou l'absence de ce trailing slash a des répercussions sur les navigations relatives au sein du site ainsi que sur le référencement des pages concernées

Viewportpermalink

Le viewport désigne la surface visible d'une page web au sein d'un navigateur.

Web componentpermalink

Les web components sont des éléments HTML personnalisés réutilisables, créés via une API standardisée.

XSSpermalink

XSS est l'acronyme de "Cross-Site-Scripting". Il s'agit d'un type d'attaque informatique ciblant les pages d'un site web dans l'objectif de subtiliser les informations de connexion d'un utilisateur ou d'une utilisatrice via l'exécution d'un script malveillant au sein même de la page.

web workerpermalink

Les Web Workers sont un mécanisme grâce auquel les instructions d'un script peuvent être exécutés dans un thread en arrière-plan séparé du thread d'exécution principal d'une application web.

précédent Développement

suivant JavaScript

Web