L’injection de dépendances en JavaScript

Les techniques d’inversion de contrôle (IoC) permettent aux développeurs de sortir du flux de programmation traditionnel et leur offrent davantage de flexibilité et de contrôle sur leur code. L’injection de dépendances, une forme d’IoC, est un modèle qui vise à séparer la construction des objets de leur utilisation.

Dans cet article, vous découvrirez ce qu’est l’injection de dépendances, quand l’utiliser et dans quels frameworks JavaScript populaires elle est implémentée.

Qu’est-ce que l’injection de dépendances ?

L’injection de dépendances est un modèle de conception logicielle dans lequel un objet ou une fonction utilise d’autres objets ou fonctions (les dépendances) sans se préoccuper de leurs détails d’implémentation. La tâche consistant à fournir aux objets les dépendances dont ils ont besoin est confiée à un injecteur, parfois appelé assembleur, fournisseur ou conteneur.

Prenons l’exemple des consoles de jeux vidéo : elles ont simplement besoin d’un disque ou d’une cartouche compatible pour fonctionner. Les différents disques ou cartouches contiennent généralement les données de jeux différents. Le joueur n’a pas besoin de connaître le fonctionnement interne de la console et, en général, il lui suffit d’insérer ou de remplacer le disque du jeu pour jouer.

Concevoir un logiciel ou écrire du code de cette manière facilite le retrait ou le remplacement de composants (comme dans l’exemple ci-dessus), l’écriture de tests unitaires et la réduction du code répétitif dans une base de code.

Bien que l’injection de dépendances soit un modèle couramment implémenté et utilisé dans d’autres langages, notamment Java, C# et Python, on la rencontre moins souvent en JavaScript. Dans les sections suivantes, vous découvrirez les avantages et les inconvénients de ce modèle, son implémentation dans des frameworks JavaScript populaires et la façon de configurer un projet JavaScript en prévision de l’utilisation de l’injection de dépendances.

Pourquoi avez-vous besoin de l’injection de dépendances ?

Pour bien comprendre l’utilité de l’injection de dépendances, il est important de comprendre les problèmes auxquels répondent les techniques d’IoC. Reprenons l’analogie de la console de jeux vidéo évoquée plus tôt et essayons de représenter le fonctionnement d’une console en code. Dans cet exemple, nous appellerons votre console NoSleepStation et partirons des hypothèses suivantes :

• Une console NoSleepStation ne peut exécuter que les jeux conçus pour la NoSleepStation.

• La seule source d’entrée valide pour la console est un disque compact.

À partir de ces informations, on peut implémenter la console NoSleepStation de la manière suivante :

1// The GameReader class
2class GameReader {
3  constructor(input) {
4    this.input = input;
5  }
6  readDisc() {
7    console.log("Now playing: ", this.input);
8  }
9}
10
11// The NoSleepStation Console class
12class NSSConsole {
13  gameReader = new GameReader("TurboCars Racer");
14
15  play() {
16    this.gameReader.readDisc();
17  }
18}
19
20// use the classes above to play 
21const nssConsole = new NSSConsole();
22nssConsole.play();

Ici, la logique principale de la console se trouve dans la classe GameReader, dont dépend NSSConsole. La méthode play de la console lance un jeu à l’aide d’une instance de GameReader . Plusieurs problèmes sont toutefois manifestes, notamment en matière de flexibilité et de tests.

Flexibilité

Le code présenté précédemment manque de flexibilité. Si un utilisateur voulait jouer à un autre jeu, il devrait modifier la classe NSSConsole, ce qui reviendrait à démonter la console dans la vraie vie. En effet, une dépendance essentielle, la classe GameReader, est codée en dur dans l’implémentation de NSSConsole.

L’injection de dépendances résout ce problème en dissociant les classes de leurs dépendances et en ne fournissant ces dernières qu’au moment où elles sont nécessaires. Dans l’exemple de code précédent, la classe NSSConsole a simplement besoin de la méthode readDisc() d’une instance de GameReader.

