Formation Web Apps Modernes

Cette formation est donnée 100% à distance

Mise à jour le 29 novembre 2022, 12:00

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.

  • ES2015+ (dont modules ES)
  • Dépendances npm
  • React et son écosystème
  • Redux
  • Webpack
  • Développement test-first (TDD)
  • Offline-first
  • Stockage côté client
  • Web Notifications
  • Build et déploiement statique

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

Public visé

La formation Web Apps Modernes 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 ; 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. 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…).

Programme

  1. 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
  2. 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
  3. Créer un composant réutilisable

    • Développement en isolation avec StoryBook
    • Fonctions composants
    • PropTypes
    • Valeurs par défaut de props
  4. 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
  5. Listes et conditions en React

    • Le recours à .map
    • Pourquoi la prop technique key ?
    • Utiliser && et ?:
    • Nœuds ignorés en JSX
  6. Hooks

    • Principe des hooks
    • Hooks vs. classes
  7. 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
  8. 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
  9. Les formulaires en React

    • Harmonisations par rapport à HTML et au DOM
    • Champs contrôlés vs. non-contrôlés
  10. 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 »
  11. L’état local en React

    • Principes
    • Bien comprendre useState
    • Faut-il synchroniser depuis les props, et comment le faire intelligemment ?
  12. 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
  13. Déploiement statique

    • Applications 100% côté client
    • Hébergeurs statiques
    • Exemple de déploiement sur Netlify
  14. 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

Un p'tit document ?

Imprimer ou télécharger en PDF le programme et les infos

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.
  • Les sessions s’étalent sur 4 jours consécutifs pour 28h de cours.
  • Les horaires vont généralement de 9h45 à 12h45 et de 14h à 18h.
  • Les formations vont de 3 à 10 apprenant·e·s.

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·elles 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.

Formateurs

Christophe Porteneuve

Christophe Porteneuve

Christophe conçoit des pages web depuis 1995. Co-créateur du premier portail JSP en Europe, en 1999, il passe par J2EE avant de tomber dans Ruby, Rails puis Node.

Auteur du best-seller « Bien développer pour le Web 2.0 » chez Eyrolles, il a également écrit la référence « Prototype and script.aculo.us » chez Pragmatic Programmers, des articles dans divers magazines en ligne (notamment le très respecté A List Apart), et il est speaker pour plusieurs conférences petites et grosses.

En France, Christophe jouit d’une solide réputation d’expertise dans les univers du web front (notamment JavaScript), de Node.js, de Git et de Rails.

Christophe est le fondateur et directeur technique de Delicious Insights.

Maxime Bréhin

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.

Prochaines sessions

(Sauf indication contraire, chaque date dispose d’au moins 4 places encore libres)

Tarifs

Vous inscrivezTarif unitaire
1 à 2 apprenant·e·s1 800 € HT
3 à 5 apprenant·e·s1 620 € HT
6+ apprenant·e·s1 440 € HT

(Les éventuelles promotions en cours ne sont pas reflétées ici, mais seront automatiquement appliquées lors de votre demande de convention.)

Financez tout ça grâce au FNE formation étendu !

Besoin d’une intra-entreprise ou sur-mesure ?

Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux, ailleurs ou à distance, décrivez-nous votre besoin en détail.

Habituellement, le coût pédagogique d’une intra pour cette formation, forfaitaire jusqu’à 10 apprenant·e·s, est de 12 000 € HT.

Demander ma formation intra / sur mesure

Besoins matériels et logiciels

  • Disposer d'un ordinateur de performance suffisante (à fournir pour du présentiel intra)
  • En distanciel, cet ordinateur doit être équipé d'une webcam, d'un micro et d'une sortie audio
  • En distanciel, disposer d'une connexion internet avec un débit minimal descendant/montant de 1Mbps, et idéalement au moins 5Mbps.
  • En distanciel, 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 Web Apps Modernes nécessitent quelques installations préalables sur votre machine : toutes les instructions sont ici pour OSX, Linux et Windows.

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.

Avis & Satisfaction

  • 887 apprenant·e·s
  • 394 avis
  • 88% de taux de satisfaction en Pédagogie
  • 98% de taux de satisfaction en Expertise
  • 85% de taux de satisfaction en Moyens

Pôle Emploi signale un taux de retour à l’emploi correct après cette formation.

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.

Une question, une angoisse ?

Détendez-vous, on a sûrement des réponses pour vous rassurer et éclaircir les choses. Alors parlons-en !

Contactez-nous

Contactez-nous par e-mail à contact@delicious-insights.com ou téléphone au 06 62 05 96 56.

Témoignages

  • J’ai eu la chance de participer à la formation JS Total. Ces 4 jours intensifs permettent de balayer à la fois les fondamentaux du Javascript ainsi que les bonnes pratiques et les outils récents.

    Plus qu’un cours théorique, le formateur nous apporte également son retour d’expérience sur ses projets qui reflètent en tous points les problématiques actuelles sur le web.

    Au-delà d’une formation de qualité, le formateur fait preuve de beaucoup de pédagogie pour transmettre avec passion et dans la bonne humeur !

    Je recommande vivement les formations Delicious Insights.

  • Excellents formateurs dans un cadre agréable, très bonne animation de groupe, contenu riche et rythme très soutenu. Je recommande cette formation.

  • Très bonne formation, j’ai beaucoup appris. Je me suis bien eclaté !

  • Je pense que ce doit être l’une des formations les plus avancées sur le sujet en France.

  • Niveau technique et pédagogique excellent.

  • La formation était de grande qualité […] J’ai beaucoup apprécié le contenu et la pédagogie du formateur.

  • Expérience du formateur très appréciable. De même que l’environnement de réalisation de la formation.

  • J’ai rarement suivi de formation aussi passionnante que celle-ci. L’accessibilité, l’enthousiasme et l’énergie de Christophe sont très stimulants ! Le rythme est élevé mais c'est pour la bonne cause : donner un contenu et des conseils très nombreux sur tout ce qui touche au développement web frontend.

    Guillaume Salicis – Freelance
  • Excellente formation ! À la hauteur des attentes avec un formateur très professionnel et pédagogue. On apprend dans une ambiance au top. À recommander !

    Tristan Deloris – Companeo