JavaScript avancé : Maîtriser les techniques modernes pour des applications full-stack

Jour 1 :

Découvrir les dernières évolutions de Javascript et choisir la version la plus adaptée à son besoin

• Principes et nouveautés de ES2024
  • Syntaxes de bases d'écriture du langage
  • Mots-clés (let, const)
  • Fonctions
  • Les fonctions fléchées
  • Les fonctions de manipulation de données : map, filter, forEach…
  • La programmation orientée objet
  • Définition des classes
  • L'opérateur new
  • Modification d'un objet : getter / setter
• Autres nouveautés et rétrocompatibilité (compiliers, polyfills)
• Exemples de travaux pratiques : le formateur montre la création d'une page HTML simple (ou page/site existant) avec l'utilisation de balises, d'éléments de style (CSS). Une touche de javascript permet d'identifier le rôle du langage et son utilisation, ainsi que sa relation avec le DOM.

Maîtriser la syntaxe moderne

• Gestionnaires de builds et dépendances
  • Npm et npm install
  • Le cycle de vie de npm
  • Utilisation des scripts npm
• Les outils de haut niveau vite, webpack, babel
• Les outils de débogage
• Exemple de travaux pratiques : le formateur initialise un projet avec npm auquel il ajoute des commandes de build et des dépendances. Il utilise les outils de débogage. Les participants reproduisent la manipulation pour comprendre le fonctionnement et la syntaxe. Le formateur peut vérifier le résultat obtenu par les participants pour valider l'exercice.

Jour 2 :

Manipuler les fonctions avancées de Javascript (le code, le modèle objet, les modules, les itérations, etc.)

• Principes et nouveautés de ES2024
  • Syntaxes de bases d'écriture du langage
    • Mots-clés (let, const)
    • Fonctions
    • Les fonctions fléchées
    • Les fonctions de manipulation de données : map, filter, forEach…
  • La programmation orientée objet
    • Définition des classes
    • L'opérateur new
    • Modification d'un objet : getter / setter
    • Héritage
    • Rétrocompatibilité
    • Table des compatibilités
    • Polyfills
    • Compilateurs
• Exemples de travaux pratiques : le formateur réalise et explique différentes syntaxes que les participants reproduisent et exécutent sur leur poste de travail.

Sécuriser son site

• Les technologies de rendu côté client
  • Graphisme avec Canvas
  • La 3D avec WebGL et js
  • La dataviz avecjs
• Le traitement de données côté Client
  • Le stockage local : SessionStorage, LocalStorage, IndexedDB
  • Les traitements en arrière-plan : Web Workers, Service Workers
• Exemple de travaux pratiques : le formateur utilise l'API Three.JS pour afficher un modèle 3D simple, ou un modèle plus complexe issu d'un logiciel de modélisation 3D comme Blender. Les participants réalisent une page HTML qui intègre une technologie de rendu avancée (3D ou datavisualisation).

Jour 3 :

Mettre en pratique la Programmation Orientée Objet avec les Web Components

• La notion de SPA (Single Page Application)
• Les problématiques de structure des applications HTML modernes avec les SPA
• L'utilisation de l'API Custom Elements pour créer des composants réutilisables
• Exemple de travaux pratiques : le formateur utilise l'API DOM Custom Elements pour un composant simple (par exemple un composant pour l'affichage de données météo). Le composant peut être réutilisé (par exemple afficher les prévisions météo sur une semaine avec 5 à 7 occurrences du composant). Les participants réalisent une nouvelle page HTML ou complètent leur page précédente en intégrant des composants.

Mettre en œuvre la librairie JQuery

• Les limites du Javascript natif
• Identifier et utiliser les librairies utiles
• Identifier le rôle des principaux frameworks
• Exemple de travaux pratiques : en fonction des attentes et des échanges avec les participants, le formateur présente l'utilisation d'une ou deux librairies JS. Les participants reproduisent les interactions présentées sur leur poste de travail.

Appréhender la notion de Javascript côté serveur avec Node.js

• Introduction à js
• L'environnement js
• Le temps réel avec les websockets et la librairie io
• Exemple de travaux pratiques : le formateur initialise un projet Node.JS et installe la librairie Socket.IO (web sockets). Il crée ensuite le client websocket et teste la communication temps réel client-serveur. Les participants créent une application Node.JS pour mettre en place une communication temps réel avec une application JS. Les participants peuvent tenter de réaliser un tchat ou un mini jeu pour mettre en place des interactions côté client et appliquer les connaissances JS acquises tout au long de la session de formation.