Formation Storybook

Cette formation Storybook vous permettra de concevoir, documenter et tester vos composants UI de manière efficace et professionnelle.

En deux jours, vous découvrirez comment intégrer Storybook dans un projet front-end (React, Vue ou Angular) et l’utiliser pour optimiser le développement collaboratif de votre design system.

Grâce à une approche axée sur la pratique, vous serez en mesure d’installer et configurer Storybook, d’écrire des stories interactives, d’effectuer des tests visuels et d’intégrer cet outil dans un workflow moderne avec CI/CD.

À la fin de cette formation, vous maîtriserez les bonnes pratiques pour organiser une librairie de composants robuste et maintenable.

Cette formation s’adresse aux développeur·euse·s front-end souhaitant améliorer la qualité et la collaboration autour de leurs composants UI.

Ce programme peut être adapté selon le framework utilisé (React, Vue ou Angular).

Vous souhaitez optimiser votre workflow front-end ?

Voici quelques informations qui pourraient également vous être utiles :
- formation aux tests End to End avec Playwright
- formation aux bonnes pratiques en accessibilité a11y

Les objectifs

• Comprendre et installer Storybook dans un projet front-end
• Créer, documenter et tester des composants UI
• Organiser et optimiser sa librairie Storybook pour un projet collaboratif
• Intégrer Storybook dans un workflow moderne avec CI/CD

Pré-requis

• Maîtrise des bases du JavaScript (ES6+)
• Expérience avec un framework front-end (React, Vue ou Angular)
• Connaissance de HTML et CSS
• Notions sur les composants réutilisables
• Ordinateur portable à apporter

Le programme de la formation Storybook

Jour 1 : Introduction et mise en place

• Présentation de Storybook
  • Qu’est-ce que Storybook et pourquoi l’utiliser
  • Cas d’usage (documentation, design system, tests visuels)
  • Comparaison avec d’autres outils
    • Styleguidist
    • Docz
    • Histoire
• Installation et configuration
  • Installation de Storybook dans un projet (React, Vue, Angular)
  • Structure d’un projet Storybook
  • Configurer Storybook (main.js, preview.js)
  • Comprendre le format des stories (.stories.js|.tsx)
• Création de premières stories
  • Création d’un composant et ses stories
  • Définition d’args et de controls pour gérer les props
  • Gestion des états (chargement, erreur, succès...)
• Organisation et personnalisation des stories
  • Structurer ses stories en dossiers et catégories
  • Ajouter des variantes avec args et argTypes
  • Personnaliser l'affichage (Backgrounds, Viewport)
• Interaction et documentation avancée
  • Utilisation des addons
    • Actions
    • Controls
    • Viewport
    • Backgrounds
  • Ajouter une documentation interactive avec MDX

Mises en pratique :
- Installer et configurer Storybook sur un projet existant
- Documenter et tester des composants courants (bouton, modal, formulaire...)
- Améliorer l’UX avec les addons Storybook

Jour 2 : Test, validation et intégration dans un workflow

• Tests visuels et automatisation
  • Introduction aux tests visuels
  • Intégration avec Jest et Testing Library
  • Détection des régressions avec Chromatic
• Accessibilité et bonnes pratiques
  • Utilisation de l’addon A11y pour tester l’accessibilité
  • Vérification des contrastes et compatibilité clavier
  • Application des bonnes pratiques UI/UX
• Intégration avec un Design System
  • Création et gestion d’une bibliothèque de composants
  • Storybook comme documentation de design system
  • Partage des composants avec une équipe
• Déploiement et CI/CD
  • Héberger Storybook
    • GitHub Pages
    • Vercel
    • Netlify
  • Automatiser les tests et le build
    • GitHub Actions
    • GitLab CI

Mises en pratique :
- Ajouter des tests visuels et d’accessibilité à un projet Storybook
- Création d’un mini-design system avec Storybook
- Rédaction d’une documentation complète et de tests
- Déploiement en ligne et intégration dans un projet réel

Télécharger le programme

Le(s) formateur(s)

Romain PETIT

Romain est consultant indépendant sur des technologies web front-end depuis 2012.
Il utilise le framework JavaScript Vue.JS et Nuxt au quotidien pour développer des applications. Il croit en un web accessible, et défend la JAMstack.

Romain donne des formations depuis 6 ans pour différentes structures: Le Campus Numérique in The Alps sur des formations innovantes, avec l'Université de Grenoble Alpes et Oxiane.

Il monté le collectif d'indépendants et espace de travail Le Médiastère au centre ville de Grenoble, son camp de base.
Depuis 2020, il a rejoint l'équipe de BackMarket.

Voir son profil détaillé

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1646 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 170 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux