Une centralisation de développements communs.
Mindbaz a aujourd’hui plusieurs produits tels que Mail ou SMS et d’autres applications sont susceptibles de voir le jour. Ces applications ont des fonctionnalités techniques communes telles que la gestion de token, l’internationalisation ou encore la gestion des requêtes. Cela nous a amené à réfléchir à la problématique suivante : Comment éviter de mettre en place les mêmes outils pour ces fonctionnalités communes sur chaque application ?
De cette réflexion est née l’App Manager, une librairie qui centralise ces développements afin que chaque application Mindbaz puisse utiliser de façon simple, optimale, et de façon identique ces différentes fonctionnalités. Cela nous permet d’optimiser le code dupliqué sur chaque application, de ne pas devoir réinventer la roue et mettre en place de nouveau ces développements sur chaque nouveau projet.
L’historique
Sur les différentes applications React, historiquement, la gestion des déconnexions, des redirections, des requêtes ou encore de la langue était indépendante sur chaque projet, tout en se basant sur les mêmes packages. Tout comme le token manager développé sur chaque application pour le token des différentes requêtes (ce token provient de l’authentification SSO mise en place chez Mindbaz).
Il y avait donc beaucoup de code proche et ayant le même but mais indépendant sur chaque projet.
Afin d’éviter toute cette duplication de code, et surtout pour centraliser ces fonctionnalités communes est née l’App Manager.
L’application Manager
L’App Manager centralise aujourd’hui notre gestion du token, des langues, nos requêtes etc et peut être utilisée par toutes les applications React JS.
L’initialisation
Au démarrage de nos produits utilisant notre App Manager, nous appelons un React hook qui prend en paramètre l’identifiant unique de l’application utilisant l’app manager, les fichiers de traduction ainsi que l’environnement et effectue l’initialisation de ces paramètres, du token et du gestionnaire de requêtes.
Ce React hook renvoie l’état de l’application manager. Lorsque celle-ci est prête est complètement initialisée, un état “success” est renvoyé pour signaler à l’application utilisant notre package qu’elle peut à son tour s’initialiser dans les bonnes conditions et avec le bon environnement.
Les différentes fonctionnalités de l’application manager
L’App Manager met ensuite à disposition plusieurs fonctionnalités que les applications métiers peuvent utiliser. Celles-ci peuvent être divisées en 3 catégories, les fonctions qui permettent d’appeler l’API, des fonctionnalités “http”, et de langage.
Commençons par les fonctions mises à disposition pour effectuer des requêtes. UseFetch et useMutate sont deux hooks qui permettent de faire différents types de requêtes. Les requêtes GET & POST avec useFetch et PUT/DELETE avec useMutate.
Fetch et Mutate offrent les mêmes possibilités mais ne sont pas des hooks.
Chaque fonction prend en paramètre l’url de la requête, le type de requête (GET/POST/PUT/DELETE), “params” (paramètre optionnel) pour les paramètres de la requête et “data” (paramètre optionnel) pour le corps de la requête.
Nous nous aidons pour ces différentes fonctions d’une librairie API REST (un client HTTP basé sur les promesses pour navigateur et node.js)
L’App Manager met également à disposition la possibilité de rafraîchir le token de l’utilisateur (lors d’un changement de mot de passe par exemple) ou la possibilité de déconnecter l’utilisateur.
Enfin les fonctionnalités de langage que l’on peut utiliser avec l’App Manager sont de récupérer le langage actuel de l’utilisateur (getLanguage ou getLanguageId), et de définir celui-ci via setLanguage et les fonctions pour l’internationalisation de l’application. Les fonctions de traductions sont Translation, useTranslation (pour le hook), et translate. Elles permettent de remplacer l’utilisation actuelle de useTranslation de react-i18next
L’export des fonctions et des types.
Nous avons mis en place l’export de toutes les fonctions dans un seul et même fichier auquel nous ajoutons l’export du typage de l’interface de cette fonction afin de pouvoir retrouver toutes les informations nécessaires à l’utilisation et la fonction sur nos différentes applications. Vous pouvez retrouver un exemple ci-dessous.
La suite ?
Nous intégrerons par la suite d’autres fonctionnalités à l’App Manager, afin de centraliser tous les développements qui sont globaux aux applications front de Mindbaz et qui n’ont aucune spécificité métier. (la gestion des séparateurs décimaux, de dates, d’autres fonctions outils communs etc). L’idée est de faire de cette une application une application centrale au bon fonctionnement de nos produits et de gagner en maintenabilité, cela peut être intéressant pour toute personne souhaitant regrouper des fonctionnalités communes à plusieurs applications dans un seul et même package.