Checklist d'évitement des anti-patterns

Utilisez cette checklist pour vérifier si votre code RxJS correspond à un anti-pattern. Cliquez sur chaque élément pour voir des explications détaillées et des exemples de code.

Points de vérification

🔴 Éviter les problèmes critiques

Vérification	Élément	Points clés
	Exposer les Subjects avec asObservable()	Ne pas exporter directement les Subject, les exposer comme Observable avec asObservable() Permettre les changements d'état uniquement via des méthodes dédiées
	Éviter les souscriptions imbriquées	Ne pas appeler d'autres subscribe dans un subscribe Aplatir avec switchMap, mergeMap, concatMap, etc.
	Toujours se désabonner des flux infinis	Toujours se désabonner des flux infinis comme les écouteurs d'événements Pattern takeUntil ou gestion de Subscription
	Spécifier explicitement la configuration de shareReplay	Utiliser le format shareReplay({ bufferSize: 1, refCount: true }) Activer le comptage de références pour prévenir les fuites mémoire
	Éviter les imbrications if dans subscribe	Éviter les branchements conditionnels complexes dans subscribe (3+ imbrications) Écrire de manière déclarative avec des opérateurs comme filter, iif, partition

🟡 Éviter les problèmes nécessitant attention

Vérification	Élément	Points clés
	map pour fonctions pures, tap pour effets de bord	Ne pas modifier l'état ou logger dans map Séparer explicitement les effets de bord avec l'opérateur tap
	Utiliser Cold/Hot de manière appropriée	Convertir en Hot avec shareReplay pour les requêtes HTTP, etc. Déterminer si doit être exécuté pour chaque souscription ou partagé
	Convertir les Promises avec from	Ne pas mélanger Promise et Observable Convertir en Observable avec from() pour un traitement unifié
	Contrôler les événements à haute fréquence	Contrôler l'entrée de recherche avec debounceTime, le défilement avec throttleTime Exclure les doublons avec distinctUntilChanged

🔵 Améliorer la qualité du code

Vérification	Élément	Points clés
	Gérer correctement les erreurs	Capturer les erreurs avec catchError et les gérer correctement Afficher des messages d'erreur compréhensibles pour l'utilisateur Réessayer avec retry / retryWhen si nécessaire
	Libérer correctement les événements DOM	Toujours se désabonner des souscriptions fromEvent Désinscription automatique avec takeUntil lors de la destruction du composant
	Assurer la sécurité de type	Définir des interfaces ou des alias de types Spécifier explicitement le paramètre de type de Observable<T> Utiliser l'inférence de type de TypeScript
	Sélectionner l'opérateur approprié	Recherche: switchMap, parallèle: mergeMap Séquentiel: concatMap, anti-spam: exhaustMap
	RxJS non nécessaire pour traitements simples	Le JavaScript normal suffit pour le traitement de tableaux, etc. Utiliser RxJS pour le traitement asynchrone et les flux d'événements
	Gérer l'état de manière réactive	Gérer l'état avec BehaviorSubject ou scan Utiliser subscribe comme déclencheur final
	Écrire des tests	Effectuer des tests marble avec TestScheduler Rendre le traitement asynchrone testable de manière synchrone

Utilisation

1. Lors de la revue de code

Après avoir écrit du nouveau code, effectuez une auto-revue en utilisant cette checklist.

2. Lors de la pull request

En incluant cette checklist dans le template de pull request, vous pouvez vérifier avec les reviewers selon des critères communs.

3. Revue régulière

Utilisez régulièrement cette checklist sur la base de code existante pour vérifier qu'aucun anti-pattern ne s'est infiltré.

4. Partage au sein de l'équipe

Partagez avec les membres de l'équipe pour unifier les meilleures pratiques RxJS.

Ressources connexes

• Erreurs courantes et solutions - Explication détaillée de chaque anti-pattern et exemples de code
• Sommaire des anti-patterns - Liste des anti-patterns et progression de l'apprentissage
• Gestion des erreurs - Meilleures pratiques de gestion d'erreurs
• Méthodes de test - Comment tester le code RxJS

Conseils pour utiliser la checklist

1. Ne pas essayer de tout perfectionner en une fois

   • Traiter d'abord prioritairement les problèmes critiques (🔴)
   • Améliorer progressivement

2. Décider des priorités au sein de l'équipe

   • Ajuster l'importance selon les caractéristiques du projet
   • Créer une checklist personnalisée

3. Considérer l'automatisation

   • Vérification automatique avec des outils d'analyse statique comme ESLint
   • Intégrer dans le pipeline CI/CD

4. Mettre à jour régulièrement

   • Mettre à jour selon les mises à niveau de version de RxJS
   • Refléter les connaissances acquises par l'expérience de l'équipe

---

Important : Cette checklist n'est pas pour écrire du code parfait, mais un guide pour éviter les problèmes courants. Utilisez-la de manière flexible selon le contexte du projet.