Développement Web JavaScript (M1)

M1 iWOCS - WEB-IHM - Université du Havre

Syllabus

Outils, protocoles, standards et langages du Web
Master 1 informatique iWOCS, Cours WEB-IHM, université Le Havre Normandie
45 heures étudiants : 18h de cours, 27h de TD/TP

Plan

Présentation et Objectifs
Organisation et plan du cours
Evaluation
Compétences
Prérequis
Aptitudes par évaluation

Présentation et Objectifs

Le développement Web fait appel à des technologies et des savoir-faire variés et en constante évolution. Il dépend principalement de l’évolution des standards et de leur implémentation dans les navigateurs. Si le HTML, le CSS et le JavaScript sont au centre de ces technologies depuis des dizaines d’années, leurs formes et leurs usages ont beaucoup changés et JavaScript est devenu un langage central, tant sur navigateur, que côté serveur.

Le but de ce cours est de présenter les outils et les technologies permettant le développement d’applications Web modernes. Ce cours passe en revue les standards, les langages et les technologies admises et utilisées de nos jours.

Ce cours comporte une large partie dédiée à la mise en pratique et à l’utilisation de JavaScript, avec l’utilisation de frameworks, le développement de services (API) Web, et la gestion de modèles de données pour le Web.

Organisation et plan du cours

Ce cours débute par une initiation au langage JavaScript (EcmaScript 6) et à ses paradigmes à la fois objets et fonctionnels. On étudie ensuite les nouvelles fonctionnalités des navigateurs et les API JavaScript associées (Fetch, Web Socket, Promise). Le cours s’intéresse ensuite aux aspects interfaces avec HTML, CSS et les préprocesseurs. Puis les notions de Web Services et de frameworks sont étudiés.

Le cours suit le plan suivant :

Les bases de JavaScript
Modèles objets et concepts avancés en JS
HTML & CSS
Technologies Web avancées
Web Frameworks (React)

Evaluation

Chaque partie du plan du cours fait l’objet d’un travail de mise en application sur machine. Une évaluation des compétences est faite à chaque TP ou après chaque rendu.

Un examen final sur table (sous forme de QCM) reprend toutes les notions vues et évalue toutes les compétences identifiées pour ce cours.

Compétences

BLOC 1: Utiliser et comprendre les techniques de programmation impératives, objet et fonctionnelles + ajouter le contexte de mobilisation de ces techniques
- Utiliser et comprendre les techniques de programmation fonctionnelles
  - Maîtriser les aspects fonctionnels de JavaScript
- Utiliser et comprendre les techniques de programmation objet
  - Maîtriser les modèles objet de JavaScript
BLOC 2: Développer une application WEB + ajouter le contexte de mobilisation de ces techniques
- Client
  - Maîtriser le routage dynamique de React Router
  - Maîtriser la gestion des états d’une application avec Redux
- Interfaces
  - Maîtriser la création d’interfaces graphiques (React, CSS, canvas)
- Serveur
  - Maîtriser l’architecture logicielle d’un projet (fichiers, classes, composants, dépendances)
  - Maîtriser l’écriture des tests et la couverture du code
- Utiliser un protocole de communication
  - Maîtriser l’écrire de code asynchrone
  - Maîtriser les WebSocket en JavaScript
BLOC 4: Gérer des projets professionnels et de recherche
- S’organiser et planifier
  - Savoir respecter les consignes d’un énoncé, une échéance
- Travailler en équipe et communiquer
  - Maîtriser un outil collaboratif de gestion de code (git)

Prérequis

Maîtrise des concepts de programmation objet et fonctionnelle
Maîtrise d’HTML et CSS
Maîtrise d’un framework Web classique (coté serveur), quelque soit le langage (Symfony, Django, Spring, Rails, etc.)
Connaissances de base en manipulation de lignes de commandes
Connaissances de base en outils de gestion de version : GIT

Aptitudes par évaluation

TP 1 (JS Basics) : Tests unitaires et JavaScript/TypeScript

D1 (Maîtrise des concepts techniques)
- D1.C2 :
  - Maîtriser les fondamentaux de JavaScript et TypeScript (types, immutabilité, programmation fonctionnelle de base).
- D1.C4 :
  - Écrire des tests unitaires pour valider le comportement d’un programme.
D4 (Compétences organisationnelles et collaboratives)
- D4.C1 :
  - Maîtriser un outil collaboratif de gestion de code (Git).
- D4.C4 :
  - Respecter les consignes d’un énoncé et livrer dans les délais impartis.

TP 2 (WebSocket) : Fonctionnalités avancées avec WebSocket et Canvas

D1 (Maîtrise des concepts techniques)
- D1.C4 :
  - Écrire des tests pour les fonctionnalités temps réel.
D2 (Développement d’applications Web)
- D2.C1 :
  - Créer des interfaces interactives avec Canvas et CSS moderne.
- D2.C2 :
  - Intégrer des communications bidirectionnelles avec WebSocket dans une application client-serveur.
- D2.C3 :
  - Organiser un projet complexe (structure, modules, dépendances).
D4 (Compétences organisationnelles et collaboratives)
- D4.C1 :
  - Maîtriser un outil collaboratif de gestion de code (Git).
- D4.C4 :
  - Respecter les consignes d’un énoncé et livrer dans les délais impartis.

**TP 3 (React) : Application React avancée

D1 (Maîtrise des concepts techniques)
- D1.C2 :
  - Maîtriser la gestion des états avec React Context et les hooks associés.
- D1.C4 :
  - Écrire des tests unitaires pour valider les composants React et la gestion des états.
D2 (Développement d’applications Web)
- D2.C1 :
  - Gérer le routage dynamique avec React Router.
  - Créer des interfaces utilisateur modernes avec React et une bibliothèque CSS.
- D2.C3 :
  - Organiser un projet complexe (structure, modules, dépendances).
  - Intégrer des appels asynchrones à des API et gérer les réponses avec async/await.
D4 (Compétences organisationnelles et collaboratives)
- D4.C1 :
  - Travailler en équipe avec Git et gérer les contributions via pull requests.
- D4.C4 :
  - Respecter les consignes d’un projet et livrer dans les délais impartis.

Examen Final

D1 (Maîtrise des concepts techniques)
- D1.C2 :
  - Maîtriser les concepts avancés de JavaScript et TypeScript.
  - Maîtriser la gestion des états avec React Context et des hooks.
- D1.C4 :
  - Écrire des tests unitaires et fonctionnels pour une application Web.
D2 (Développement d’applications Web)
- D2.C1 :
  - Créer des interfaces utilisateur complexes et responsive avec React et CSS moderne.
  - Gérer le routage et les transitions d’état avec React Router.
- D2.C2 :
  - Intégrer WebSocket pour des interactions temps réel et gérer les communications serveur-client.
- D2.C3 :
  - Écrire du code asynchrone robuste pour les appels API et la gestion des états.