PLB CONSULTANT : 04. JavaScript - Programmation avancée

Programmation objet en JavaScript

Intérêts pour le développeur et les projets (lisibilité, maintenance, évolutions, etc.)

Les concepts de base (classe, méthode, propriété, objet)

Créer ses propres objets et utiliser des objets existants

Exemples concrets en JavaScript

Constructeur et Prototype

Contexte (this)

Mise en œuvre de l’héritage en JavaScript

Travaux pratiques

Réflexion sur le modèle de classes nécessaire pour programmer une calculatrice graphique.

Aller plus loin en POO avec JavaScript…

Les classes natives : String, Array, Object, etc.

Augmenter ou réécrire ?

Visibilité : propriétés publiques / privées

Visibilité : méthodes publiques / privées / privilégiées

Les différentes formes d'héritage

Appels parents : call / apply / bind

Méthodes et propriétés statiques

Méthodes abstraites et interfaces

Duck Typing et JavaScript

Programmation objet

Travaux pratiques

Développement d'une calculatrice graphique en JavaScript permettant de mettre en œuvre les concepts objets

Maîtriser le langage JavaScript

Types de données et subtilités (constantes, variables, énumération, etc.)

Les différentes formes d'incrémentation

Manipulation de flux binaire

Arrays : manipulation avancée

Règles de transtypage et comparaisons

Savoir utiliser les expressions régulières

Aspects avancés des fonctions en Javascript (contrôle des paramètres, etc.)

Gestion des erreurs : exceptions

Travaux pratiques

Utilisation des expressions régulières pour contrôler une saisie (caractères interdits, motifs acceptés)

EcmaScript et TypeScript

Vocabulaire et normes (Ecma, typescript, Ecmascript, Javascript, ES10/ES2019, etc.)

Les changements nets apportés de la version ES6

Les apports de TypeScript

Les Types et types spéciaux

Les interfaces, les classes, les fonctions, les mixins

Les génériques

Types avancés

Travaux pratiques

Réécriture de codes sources avec la nouvelle notation ES6

Présentation de JavaScript avec HTML5

Géolocalisation

Glisser / Déposer

Multi upload

Historique (pushstate)

Web GL

Web RTC

Fullscreen

API branchées mobile

Détecteur de proximité

Vibration API

Utilisation du gyroscope du smartphone

Accès à la webcam, au micro

Shadow DOM

Évolutions attendues…

Travaux pratiques

Mise en œuvre du drag and drop entre deux zones de l’écran dont l’aspect change en fonction de la localisation

Échange de données avec le serveur (Node.js)

Vocabulaire lié aux échanges (Ajax, JSON, Web services, APIs, …)

JSON et (dé)sérialisation

Traitements asynchrones (promesses, fetch, async/await, etc.)

Consommer des web services en Javascript

Un exemple de Javascript côté serveur avec Node.js

Les différentes formes de stockage des données (Local, Cookies, SQLLite, etc.)

Travaux pratiques

Mise en place d'une API Rest avec Node.js et ExpressJS

Développement d’un web service géodésique avec Node.js et consommation sous forme cartographique. On affiche sur une carte les parkings avec places libres dans un rayon de n km (le code client géographique Javascript est fourni par le formateur)

Performances, tests et débogage

Goulot d’étranglement des phases de chargement d’une page Web

Analyse fine des performances de bout en bout avec Navigation Timing API

Rendre votre code Javascript plus efficace avec Closure Compiler

Gestion mémoire et Garbage collector

Synthèse des outils de tests (JsUnit, SugarTest, etc.)

Tester efficacement la compatibilité multi navigateurs

Debugger avec Chrome Devtools et Firefox Developer

Travaux pratiques

Recherche de bugs et optimisation des performances avec les ChromesDevTools.

JQuery

Qu’est-ce que Jquery ?

Chargement de Jquery dans la page ou via un CDN

Bases syntaxiques de jQuery

Effets

Evènements

Manipulation DOM

AJAX

Travaux pratiques

Réalisation d’un questionnaire d’auto-évaluation avec Jquery (question textuelle et réponses proposées sous forme de boutons de différentes couleurs avec texte en surimpression)

Industrialisation du développement

Gestion de paquets et dépendances

Comment gérer les nombreuses librairies externes ?

Bien comprendre Node et NPM

L’outil yarn

Gérer son projet et ses paquets en ligne de commande

Construire son application et automatiser l'installation de dépendances

Industrialiser les process de compilation et mise en production de ses applications

Travaux pratiques

Installation de dépendances avec NPM

Bonnes pratiques en JavaScript

Mise en page du code avec ESLint

Imposer des règles de codage « propre »

Portée : encapsulation / namespace

Documenter votre code source « proprement » avec JSdoc

Travaux pratiques

Revue de code d’un projet professionnel