С помощью каких инструментов удобней всего делать админки на React?

Question

[Дмитрий Свиридов]

Подскажите, есть ли какие-то удобные готовые решения для создания админок на React (с typescript). Попробовал react-admin - вроде, то, что надо, на первый взгляд, но, например, не сделать нормально фронтовую валидацию с серверной одновременно (например, есть просто обязательные поля формы, а есть те, уникальность значений в которых надо проверять на сервере в базе). Хотел сделать сохранение данных при изменении формы в localStorage (и удаление оттуда, если форма успешно засабмитилась) - в итоге не работает тогда фронтовая валидация формы, о чем в документации к react-admin честно и написано. Коннектор к django-rest-framework вообще устарел (в зависимостях прописана старая версия react-admin) - и его автор на это походу забил. И вообще любые расширения функциональности этой админки, на мой взгляд, довольно неудобны.
Есть ли какие-то более удобные библиотеки для создания админок на React, потому что пилить от и до руками на React + Redux админку (где большинство действий все равно CRUD в том или ином виде) достаточно запарно (трудоёмко)?

Comments

[Максим Федоров]

Поиск на гитхабе отвалился?
Куча реп со списками всего под реакт (любую др либу)

Посмотрите тут к примеру
https://github.com/enaqx/awesome-react/blob/master...

[Дмитрий Свиридов]

Максим Федоров, не отвалился. И какие из них являются более удобными аналогами react-admin?

[Mikhail Osher]

По поводу "например, есть просто обязательные поля формы, а есть те, уникальность значений в которых надо проверять на сервере в базе":
Просто пишите свой валидатор, который вернёт Promise. Само собой, на бэкенде должен быть endpoint, который эту валидацию сделает.

А так, лучше react-admin я не встречал. "Готовые админки" принципиально не рассматриваю ввиду отсутствия гибкости и качества кода.

[Дмитрий Свиридов]

Mikhail Osher, то есть и react-admin тоже не юзаете по этим же причинам?

[Mikhail Osher]

Дмитрий Свиридов, я имел ввиду, что если надо набросать CRUD админку, то выберу react-admin не задумываясь даже

[Дмитрий Свиридов]

Mikhail Osher, ясно, спасибо. А под "на бэкенде должен быть endpoint, который эту валидацию сделает." Вы подразумеваете эндпоинт для валидации отдельного поля формы, который при onBlur будет дергаться? Если да, то можно ли как-то замапить результаты валидации при сабмите всей формы на поля, чтобы не делать отдельный эндпоинт валидации на каждое поле?

[Mikhail Osher]

Дмитрий Свиридов, само собой, не очень логично бы звучало "количество сущность = количество моделей * количество полей в них". Надо уже плясать от требований приложения. Можно начать с endpoint на сущность.

[Дмитрий Свиридов]

Mikhail Osher, и как все же сделать так, чтобы и валидация работала, и в localStorage можно было в react-admin записывать данные при изменении формы? Чтобы можно было заполнять форму, потом закрыть браузер, через день открыть и продолжить, а после успешного сохранения удалить из localStorage (интересует как раз удаление). На этой странице в документации есть пример с кастомной кнопкой сохранения, через которую можно сделать очистку localStorage при успешном сабмите, но тогда валидация отвалится: там так и написано "Note: This technique will not trigger a form validation pass.".

[Сергей Сунцев]

Ранее часто использовал Redux-form Для таких вещей. Удобно оборачивать компоненты, удобно управлять данными. Не знаю правда, как с ним в 2020 году обстоит дело, может уже что то новое изобрели.

[Дмитрий Свиридов]

Сергей Сунцев, это чисто формы и валидация, немного не то

[Сергей Сунцев]

Дмитрий Свиридов, а разве АДМИНКА не состоит из форм и валидации?

[Дмитрий Свиридов]

Сергей Сунцев, если брать чисто визуальную составляющую, то да. Но, кроме этого, она состоит из авторизации, списков, фильтров, связанных списков (fk) и m2m. Можно всю это логику делать вручную (экшены, редьюсеры писать, сделать шаблоны интерфейса и т.п.), но, например, react-admin умеет это делать практически из коробки (достаточно описать дата-провайдер - и все). React-admin я не стал в итоге использовать потому, что:

1. Не сделать нормально валидацию через сервер. Есть пример на stackoverflow, но по нему сделать не удалось, потому что в ra-core зачем-то файлы имеют расширение *.ts, но при этом написаны они на обычном js - и сборка не проходит из-за этого...
   
2. Не сделать удаление данных формы из localStorage при успешном сабмите. Если это реализовать, то отваливается валидация формы
   

Answer 1

[Robur]

https://pro.ant.design/docs/getting-started вот например посмотрите. Основано на их-же бесплатной либе компонентов - формы там тоже были, немного странные, но достаточно гибкие.
А так вообще - чем админка отличается от обычной аппы по большому счету? ничем. Берите какой-нибудь хороший компонент форм для всего этого crud, чартов если надо, роутинг и вперед.

Comments

[Дмитрий Свиридов]

Так просто наборов компонентов и форм мало. Экшены, редьюсеры и различного рода фильтры все равно для этого crud придется писать руками. Это ничем не отличается принципиально от использования MaterialUI (у меня сейчас так).

[Robur]

Вообще, спасибо за ссылку на react-admin, как-то прошла мимо меня, выглядит лучшим из того что есть. Надо попробовать.