Jour 1 – Architecture modulaire & composants avancés
Objectifs du jour :
- Structurer une app scalable et performante
- Maîtriser la détection de changement, Ivy, les décorateurs avancés
Contenu :
- Structure modulaire avancée :
- Partage de services vs isolation,
- Chargement différé lazy loading
- Guards sur modules
- Composants et décorateurs spécifiques :
- @HostBinding (styles dynamiques)
- @ContentChild (projection)
- @Directive créant un attribut réutilisable
- Composants dynamiques avec ComponentActionResolver
- Détection de changement
- Stratégie OnPush
- Marquage manuel avec ChangeDetectorRef
- Différences Zone.js vs Angular signal
- Moteur Ivy :
- Compilation juste-à-temps vs AOT
- Diagnostics avancés
- Pipes & directives personnalisées :
- Création
- Pureté
- Branchement à l'injection hiérarchique.
- Atelier pratique fil rouge :
- Refactoriser une app existante en modules lazy + pipe custom.
Jour 2 – State, RxJS & sécurité
Objectifs du jour :
- Gérer des flux complexes avec NgRx ou Signals
- Protéger l'application par des stratégies de sécurité et des tests automatisés
Contenu :
- Gestion d'état :
- Comparaison NgRx vs Signals
- Store : cycle action, reducer, selector, devtools et side-effect.
- RxJS expert :
- Opérateurs “higher-order”
- Gestion de flux annulables, Subject, Scheduler.
- Sécurité front-end :
- Guards de route, interceptor rafraîchissement JWT, contextes rôle.
- Content Security Policy, sanitization DOM, configuration Angular strict-XSS
- Tests avancés Angular :
- TestBed with Harnesses, mocks HttpClient, spies sur store
- Introduction ) Cypress ou Playwright pour les tests end-to-end
- Seuil de couverture sup à 80 %.
- Atelier pratique fil rouge :
- Implémenter store panier avec NgRx et guard rôle
- Ecrire 2 tests Jest et 1 test end-to-end.
Jour 3 – Optimisation des performances & Pipeline CI/CD
Objectifs :
- Optimiser le bundle : taille et rapidité d'exécution
- Automatiser le pipeline.
Contenu :
- Optimisation build :
- Lazy loading avancé, tree shaking, ESBuild, budgets,
- Elargissement pré-rendu SSR / SSG
- Pré-chargement critique
- Web Vitals :
- Suivi LCP, TBT, INP avec API performance + Lighthouse
- Détection des memory leaks
- Bundling ressources : compression Brotli, images AVIF/WebP, service-worker offline cache.
- CI GitHub :
- GitHub Actions
- Workflow étapes distinctes
- Artefacts versionnés, rollback auto
- LLM pratique :
- Prompt pour générer script YAML ou test Jest
- Checklist RGPD
- Retrait secrets avant push
- Atelier pratique fil rouge :
- Réduire bundle 10 %
- Générer via LLM un workflow CI, l'ajuster puis déployer automatiquement
- Présenter le code, l'audit RGPD
