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 :

  • Apprivoiser le JS moderne avec ES2015 (même sur IE9)
  • Internaliser ce qui constitue aujourd’hui une webapp moderne et ce qu’elle peut faire
  • Appréhender 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
  • Mettre l’accent sur la mobilité, ainsi que sur le bon fonctionnement hors-connexion
  • Rendre leurs webapps installables et sans cesse plus proches d’un comportement natif

Public visé

La formation Web Apps Modernes s’adresse principalement aux développeurs web front amenés à développer des applications web complexes et optimisées, capables éventuellement de fonctionner intelligemment sur tous types de périphériques (desktop, smartphones, tablettes, bornes interactives…).

Une connaissance minimale de JavaScript est nécessaire, même si les aspects avancés seront revus en profondeur le 1er jour ; tout développeur web front utilisant déjà quotidiennement JavaScript, même si c’est essentiellement au travers de jQuery, a normalement les connaissances nécessaires.

C’est particulièrement vrai depuis février 2016, puisque la version 2016 de Web Apps Modernes utilise exclusivement ES2015+, et que très peu d’apprenant·e·s auront déjà une connaissance de cette dernière version du langage : le premier jour explore donc celui-ci en détails, et nivelle l’auditoire par le haut.

Toutefois, il peut être utile de « préparer le terrain » en amont pour fluidifier l’acquisition de connaissances une fois en formation. Les futur·e·s apprenant·e·s auront alors tout intérêt à puiser dans cette liste de contenus de qualité compilée par Christophe ; pour ES2015, une liste spécifique existe.

Pour le reste, une connaissance « standard » de la couche client est évidemment attendue : HTML et CSS, donc. Pas besoin d’être super calé(e) en HTML5 ou CSS3 : même si on s’en servira, ce n’est pas le cœur du sujet et la formation n’a donc pas de prérequis particuliers dans ces domaines.

Il n’est par ailleurs pas nécessaire d’être déjà l’aise avec les systèmes de tests unitaires et d’intégration, ou de documentation intégrée. Si vous avez déjà travaillé avec de tels systèmes (JUnit, Test::Unit, RSpec, Cucumber, Capybara, Selenium, etc.) tant mieux, aborder ces problématiques dans l’univers JavaScript n’en sera que plus facile. Mais les concepts correspondants seront tous détaillés au fur et à mesure de leur mise en œuvre.

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, en début de session, l’ensemble des diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi du plan de cours.

Après la session, ils reçoivent par ailleurs, avec un e-mail de debrief très fourni et riche en ressources, une archive de référence, contenant les codebases finalisées, entièrement documentées et testées, les slides de toute la formation et diverses ressources complémentaires.

Demander une convention de formation Prochaines sessions de formation

Tarifs indicatifs

Apprenant·e·s de la conventionTarif unitaire
Pour tous1 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