Objectifs de la formation

• Maîtriser les concepts de programmation asynchrone, fonctionnelle et réactive de Javascript
• Développer une application cliente SPA avec Angular et Material Design
• Développer une application serveur et une REST API en Javascript avec Node, Express
• Ajouter une couche de persistance de données via une approche NoSQL avec MongoDB
• Déployer en production avec Docker une application Full Javascript

---

Programme de la formation

Rappels de fondamentaux

• Prototype, hoisting, ES5/6, binding, get/set.
• Programmation asynchrone : event loop, appel bloquant, promise, async-await.
• Primitives d’IHM (accès au DOM, gestion des événements, ajax).
• Programmation réactive : observable, subjet, behaviorSubject (RxJS).
• Typescript : programmation typée et modulaire. Décorateurs. Generics.

Travaux pratiques

Application web qui affiche le contenu d’un BehaviorSubject en temps réel. (ex : chronomètre)

Node.js

• Les commandes : Node, npm, npx.
• Les fichiers : package.json, node_modules, etc.
• Modules global et local, versions semver.
• Contrat d’API Node asynchrone.
• Des outils pratiques : Nodemon, ts-node, webpack.

Travaux pratiques

Installation d’un environnement de développement. Construction d’un site http « hello-world » en JS, sans express.

ExpressJS

• RequestListener, Middleware, Chaining de middleware.
• Construction d'un squelette d'application.
• Configuration d'Express et de l'application.
• Le rendu de vues avec EJS.
• Mise en place d'une API REST : CRUD sur http.
• Implementation d’un serveur express en Typescript.

Travaux pratiques

Réalisation d’un serveur express avec templates EJS et une API web service JSON de base, et une API REST.

Angular

• Digestion, intérêt des observables, behaviorSubject.
• Routes et formulaires réactifs.
• Requêtes http.
• Utilisation de layout et widget sur étagère : Angular Material.
• Construction du livrable de production.
• Démarrer un projet avec Angular cli.
• Présentation des artefacts.
• Concept de Databinding.

Travaux pratiques

Réalisation d’un client Angular SPA avec Angular Material permettant de faire un CRUD sur une ressource.

MongoDB

• Installation de Mongo, normale, et via docker.
• Installation de Mongo compass (client intuitif).
• Exploration des concepts de Mongo : collections, documents, etc.
• CRUD sur Mongo depuis Node.
• REST API avec Middleware express exposant une collection Mongo.

Travaux pratiques

Ajout d'une couche de persistance complète à l'application précédente.

Déploiement d’une application Full JavaScript

• Architecture d’une application déployée : reverse proxy, HTTPS, load balancer.
• Liste des principales méthodes de déploiement : Docker/Kubernetes, PM2, BaaS (Netlify, Firebase, etc.).
• Rendre une application Full Javascript déployable : utilisation des variables d’environnement. Librairie dotenv.
• Outils de gestion de production PM2.
• Fichier d’ecosystème de PM2 : ecosystem.config.js.

Travaux pratiques

Utiliser PM2 pour démarrer en mode production l’application précédente.