Formation React PWA

Programme

Mise en place

• Outillage : écriture, linting, transpiling et build, tests, débogage
• Create React App
• 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

• Fonctions composants
• PropTypes (si TypeScript : état de l’art du typage de fonctions composants)
• 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 ?
• 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

Hooks

• Principe des hooks
• Hooks vs. classes

L’état local en React

• Principes
• Bien comprendre useState
• Faut-il synchroniser depuis les props, et comment le faire intelligemment ?

Redux et Redux Toolkit

• É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 avec le hook useEffect
• Routes « privées »

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
• Mise en œuvre : installation, shortcuts, utilisation de Web Share

Témoignages

Formateur

Maxime Bréhin

Ingénieur diplômé en 2006, Maxime a peiné 5 ans dans un environnement Java/Subversion dans le consulting et la banque/finance…

Après un passage d’un an en Australie en 2009, il se tourne vers des technologies bien plus agréables : Ruby, Rails et Git. C’est en 2010 qu’il travaille pour la première fois avec Christophe, déjà en tant qu’ingénieur R&D pour la conception et la mise en œuvre d’une solution e-commerce.

En 2012, il lui succèdera comme Directeur Technique, pour finalement le rejoindre chez DI 3 ans plus tard.

Maxime est ingénieur R&D chez Delicious Insights.

• LinkedIn
• Twitter @mbrehin
• GitHub mbrehin
• YouTube

Public visé

La formation React PWA s’adresse principalement aux développeur·se·s 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 décente de JavaScript est nécessaire ; tout·e développeur·se web front utilisant déjà quotidiennement JavaScript, idéalement au-delà d’un usage principalement basé jQuery, a normalement les connaissances nécessaires.

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 ; la lecture ou le visionnage de notre série d’articles et vidéos JS Idiomatique est fortement conseillée.

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. En pratique, vous aurez juste besoin de :

• 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.

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.

Pré-requis

Cette formation n’a pas de pré-requis (acquis exigés contrôlables par tests, diplômes, certifications…).

Moyens pédagogiques & techniques

• Toutes nos formations sont synchrones, y compris les sessions distancielles : on est « en direct », pas sur la base de vidéos pré-enregistrées.
• Nous n’envisageons pas pour le moment de proposer à nouveau des sessions inter-entreprises présentielles avant, au plus tôt, le 1er avril 2022.
• Un riche support de cours est fourni, qui sert de fil conducteur. Il contient généralement une présentation (diapos) détaillée et des supports de départ dédiés pour chaque partie pratique.
• Les apprenant·e·s peuvent poser leurs questions à tout moment.
• Les sessions alternent théorie et pratique par intervalles courts (de 5 minutes à 1 heure)
• Les parties pratiques reposent sur des mises en situation concrètes (ex. code source de départ, dépôt Git de départ, exercice en ligne avec énoncé et documentation, etc.)
• Les parties pratiques sont réalisées soit en individuel, soit en sous-groupes susceptibles de varier d’un exercice à l’autre, afin de tirer parti du pair programming et mettre en avant la collaboration.
• Les sessions distancielles utilisent une réunion périodique Zoom accessible via le client installable ou le client pur web (sans installation ni privilèges spécifiques). Elles tirent parti notamment des fonctionnalités de vignettes vidéo, partage d’écran, de discussions, de la découpe en sous-salles et potentiellement des quizzes et annotations / tableaux blancs.

Moyens d’évaluation et de suivi

• Chaque demi-journée de formation fait l’objet d’un émargement (numérique ou papier). Pour les sessions distancielles, si un·e apprenant·e ne fournit pas son émargement complet dans les temps, les journaux de connexion Zoom feront foi.
• Chaque première période dans la journée commence par le « debrief » : pendant environ une demi-heure, on fait collectivement ré-émerger les connaissances abordées pour la première fois lors de la journée précédente, afin de remettre tout le monde « dans le bain », de consolider la compréhension et de renforcer l’entente de groupe.
• Tout au long de la formation, la validation des acquis se fait par la réalisation réussie des parties pratiques (exercices, mini-projets, labos, mises en situation diverses, etc.). Des quiz interactifs complètent parfois la mise en pratique. Le formateur / la formatrice reste disponible pour toute question ou tout point de blocage durant les parties pratiques.
• Si un·e apprenant·e manifeste une difficulté, le formateur ou la formatrice peut choisir de l’accompagner spécifiquement sur son poste de travail le temps nécessaire, y compris lors de sessions distancielles grâce aux fonctionnalités dédiées de Zoom (assistance individuelle / one-to-one).
• À l’issue de la session, chaque apprenant·e peut recevoir son attestation de fin de formation (sur demande), et pour les sessions distancielles, nous émettons un certificat de réalisation proforma, utile notamment pour la prise en charge par un financeur tiers (ex. OPCO).
• Une fois la formation terminée, chaque apprenant·e reçoit un lien vers un questionnaire d’évaluation à chaud, qui lui permet notamment d’exprimer son ressenti sur l’atteinte (effective ou à court terme) des objectifs de la formation.

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.

