refine is an extremely customizable Ant Design based React framework for data-intensive applications and it handles most of the CRUD functionality that can be a requirement in many applications, without much effort. Providing the rest of the desired functionality (outside CRUD) is up to you, like in any React application.
React-Admin is an amazing B2B application framework based on Material Design, using Material UI. It provides ready-to-fetch-data components, so you just compose them together to create an application.
refine is different in the way it makes you compose your application. refine directly provides Ant Design components and some hooks to work with those components. Hooks give you the required props for those Ant Design components.
It is, also, one step forward towards the dream of making it headless.
Recently, our team decided to migrate a B2B admin panel of one of our customers from React-Admin to refine to battle test our new framework and improve our productivity. My mission was to migrate it and it took one and a half days for me to rewrite the panel in refine.
Our panel has 7 resources (all listable), which 4 of them must have create and edit pages, 6 of them must be exportable to .csv files and some of those resources have images, all images must be uploaded in base64 format.
This is how it looks before the migration (React-Admin):
And this is how it looks like after the migration (refine):
Both of these images show a list page of a resource (campaign).
Migrating Listing Pages
List pages have one/more tables inside them. Ideally, all table state should be managed by the framework in use.
refine is very flexible with tables. You can put them anywhere, configure it as much as you want with useTable. See the fineFoods example and it's code.
Here is an example list page from React-Admin that shows you the list of id, name, isActive, startDate, endDate from the API endpoint for campaigns resource.
It is long. Because we had to handle selection and bulk delete button manually. That's because refine is decoupled from Ant Design components' code, too. But the advantage here is that you use Ant Design. You can use the Ant Design's Table as however you like, and then connect its data with refine. The point is customizability.
And it looks like this:
In both refine and React-Admin, by default, there aren't much differences between new resource page's code and resource edit page's code.
Also note that for both refine and React-Admin, this is all customizable. These code examples and screenshots mean little or no extra customization in resource list/create/edit pages.
Advantage of refine is that you use Ant Design directly. Let's assume you have your own way around your Ant Design application. refine doesn't interfere. Instead, it provides you the necessary data for your Ant Design application. This way, refine gives you all the freedom to customize all the components as you wish.
Build your React-based CRUD applications, without constraints. An open-source, headless web application framework developed with flexibility in mind
What is Refine?
Refine is a meta React framework that enables the rapid✨ development of a wide range of web applications.
From internal tools to admin panels, B2B apps, and dashboards, it serves as a comprehensive solution for building any type of CRUD application.
Refine's internal hooks and components simplify the development process and eliminate repetitive tasks by providing industry-standard solutions for crucial aspects of a project, including authentication, access control, routing, networking, state management, and i18n.
Refine is headless by design, thereby offering unlimited styling and customization options.
What do you mean by "headless" ?
Instead of being limited to a set of pre-styled components, Refine provides collections of helper hooks, components…