Gérer le caching via un service Angular 5

Qu’est-ce que le cache ?

Le cache web permet une utilisation optimale des ressources, et donc une amélioration des performances du serveur web, notamment via un affichage plus rapide des pages web.

La plus grande partie de la mise en cache se produit sans que l’utilisateur ne le sache. Par exemple, lorsqu’un utilisateur retourne sur une page Web qu’il a récemment consulté, le navigateur peut extraire ces fichiers du cache au lieu du serveur d’origine car il a stocké l’activité de l’utilisateur. Le stockage de ces informations permet à l’utilisateur de gagner du temps en y accédant plus rapidement et de réduire le trafic sur le réseau.

Quel genre d’utilisation ?

• Pour tout les sites recevant un grand nombre de visites : les ressources matérielles et la bande passante seront moins utilisées, mieux optimisées et les pages s’afficheront plus rapidement.
• Un événement qui fait monter la charge sur votre site web (publicité radio, campagne d’affichage en ligne, publicité télévisée, etc.).
• Pour les sites institutionnels ou d’e-commerce dont le volume de trafic est important, dans le but d’éviter de décourager de potentiels clients avec un chargement de page trop long.
• Pour tout service, qui consomme une grande quantité de ressources serveur (CPU, RAM, entrée/sortie) pour fournir du contenu ordinaire.
• Pour améliorer la visibilité d’un moteur de recherche : Google pénalise le référencement naturel si le temps de réponse des pages est trop long.

Le cache via un service Angular 5

Il existe différentes méthodes pour la mise en cache. Ici dans cet article, le cache est géré à travers un service Angular 5 (côté front-end), qui comprend un Singleton Pattern.

Le Singleton Pattern répond à deux exigences :

• Garantir qu’une unique instance d’une classe donnée sera créée.
• Offrir un point d’accès universel à cette instance.

Pour garantir l’unicité du Singleton, il est nécessaire de contrôler strictement son processus d’instanciation et interdire à tout code extérieur d’utiliser l’opérateur new ou de créer des instances supplémentaires. Il suffit donc de déclarer un constructeur de visibilité private.

Ensuite pour obtenir une référence sur une instance du Singleton, le code appelant devra obligatoirement passer par une méthode utilitaire au lieu du constructeur. Cette méthode sera nécessairement statique, car à cet instant, le code appelant ne dispose encore d’aucune référence sur l’instance du singleton, et ne peut donc accéder qu’à ses membres statiques.

Cette méthode étant statique, elle ne peut accéder qu’aux propriétés également statiques de la classe. L’instance unique devra donc être statique aussi.

Voici le code de la classe Singleton écrit en TypeScript.

export class SingleCache {
  // Create an object of SingleObject
  private static instance : SingleCache = new SingleCache();
 
  public ob: Candidate[] = [];
 
  // Get the only object available
  public static  getInstance(): SingleCache {
     return this.instance;
  }
 
  public static setCache(object: Candidate[]): void {
    this.instance.ob = object;
  }
 
  public static getCache(): Candidate[] {
    return this.instance.ob;
  }
 
  //make the constructor private so that this class cannot be instancied
  private SingleCache() {}
}

L’attribut ob désigne l’objet que l’on souhaite mettre en cache, ici dans notre cas d’utilisation, l’objet fait référence à une liste d’éléments (des candidats). Les méthodes setCache et getCache sont des méthodes statiques qui permettent de stocker et de récupérer l’objet.

Il suffit d’appeler cette unique instance pour gérer le cache. Ci-dessous un exemple :

if (SingleCache.getCache().length !== size) {
  this.doAsyncListCandidate().then(() => {
    SingleCache.setCache(this.processedCandidates);
  });
} else {
  // Get Cache
  this.processedCandidates = SingleCache.getCache();
}

Démonstration

Ci-dessous des illustrations montrant le temps d’exécution lors d’un affichage de liste d’éléments avant et après application de la mise en cache.

Nous pouvons voir nettement ici une amélioration entre avant et après la mise en cache de la liste des candidats. Grâce au système de caching, la liste s’affiche environ 13 fois plus vite.