Cet article est publié sous licence CC BY-NC-SA
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 :
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) :
localStorage
pour ajouter de la persistance.npm install --save-dev miragejs
// 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
}
//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
});
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.
L’équipe Synbioz.
Libres d’être ensemble.
Nos conseils et ressources pour vos développements produit.