Prérequis

Solides bases en JavaScript, React/Vue ou framework moderne, compréhension de l’asynchrone, familiarité avec webpack ou bundlers.

Durée

3 jours

Contenu Technique de la Formation

Concevez des architectures front-end robustes et maintenables. Explorez les principes clean code SOLID et DRY, micro-frontends avec module federation, bundlers modernes (Vite, Webpack, esbuild), state management Redux/Zustand, et patterns SSR/SSG/CSR avec hydratation et code-splitting.

• Clean code : SOLID (Single Responsibility, Open/Closed), DRY, KISS
• Micro-frontends et Module Federation — composition et isolation
• Vite, Webpack et esbuild — build optimization et performances
• Redux, Zustand et patterns de state management
• SSR (Server-Side Rendering), SSG (Static Site Generation) et CSR
• Hydratation, lazy loading, code-splitting et tree-shaking

Objectifs de la Formation

Les objectifs visés par cette formation sont :

• Appliquer SOLID et DRY pour code lisible et maintenable
• Implémenter micro-frontends avec Module Federation
• Optimiser builds avec Vite, Webpack ou esbuild
• Choisir et intégrer Redux ou Zustand pour state management
• Architecturer applications SSR, SSG et CSR adaptées
• Maximiser performance : hydratation, code-splitting, tree-shaking

Table des Matières

Principes Clean Code et SOLID

• Single Responsibility Principle — une classe, une responsabilité
• Open/Closed Principle — ouvert à l’extension, fermé à la modification
• Liskov Substitution, Interface Segregation, Dependency Inversion
• DRY (Don’t Repeat Yourself) et abstraction appropriée
• KISS (Keep It Simple, Stupid) et complexité cognitive

Micro-frontends et Module Federation

• Architecture micro-frontend — indépendance et composition
• Webpack Module Federation — shared dependencies et remotes
• Dynamic imports et lazy loading de modules distants
• Versioning et compatibility de modules partagés
• Communication inter-modules et événements globaux

Bundlers modernes : Vite, Webpack, esbuild

• Vite — ES modules natives et rebuild ultra-rapide
• Webpack configuration, loaders et plugins avancés
• esbuild pour bundling très rapide et minification
• Stratégies de chunking et optimization des bundles
• Source maps et debugging en production

State Management : Redux et Zustand

• Redux — reducers, actions et store centralisé
• Redux Toolkit et createSlice pour boilerplate réduit
• Zustand — store minimal et reactive
• Sélecteurs et memoization pour performance
• Intégration avec DevTools et time-travel debugging

SSR, SSG et CSR — patterns et hydratation

• Client-Side Rendering (CSR) — SPA traditionnel
• Server-Side Rendering (SSR) — hydratation et state initial
• Static Site Generation (SSG) — pre-rendering et ISR
• Next.js/Nuxt patterns — getStaticProps, getServerSideProps
• Hydratation mismatch — détection et debugging

Performance : code-splitting, lazy loading, tree-shaking

• Code-splitting par route avec dynamic imports
• Lazy loading et Suspense pour optimisation UX
• Tree-shaking et dead code elimination
• Critical CSS et CSS-in-JS optimization
• Web Vitals : LCP, FID, CLS et performance budgets

En Pratique

Concevoir une architecture frontend modulaire

• Séparation des responsabilités et layers
• Gestion d'état prévisible
• Communication entre composants

Appliquer les principes SOLID au JavaScript

• Single Responsibility et Open/Closed
• Dependency Injection et abstraction
• Interface Segregation et inversion

Refactoriser du code JavaScript existant

• Identification des code smells
• Réduction de la complexité cyclomatique
• Amélioration de la lisibilité et testabilité

Documenter et maintenir un codebase large

• JSDoc et documentation inline
• Conventions de nommage et formatage
• Code reviews et standards d'équipe

Modalités et Inscription

Cette formation est proposée selon deux formules pour s'adapter au mieux à vos besoins :

Session régulière

Des sessions sont organisées à intervalles réguliers. Demandez les prochaines dates planifiées pour vous inscrire à la prochaine session.

Sur mesure & intra-entreprise

Vous souhaitez former vos équipes directement dans vos locaux ou adapter le programme technique à votre contexte d'entreprise ? Contactez-nous pour obtenir un devis personnalisé.