Web Apps Modernes
Née à l’automne 2012, la formation Web Apps Modernes est une combinaison à très, très forte valeur ajoutée.
Sur 4 jours consécutifs, elle permet de découvrir et pratiquer dans un contexte intégré cohérent une foule
de compétences et technologies de pointe autour de JavaScript.
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
Besoins matériels & logiciels
- 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.
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
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 convention | Tarif unitaire |
---|---|
1 à 2 personnes | 1 800 € HT |
3 à 5 personnes | 1 620 € HT |
À partir de 6 personnes | 1 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