Web Apps Modernes

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