La dette technique en JavaScript, la solder en 3 étapes

⏱ Temps de lecture : 3 mins

La dette technique est un concept développé en 1992 par Ward Cunningham. Elle décrit le coût futur lié à des choix techniques ou de conception faits dans le présent pour accélérer la livraison d'un projet.

Elle a pour effet d’augmenter de façon croissante le temps de développement de nouvelles fonctionnalités, voire d'empêcher leur ajout.

Les effets de la dette sont délétères et extrêmement coûteux sur le long terme.


La dette technique en JavaScript


Nous allons nous concentrer sur JavaScript, le langage le plus répandu dans le web.


JavaScript et la dette technique


Par sa conception et sa permissivité, JavaScript est très sensible à la génération de dette.


L’évolutivité rapide représente aussi un facteur aggravant. Par exemple, l’introduction des Promises puis de async/await a rendu obsolète le fonctionnement des callbacks et facilité considérablement la gestion de l’asynchrone.

Néanmoins, tout le code utilisant les callbacks devient obsolète et donc il devient de la dette technique.

Et jusqu’à présent, rien n’indique que la conception est mauvaise, si en plus on ajoute des erreurs et des développements trop rapides.


Étape 1 pour solder la dette technique : le nettoyage


Pour comprendre cette étape, il faut imaginer une maison trop encombrée dont on veut changer la configuration des pièces.

Avant de réfléchir, il faut faire place nette. Ici c’est pareil. L’avantage numéro 1 est l’amélioration de la lisibilité.


Lisez le code de façon très précise et repérez le code mort. Une fois découvert, supprimer le.

Si vous doutez de la pertinence d’un code, vous pouvez utiliser un système de monitoring de type Sentry pour savoir si sur un ou deux mois d’utilisation normal, ce code est appelé. Si ce n’est pas le cas, vous pouvez le supprimer.

À ce stade, vous pouvez aussi implémenter des bonnes pratiques de type early return, factorisation et dédoublement de code.


Dans les cas de forte présence de dette, les gains ici peuvent représenter jusqu’à 20 ou 30% de la base de code.


Étape 2 pour solder la dette technique : la cartographie


En partant du principe que le besoin client est bien identifié, il faut cartographier techniquement l’application.


C’est-à-dire, construire un schéma de flux qui note tous les appels de fonctions. Même si celui-ci devient vite complexe à lire, il donne une idée du fonctionnement interne d’une fonctionnalité.

Cette carte sera utilisée pour le gros du travail de l’étape 3.


Étape 3 pour solder la dette technique : la refactorisation


Vous avez un code un peu plus lisible, vous avez une carte de celui-ci. À présent, utilisez cette carte pour refactoriser des flux de fonctionnement.


Par exemple, sur un processus de changement de mot de passe : réécrivez l’ensemble de la fonctionnalité en vous basant sur des bonnes pratiques (design pattern, lint et tests).

Remplacez les fonctions partagées en gardant leur signature.

C’est l’étape la plus longue, elle implique de reconstruire ce qui a été fait.

Elle permet de rembourser la dette de façon progressive, en réduisant les coûts de maintenance du code, en réduisant les bugs et donc en améliorant le produit aux yeux des clients.


Si vous avez des besoins pour résoudre la dette technique, nos experts peuvent vous aider.


En résumé

  • La dette technique est le coût futur lié aux choix techniques effectués pour accélérer un projet, ce qui peut ralentir ou bloquer les développements futurs.
  • JavaScript est particulièrement vulnérable à la dette technique en raison de sa permissivité et de l'évolution rapide de ses fonctionnalités.
  • Réduire la dette technique passe par un nettoyage du code, une cartographie des flux, et une refactorisation progressive pour améliorer la lisibilité et réduire les coûts de maintenance.

Partager cet article

Qui sommes-nous ?

Mon Formateur Indépendant est un collectif d'experts du secteur du digital.


Nous proposons des formations professionnelles et des accompagnements sur-mesure sur le développement web, la cybersécurité, le SEO et le marketing digital.


Ecrit par : Thomas Dupont

photo de profil de Thomas Dupont


Avec une double casquette de développeur et de contrôleur financier, Thomas allie une expertise technique en développement web à de solides connaissances en gestion d'entreprise. Cette combinaison unique lui permet de comprendre et d'agir efficacement sur les problématiques de ses clients.
En tant que développeur web depuis 10 ans, Thomas maîtrise les technologies et langages web comme JavaScript, TypeScript et Node.js.
Il est intervenu pour des sociétés prestigieuses telles que L'Oréal, Louis Vuitton ou Chanel et travaille sur des applications comptabilisant des centaines de milliers d'utilisateurs actifs.
Il vous apportera une vraie vision orientée solutions.