Accélérez vos développements React avec Refine

Développer vite, bien, et avec un budget limité ?

C’est le défi que nous a lancé l’UFE pour créer un outil de gestion de ses adhérents.

Pour le relever, nous avons choisi Refine, un méta-framework React taillé pour les applications CRUD. Il est compatible avec de nombreux frameworks, bibliothèques UI et backends, et facilite la mise en place rapide de projets structurés.

Voici un retour d’expérience sur un outil qui s’est révélé être un atout décisif dans la réussite de ce projet : il nous a permis de gagner du temps, de simplifier le code, et s’est parfaitement intégré avec nos outils existants.

Qu’est-ce que Refine ?

Refine est un méta-framework React pour applications CRUD. Il simplifie la création d’applications comme des dashboards, des panneaux d’administration et des outils internes. Il est actuellement compatible avec les versions 17 et 18 de React.

Il est compatible avec des frameworks React comme Next.js, React Native, Vite ou Remix.

Il est compatible avec divers frameworks UI comme TailwindCSS, Ant Design, Material UI et Chakra UI.

Enfin, il est compatible avec de nombreux backends comme des API REST, GraphQL, mais également des solutions comme Supabase, Airtable et Strapi.

Refine propose divers templates qui permettent de se faire une idée du type d’applications qui peuvent être développée simplement et de démarrer rapidement le développement.

Refine en pratique

Démarrage

Vous pouvez créer un nouveau projet Refine avec :

npm create refine-app@latest

Ou l’ajouter à un projet existant :

npm i @refinedev/core @refinedev/simple-rest

Accès aux données

Refine fournit un mécanisme de code commun par ressources correspondant aux standards d’une API REST CRUD : créer, récupérer, modifier et supprimer un élément ou une liste d’éléments. Ainsi, ce code permet de récupérer n’importe quel élément d’une ressource :

On l’utilise dans nos pages via un hook. Il existe divers hooks correspondants aux différents types d’appels (useOne, useMany, useCreate, useUpdateMany..).

Affichage

Refine fournit des composants permettant de simplifier la création de pages, notamment pour afficher une liste d’éléments sous forme de tableau, et inclure des actions standard comme l’ajout et la modification d’éléments, mais aussi l’import et l’export au format csv. Il apporte des fonctionnalités de filtres, tri et recherche sur les données.

Ainsi, le code suivant suffit pour récupérer les données et afficher un tableau basique. On se contente de définir la ressource à récupérer, et on mappe ses attributs avec les colonnes du tableau :

Il simplifie également la création de forms permettant de créer ou modifier des éléments, puisqu’il gère la récupération des données et leur mise à jour. Ainsi, une page d’édition complète peut ressembler au code suivant. À noter que l’id de l’élément modifié ici est récupéré automatiquement depuis la route.

Authentification

Refine fournit des composants pour faciliter la gestion des utilisateurs : page de connexion, gestion des endpoints associés, gestion des rôles et droits d’accès…

Il supporte entre autres Auth0, Google OAuth, Amazon Cognito ou encore Okta.

Via les librairies UI liées et le composant AuthPage il est trivial d’implémenter des pages de connexion, inscription ou encore de mot de passe oublié :

Refine fournit un composant qui gère tous les appels liés à la gestion du compte des utilisateurs, ainsi que divers hooks qui permettent d’accéder aux informations de session et aux droits d’accès des utilisateurs :

Autres éléments

Nous n’irons pas beaucoup plus dans les détails ici, le but de cet article n’étant pas d’être un résumé de la documentation de Refine, mais il peut être intéressant de noter que Refine apporte également des solutions pour gérer :

• Le routing
• Les notifications
• Les logs
• L’import/export de csv
• L’internationalisation
• La mise à jour de données en temps réel
• Un système multi-tenant

Limites

Refine n’est pas adapté pour toutes les applications. Si vous développez une application avec des règles métier complexes et des endpoints qui collent peu aux opérations CRUD Refine n’apportera pas grand-chose.

Le fait d’avoir un code commun pour tous les endpoints peut faire gagner du temps de développement si vos endpoints se ressemblent, mais peut rapidement devenir illisible si vous avez besoin de gérer de nombreux cas spécifiques.

De plus, si vous développez une application destinée au public plutôt qu’un outil interne vous aurez peut-être besoin de développer des composants UI sur mesure plutôt que vous baser sur les frameworks UI compatibles.

Cependant, il est parfaitement possible de développer des pages React classiques n’utilisant aucune des fonctionnalités de Refine si son usage n’est pas pertinent pour celles-ci. L’utilisation de Refine peut donc vous faire gagner du temps même si elle ne se fait finalement que rarement dans votre application.

À noter également que Refine peut s’intégrer à des projets existants sans impacter les pages développées précédemment.

Pour finir

Refine nous a permis de livrer à l’UFE une solution complète dans les délais et le budget impartis, et même de dépasser les attentes fonctionnelles initiales.

Ce n’est pas une solution miracle pour tous les projets, mais dès qu’il s’agit d’applications CRUD structurées, il offre un excellent compromis entre flexibilité, rapidité de développement et maintenabilité.

Si vous cherchez un moyen d’accélérer vos développements React sans sacrifier la qualité, Refine mérite clairement votre attention.