Inversion de dépendances : Changer de librairie dans Next.js
Dans cet article, nous allons voir pourquoi et comment mettre en œuvre l’inversion de dépendances pour faciliter la transition entre différentes librairies.
Dans de nombreux projets utilisant Next.js ou React, le choix des librairies est crucial. Il arrive qu’une librairie devienne dépréciée : il faut la remplacer.
Une forte dépendance peut rendre la maintenance et les mises à jour du code complexes. Un très bon exemple serait les librairies de manipulation de dates.
Le problème de la dépendance directe
Lorsqu'on utilise directement une librairie dans un projet, on crée une dépendance importante à cette librairie.
Si un jour on décide de la remplacer par une autre, on se retrouve à devoir réécrire du code. Ce refactoring s’applique à chaque endroit où la librairie est utilisée.
Cela est dû à l'absence d'inversion de dépendances, ce qui nous mène à un code rigide et difficile à maintenir. Les modifications demandent donc plus de temps et d'argent. 💰
Exemple de dépendance directe avec une librairie de dates
La librairie moment a longtemps été une librairie incontournable et très populaire pour la gestion des dates en javascript. L’utilisation directe de la librairie dans le code signifie que nous faisons appel à moment à chaque fois que nous devons manipuler une date :
Dans cet exemple, moment est directement utilisé dans notre composant. Si nous voulons passer à une autre librairie, nous devons modifier chaque instance de moment dans tout notre projet.
Exemple d’une librairie populaire dépréciée
Bien que moment se soit positionnée comme librairie majeure pour les manipulations de date, ses développeurs ont officiellement annoncé en 2020 que la librairie était dépréciée.
Ils ont donc encouragé la migration vers des alternatives plus modernes pour les nouveaux projets.
Malgré tout, comme on peut le voir sur ce graphique, moment est longtemps restée populaire face à des librairies plus pertinentes comme par exemple date-fns :
![landing page Leroy Merlin](/_next/image?url=%2Fimg%2Fblog%2Fdependency-inversion-switching-libraries-in-nextjs%2Fdate_libs_graph.png&w=3840&q=75)
Cela signifie que bon nombre de projets devront finir par changer de librairie de dates dans le futur. Voilà pourquoi il est important de limiter les dépendances.
Appliquer l'inversion de dépendances
L'inversion de dépendances consiste à dépendre d'abstractions plutôt que d’implémentations.
En d’autres termes, cela signifie que notre code devrait dépendre d'interfaces ou de contrats, et non d'implémentations spécifiques.
Étape 1 : Créer une interface pour les dates
Nous allons commencer par créer un type qui définira les méthodes dont nous avons besoin pour manipuler les dates dans notre projet :
Étape 2 : Implémentation de date-fns
Dans cette étape, nous implémentons date-fns avec DateService afin de pouvoir l’utiliser dans le projet.
Étape 3 : Configuration des dépendances
Ici, nous configurons les dépendances du projet en utilisant des abstractions pour gérer les opérations sur les dates.
Cela nous permet de centraliser la gestion des librairies et de faciliter les futures modifications.
Il suffit de modifier ce fichier de configuration pour changer de dépendances dans tout le projet.
Étape 4 : Utiliser l’interface dans le code
Maintenant que tout est configuré, il suffit d’appeler nos méthodes via notre objet dependencies dans notre code.
Ainsi, lorsqu’on modifie la dépendance dans notre fichier de configuration, cela impactera tout le projet.
Conclusion
L'inversion de dépendances est un principe puissant qui permet de rendre le code plus flexible et plus facile à maintenir.
En l'appliquant, nous pouvons changer de librairie sans avoir à modifier chaque instance de la librairie dans notre code. Cela nous permet de suivre les meilleures pratiques de développement et de garantir la pérennité de nos projets.
Ce pattern facilite également la testabilité du code. Il devient plus facile de mocker une dépendance.
Enfin, avec cette approche, le code reste propre, modulable et facile à mettre à jour.