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
etconst
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