Avec l’injection de dépendances, le code précédent peut être réécrit ainsi :

1class GameReader {
2  constructor(input) {
3    this.input = input;
4  }
5
6  readDisc() {
7    console.log("Now playing: ", this.input);
8  }
9
10  changeDisc(input) {
11    this.input = input;
12    this.readDisc();
13  }
14}
15
16class NSSConsole {
17  constructor(gameReader) {
18    this.gameReader = gameReader;
19  }
20
21  play() {
22    this.gameReader.readDisc();
23  }
24
25  playAnotherTitle(input) {
26    this.gameReader.changeDisc(input);
27  }
28}
29
30const gameReader = new GameReader("TurboCars Racer");
31const nssConsole = new NSSConsole(gameReader);
32
33nssConsole.play();
34nssConsole.playAnotherTitle("TurboCars Racer 2");

Le changement le plus important dans ce code est que les classes NSSConsole et GameReader sont désormais dissociées. Bien qu’une instance de NSSConsole ait toujours besoin d’une instance de GameReader pour fonctionner, elle n’a pas à la créer explicitement. La création de l’instance de GameReader et sa transmission à NSSConsole sont confiées au fournisseur d’injection de dépendances.

Dans une base de code volumineuse, cela peut réduire considérablement le code répétitif, puisque la création et le raccordement des dépendances sont pris en charge par un fournisseur d’injection de dépendances. Vous n’avez donc pas à vous soucier de créer les instances des classes dont une classe donnée a besoin, surtout si ces dépendances ont elles-mêmes leurs propres dépendances.

Tests

L’un des principaux avantages de l’injection de dépendances concerne les tests unitaires. En confiant à un fournisseur externe la tâche de fournir les dépendances d’une classe, on peut utiliser des mocks ou des stubs à la place des objets qui ne sont pas testés :

1// nssconsole.test.js
2const gameReaderStub = {
3  readDisc: () => {
4    console.log("Read disc");
5  },
6  changeDisc: (input) => {
7    console.log("Changed disc to: " + input);
8  },
9};
10
11const nssConsole = new NSSConsole(gameReaderStub);

Tant que l’interface de la dépendance (les méthodes et propriétés exposées) ne change pas, un objet simple doté de la même interface peut remplacer une instance réelle lors d’un test unitaire.

Limites de l’injection de dépendances

Il est important de noter que l’injection de dépendances présente aussi des inconvénients, généralement liés à sa façon de résoudre le problème de la réduction du code répétitif.

Pour tirer le meilleur parti de l’injection de dépendances, en particulier dans une base de code volumineuse, il faut configurer un fournisseur d’injection de dépendances. Cette configuration peut demander beaucoup de travail et représenter une charge inutile dans un projet simple.

Il est possible de résoudre ce problème à l’aide d’une bibliothèque ou d’un framework d’injection de dépendances. Toutefois, dans la plupart des cas, l’utilisation d’un framework d’injection de dépendances exige de s’y engager pleinement, car les frameworks de ce type offrent peu de similitudes d’API lors de la configuration.

L’injection de dépendances dans les frameworks JavaScript populaires

L’injection de dépendances est une fonctionnalité clé de nombreux frameworks JavaScript populaires, notamment Angular(), NestJS et Vue.js.

Angular

Angular est un framework de développement web côté client qui comprend les outils nécessaires pour créer, tester et maintenir des applications web. L’injection de dépendances est intégrée au framework : aucune configuration n’est nécessaire et il s’agit de la méthode recommandée pour développer avec Angular.

Voici un exemple de code montrant le fonctionnement de l’injection de dépendances dans Angular (extrait de la documentation Angular) :

