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

• Présentation et Objectifs
• Organisation et plan du cours
• Evaluation
• Compétences
• Prérequis
• Évaluations et aptitudes
• Aptitudes par évaluation

Pré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 :

1. Les bases de JavaScript
2. Modèles objets et concepts avancés en JS
3. HTML & CSS
4. Technologies Web avancées
5. 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

Évaluations et aptitudes

Aptitudes par évaluation

JS Basics

• D1
  • D1.C4
    • Maîtriser l’écriture des tests et la couverture du code
• D4
  • D4.C1
    • Maîtriser un outil collaboratif de gestion de code (git)
  • D4.C4
    • Savoir respecter les consignes d’un énoncé, une échéance

Object Models

• D1
  • D1.C2
    • Maîtriser les modèles objet de JavaScript
  • D1.C4
    • Maîtriser l’écriture des tests et la couverture du code
• D2
  • D2.C3
    • Maîtriser l’architecture logicielle d’un projet (fichiers, classes, composants, dépendances)
• D4
  • D4.C1
    • Maîtriser un outil collaboratif de gestion de code (git)
  • D4.C4
    • Savoir respecter les consignes d’un énoncé, une échéance

WebSocket

• D2
  • D2.C1
    • Maîtriser la création d’interfaces graphiques (React, CSS, canvas)
  • D2.C2
    • Maîtriser les WebSocket en JavaScript
  • D2.C3
    • Maîtriser l’architecture logicielle d’un projet (fichiers, classes, composants, dépendances)
• D4
  • D4.C1
    • Maîtriser un outil collaboratif de gestion de code (git)
  • D4.C4
    • Savoir respecter les consignes d’un énoncé, une échéance

React + ReactRouter + Redux

• D1
  • D1.C2
    • Maîtriser les aspects fonctionnels de JavaScript
    • Maîtriser la gestion des états d’une application avec Redux
  • D1.C4
    • Maîtriser l’écriture des tests et la couverture du code
• D2
  • D2.C1
    • Maîtriser le routage dynamique de React Router
    • Maîtriser la création d’interfaces graphiques (React, CSS, canvas)
  • D2.C2
    • Maîtriser les WebSocket en JavaScript
  • D2.C3
    • Maîtriser l’architecture logicielle d’un projet (fichiers, classes, composants, dépendances)
    • Maîtriser l’écrire de code asynchrone
• D4
  • D4.C1
    • Maîtriser un outil collaboratif de gestion de code (git)
  • D4.C4
    • Savoir respecter les consignes d’un énoncé, une échéance

Examen

• D1
  • D1.C2
    • Maîtriser les aspects fonctionnels de JavaScript
    • Maîtriser les modèles objet de JavaScript
    • Maîtriser la gestion des états d’une application avec Redux
• D2
  • D2.C1
    • Maîtriser le routage dynamique de React Router
    • Maîtriser la création d’interfaces graphiques (React, CSS, canvas)
  • D2.C2
    • Maîtriser les WebSocket en JavaScript
  • D2.C3
    • Maîtriser l’écrire de code asynchrone