Utilisez un Singleton Pattern pour créer un utilisateur
Dernier design pattern de type Creational Design Pattern que nous allons voir : le Singleton. C’est un design pattern qui est assez peu utilisé côté front-end : on s’en sert habituellement plutôt back-end pour, par exemple, gérer la connexion avec une base de données.
Le principe d’un Singleton est de restreindre l’instanciation d’une classe ou d’un prototype à un seul objet. Cela va permettre de n’avoir qu’une seule connexion à la base de données, et de faciliter la gestion d’objets globaux.
Cela dit, si vous avez déjà utilisé Firebase ou Google Maps, vous avez déjà manipulé des Singletons sans le savoir. En effet, la méthodeinitApp de Firebase, qui initialise l’objet Firebase, est un Singleton. Vous ne l’instanciez qu’une seule fois, le plus souvent au lancement de votre application. :)
Pour notre projet Filmo Pattern, on va pouvoir s’en servir pour simuler la partie connexion d’un utilisateur. Comme pour les précédents chapitres, j’ai créé une issue sur GitHub qui va nous servir de problématique. :)
Vous allez voir que j’ai rajouté du code dans la branche de début : il y a maintenant un fichier templates/Modal.jsqui affiche le formulaire de connexion. J’en ai aussi profité pour ajouter un peu de CSS, et j’ai lié ce nouvel objet JavaScript à notre fichierindex.html .
La vidéo ci-dessus vous montre la fonctionnalité dans son intégralité. Vous pouvez voir, en fin de vidéo, que les informations sont stockées en LocalStorage
Identifiez les caractéristiques du Singleton Pattern
À la différence des deux autres design patterns que vous venez de découvrir, le Singleton n’est composé que d’un seul objet : lui-même. Un Singleton ne peut être instancié qu’une seule fois ! Autrement dit, une fois que vous l’aurez instancié, vous ne pourrez pas modifier les propriétés de l’instance.
L’un des avantages de ce pattern est qu’il va vous permettre une économie de ressources. En effet, à chaque fois que vous créez un nouvel objet, en instanciant une classe par exemple, vous utilisez des ressources : de la mémoire vive, pour être précis. Quand vous implémentez un Singleton, vous n’allez avoir qu’une seule instance de votre objet dans l’ensemble de votre application.
À chaque fois qu’une partie de votre application va vouloir utiliser le Singleton, celui-ci communiquera en fait avec une seule et même instance. Un peu comme dans le dessin ci-dessus. :)
L’autre avantage du Singleton est qu’il permet de diminuer l’impact des variables globales dans votre application.
Une variable globale ?
Une variable globale est une variable accessible partout dans votre application. Par exemple, dans notre projet Filmo Patterns, le fichier app.js contient une variable globale : app (qui instancie l’objet App). Vous me suivez ? :D
De manière générale, les variables globales ne sont pas tout le temps une bonne pratique en programmation, parce qu’elles favorisent le plus souvent des effets de bord. Vous pouvez regarder mon cours sur les tests en JavaScript pour en apprendre un peu plus sur les effets de bord ;) : voici le chapitre concerné.
Implémentez un Singleton Pattern
Dans cette section, nous allons voir l’implémentation d’un Singleton assez simple. Si je souhaite créer un Singleton sur le projet Filmo Pattern, je vais devoir :
Créer un dossier
dbdans mon application. Je pourrais l’appeler différemment, mais le plus souvent un Singleton = gestion de la connexion à la base de données ;Créer un fichier contenant le pattern. Le plus souvent, je l’appelle
Database. Dans le cadre de notre projet, je vais plutôt l’appelerUser.jsparce que nous allons stocker l’utilisateur à l’intérieur.
Dans la vidéo ci-dessous, je vais vous montrer comment implémenter un Singleton sur JS Bin. Comme je vous l’ai précisé, un Singleton est moins utilisé côté front-end que côté back-end. Je n’ai pas forcément beaucoup d’exemples d’applications sur notre projet fil rouge.
Vous pouvez retrouver le code de cet exemple de Singleton sur ce gist GitHub.
À vous de jouer !
Allez, c’est l’heure de la mise en pratique sur notre projet fil rouge Filmo Patterns.
Votre tâche va donc être de créer le Singleton User. Vous pouvez vous aider de l’issue GitHub créée pour l'occasion. Comme je le précise dans l’issue GitHub, vous n’avez besoin de toucher qu’au fichier db/User.js .
Le code source contenant la solution de cet exercice se trouve sur la branche partie-2/chapitre-3-fin .
En résumé
Avec un Singleton, vous instanciez un objet une seule et unique fois. Vous ne pouvez pas le réinstancier. Comme il n’est instanciable qu’une seule fois, il n’est pas, par définition, réutilisable : il peut vite se transformer en anti-pattern !
C’est un pattern très utilisé côté back-end. On s’en sert le plus souvent pour gérer la connexion avec une base de données.
Il peut aussi être utilisé pour réduire les variables globales dans une base de code, et permettre ainsi l’économie de ressources.
Vous venez de terminer la partie sur les Creational Design Patterns ; vous connaissez maintenant trois designs patterns : le Constructor, le Factory et le Singleton. Il est temps de passer à la partie sur les Structural Design Patterns, bon boulot !
