Module 2 : JavaScript

Les origines de JavaScript

Du Mocha au JavaScript moderne, découvrez l'histoire fascinante du langage qui domine le Web.

30 min

Version Audio

Débutant

📜

LES ORIGINES DE JAVASCRIPT

Version Ultra-Détaillée

📜 1. POURQUOI JAVASCRIPT A ÉTÉ CRÉÉ

1.1 Le Contexte Historique (1994-1995)

L'Internet en 1994

En 1994, le Web en est à ses balbutiements :

▹
Mosaic (1993) a démocratisé le Web avec son interface graphique.
▹
Netscape Navigator (décembre 1994) domine le marché des navigateurs.
▹
Les pages web sont statiques : du HTML pur, sans aucune interactivité.
▹
Les seules animations sont des images GIF clignotantes.
▹
Les formulaires doivent être soumis au serveur pour validation.

Le Problème Fondamental

"Le Web est un média passif. Les utilisateurs regardent des pages, mais ils ne peuvent pas interagir avec elles. Il faut un langage de script pour rendre le Web vivant." — Marc Andreessen, co-fondateur de Netscape

▹
Valider les formulaires côté client (avant envoi au serveur).
▹
Créer des animations (bannières, effets visuels).
▹
Interagir avec l'utilisateur (clics, survols, saisies).
▹
Modifier le contenu sans recharger la page.
▹
Réduire la charge serveur (traitement local).

Les Alternatives de l'Époque

Technologie	Avantages	Inconvénients
CGI (Perl/C)	Puissant, flexible	Lourd, nécessite un serveur
Java Applets	Langage complet, sécurisé	Démarrage lent, nécessite plugin
VBScript	Intégré à Windows	Propriétaire (Microsoft uniquement)
Tcl/Tk	Léger, simple	Peu adapté au Web
LISP	Puissant	Complexe, peu accessible

