Mocker une API avec miragejs

Article écrit par Gaëtan Dejaegere

Mocker toute une API est très utile, surtout dans les projets agiles, où nous travaillons en étroite collaboration avec le client, ou dans les projets headless, où une API REST est la principale interface de communication entre le frontend et le backend. Un bon mock d’API peut par exemple faciliter les tests et/ou révéler les problèmes d’UX et d’UI au début d’un projet. Dans cet article, nous évoquerons ce qui fait un bon mock d’API et pourquoi ce nouvel outil peut nous permettre de créer de meilleurs produits tout en réduisant les coûts. Nous introduirons la solution choisie chez Synbioz : Mirage JS

Pour commencer, listons les différentes raisons qui nous amènent à vouloir mettre en place un mock de notre API :

• Le backend n’est pas prêt. Cela arrive régulièrement, car les équipes frontend et backend travaillent en parallèle, créant des moments de latence que l’on souhaite éviter.
• Le contenu n’est pas prêt. Même si l’API existe, sans contenu dans la base de données – idéalement beaucoup de contenu – elle n’est pas très utile. Dans le cas d’une refonte, on partira d’un dump mais dans la majorité des cas cela nécessitera de rentrer manuellement des entrées en base. Cela s’avère souvent chronophage et peu enthousiasmant… De plus, quand cette tâche revient au client, celle-ci arrive tardivement dans la phase de développement.
• On souhaite travailler par itérations rapides. Les projets évoluent au fil des mois, des demandes de modification surviennent naturellement et constituent une partie importante de la vie d’un projet. il est rare d’avoir la solution optimale dès le départ. En travaillant avec un mock, on gagne en qualité en favorisant les échanges avec le client sans exploser les coûts.

La mise en place de mock d’API n’est pas nouveau en soi et de nombreuses solutions existent. Des simples fichiers json à l’utilisation de services SaaS, nos diverses expériences nous ont amené à définir le portrait-robot de l’outil de mock idéal pour nos futurs projets. Pour être réellement utile, il doit nous permettre de :

• Être aussi proche que possible de l’API définitive.
• Être facile à mettre en place
• Générer aisément de nombreuses données réalistes
• Permettre d’écraser les données générées automatiquement
• Permettre des itérations rapides
• Être prévisible, pour être utilisable dans nos tests automatisés
• Simuler des structures de données flexibles
• Simuler des états et des cas particuliers prévus (ou non…) lors d’ateliers d’UX.

Une solution pragmatique : Mirage JS

https://miragejs.com/

Cette bibliothèque de mock d’API, issue de la communauté Ember est maintenant framework agnostic. Ces atouts sont multiples et en font un outil de choix face aux autres solutions à notre disposition (JSONServer, MSW, et divers services SaaS) :

• Sa prise en main est rapide, son API intuitive
• Sa mise en place est insolente de facilité (cf plus loin)
• Il permet de reproduire la forme exacte de l’API de production (contrairement à JSON server)
• Il n’affecte pas le code de l’application. C’est l’API de production qui détermine la configuration de Mirage JS, et non l’inverse.
• Il s’exécute dans le navigateur en même temps que le code front, pas de processus supplémentaires à gérer.
• Il intègre un ORM.
• Il possède un puissant système de seeds, fixtures et factories
• Possibilité de facilement se brancher au localStorage pour ajouter de la persistance.

Installation

npm install --save-dev miragejs 

Définition du serveur de mock

// server.js import { Server, Model } from 'miragejs'  export function makeServer({ environment = "development" } = {}) {    let server = new Server({     environment,      models: {       todo: Model     },      seeds(server) {       server.create("todo", { content : "Learn Mirage JS" })     },      routes() {       this.namespace = "api"       this.get("/todos")     }   })    return server } 

Intégration dans notre application

//main.js import { makeServer } from "./server"  if (process.env.NODE_ENV === "development") {   makeServer() }  fetch("/api/todos") // [{ id: 1, content : "Learn Mirage JS" }]   .then(res => res.json())   .then(json => {     const todos = json.todos   }); 

Outils complémentaires

• https://miragejs.com/repl bac à sable pour se familiariser avec l’API de Mirage JS ;
• https://github.com/FrediBach/Blowson aide à la génération de fixtures ;
• https://github.com/Marak/Faker.js générateur de contenu aléatoire.

Chez Synbioz, l’utilisation de Mirage JS dans nos projets n’est pas systématique. Il est cependant devenu un compagnon de route idéal sur lequel on se repose soit en début de projet, soit par petites touches pour éprouver une nouvelle feature sans engager des travaux sur une API existante.