1// logger.service.ts
2import { Injectable } from '@angular/core';
3
4@Injectable({providedIn: 'root'})
5export class Logger {
6  writeCount(count: number) {
7    console.warn(count);
8  }
9}
10
11// hello-world-di.component.ts
12import { Component } from '@angular/core';
13import { Logger } from '../logger.service';
14
15@Component({
16  selector: 'hello-world-di',
17  templateUrl: './hello-world-di.component.html'
18})
19export class HelloWorldDependencyInjectionComponent  {
20  count = 0;
21
22  constructor(private logger: Logger) { }
23
24  onLogMe() {
25    this.logger.writeCount(this.count);
26    this.count++;
27  }
28}

Dans Angular, l’utilisation du décorateur @Injectable sur une classe indique que celle-ci peut être injectée. Une classe injectable peut être mise à la disposition de ses dépendants de trois façons :

• Au niveau du composant, à l’aide du champ providers du décorateur @Component

• Au niveau de NgModule, à l’aide du champ providers du décorateur @NgModule

• À la racine de l’application, en ajoutant providedIn: 'root' à un décorateur @Injectable (comme vu précédemment)

Pour injecter une dépendance dans Angular, il suffit de la déclarer dans le constructeur d’une classe. Dans l’exemple de code précédent, la ligne suivante montre comment faire :

1constructor(private logger: Logger) // Angular injects an instance of the LoggerService class

NestJS

NestJS est un framework JavaScript dont l’architecture permet de créer des applications backend très performantes, fiables et évolutives. Comme sa conception s’inspire largement d’Angular, l’injection de dépendances fonctionne de manière très similaire dans NestJS :

1// logger.service.ts
2import { Injectable } from '@nestjs/common';
3
4@Injectable()
5export class Logger {
6  writeCount(count: number) {
7    console.warn(count);
8  }
9}
10
11// hello-world-di.component.ts
12import { Controller } from '@nestjs/common';
13import { Logger } from '../logger.service';
14
15@Controller('')
16export class HelloWorldDependencyInjectionController  {
17  count = 0;
18
19  constructor(private logger: Logger) { }
20
21  onLogMe() {
22    this.logger.writeCount(this.count);
23    this.count++;
24  }
25}

Notez que dans NestJS et Angular, les dépendances sont généralement considérées comme des singletons. Cela signifie qu’une fois trouvée, la valeur d’une dépendance est mise en cache et réutilisée pendant tout le cycle de vie de l’application. Pour modifier ce comportement dans NestJS, vous devez configurer la propriété `scope` des options du décorateur @Injectable. Dans Angular, vous devez configurer la propriété `providedIn` des options du décorateur @Injectable.

Vue.js

Vue.js est un framework JavaScript déclaratif et basé sur des composants, conçu pour créer des interfaces utilisateur. Dans Vue.js, l’injection de dépendances peut être configurée à l’aide des options `provide` et `inject` lors de la création d’un composant.

Pour indiquer quelles données doivent être mises à la disposition des descendants d’un composant, utilisez l’option provide :

1export default {
2provide: {
3message: 'hello!',
4}
5}

Vous pouvez ensuite injecter ces dépendances dans les composants qui en ont besoin à l’aide de l’option inject :

1export default {
2  inject: ['message'],
3  created() {
4    console.log(this.message) // injected value
5  }
6}

Pour fournir une dépendance au niveau de l’application, comme avec providedIn: 'root' dans Angular, utilisez la méthode provide de l’instance de l’application Vue.js :

1import { createApp } from 'vue'
2
3const app = createApp({})
4
5app.provide(/* key */ 'message', /* value */ 'hello!')

Frameworks d’injection de dépendances JavaScript

Jusqu’ici, vous avez découvert l’injection de dépendances dans le contexte d’un framework JavaScript. Mais si quelqu’un souhaite démarrer un projet sans utiliser aucun des frameworks mentionnés et sans implémenter de conteneur ou de résolveur d’injection de dépendances à partir de zéro ?

