Fondations Modernes & Composants Propres

Une journée essentielle pour poser les bases d’un Angular moderne, stable et maintenable. Objectif : maîtriser ES2024, TypeScript strict, les composants Angular propres, et commencer à structurer l’application selon les principes professionnels.

🎯 Objectif du Jour 1

Construire des bases solides pour un code lisible, testable, maintenable et orienté long terme. Vous posez la fondation qui conditionne la qualité du reste de la formation.

🧩 Fil Rouge du Projet

Création d’un mini-catalogue B2B (produits, recherche, interactions) qui évoluera chaque jour.

🧠 Patterns du Jour

Smart/Dumb Components, immuabilité, typage strict, séparation des responsabilités.

Section 1 — JavaScript ES2024 & TypeScript strict

Le but est de maîtriser les nouveautés modernes qui rendent le code plus expressif, plus robuste et beaucoup plus prévisible. **Angular repose sur TypeScript strict**, il est donc impossible d’être productif sans ces concepts.

🚀 Concepts modernes à maîtriser

Records & Tuples — structures immuables idéales pour des modèles de données propres.
Pattern Matching — remplace 80% des if/else lourds.
Pipeline Operator |> — écriture fluide des transformations.
Async Context Tracking — propagation automatique de contexte async (utile pour logs / monitoring).
TypeScript Strict — sécurité absolue, meilleure DX, bugs éliminés dès l’écriture.

🧰 Exemple TypeScript propre


interface Product {
  id: number;
  name: string;
  price: number;
}

const formatPrice = (p: Product) =>
  `${p.price.toFixed(2)} €`;

const isCheap = (p: Product) => p.price < 100;

Erreurs courantes à éviter :

Muter des objets au lieu de créer des copies immuables.
Désactiver strictNullChecks « temporairement ».
Utiliser any à la place de types précis.

Section 2 — Architecture des Composants Angular

Angular impose une architecture claire : composants déclaratifs, minimalistes, centrés sur l'affichage et la gestion des événements. La logique métier **n'a rien à faire dans un composant**.

🧱 Anatomie propre d’un composant


@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.html',
})
export class ProductCardComponent {
  @Input() product!: Product;
  @Output() add = new EventEmitter();
}

Dumb Components → rôle : afficher + émettre.
Smart Components → rôle : charger, orchestrer, appeler les services.
Encapsulation stricte — le composant doit être autonome et pur.

⚡ Signals (remplace 70% des services avec Subject)

La nouvelle API Reactive "Signals" d'Angular permet un état lisible, prévisible et performant sans Subject / BehaviorSubject.


readonly products = signal([]);

readonly promos = computed(() =>
  this.products().filter(p => p.price < 100)
);

effect(() => {
  console.log('Promos:', this.promos());
});

Bonnes pratiques :

Un composant = 1 responsabilité.
Jamais de logique réseau dans un composant de présentation.
Préférer les fonctions pures et l’immuabilité.
Utiliser Signals → lisibilité + performance.

Ateliers pratiques du Jour 1

Atelier 1 — Construire ProductCard (Dumb)

Objectif : un composant de présentation pur, sans aucune logique métier.


@Component({
  selector: 'app-product-card',
  template: `
    
      {{ product.name }}
      {{ product.price | currency:'EUR' }}
      
    
  `
})
export class ProductCardComponent {
  @Input() product!: Product;
  @Output() add = new EventEmitter();
}

Atelier 2 — Construire ProductList (Smart)

Ici, on orchestre les données, les appels réseau, la gestion du panier. C’est le cerveau, pas l’UI.


@Component({
  selector: 'app-product-list',
  template: `
    
    
  `
})
export class ProductListComponent {
  products: Product[] = [];

  constructor(private cart: CartService) {}

  addToCart(p: Product) {
    this.cart.add(p);
  }
}

Atelier 3 — Refactor complet ES5 → ES2024 → TS strict

Mise à niveau du style, lisibilité, sécurité.

Patterns & Anti-patterns du Jour 1

✔ Bonnes pratiques

Séparer Smart et Dumb Components.
Immuabilité systématique.
Typage strict (jamais any).
Utilisation de Signals pour gérer l’état proprement.
Favoriser l’injection de services dans Smart Components.

❌ Anti-patterns

Mettre des appels réseau dans un composant de présentation.
Accumuler les subscribe() non gérés.
Laisser Angular compiler sans TypeScript strict.
Muter les tableaux utilisés dans *ngFor.
CSS global qui fuit dans l’app.