top of page

Développer des applications Web Full JavaScript

Vous apprendrez à développer des applications Web multipages ou monopages en JavaScript. Les frameworks utilisés seront Angular pour la partie client et Node.js pour la partie serveur. Les bases de données NoSQL seront évoquées au travers de MongoDB ainsi que d'autres frameworks utiles comme Express JS.

4 jours - 28h00

Objectifs pédagogiques

À l’issue de la formation, le participant sera en mesure de :

  • 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.

Public concerné

Développeurs et chefs de projets.

Prérequis

Bonnes connaissances des fondamentaux du langage JavaScript (notamment de la notion de callback) ainsi que des notions affirmées de HTML et CSS.

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.

Modalités pratiques
Exercice

Une application fil rouge sera construite, en l'enrichissant progressivement des concepts abordés.

Méthodes pédagogiques;
​

Une application fil rouge sera construite, en l'enrichissant progressivement des concepts abordés.

Modalités d'évaluation

Le formateur évalue la progression pédagogique du participant tout au long de la formation au moyen de QCM, mises en situation, travaux pratiques…

Le participant complète également un test de positionnement en amont et en aval pour valider les compétences acquises.

Formez-Vous

Contactez-nous pour en savoir plus !

CONTACT

Contactez-nous pour en savoir plus

bottom of page