Collection d'Anti-patterns RxJS
RxJS est une bibliothèque puissante pour la programmation réactive, mais une utilisation incorrecte peut créer un terrain fertile pour les bugs et diminuer la maintenabilité. Cette section présente les erreurs courantes lors de l'utilisation de RxJS avec TypeScript et les meilleures pratiques pour les éviter.
Objectif de cette section
- Prévenir les bugs : Comprendre les erreurs courantes à l'avance pour éviter les problèmes lors de l'implémentation
- Améliorer la maintenabilité : Maîtriser des patterns de code lisibles et testables
- Optimiser les performances : Apprendre des techniques pour prévenir les fuites mémoire et les traitements inutiles
Liste des anti-patterns
Cette section couvre 17 anti-patterns.
🔴 Problèmes critiques
Ces patterns peuvent avoir un impact sérieux sur votre application.
| Pattern | Problème | Impact |
|---|---|---|
| Exposition externe des Subjects | Exposer directement un Subject permettant aux externes d'appeler next() | Imprévisibilité de la gestion d'état, difficulté de débogage |
| Souscriptions imbriquées | Appeler subscribe à l'intérieur d'un autre subscribe | Callback hell, complexité de gestion d'erreurs |
| Prolifération de drapeaux de gestion d'état | Gérer l'état avec 17 drapeaux booléens, persistance de pensée impérative | Faible lisibilité, maintenance difficile, source de bugs |
| Imbrication if dans subscribe | Branchements conditionnels complexes dans subscribe (3+ imbrications) | Faible lisibilité, tests difficiles, contraire à la pensée déclarative |
| Oubli d'unsubscribe | Ne pas se désabonner des flux infinis | Fuites mémoire, gaspillage de ressources |
| Mauvaise utilisation de shareReplay | Utiliser shareReplay sans comprendre son fonctionnement | Référence à des données périmées, fuites mémoire |
🟡 Problèmes nécessitant attention
Ceux-ci peuvent poser problème dans certaines situations spécifiques.
| Pattern | Problème | Impact |
|---|---|---|
| Effets de bord dans map | Modifier l'état dans l'opérateur map | Comportement imprévisible, tests difficiles |
| Ignorer Cold/Hot | Ne pas considérer la nature de l'Observable | Exécutions en double, comportement inattendu |
| Mélange avec Promises | Ne pas convertir correctement entre Promise et Observable | Non-annulable, gestion d'erreurs insuffisante |
| Ignorer le backpressure | Négliger le contrôle des événements à haute fréquence | Dégradation des performances, gel de l'UI |
🔵 Problèmes de qualité de code
Ceux-ci ne sont pas des bugs directs mais réduisent la qualité du code.
| Pattern | Problème | Impact |
|---|---|---|
| Suppression d'erreurs | Ne pas gérer correctement les erreurs | Débogage difficile, expérience utilisateur dégradée |
| Fuites d'événements DOM | Ne pas libérer les écouteurs d'événements DOM | Fuites mémoire, dégradation des performances |
| Manque de sécurité de type | Utilisation excessive de any | Erreurs au runtime, refactoring difficile |
| Sélection d'opérateur inappropriée | Utiliser un opérateur inadapté à l'objectif | Inefficacité, comportement inattendu |
| Complexification excessive | Complexifier des traitements qui pourraient être simples | Faible lisibilité, maintenance difficile |
| Enfer du one-liner | Mélange de définition de flux, transformation et souscription | Débogage difficile, tests difficiles, faible lisibilité |
| Modification d'état dans subscribe | Modifier directement l'état dans subscribe | Tests difficiles, source de bugs |
| Absence de tests | Ne pas écrire de tests pour le code RxJS | Régression, refactoring difficile |
Comment progresser dans l'apprentissage
- Étudier en détail les 15 anti-patterns dans Erreurs courantes et solutions
- Chaque anti-pattern comprend des exemples de code "mauvais" et "bons"
- Réviser votre code avec la Checklist d'évitement des anti-patterns
- Mettre en pratique les meilleures pratiques et les partager au sein de l'équipe
Sections connexes
Après avoir appris les anti-patterns, consultez également les sections suivantes.
- Gestion des erreurs - Stratégies appropriées de gestion d'erreurs
- Méthodes de test - Comment tester le code RxJS
- Comprendre les opérateurs - Comment choisir les bons opérateurs
Prochaines étapes
- Commencez par Erreurs courantes et solutions pour apprendre les anti-patterns pratiques et leurs solutions.
- Après l'apprentissage, révisez votre code actuel avec la Checklist d'évitement des anti-patterns.
Important : Ces anti-patterns sont fréquemment rencontrés dans les projets réels. Les comprendre tôt vous permettra d'écrire du code RxJS de haute qualité.