▹
Légère (pas de plugin).
▹
Simple (facile à apprendre).
▹
Intégrée (dans le navigateur).
▹
Rapide (exécution immédiate).
▹
Sûre (pas d'accès au système).

1.2 La Naissance de JavaScript

Le Défi de Netscape

En mai 1995, Netscape lance un défi à son équipe d'ingénierie :

"Nous avons besoin d'un langage de script pour Navigator 2.0. Vous avez 10 jours."

Brendan Eich, ingénieur de 34 ans, est chargé du projet.

Brendan Eich : Le Créateur

▹
1961 : Naissance à Pittsburgh, Pennsylvanie.
▹
Formation : Mathématiques et sciences informatiques (Santa Clara University).
▹
Expérience : Silicon Graphics (OS, compilateurs).
▹
1995 : Rejoint Netscape Communications.

"Je voulais un langage accessible aux designers et aux développeurs débutants, mais suffisamment puissant pour les programmeurs expérimentés." — Brendan Eich

Les 10 Jours de Création

Mai 1995 : Brendan Eich travaille jour et nuit dans son bureau de Mountain View.

▹
Le langage doit être simple (syntaxe proche du C/Java).
▹
Il doit être intégré dans le navigateur.
▹
Il doit être interprété (pas de compilation).
▹
Il doit être orienté prototype (pas de classes à l'époque).
▹
Il doit s'appeler "Mocha" (nom de code).

▹
Self (IBM) : L'héritage prototypal.
▹
Scheme (MIT) : Les fonctions comme objets de première classe.
▹
Java (Sun) : La syntaxe des boucles et conditions.
▹
C (Bell Labs) : La syntaxe des opérateurs.
▹
HyperTalk (Apple) : La simplicité pour les non-programmeurs.

Le Développement

Jour 1-3

Conception de la syntaxe de base (variables, opérateurs, conditions).

Jour 4-6

Implémentation du moteur (interpréteur, objets et prototypes).

Jour 7-9

Intégration dans le navigateur (liaison avec le DOM et événements).

Jour 10

Tests et corrections (bugs et optimisations mineures).

Résultat : Un langage fonctionnel en 10 jours, mais avec des défauts hérités de cette urgence.

1.3 Le Nom : Mocha → LiveScript → JavaScript

Nom	Période	Raison
Mocha	Mai 1995 (interne)	Nom de code du projet
LiveScript	Septembre 1995 (bêta)	Plus commercial, "Live" pour le dynamisme
JavaScript	Décembre 1995 (final)	Marketing pour profiter de la popularité de Java

L'Accord Marketing avec Sun Microsystems

En décembre 1995, Netscape et Sun Microsystems (créateurs de Java) signent un accord :

▹
Netscape peut utiliser le nom "JavaScript".
▹
JavaScript n'a rien à voir avec Java (à part la syntaxe).
▹
Sun espère que JavaScript popularisera Java.
▹
Netscape espère profiter de la notoriété de Java.

"JavaScript est à Java ce que le hamburger est au jambon." — Brendan Eich

La Spécification Initiale

Première version (Navigator 2.0, décembre 1995) :

JavaScript

// Les bases

var

message = "Hello World";

var

nombre = 42;

var

estVrai = true;

// Fonctions simples

function

direBonjour(nom) { return "Bonjour " + nom; }

// Objets primitifs

var

personne = { nom: "Jean", age: 30, direBonjour: function() { return "Bonjour, je suis " + this.nom; } };

// Manipulation du DOM

document.write("Hello World"); alert("Message important");

Fonctionnalités manquantes :

Pas de try/catch (gestion d'erreurs limitée).
Pas de const ou let (seulement var).
Pas de classes (héritage prototypal uniquement).
Pas de modules (tout dans l'espace global).
Pas de === (comparaison stricte).
Pas de forEach, map, filter (méthodes de tableau limitées).
Pas de fetch (XMLHttpRequest était expérimental).

🔧 2. L'ÉVOLUTION D'ECMASCRIPT

2.1 La Standardisation

Pourquoi Standardiser ?

Problème : Netscape et Microsoft développent des versions incompatibles de JavaScript.

Navigateur	Langage	Différences
Netscape	JavaScript	Implémentation originale
Internet Explorer	JScript	Similaire mais divergente
Opera	ECMAScript	Version standardisée

▹
Les développeurs doivent écrire du code spécifique à chaque navigateur.
▹
if (navigator.userAgent.indexOf('MSIE') !== -1)
▹
Fragmentation du Web.

La Standardisation par ECMA

▹
1996 : Netscape soumet JavaScript à ECMA International.
▹
1997 : Publication de la première spécification (ECMAScript 1).
▹
1998 : ECMAScript 2 (corrections mineures).
▹
1999 : ECMAScript 3 (expressions régulières, try/catch, switch).

La Guerre des Implémentations

1998-2005 : Les implémentations divergentes continuent.

Moteur	Navigateur	Caractéristiques
SpiderMonkey	Firefox	Moteur original, open-source
JScript	Internet Explorer	Propriétaire, divergences
KJS	Konqueror	Moteur KDE, base de WebKit

ECMAScript 4 : L'Échec

2000-2008 : Tentative de révision majeure.

▹
Mozilla (SpiderMonkey) : Veut une évolution complète.
▹
Microsoft : Rejette les fonctionnalités complexes.
▹
Google : Préfère une approche pragmatique.

Résultat : Projet abandonné en 2008, divisé en ECMAScript 3.1 (devenu ES5) et les futures versions.

2.2 La Révolution ES6 (ECMAScript 2015)

Le Changement de Philosophie

▹
2009 : ES5 ajoute strict mode, JSON, méthodes de tableau (forEach, map), getters/setters.
▹
2015 : ES6 (ECMAScript 2015) - La révolution.

Les Nouvelles Fonctionnalités Majeures

JavaScript (ES6+)

// 1. let et const (scope de bloc)

let

variable = 10;

const

constante = 20;

// 2. Arrow functions

const

addition = (a, b) => a + b;

// 3. Classes (syntaxe simplifiée)

class

Personne { constructor(nom, age) { this.nom = nom; this.age = age; } direBonjour() { return `Bonjour, je suis ${this.nom}`; } }

// 4. Template literals

const

message = `Bonjour ${nom}`;

// 5. Destructuring

const

{ nom, age } = personne;

const

[premier, second] = tableau;

// 6. Spread operator

const

nouveaux = [...anciens, 3, 4];

// 7. Modules (import/export)

import

{ fonction } from './module.js';

export

const maFonction = () => {};

// 8. Promises

const

promesse = new Promise((resolve, reject) => { // opération asynchrone });

// 9. Map, Set, WeakMap, WeakSet

const

map = new Map(); map.set('clé', 'valeur');

const

set = new Set([1, 2, 2, 3]); // {1, 2, 3}

2.3 L'Évolution Annuelle (ES2016 à ES2026)

2016 : Passage au modèle annuel (TC39) avec numérotation par année.

ES2016 (ES7)

// Array.includes()

[1, 2, 3].includes(2); // true

// Exponentiation operator

2 ** 3; // 8

ES2017 (ES8)

// Async/Await

async function getData() {

const response = await fetch('/api');

return response.json();

}

// Object.values() et Object.entries()

Object.values({a: 1, b: 2}); // [1, 2]

ES2018 (ES9)

// Rest/Spread pour objets

const { a, ...rest } = {a: 1, b: 2, c: 3};

// Promise.finally()

fetch('/api')

.then(response => response.json())

.catch(error => console.error(error))

.finally(() => console.log('Terminé'));

2.4 Le Processus TC39

Le Comité Technique

TC39 (Technical Committee 39) est le comité qui gère l'évolution d'ECMAScript.

▹
Google (Chrome/V8).
▹
Apple (Safari/JavaScriptCore).
▹
Mozilla (Firefox/SpiderMonkey).
▹
Microsoft (Edge/Chakra).

Le Processus en 4 Étapes

Étape	Statut	Description
Stage 0	Strawperson	Idée initiale, proposition informelle
Stage 1	Proposal	Proposition formelle, champion désigné
Stage 2	Draft	Spécification initiale, tests préliminaires
Stage 3	Candidate	Spécification complète, implémentations en cours
Stage 4	Finished	Spécification finalisée, deux implémentations réussies

⚙️ 3. LES MOTEURS JAVASCRIPT

3.1 Qu'est-ce qu'un Moteur JavaScript ?

Un moteur JavaScript (ou JS engine) est un programme qui exécute du code JavaScript. Il lit le code source, le compile et l'exécute.

Les Composants d'un Moteur

┌─────────────────────────────────────────────────────┐

│ MOTEUR JAVASCRIPT │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ PARSER (Analyseur Syntaxique) │ │

│ │ Code Source → Abstract Syntax Tree (AST) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ INTERPRETER (Interpréteur) │ │

│ │ AST → Bytecode / Exécution immédiate │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ JIT COMPILER (Compilateur Just-In-Time) │ │

│ │ Bytecode → Code Machine Optimisé │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ GARBAGE COLLECTOR (Collecteur) │ │

│ │ Gestion de la mémoire (mark & sweep) │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ RUNTIME ENVIRONMENT │ │

│ │ DOM, API Web, Event Loop, Call Stack │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Le Cycle de Vie d'une Exécution

// Code source

function

add(a, b) { return a + b; }

▹
Parse : Analyse syntaxique → AST.
▹
Interprétation : Exécution immédiate → Bytecode.
▹
Hot Code : Code exécuté souvent → Compilation JIT.
▹
Optimisation : Compilation avancée → Code machine optimisé.
▹
Dé-optimisation : Si types changent → Retour à l'interpréteur.

3.2 Les Moteurs Majeurs

V8 (Google)

Création : 2008 (pour Google Chrome).

▹
Moteur : C++.
▹
JIT : Multi-niveaux (Ignition → Sparkplug → Maglev → TurboFan).
▹
Garbage Collector : Orinoco (générationnel, parallèle).
▹
Hidden Classes : Optimisation des accès aux propriétés.

┌─────────────────────────────────────────────────────┐

│ V8 │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ IGNITION (Interpréteur) │ │

│ │ Code → Bytecode (exécution rapide) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ SPARKPLUG (Compilateur léger) │ │

│ │ Bytecode → Code Machine (non-optimisé) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ MAGLEV (Compilateur intermédiaire) │ │

│ │ Code Machine → Code Optimisé (moyen) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ TURBOFAN (Compilateur haute perf) │ │

│ │ Code Machine → Code Ultra-Optimisé │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Utilisé par : Google Chrome, Microsoft Edge, Node.js, Deno, Brave, Opera, Vivaldi.

SpiderMonkey (Mozilla)

Création : 1995 (par Brendan Eich).

▹
Moteur : C++ / Rust.
▹
JIT : Baseline → IonMonkey → Warp.
▹
Warp : Utilisation des caches en ligne pour l'optimisation.

Utilisé par : Mozilla Firefox, Tor Browser.

JavaScriptCore (Apple)

Création : 2003 (pour Safari). Nom commercial : Nitro.

▹
Moteur : C++.
▹
JIT : LLInt → Baseline → DFG → FTL.
▹
LLInt : Interpréteur ultra-léger.

Utilisé par : Apple Safari, Bun (runtime).

3.3 Comparatif des Moteurs

Moteur	V8 (Google)	SpiderMonkey (Mozilla)	JavaScriptCore (Apple)
Création	2008	1995	2003
Langage	C++	C++ / Rust	C++
Interprète	Ignition	Baseline Interpreter	LLInt
JIT léger	Sparkplug	Baseline JIT	Baseline JIT
JIT haut	TurboFan	Warp (IonMonkey)	FTL (B3)
Particularité	Dé-optimisation	Warp caching	Efficacité énergétique

🌐 4. LES RUNTIMES JAVASCRIPT

4.1 Qu'est-ce qu'un Runtime ?

Un runtime (ou environnement d'exécution) est l'infrastructure qui permet d'exécuter du code JavaScript.

▹
Le moteur JavaScript (V8, SpiderMonkey, etc.).
▹
Les API natives (DOM, Node.js, Deno, etc.).
▹
La gestion des E/S (réseau, fichiers, etc.).
▹
Le système d'événements (Event Loop).

4.2 Les Runtimes Navigateur

Les APIs du Navigateur

┌─────────────────────────────────────────────────────┐

│ NAVIGATEUR WEB │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ DOM (Document Object Model) │ │

│ │ document.getElementById('id') │ │

│ │ document.querySelector('.class') │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ BOM (Browser Object Model) │ │

│ │ window, navigator, location, history │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ API WEB STANDARDS │ │

│ │ fetch, WebSocket, WebRTC, Canvas, etc. │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ EVENT LOOP │ │

│ │ setTimeout, setInterval, requestAnimation │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Les Moteurs par Navigateur

Navigateur	Moteur	Runtime	Rendu
Chrome	V8	Blink	Blink
Edge	V8	Blink	Blink
Firefox	SpiderMonkey	Gecko	Gecko
Safari	JavaScriptCore	WebKit	WebKit

4.3 Les Runtimes Serveur

Node.js (2009)

▹
Créateur : Ryan Dahl.
▹
Moteur : V8 + libuv.
▹
Event Loop : Asynchrone, non-bloquant.
▹
NPM : Plus grand écosystème de packages.

// Hello World Node.js

const

http = require('http');

const

server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n'); }); server.listen(3000, () => { console.log('Server running on port 3000'); });

Deno (2018)

▹
Créateur : Ryan Dahl (créateur de Node.js).
▹
Moteur : V8 + Tokio (Rust).
▹
Philosophie : "Corriger les erreurs de Node.js".

Bun (2022)

▹
Créateur : Jarred Sumner.
▹
Moteur : JavaScriptCore (Nitro) + Zig.
▹
Philosophie : "Tout en un, ultra-rapide".

📊 5. JAVASCRIPT AUJOURD'HUI (2026)

5.1 Statistiques et Adoption

▹
#1 : Langage le plus utilisé selon Stack Overflow (2026).
▹
98% : Des sites web utilisent JavaScript.
▹
3.5M+ : Développeurs JavaScript dans le monde.

5.3 Ce que les Développeurs Devraient Savoir

▹
Asynchronisme : Promises, async/await, événements.
▹
TypeScript : Types, interfaces, generics.
▹
Frameworks : React, Vue, Svelte, Solid.
▹
Serveur : Node.js, Deno, Bun.

📝 RÉSUMÉ - PHASE 2.1

Année	Événement	Impact
1995	Création de JavaScript	Le Web devient interactif
1996	Standardisation (ECMAScript)	Compatibilité entre navigateurs
2009	ES5 + Node.js	JavaScript sur le serveur
2015	ES6 (révolution)	Classes, modules, let/const
2018	Deno	Sécurité, TypeScript
2022	Bun	Performance, tout-en-un

1996 : Netscape soumet JavaScript à ECMA International.

▹

1997 : Publication de la première spécification (ECMAScript 1).

▹

1998 : ECMAScript 2 (corrections mineures).

▹

1999 : ECMAScript 3 (expressions régulières, try/catch, switch).

La Guerre des Implémentations

1998-2005 : Les implémentations divergentes continuent.

Moteur	Navigateur	Caractéristiques
SpiderMonkey	Firefox	Moteur original, open-source
JScript	Internet Explorer	Propriétaire, divergences
KJS	Konqueror	Moteur KDE, base de WebKit

ECMAScript 4 : L'Échec

2000-2008 : Tentative de révision majeure.

▹
Mozilla (SpiderMonkey) : Veut une évolution complète.
▹
Microsoft : Rejette les fonctionnalités complexes.
▹
Google : Préfère une approche pragmatique.

Résultat : Projet abandonné en 2008, divisé en ECMAScript 3.1 (devenu ES5) et les futures versions.

2.2 La Révolution ES6 (ECMAScript 2015)

Le Changement de Philosophie

▹
2009 : ES5 ajoute strict mode, JSON, méthodes de tableau (forEach, map), getters/setters.
▹
2015 : ES6 (ECMAScript 2015) - La révolution.

Les Nouvelles Fonctionnalités Majeures

JavaScript (ES6+)

// 1. let et const (scope de bloc)

let

variable = 10;

const

constante = 20;

// 2. Arrow functions

const

addition = (a, b) => a + b;

// 3. Classes (syntaxe simplifiée)

class

Personne { constructor(nom, age) { this.nom = nom; this.age = age; } direBonjour() { return `Bonjour, je suis ${this.nom}`; } }

// 4. Template literals

const

message = `Bonjour ${nom}`;

// 5. Destructuring

const

{ nom, age } = personne;

const

[premier, second] = tableau;

// 6. Spread operator

const

nouveaux = [...anciens, 3, 4];

// 7. Modules (import/export)

import

{ fonction } from './module.js';

export

const maFonction = () => {};

// 8. Promises

const

promesse = new Promise((resolve, reject) => { // opération asynchrone });

// 9. Map, Set, WeakMap, WeakSet

const

map = new Map(); map.set('clé', 'valeur');

const

set = new Set([1, 2, 2, 3]); // {1, 2, 3}

2.3 L'Évolution Annuelle (ES2016 à ES2026)

2016 : Passage au modèle annuel (TC39) avec numérotation par année.

ES2016 (ES7)

// Array.includes()

[1, 2, 3].includes(2); // true

// Exponentiation operator

2 ** 3; // 8

ES2017 (ES8)

// Async/Await

async function getData() {

const response = await fetch('/api');

return response.json();

}

// Object.values() et Object.entries()

Object.values({a: 1, b: 2}); // [1, 2]

ES2018 (ES9)

// Rest/Spread pour objets

const { a, ...rest } = {a: 1, b: 2, c: 3};

// Promise.finally()

fetch('/api')

.then(response => response.json())

.catch(error => console.error(error))

.finally(() => console.log('Terminé'));

2.4 Le Processus TC39

Le Comité Technique

TC39 (Technical Committee 39) est le comité qui gère l'évolution d'ECMAScript.

▹
Google (Chrome/V8).
▹
Apple (Safari/JavaScriptCore).
▹
Mozilla (Firefox/SpiderMonkey).
▹
Microsoft (Edge/Chakra).

Le Processus en 4 Étapes

Étape	Statut	Description
Stage 0	Strawperson	Idée initiale, proposition informelle
Stage 1	Proposal	Proposition formelle, champion désigné
Stage 2	Draft	Spécification initiale, tests préliminaires
Stage 3	Candidate	Spécification complète, implémentations en cours
Stage 4	Finished	Spécification finalisée, deux implémentations réussies

⚙️ 3. LES MOTEURS JAVASCRIPT

3.1 Qu'est-ce qu'un Moteur JavaScript ?

Un moteur JavaScript (ou JS engine) est un programme qui exécute du code JavaScript. Il lit le code source, le compile et l'exécute.

Les Composants d'un Moteur

┌─────────────────────────────────────────────────────┐

│ MOTEUR JAVASCRIPT │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ PARSER (Analyseur Syntaxique) │ │

│ │ Code Source → Abstract Syntax Tree (AST) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ INTERPRETER (Interpréteur) │ │

│ │ AST → Bytecode / Exécution immédiate │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ JIT COMPILER (Compilateur Just-In-Time) │ │

│ │ Bytecode → Code Machine Optimisé │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ GARBAGE COLLECTOR (Collecteur) │ │

│ │ Gestion de la mémoire (mark & sweep) │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ RUNTIME ENVIRONMENT │ │

│ │ DOM, API Web, Event Loop, Call Stack │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Le Cycle de Vie d'une Exécution

// Code source

function

add(a, b) { return a + b; }

▹
Parse : Analyse syntaxique → AST.
▹
Interprétation : Exécution immédiate → Bytecode.
▹
Hot Code : Code exécuté souvent → Compilation JIT.
▹
Optimisation : Compilation avancée → Code machine optimisé.
▹
Dé-optimisation : Si types changent → Retour à l'interpréteur.

3.2 Les Moteurs Majeurs

V8 (Google)

Création : 2008 (pour Google Chrome).

▹
Moteur : C++.
▹
JIT : Multi-niveaux (Ignition → Sparkplug → Maglev → TurboFan).
▹
Garbage Collector : Orinoco (générationnel, parallèle).
▹
Hidden Classes : Optimisation des accès aux propriétés.

┌─────────────────────────────────────────────────────┐

│ V8 │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ IGNITION (Interpréteur) │ │

│ │ Code → Bytecode (exécution rapide) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ SPARKPLUG (Compilateur léger) │ │

│ │ Bytecode → Code Machine (non-optimisé) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ MAGLEV (Compilateur intermédiaire) │ │

│ │ Code Machine → Code Optimisé (moyen) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ TURBOFAN (Compilateur haute perf) │ │

│ │ Code Machine → Code Ultra-Optimisé │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Utilisé par : Google Chrome, Microsoft Edge, Node.js, Deno, Brave, Opera, Vivaldi.

SpiderMonkey (Mozilla)

Création : 1995 (par Brendan Eich).

▹
Moteur : C++ / Rust.
▹
JIT : Baseline → IonMonkey → Warp.
▹
Warp : Utilisation des caches en ligne pour l'optimisation.

Utilisé par : Mozilla Firefox, Tor Browser.

JavaScriptCore (Apple)

Création : 2003 (pour Safari). Nom commercial : Nitro.

▹
Moteur : C++.
▹
JIT : LLInt → Baseline → DFG → FTL.
▹
LLInt : Interpréteur ultra-léger.

Utilisé par : Apple Safari, Bun (runtime).

3.3 Comparatif des Moteurs

Moteur	V8 (Google)	SpiderMonkey (Mozilla)	JavaScriptCore (Apple)
Création	2008	1995	2003
Langage	C++	C++ / Rust	C++
Interprète	Ignition	Baseline Interpreter	LLInt
JIT léger	Sparkplug	Baseline JIT	Baseline JIT
JIT haut	TurboFan	Warp (IonMonkey)	FTL (B3)
Particularité	Dé-optimisation	Warp caching	Efficacité énergétique

🌐 4. LES RUNTIMES JAVASCRIPT

4.1 Qu'est-ce qu'un Runtime ?

Un runtime (ou environnement d'exécution) est l'infrastructure qui permet d'exécuter du code JavaScript.

▹
Le moteur JavaScript (V8, SpiderMonkey, etc.).
▹
Les API natives (DOM, Node.js, Deno, etc.).
▹
La gestion des E/S (réseau, fichiers, etc.).
▹
Le système d'événements (Event Loop).

4.2 Les Runtimes Navigateur

Les APIs du Navigateur

┌─────────────────────────────────────────────────────┐

│ NAVIGATEUR WEB │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ DOM (Document Object Model) │ │

│ │ document.getElementById('id') │ │

│ │ document.querySelector('.class') │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ BOM (Browser Object Model) │ │

│ │ window, navigator, location, history │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ API WEB STANDARDS │ │

│ │ fetch, WebSocket, WebRTC, Canvas, etc. │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ EVENT LOOP │ │

│ │ setTimeout, setInterval, requestAnimation │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Les Moteurs par Navigateur

Navigateur	Moteur	Runtime	Rendu
Chrome	V8	Blink	Blink
Edge	V8	Blink	Blink
Firefox	SpiderMonkey	Gecko	Gecko
Safari	JavaScriptCore	WebKit	WebKit

4.3 Les Runtimes Serveur

Node.js (2009)

▹
Créateur : Ryan Dahl.
▹
Moteur : V8 + libuv.
▹
Event Loop : Asynchrone, non-bloquant.
▹
NPM : Plus grand écosystème de packages.

// Hello World Node.js

const

http = require('http');

const

Deno (2018)

▹
Créateur : Ryan Dahl (créateur de Node.js).
▹
Moteur : V8 + Tokio (Rust).
▹
Philosophie : "Corriger les erreurs de Node.js".

Bun (2022)

▹
Créateur : Jarred Sumner.
▹
Moteur : JavaScriptCore (Nitro) + Zig.
▹
Philosophie : "Tout en un, ultra-rapide".

📊 5. JAVASCRIPT AUJOURD'HUI (2026)

5.1 Statistiques et Adoption

▹
#1 : Langage le plus utilisé selon Stack Overflow (2026).
▹
98% : Des sites web utilisent JavaScript.
▹
3.5M+ : Développeurs JavaScript dans le monde.

5.3 Ce que les Développeurs Devraient Savoir

▹
Asynchronisme : Promises, async/await, événements.
▹
TypeScript : Types, interfaces, generics.
▹
Frameworks : React, Vue, Svelte, Solid.
▹
Serveur : Node.js, Deno, Bun.

📝 RÉSUMÉ - PHASE 2.1

Année	Événement	Impact
1995	Création de JavaScript	Le Web devient interactif
1996	Standardisation (ECMAScript)	Compatibilité entre navigateurs
2009	ES5 + Node.js	JavaScript sur le serveur
2015	ES6 (révolution)	Classes, modules, let/const
2018	Deno	Sécurité, TypeScript
2022	Bun	Performance, tout-en-un

1996 : Netscape soumet JavaScript à ECMA International.

▹

1997 : Publication de la première spécification (ECMAScript 1).

▹

1998 : ECMAScript 2 (corrections mineures).

▹

1999 : ECMAScript 3 (expressions régulières, try/catch, switch).

La Guerre des Implémentations

1998-2005 : Les implémentations divergentes continuent.

Moteur	Navigateur	Caractéristiques
SpiderMonkey	Firefox	Moteur original, open-source
JScript	Internet Explorer	Propriétaire, divergences
KJS	Konqueror	Moteur KDE, base de WebKit

ECMAScript 4 : L'Échec

2000-2008 : Tentative de révision majeure.

▹
Mozilla (SpiderMonkey) : Veut une évolution complète.
▹
Microsoft : Rejette les fonctionnalités complexes.
▹
Google : Préfère une approche pragmatique.

Résultat : Projet abandonné en 2008, divisé en ECMAScript 3.1 (devenu ES5) et les futures versions.

2.2 La Révolution ES6 (ECMAScript 2015)

Le Changement de Philosophie

▹
2009 : ES5 ajoute strict mode, JSON, méthodes de tableau (forEach, map), getters/setters.
▹
2015 : ES6 (ECMAScript 2015) - La révolution.

Les Nouvelles Fonctionnalités Majeures

JavaScript (ES6+)

// 1. let et const (scope de bloc)

let

variable = 10;

const

constante = 20;

// 2. Arrow functions

const

addition = (a, b) => a + b;

// 3. Classes (syntaxe simplifiée)

class

Personne { constructor(nom, age) { this.nom = nom; this.age = age; } direBonjour() { return `Bonjour, je suis ${this.nom}`; } }

// 4. Template literals

const

message = `Bonjour ${nom}`;

// 5. Destructuring

const

{ nom, age } = personne;

const

[premier, second] = tableau;

// 6. Spread operator

const

nouveaux = [...anciens, 3, 4];

// 7. Modules (import/export)

import

{ fonction } from './module.js';

export

const maFonction = () => {};

// 8. Promises

const

promesse = new Promise((resolve, reject) => { // opération asynchrone });

// 9. Map, Set, WeakMap, WeakSet

const

map = new Map(); map.set('clé', 'valeur');

const

set = new Set([1, 2, 2, 3]); // {1, 2, 3}

2.3 L'Évolution Annuelle (ES2016 à ES2026)

2016 : Passage au modèle annuel (TC39) avec numérotation par année.

ES2016 (ES7)

// Array.includes()

[1, 2, 3].includes(2); // true

// Exponentiation operator

2 ** 3; // 8

ES2017 (ES8)

// Async/Await

async function getData() {

const response = await fetch('/api');

return response.json();

}

// Object.values() et Object.entries()

Object.values({a: 1, b: 2}); // [1, 2]

ES2018 (ES9)

// Rest/Spread pour objets

const { a, ...rest } = {a: 1, b: 2, c: 3};

// Promise.finally()

fetch('/api')

.then(response => response.json())

.catch(error => console.error(error))

.finally(() => console.log('Terminé'));

2.4 Le Processus TC39

Le Comité Technique

TC39 (Technical Committee 39) est le comité qui gère l'évolution d'ECMAScript.

▹
Google (Chrome/V8).
▹
Apple (Safari/JavaScriptCore).
▹
Mozilla (Firefox/SpiderMonkey).
▹
Microsoft (Edge/Chakra).

Le Processus en 4 Étapes

Étape	Statut	Description
Stage 0	Strawperson	Idée initiale, proposition informelle
Stage 1	Proposal	Proposition formelle, champion désigné
Stage 2	Draft	Spécification initiale, tests préliminaires
Stage 3	Candidate	Spécification complète, implémentations en cours
Stage 4	Finished	Spécification finalisée, deux implémentations réussies

⚙️ 3. LES MOTEURS JAVASCRIPT

3.1 Qu'est-ce qu'un Moteur JavaScript ?

Un moteur JavaScript (ou JS engine) est un programme qui exécute du code JavaScript. Il lit le code source, le compile et l'exécute.

Les Composants d'un Moteur

┌─────────────────────────────────────────────────────┐

│ MOTEUR JAVASCRIPT │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ PARSER (Analyseur Syntaxique) │ │

│ │ Code Source → Abstract Syntax Tree (AST) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ INTERPRETER (Interpréteur) │ │

│ │ AST → Bytecode / Exécution immédiate │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ JIT COMPILER (Compilateur Just-In-Time) │ │

│ │ Bytecode → Code Machine Optimisé │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ GARBAGE COLLECTOR (Collecteur) │ │

│ │ Gestion de la mémoire (mark & sweep) │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ RUNTIME ENVIRONMENT │ │

│ │ DOM, API Web, Event Loop, Call Stack │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Le Cycle de Vie d'une Exécution

// Code source

function

add(a, b) { return a + b; }

▹
Parse : Analyse syntaxique → AST.
▹
Interprétation : Exécution immédiate → Bytecode.
▹
Hot Code : Code exécuté souvent → Compilation JIT.
▹
Optimisation : Compilation avancée → Code machine optimisé.
▹
Dé-optimisation : Si types changent → Retour à l'interpréteur.

3.2 Les Moteurs Majeurs

V8 (Google)

Création : 2008 (pour Google Chrome).

▹
Moteur : C++.
▹
JIT : Multi-niveaux (Ignition → Sparkplug → Maglev → TurboFan).
▹
Garbage Collector : Orinoco (générationnel, parallèle).
▹
Hidden Classes : Optimisation des accès aux propriétés.

┌─────────────────────────────────────────────────────┐

│ V8 │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ IGNITION (Interpréteur) │ │

│ │ Code → Bytecode (exécution rapide) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ SPARKPLUG (Compilateur léger) │ │

│ │ Bytecode → Code Machine (non-optimisé) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ MAGLEV (Compilateur intermédiaire) │ │

│ │ Code Machine → Code Optimisé (moyen) │ │

│ └──────────────────┬──────────────────────────┘ │

│ ▼ │

│ ┌─────────────────────────────────────────────┐ │

│ │ TURBOFAN (Compilateur haute perf) │ │

│ │ Code Machine → Code Ultra-Optimisé │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Utilisé par : Google Chrome, Microsoft Edge, Node.js, Deno, Brave, Opera, Vivaldi.

SpiderMonkey (Mozilla)

Création : 1995 (par Brendan Eich).

▹
Moteur : C++ / Rust.
▹
JIT : Baseline → IonMonkey → Warp.
▹
Warp : Utilisation des caches en ligne pour l'optimisation.

Utilisé par : Mozilla Firefox, Tor Browser.

JavaScriptCore (Apple)

Création : 2003 (pour Safari). Nom commercial : Nitro.

▹
Moteur : C++.
▹
JIT : LLInt → Baseline → DFG → FTL.
▹
LLInt : Interpréteur ultra-léger.

Utilisé par : Apple Safari, Bun (runtime).

3.3 Comparatif des Moteurs

Moteur	V8 (Google)	SpiderMonkey (Mozilla)	JavaScriptCore (Apple)
Création	2008	1995	2003
Langage	C++	C++ / Rust	C++
Interprète	Ignition	Baseline Interpreter	LLInt
JIT léger	Sparkplug	Baseline JIT	Baseline JIT
JIT haut	TurboFan	Warp (IonMonkey)	FTL (B3)
Particularité	Dé-optimisation	Warp caching	Efficacité énergétique

🌐 4. LES RUNTIMES JAVASCRIPT

4.1 Qu'est-ce qu'un Runtime ?

Un runtime (ou environnement d'exécution) est l'infrastructure qui permet d'exécuter du code JavaScript.

▹
Le moteur JavaScript (V8, SpiderMonkey, etc.).
▹
Les API natives (DOM, Node.js, Deno, etc.).
▹
La gestion des E/S (réseau, fichiers, etc.).
▹
Le système d'événements (Event Loop).

4.2 Les Runtimes Navigateur

Les APIs du Navigateur

┌─────────────────────────────────────────────────────┐

│ NAVIGATEUR WEB │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ DOM (Document Object Model) │ │

│ │ document.getElementById('id') │ │

│ │ document.querySelector('.class') │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ BOM (Browser Object Model) │ │

│ │ window, navigator, location, history │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ API WEB STANDARDS │ │

│ │ fetch, WebSocket, WebRTC, Canvas, etc. │ │

│ └─────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────┐ │

│ │ EVENT LOOP │ │

│ │ setTimeout, setInterval, requestAnimation │ │

│ └─────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────┘

Les Moteurs par Navigateur

Navigateur	Moteur	Runtime	Rendu
Chrome	V8	Blink	Blink
Edge	V8	Blink	Blink
Firefox	SpiderMonkey	Gecko	Gecko
Safari	JavaScriptCore	WebKit	WebKit

4.3 Les Runtimes Serveur

Node.js (2009)

▹
Créateur : Ryan Dahl.
▹
Moteur : V8 + libuv.
▹
Event Loop : Asynchrone, non-bloquant.
▹
NPM : Plus grand écosystème de packages.

// Hello World Node.js

const

http = require('http');

const

Deno (2018)

▹
Créateur : Ryan Dahl (créateur de Node.js).
▹
Moteur : V8 + Tokio (Rust).
▹
Philosophie : "Corriger les erreurs de Node.js".

Bun (2022)

▹
Créateur : Jarred Sumner.
▹
Moteur : JavaScriptCore (Nitro) + Zig.
▹
Philosophie : "Tout en un, ultra-rapide".

📊 5. JAVASCRIPT AUJOURD'HUI (2026)

5.1 Statistiques et Adoption

▹
#1 : Langage le plus utilisé selon Stack Overflow (2026).
▹
98% : Des sites web utilisent JavaScript.
▹
3.5M+ : Développeurs JavaScript dans le monde.

5.3 Ce que les Développeurs Devraient Savoir

▹
Asynchronisme : Promises, async/await, événements.
▹
TypeScript : Types, interfaces, generics.
▹
Frameworks : React, Vue, Svelte, Solid.
▹
Serveur : Node.js, Deno, Bun.

📝 RÉSUMÉ - PHASE 2.1

Année	Événement	Impact
1995	Création de JavaScript	Le Web devient interactif
1996	Standardisation (ECMAScript)	Compatibilité entre navigateurs
2009	ES5 + Node.js	JavaScript sur le serveur
2015	ES6 (révolution)	Classes, modules, let/const
2018	Deno	Sécurité, TypeScript
2022	Bun	Performance, tout-en-un

1996 : Netscape soumet JavaScript à ECMA International.