Web Apps Modernes

Faire du web front moderne avec une productivité au top : Webpack, ES2015+, React, Redux, TDD, Hot reloading, offline-first… vers les PWA !

Objectifs

La formation Web Apps Modernes (anciennement JS Total) vise à permettre aux apprenant·e·s de :

  • Utiliser du JS moderne avec ES2015 (même sur IE9)

  • Internaliser ce qui constitue aujourd’hui une webapp moderne et ce qu’elle peut faire

  • Mettre en œuvre un cycle de développement test-first

  • Développer de façon modulaire, découplée, facile à tester

  • Préparer la montée à l’échelle en complexité de leurs projets

  • Mettre en place un cycle de feedback instantané pendant le développement

  • Favoriser la mobilité, ainsi que le bon fonctionnement hors-connexion

  • Rendre leurs webapps installables et sans cesse plus proches d’un comportement natif

Pré-requis

  • Disposer d'un ordinateur de performance suffisante, correctement configuré (notamment selon l’éventuel guide d’installation associé à la formation et indiqué au plus tard en convocation)
  • Cet ordinateur doit être équipé d'une webcam, d'un micro et d'une sortie audio
  • Disposer d'une connexion internet avec un débit minimal descendant/montant de 1Mbps, et idéalement au moins 5Mbps (tester ici)
  • Pouvoir exécuter Zoom, soit en tant que logiciel installé, soit via le client 100% web. Le bon fonctionnement du client installé peut être testé ici.

  • Connaître les fondamentaux du HTML tels que décrits ici

  • Connaître le fonctionnement des éléments fondamentaux du langage JavaScript : variables, types de données, boucles, fonctions, bibliothèque standard du langage telle qu'elle était au moins au niveau d'ES3 (1999).

  • Avoir utilisé JS en production dans au moins 10 scénarios différents.

Programme

ES2015+

  • Rappels sur l’historique ES3, ES5, ES2015, ES2016…

  • Compatibilité native back et front

  • Transpiling avec Babel

  • Expérimentation interactive et ressources d’approfondissement

  • Litéraux objets et nouvelle syntaxe de classes

  • Déstructuration

  • Rest et Spread

  • Valeurs par défaut

  • Template strings et Tagged template strings

  • let et const

  • Fonctions fléchées et préservation de portée lexicale

  • Modules ES6

  • Promesses natives

  • ES2017 : async / await

  • ES.NEXT : décorateurs

Mise en place

  • Outillage : écriture, linting, transpiling et build, tests, débogage

  • Mise en place du Hot Module Replacement

  • Présentation de l’appli qui va être développée

  • Présentation du socle technique fourni

Découvrir React

  • Philosophie et principes généraux

  • Un premier rendu

  • JSX ≠ HTML (ou même XML)

  • Premiers composants

  • Distinguer entre DOM réel et DOM virtuel

  • React Dev Tools

Créer un composant réutilisable

  • Développement en isolation avec StoryBook

  • Fonctions composants

  • PropTypes

  • Valeurs par défaut de props

Tester des composants

  • Écosystème et concepts de tests automatisés

  • Tirer le meilleur parti de Jest

  • Choisir ses utilitaires de test React

  • Test-first ou test-after ?

  • Enzyme

  • Assertions avancées chaînables avec Chai

  • Utilisation raisonnée des snapshots

Listes et conditions en React

  • Le recours à .map

  • Pourquoi la prop technique key ?

  • Utiliser && et ?…:

  • Nœuds ignorés en JSX

Redux

  • État applicatif ou état local ?

  • Problématiques classiques de gestion d’un état applicatif

  • Philosophie et concepts de Redux

  • Réducteurs de tranche vs. réducteurs de fonctionnalité

  • Écriture des réducteurs de tranche en TDD / test-first

  • Assemblage des tranches et composition de réducteurs

  • Connexion propre du store à l’application React

  • Redux Dev Tools, une puissance hallucinante

  • Time-travel debugging

Les événements en React

  • Différences avec la gestion DOM native

  • Performance et DX confortable : le meilleur des deux mondes

  • Les différentes manières de définir un gestionnaire d’événements

  • Éviter les rendus superflus

Les formulaires en React

  • Harmonisations par rapport à HTML et au DOM

  • Champs contrôlés vs. non-contrôlés

Routage côté client

  • Principes

  • Quel routeur choisir ?

  • Mise en œuvre pour nos besoins

  • Appliquer des effets de bord au routage

  • Routes « privées »

L’état local en React

  • Principes

  • Bien comprendre setState

  • Faut-il synchroniser depuis les props, et comment le faire intelligemment ?

Offline-first

  • Être en ligne : une amélioration progressive

  • Persister des données côté client et les réhydrater au chargement

  • AppCache vs. ServiceWorker

  • Plugins Webpack

  • Résister à du hors-ligne temporaire pour nos appels API

  • Pouvoir charger l'application alors même qu'on est hors-ligne

Déploiement statique

  • Applications 100% côté client

  • Hébergeurs statiques

  • Exemple de déploiement sur Netlify

Progressive Web Apps

  • Qu’est-ce qu’une PWA ?

  • Indicateurs techniques

  • Manifeste applicatif W3C

  • Plateformes cibles (mobiles, tablettes et desktop)

  • Modalités de déclenchement de l'installation

  • Démonstration

Moyens pédagogiques et techniques, suivi et appréciation

Les apprenant·e·s reçoivent, à chaque début de période, un accès :

  • aux diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi,

  • au dépôt de départ pour le développement de l’application « fil rouge ».

Après la session, ils reçoivent par ailleurs :

  • un e-mail de debrief très fourni et riche en ressources,

  • une archive de référence, contenant les slides de toute la formation, la codebase finalisée intégralement documentée et testée, et diverses ressources complémentaires.

L’évaluation des acquis se fait en cours de formation, au moyen de la réussite des étapes successives de développement de l’application « fil rouge » et de la bonne exécution des tests automatisés réalisés ou fournis.

Demander une convention de formation Prochaines sessions de formation

Tarifs indicatifs

Apprenant·e·s de la conventionTarif unitaire
1 à 2 personnes1 800 € HT
3 à 5 personnes1 620 € HT
À partir de 6 personnes1 440 € HT

Vous souhaitez une formation intra entreprise ou sur mesure ?

Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux ou dans nos locaux.

Demander ma formation intra / sur mesure