Quelques bibliothèques proposent des fonctionnalités d’injection de dépendances pour ce cas de figure, notamment injection-js, InversifyJS et TSyringe. La section suivante se concentre sur InversifyJS, mais il peut être utile d’examiner les autres packages pour voir s’ils répondent mieux à vos besoins.

InversifyJS

InversifyJS est un conteneur d’injection de dépendances pour JavaScript. Il est conçu pour réduire au minimum la surcharge à l’exécution, tout en facilitant et en encourageant les bonnes pratiques de programmation orientée objet (POO) et d’IoC. Le dépôt du projet se trouve sur GitHub.

Pour utiliser InversifyJS dans un projet, il faut l’ajouter aux dépendances du projet. Nous allons configurer InversifyJS avec l’exemple de jeu utilisé tout au long de cet article. Créez donc un nouveau projet avec npm init. Ouvrez un terminal et exécutez les commandes suivantes dans l’ordre :

1mkdir inversify-di
2cd inversify-di
3npm init

Ajoutez ensuite inversify aux dépendances du projet à l’aide de npm ou de Yarn :

1# Using npm
2npm install inversify reflect-metadata
3
4# or if you use yarn: 
5# yarn add inversify reflect-metadata

InversifyJS s’appuie sur l’API de réflexion des métadonnées ; vous devez donc installer et utiliser le package reflect-metadata comme polyfill.

Ajoutez ensuite le code des classes NSSConsole et GameReader en créant d’abord deux fichiers vides :

1touch game-reader.mjs nssconsole.mjs

Ajoutez ensuite le code suivant à chacun des fichiers :

1// game-reader.mjs
2export default class GameReader {
3  constructor(input = "TurboCars Racer") {
4    this.input = input;
5  }
6
7  readDisc() {
8    console.log("Now playing: ", this.input);
9  }
10
11  changeDisc(input) {
12    this.input = input;
13    this.readDisc();
14  }
15}

1// nssconsole.mjs
2export default class NSSConsole {
3  constructor(gameReader) {
4    this.gameReader = gameReader;
5  }
6
7  play() {
8    this.gameReader.readDisc();
9  }
10
11  playAnotherTitle(input) {
12    this.gameReader.changeDisc(input);
13  }
14}

Enfin, configurez le projet pour utiliser InversifyJS :

1touch config.mjs index.mjs

1// config.mjs
2import { decorate, injectable, inject, Container } from "inversify";
3import GameReader from "./game-reader.mjs";
4import NSSConsole from "./nssconsole.mjs";
5
6// Declare our dependencies' type identifiers
7export const TYPES = {
8  GameReader: "GameReader",
9  NSSConsole: "NSSConsole",
10};
11
12// Declare injectables
13decorate(injectable(), GameReader);
14decorate(injectable(), NSSConsole);
15
16// Declare the GameReader class as the first dependency of NSSConsole
17decorate(inject(TYPES.GameReader), NSSConsole, 0);
18
19// Declare bindings
20const container = new Container();
21container.bind(TYPES.NSSConsole).to(NSSConsole);
22container.bind(TYPES.GameReader).to(GameReader);
23
24export { container };

1// index.mjs
2// Import reflect-metadata as a polyfill
3import "reflect-metadata";
4import { container, TYPES } from "./config.mjs";
5
6// Resolve dependencies
7// Notice how we do not need to explicitly declare a GameReader instance anymore
8const myConsole = container.get(TYPES.NSSConsole);
9
10myConsole.play();
11myConsole.playAnotherTitle("Some other game");

Vous pouvez tester la nouvelle configuration en exécutant node index.mjs à la racine du projet.

Bien que minimal, cet exemple peut constituer un bon point de départ pour la plupart des projets qui souhaitent utiliser InversifyJS.

Conclusion

Dans cet article, vous avez découvert l’injection de dépendances en JavaScript, ses avantages et ses inconvénients, des exemples dans des frameworks JavaScript populaires et la manière de l’utiliser dans un projet JavaScript vanilla.