Refine разработка админ-панелей у меня за последний год почти сравнялась по числу заявок с классическим React-admin - три-четыре проекта в квартал против пяти-шести на React-admin, но разрыв сокращается. Оба фреймворка закрывают одну задачу: собрать CRUD-панель с таблицами, формами и фильтрами быстрее, чем с нуля на голом React. Подход у них принципиально разный, и от выбора зависит, сколько времени уйдет на доработки через полгода после запуска, когда заказчик придет с очередным «а можно еще вот так».
Refine и React-admin: с чем вообще сравниваем
React-admin делает команда Marmelab с 2016 года - это готовый набор компонентов поверх Material UI (сейчас MUI v5), из коробки список, форма, показ записи, фильтры и авторизация уже собраны и стилизованы. Refine появился в 2021 году и построен иначе: это набор хуков и провайдеров без навязанного UI, а верстку можно взять из Ant Design, MUI, Chakra UI, Mantine или вообще собрать на своих компонентах.
На практике это значит следующее: React-admin быстрее дает результат, если дизайн админки укладывается в стандартный MUI-лук, а Refine выгоднее там, где заказчик уже определился с дизайн-системой или хочет визуально совпадающий со своим основным продуктом интерфейс.
Архитектура: headless-подход Refine против готового React-admin
React-admin - это библиотека компонентов с готовым рендерингом: <List>, <Datagrid>, <Edit>, <SimpleForm> уже умеют рисовать себя сами, разработчик в основном настраивает пропсы. Это экономит время на старте, но упирается в стену, когда нужен нестандартный лейаут - например, карточки вместо таблицы или составной фильтр с зависимыми полями.
Refine устроен как набор хуков (useTable, useForm, useList, useShow), которые отдают данные и обработчики, а верстку пишешь сам. Порог входа выше - на первом проекте я потратил лишний день на то, чтобы понять, где заканчивается ответственность хука и начинается моя разметка. Зато когда через три месяца заказчик попросил добавитьканбан-доску поверх тех же данных, я просто переиспользовал useList с другим компонентом рендеринга - в React-admin пришлось бы городить кастомный вьюпорт в обход стандартных компонентов.
Дата-провайдеры и интеграции с СДЭК, эквайрингом и WooCommerce
Оба фреймворка держатся на дата-провайдерах - адаптерах между UI и бэкендом. У React-admin готовые провайдеры под REST, GraphQL, Supabase, Firebase, у Refine список шире и активнее пополняется: Strapi, Supabase, Appwrite, Airtable, NestJS CRUD, Hasura из коробки.
На одном проекте собирал внутреннюю панель для интернет-магазина на WooCommerce, куда нужно было подтягивать заказы, статус оплаты через T‑Bank и статусы доставки СДЭК в одну таблицу. Готового провайдера под такую смесь источников нет ни у кого - писал свой на базе dataProvider из Refine, потому что хуки там проще расширять частичными переопределениями отдельных методов (getList, getOne) без переписывания всего провайдера целиком.
const dataProvider = {
...restDataProvider("https://api.example.com"),
getList: async (resource, params) => {
if (resource === "orders") {
const res = await fetch(`/api/orders?status=${params.filters?.status ?? ""}`);
const json = await res.json();
return { data: json.items, total: json.count };
}
return restDataProvider("https://api.example.com").getList(resource, params);
},
};Если под рукой нет времени собирать такой провайдер с нуля, я обычно беру заготовку под конкретную CRM или эквайринг из своей библиотеки готовых скриптов и адаптирую под конкретные эндпоинты - экономит день-два на типовых интеграциях.
UI-библиотеки и кастомизация интерфейса
React-admin жестко завязан на Material UI - тема, отступы, иконки берутся из MUI theme provider, и переключиться на другую библиотеку компонентов без переписывания половины проекта не получится. Для внутренних инструментов и MVP это плюс: тема настраивается за час, дизайнер может не тратить время на макет.
Refine в этом смысле гибче: под капотом можно держать Ant Design (самый популярный вариант в их экосистеме, готовые пресеты @refinedev/antd), MUI, Chakra или Mantine. Я обычно беру Ant Design, потому что там уже закрыты таблицы с виртуальным скроллом, drag-and-drop сортировка колонок и фильтры с пресетами - а это ровно то, что просят заказчики с базой в 10-20 тысяч записей.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Сроки и стоимость разработки на практике
По моим проектам за последний год разница в сроках такая:
| Критерий | React-admin | Refine |
|---|---|---|
| MVP-панель, 3-4 сущности, стандартный дизайн | 7-10 дней | 10-14 дней |
| Кастомный дизайн под бренд заказчика | от 3 недель (обход MUI-компонентов) | 2-3 недели |
| Нестандартная интеграция (2-3 источника данных) | от 3 недель | 2-4 недели |
| Порог входа для разработчика без опыта с фреймворком | 1-2 дня | 3-5 дней |
По деньгам у меня разработка CRM или админ-панели на React (Refine или React-admin - стек выбираю под задачу) стоит от 100 000 ₽, и итоговая цена зависит в первую очередь не от фреймворка, а от числа интеграций и нестандартных экранов. На рынке за похожую панель студии часто просят 150 000-300 000 ₽, и это ощутимо влияет на выбор заказчиков в пользу фрилансеров вроде меня.
Когда я беру Refine, а когда React-admin
React-admin выбираю, если:
- нужен внутренний инструмент для команды за 1-2 недели без дизайнера
- заказчик не против MUI-стиля и готов к типовому лейауту
- источник данных один и укладывается в REST или GraphQL без экзотики
Refine беру, если:
- нужен визуальный стиль под конкретную дизайн-систему заказчика
- данные приходят из 2-3 источников с разной логикой (например, заказы из WooCommerce плюс статусы из СДЭК API)
- панель будет расти - добавляться новые сущности, дашборды, кастомные виджеты на тех же данных
Отдельно уточню: если заказ упирается не в саму админку, а в автоматизацию вокруг нее - например, уведомления в Telegram через aiogram-бота при смене статуса заказа или синхронизацию с n8n-сценарием, который подтягивает лиды из внешней CRM, - это отдельная задача поверх любого из фреймворков, и ее стоит закладывать в смету отдельно, а не рассчитывать, что дата-провайдер решит все сам.
Кастомный CRM/админ-интерфейс
Админка / CRM
от 100 000 ₽
Подробнее →Частые вопросы
Что проще освоить: Refine или React-admin?
Refine осваивается дольше на старте - придется разобраться с хуками и самому собрать верстку под каждый экран. React-admin дает первый рабочий CRUD за пару часов, потому что компоненты уже готовы к рендерингу. Если разработчик раньше не работал ни с одним из фреймворков и дедлайн жесткий, я советую React-admin - там меньше решений принимать с нуля.
Можно ли подключить Refine или React-admin к GraphQL, Supabase или Firebase?
Да, у обоих есть официальные провайдеры под эти источники. У Refine набор провайдеров шире и включает Strapi, Appwrite, Hasura, NestJS CRUD из коробки, у React-admin из необычного - Firebase и Supabase через сообщество. Для нестандартного бэкенда без готового провайдера оба фреймворка дают возможность написать свой адаптер поверх базового интерфейса.
Сколько стоит разработка админ-панели на Refine или React-admin?
У меня разработка CRM или админ-панели на React стоит от 100 000 ₽ - конкретная сумма зависит от числа сущностей, интеграций с внешними сервисами вроде эквайринга или СДЭК и того, нужен ли кастомный дизайн под MUI, Ant Design или другую библиотеку. Выбор между Refine и React-admin на итоговую цену влияет меньше, чем объем интеграций.
Подходят ли Refine и React-admin для мобильной версии админки?
Оба рассчитаны в первую очередь на десктоп - таблицы, фильтры и формы удобны на широком экране, адаптив под мобильные экраны у обоих делается вручную и не входит в дефолтные компоненты. Для мобильного доступа обычно проще собрать отдельный легкий интерфейс или PWA-обертку поверх того же API, чем пытаться выжать мобильный UX из Datagrid или Ant Table.