✨ D'où vient le javascript ?

Avant même de commencer à comprendre les variables, les fonctions, etc. Il faut toujours s'intéresser au : POURQUOI !

C'est lui qui nous permet de comprendre les subtilités et les détails d'un langage comme JavaScript, il est pour moi essentiel de prendre le temps de regarder ces courtes vidéos pour comprendre l'histoire du JavaScript et pourquoi il est devenu si populaire aujourd'hui.

• Retrouvez les schémas ici

🖼️ Ouvrir le schéma Excalidraw

🔓 Version écrites de la vidéo

Pourquoi connaître l'histoire de JavaScript ?

Comprendre l'histoire de JavaScript t'aide à mieux saisir pourquoi le langage est ce qu'il est aujourd'hui. C'est un gain de temps pour la suite.

L'ère du HTML et CSS

Avant JavaScript, les sites étaient statiques, sans interactivité. Imagine ça comme un livre : tu peux lire mais pas interagir.

<!-- Site statique en HTML -->
<!DOCTYPE html>
<html>
<head>
  <title>Mon site</title>
</head>
<body>
  <h1>Bienvenue</h1>
</body>
</html>

La guerre des navigateurs

Microsoft et Netscape dominaient. Netscape voulait plus d'interactivité, comme rendre un film en 3D au lieu de 2D.

L'arrivée de Brendan Eich

Brendan Eich de Netscape prend 10 jours pour créer un "langage de script". C'est un peu comme construire une maison en 10 jours; c'est possible, mais attendez-vous à des imperfections.

// Premier code JavaScript
alert("Hello, World!");

Mosha à JavaScript

Initialement, il l'a appelé "Mosha". Puis "LiveScript" parce que ça s'exécutait en direct. Et finalement "JavaScript", mais attention, ça n'a rien à voir avec Java.

// LiveScript ou JavaScript, ça fait la même chose
console.log("Hello, World!");

Résumé

JavaScript est né pour rendre les sites plus interactifs. C'était un peu bancal au début mais essentiel pour l'évolution du web. Et non, JavaScript n'est pas Java.

• Retrouvez les schémas ici

La création du JavaScript était intéressante, y compris ce nom qui est un pur nom marketing, pour que les gens associent le nouveau "JavaScript" à la puissance qu'était "Java" à cette époque 🤯

Mais le plus intéressant, c'est aussi ce qu'il s'est passé après sa création !

▶️ Regarder la vidéo

🖼️ Ouvrir le schéma Excalidraw

🔓 Version écrite de la vidéo

Début de l'Aventure (1995)

JavaScript est né en 1995. Rappelez-vous, on en a parlé la dernière fois.

Conflit Netscape et Microsoft (JScript) (1996)

Microsoft riposte avec JScript. Résultat ? Incompatibilité des navigateurs. Imagine ça comme deux dialectes d'une même langue qui ne se comprennent pas bien.

Standardisation ECMAScript (1997)

Netscape soumet JavaScript à ECMA International pour standardisation. ECMA c'est comme le prof de la classe qui fixe les règles. Ils le renomment ECMAScript.

// Avant ECMA
if (navigator.appName == "Netscape") {
    // code Netscape
} else {
    // code Microsoft
}

ECMAScript 1 à 3 (1997-1999)

La standardisation aide. ECMAScript 1 en 1997, suivi de ECMAScript 3 en 1999 qui ajoute try-catch.

// Exemple try-catch
try {
  // code
} catch (error) {
  // gestion de l'erreur
}

Silence Radio, puis ECMAScript 5 (2009)

Après 10 ans, ECMAScript 5 sort. Ajouts majeurs comme le strict mode, json.parse et json.stringify.

"use strict";
var obj = JSON.parse('{"name":"John"}');

ECMAScript 6 et + (2015)

ES6 débarque avec des fonctionnalités comme les promesses et fonctions fléchées.

// Fonction fléchée
const add = (a, b) => a + b;

Cadence Annuelle (2016+)

À partir de 2016, mise à jour annuelle. ES7, ES8, ES9, etc. jusqu'à ES13.

// ES13 (Exemple fictif)
const result = ???.latestFeature();

Tout ça pour dire, JavaScript a évolué et continue d'évoluer. Chaque année, on a un nouveau modèle de voiture, pareil pour JavaScript. Prochaine étape, comment JavaScript a changé de rôle récemment. À tout de suite !

Tu sais enfin ce qu'est ECMAScript ! Quand j'ai commencé à apprendre le JavaScript, je n'y comprenais rien, tu es déjà plus avancé que moi après 1 mois d'apprentissage 😅

Pour finir notre introduction... j'ai envie de te dire : "Pourquoi apprendre le JavaScript maintenant ?"

C'est la question qu'il faudrait se poser avant d'apprendre un langage.

▶️ Regarder la vidéo

🖼️ Ouvrir le schéma Excalidraw

🔓 Version écrite de la vidéo

Avant et Après ECMAScript 5

• Avant ECMAScript 5: JavaScript était juste un outil pour ajouter de l'interactivité aux sites web.
• Après ECMAScript 5: Utilisé partout - serveurs, mobiles, etc.