Besoins matériels et 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.

• Les formations React PWA nécessitent quelques installations préalables sur votre machine : toutes les instructions sont ici.

Modalités d’inscription et délais d’accès

Quel que soit le type de session que vous visez (intra- ou inter-entreprises, distanciel ou présentiel), la demande initiale (de devis, de convention…) se fait en ligne sur la page de la formation souhaitée. Vous trouverez ci-avant des liens de demande de convention pour chaque session inter-entreprises ayant de la disponibilité, un bouton de demande de proposition pour une session intra-entreprise, et pour toute autre question, un bouton de contact plus bas sur cette page. Les formulaires en ligne sont à privilégier car ils accélèrent le traitement en évitant la multiplication des échanges e-mails afin d’obtenir l’ensemble des informations nécessaires.

Pour une session inter-entreprise déjà planifiée, nous répondons aux demandes de devis et conventions de formation (qui valent devis) dans un délai maximum de 48h ouvrées (et le plus souvent, en quelques minutes). Pour des sessions intra-entreprise, nous vous recontactons en général sous 72h ouvrées pour affiner votre besoin et vous préparer une proposition adaptée au mieux.

Les e-mails fournissant les devis et conventions de formation, ainsi que les pages de nos formations, fournissent un lien vers un questionnaire en ligne de positionnement des apprenant·e·s : ces informations doivent nous parvenir au plus tôt, idéalement avant signature, afin que nous puissions valider la bonne adéquation de la prestation à son public.

Les convocations partent par e-mail au plus tard 7 jours avant le début de la session, date à laquelle la décision éventuelle d’annulation (typiquement en raison d’un quorum de participants non-atteint pour de l’inter-entreprises) est prononcée. Si la session est confirmée avant ce délai, et à votre demande, nous pouvons vous envoyer les convocations plus tôt.

Pour une session inter-entreprise, il est possible de s’inscrire en ligne (demande de convention et renvoi par e-mail de la convention signée) jusqu’à la veille du début de la session, sous réserve que la disponibilité demeure. Si le délai nominal d’envoi de convocation est déjà passé, celle-ci est envoyée immédiatement à réception de la convention signée.

Toutefois, dans le cas d’un client particulier (personne physique), les délais légaux de rétractation peuvent exiger une contractualisation suffisamment en amont de la session. Ces délais sont de 10 jours calendaires pour une session présentielle, et 14 jours calendaires pour une distancielle. Afin de permettre une inscription de dernière minute aux clients personnes physiques, celles-ci ont la possibilité de renoncer explicitement à leur droit de rétractation lors d’une demande de convention en ligne tardive.

En cas de subrogation de paiement (OPCO, Pôle Emploi, Région, UE, etc.) il est impératif que nous recevions l’accord de financement avant le dernier jour de la formation. En cas de financement refusé ou partiel, le client est redevable de plein droit du reliquat de prise en charge.

Vous pourrez retrouver toutes les informations sur les modalités d’inscription et de paiement, l’annulation et le remboursement dans nos Conditions Générales de Vente.

Accueil PSH / PBS

La loi du 5 septembre 2018 pour la « liberté de choisir son avenir professionnel » a pour objectif de faciliter l’accès à l’emploi des personnes en situation de handicap.

Notre organisme a à cœur de donner à tou·te·s les mêmes chances d’accéder à (ou de se maintenir dans) l’emploi.

Nous pouvons adapter certaines de nos modalités de formation : pour cela, étudions ensemble vos besoins.

N’hésitez pas à contacter notre Référent Handicap, Christophe Porteneuve, par e-mail ou téléphone.

N’hésitez pas à contacter notre Référent Handicap, Christophe Porteneuve, par e-mail à handicap@delicious-insights.com ou téléphone au 06 62 05 96 56.