// Avant ES5, utilisation basique
alert("Hello, world!");

// Après ES5, fonctionnalités avancées
const arr = [1, 2, 3];
const doubled = arr.map(item => item * 2);

Librairies et Frameworks

• jQuery (2009): Révolution côté front-end.
• Node.js (2009): Créer des serveurs.
• Cordova (2009): Applications mobiles.

// Node.js exemple
const http = require('http');
const server = http.createServer((req, res) => {
  res.end('Hello Node.js');
});

Popularité Explosive

• En 2021, 13,8 millions de développeurs actifs.
• Le langage le plus utilisé par les développeurs.

// Exemple React (2011)
import React from 'react';
function App() {
  return <h1>Hello, React!</h1>;
}

Tendances et Emploi

• Demande par les recruteurs en 2023 est élevée.
• L'utilisation a doublé de 2008 à 2011, et triplé en 2014.

// TypeScript (croissance récente)
let variable: string = "Je suis une chaîne en TypeScript";

Impact des Crises

• Baisse après Covid: Besoin rapide de devs, puis chute.
• Future tendance: Croissance stable.

Métaphore: C'est comme une montagne russe. Ça monte, ça descend, mais la direction générale est vers le haut.

Librairies Actuelles

• TypeScript: 40 millions de téléchargements par jour.
• React: 30 millions de téléchargements par jour.

// Exemple Express.js
const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello Express'));

Conclusion

JavaScript est partout et sa demande augmente. Reste à jour, et tu auras un avenir brillant dans ce domaine.

⚠️ Je tiens à m'excuser, car je n'aime vraiment pas avoir des heures de vidéos. Juste qu'ici... je ne peux pas te faire "pratiquer" l'histoire du JavaScript sans te demander de faire un exposé sur le sujet.

Tu peux revenir à ces vidéos plus tard, mais il me semble important de te présenter ces concepts avant de commencer à coder.

TypeScript

L'autre question c'est : "Pourquoi apprendre le JavaScript alors que TypeScript est de plus en plus populaire ?"

Soyons sérieux : JavaScript est mort.

TypeScript l'a déjà remplacé.

Cependant, j'ai discuté avec ma communauté et je ne suis pas sûr qu'apprendre TypeScript en premier lieu soit intéressant, car c'est un "ajout".

👉 Si tu connais JavaScript, le passage à TypeScript est très simple. 👉 TypeScript n'est qu'une surcouche de JavaScript, il n'y a pas de "nouveau" langage à apprendre. 👉 Avoir les bases en JavaScript est plus important que d'apprendre TypeScript.

Et surtout... à la fin, tu auras une introduction complète à TypeScript "gratuitement" (c'est un bonus de la formation).

👀 Pourtant TypeScript permet de simplifier JavaScript !

Effectivement, je pense que pour certains profils, il peut être pertinent d'utiliser TypeScript dès le début, mais pas tous les profils.

Si tu penses qu'il faut commencer avec TypeScript, je t'invite à faire tous les projets en TypeScript, afin de te familiariser avec l'outil.

Runtime

Pour terminer, parlons de terme technique un peu confus que je vais utiliser durant la formation.

On va continuer dans la vidéo, pour que tu ne sois pas perdu lorsque j'utilise certains termes dans la suite du cours.

On va parler de la notion de runtime avec NodeJS, V8 ou encore JavaScriptCore.

Tu verras, c'est "complexe", mais rien d'alarmant.

▶️ Regarder la vidéo

🖼️ Ouvrir le schéma Excalidraw

🔓 Version écrite de la vidéo

Qu'est-ce que le Runtime ?

Le Runtime dirige l'environnement où ton code JavaScript s'exécute. C'est comme une salle qui accueille un artiste : le JavaScript. Chaque salle offre des équipements différents.

Runtime Navigateur

Comment ça marche

1. Tu vas sur un site web
2. Le serveur envoie la page HTML
3. Ton navigateur exécute ensuite le fichier JavaScript pour rendre la page interactive.

Exemple de code

// Dans le navigateur
document.addEventListener('DOMContentLoaded', function() {
  console.log('Page interactive');
});

Node.js

Particularités

Créé en 2009 (oui, dans la vidéo, je me suis trompé), Node.js permet de faire tourner du JavaScript hors du navigateur. Tu peux créer des serveurs, des API REST et plus encore.

Exemple de code

// Dans Node.js
const http = require('http');
const server = http.createServer((req, res) => {
  res.end('Salut');
});
server.listen(3000);

V8 et JavaScriptCore

• V8 est utilisé par Chrome
• JavaScriptCore est utilisé par Safari

Les deux sont similaires mais ont quelques différences. Par exemple, l'accès au DOM ou aux éléments de la page.

ECMAScript

JavaScript suit les normes définies par ECMAScript. C'est comme la feuille de route que l'artiste (JavaScript) suit pour ses spectacles.

Si tu es perdu, pas de problème. L'important, c'est la répétition et l'approfondissement au fil du temps.

• Schéma du runtime

Prêt ?

Avant de coder... on va prendre du temps pour définir comment faire du JavaScript avec, notamment, les différents runtime, l’environnement de travail et le setup de VSCode.