Мы занимаемся разработкой на аутсорсе. Часто стартуем новые проекты. Не работаем с готовыми CMS – всё на фреймворках с нуля, обычно PHP, node.js у нас на бекенде. В таких проектах постоянно требуется создавать панель управления.
В 90% случаев это довольно однотипные таблички и формы. Процесс их создания превращается в рутину. В остальных 10% встречаются и сложные задачи, которые требуется реализовать в панели управления: особенные интерфейсы, логику.
Мы искали инструмент, чтобы клепать однотипные админки, но при необходимости создавать и кастомные решения. У нас были такие требования:
Мы хотим решение, которое быстро создает CRUD (create, read, update, delete) и требует минимальных усилий.
Мы хотим иметь возможность создавать какой-то сложный интерфейс, если этого потребует задача.
Мы делаем классные, красивые проекты, поэтому хотим визуально приятное решение.
Мы хотим, чтобы решение не зависело от языка на back-end, так как, например, мы начинали с PHP, Laravel, но со временем в стэке появились node.js, Go.
Короче говоря, хотели быстро, красиво и кастомно.
Изучение существующих решений
Конечно, сначала мы посмотрели в сторону готовых решений, которые нам советовали. Они хорошие, но:
созданы специально для каких-то фреймворков / языков типа laravel, node.js
умеют только генерировать CRUD, жестко заданной структуры, где ты не сможешь ничего своего внедрить или создать кастомно.
нельзя стилизовать
Вот, что мы рассматривали:
Панели управления для Laravel
https://demo.backpackforlaravel.com/admin/dashboard. На наш взгляд не сильно симпатичное решение. Причем на промо странице красивые скрины, а не демке “ну такое”.
https://orchid.software/en/. Не особо функционально, но сделано аккуратно
https://nova.laravel.com У них красиво, но жеско заданная струткруа, нельзя создавать кастомные интерфейсы, стилизовать их. Просто делать CRUD и все. И она платная
https://filamentphp.com/ Аналог Nova, по сути с теми же проблемами.
Для node.js
https://adminjs.co Красивое промо, а demo сильно отстает
Самостоятельные панели управления
https://strapi.io/ — очень крутая, но для других целей. Это, скорее, конструктор сущностей с интерфейсом и API
https://pocketbase.io/— Аналогично, это конструктор сущностей с интерфейсом и API
https://directus.io/— Это конструктор бэкенда.
https://filamentphp.com/ чисто под php, нельзя кастомизровать стили, нельзя создавать свои интерфейсы. Возможно создавать только таблицы и формы по шаблону, а мы помним, что хотим гибкость, независимость от языка и возможность создавать свои интерфейсы и кастомизировать ихhttps://flatlogic.com — Это тоже, скорее, конструктор бэкенда.
Прямые конкуренты
https://marmelab.com/react-admin/ наверное, лучшее решение, что сейчас есть на рынке, давно развиваются, им наше уважение. К минусам отнесли мы следующие моменты: довольно старый проект, и где-то технологии уже устарели, несимпатичный интерфейс, старые UI библиотеки. Огромная документация и так просто создать CRUD и вникнуть в работу без погружения не получится.
Библиотеки
Так же изучали множество UI библиотек, которые представляют просто просто UI, но всю логику для генерации CRUD и авторизации в админке приходится писать самому.
Примеры:
https://www.lightningdesignsystem.com/
https://developer.microsoft.com/en-us/fluentui#/controls
https://design.fusionfabric.cloud/foundations
- их огромное количестов дизайн систем.
Мы нашли самое схожее решение в нужном нам сегменте, и им стало https://marmelab.com/react-admin/
Оно обладает огромным функционалом. Но для нас это, отчасти, и проблема, так как онбординг занимает большое время. Ну и очень посредственный внешний вид. И тем не менее, это был наш основной конкурент.
Первые попытки создания собственного продукта
Мы начали разработку в апреле 2022 года. Сперва бэклог формировался из задач, которые решали на одном коммерческом проекте.
На момент тестового релиза в июне 2023 года трудозатраты на проект под названием Admiral составили 700 часов. На сегодняшний день мы уже обкатали это решение примерно на 10 коммерческих проектах – полет отличный.
Изначально у нас был только один разработчик, который делал коммерческий проект и фултайм работал над этим решением. На данный момент почти все фронты в нашей компании контрибьютят в проект. Мы стараемся, чтобы все отлично владели проектом. Но посмотрим как пойдет, какое будет финансирование. Возможно, в дальнейшем мы выделим команду, которая будет заниматься только этим проектом.
Вообще, мы трижды пытались создать что-то свое. Каждый раз забивали, потому что понимали, что где-то архитектурно ошибались.
Для своей первой админки мы взяли набор готовых компонентов - https://tabler.io/ . Сама админ-панель представляла собой смесь css, js, jquery и html, разбитых на компоненты blade. Например, были готовые layout, страницы формы и т.п.
Так выглядела типичная страница с формой для редактирования сущности
Но, конечно, можно было делать и более кастомные страницы.
Со временем мы все чаще стали использовать подход SPA для наших сайтов, такой же подход хотелось внедрить и в админ-панель, так как работать с blade шаблонами было неудобно. Особенно, когда задача выходила за рамки готовых компонентов. Мы обратили внимание на laravel nova. Нам понравился их подход, и мы стали адаптировать его под наши проекты.
Для начала взяли тот же tabler, но уже те компоненты которые были написаны на react. Получалось довольно неплохо, но все же в tabler на тот момент было недостаточно компонентов.
Стали искать альтерантиву и она нашлась - ant.design . Взяв его компоненты, мы приступили к созданию админ-панели своей мечты. Постепенно появлялось все больше компонентов, прокачивался наш бэк.
Вот как теперь это стало выглядеть:
Создавать типичные CRUD стало гораздо удобнее и быстрее. Благодаря реакту на фронте, стало проще делать кастомные страницы.
Но…и этот подход оказался не идеальным. И вот почему:
Админ панель была сильно связана с php. Нам хотелось иметь возможность использовать ее для проектов на других языках.
Для разработки в том числе и фронта требовалось поднимать всю инфраструктуру: фронт админки, бэкенд, базу данных.
Сложность разработки кастомных страниц, так как требовалась очень плотная работа бэкенд и фронтенд разработчиков. Структура json, которая приходила от бэкенда, была крайне сложная, возникали проблемы с ее модификацией.
Попытка №2
Решением всех этих проблем и следующим этапом стало выделение админки в полностью отдельное приложение. Теперь админка – такое же SPA-приложение, которое работает по REST api, с четким контрактом.
Теперь админ панель не привязана к языку, на бэкенде – мы использовали и php и golang. Простой типичный CRUD все так же просто создавать, этим занимаются бэкенд разработчики. Кастомные страницы создает фронтенд, для этого ему теперь не нужно поднимать еще и бэкенд. Благодаря простой api, ее легко “замокать”, и добавлять новые требования.
В итоге работа строится по такому принципу: фронтенд делает свою задачу, выставляет требования к api, а бэкенд разработчику остается только ее реализовать.
На данный момент такой подход показал себя крайне гибким. А для упрощения рутинных задач мы используем команды кодогенераторы.
Наше время
Сегодня мы хотим поделиться с вами готовым решением на React от разработчиков для разработчиков. Недавно мы его релизнули в open source. Оно позволяет быстро создавать красивую панель управления в проекте и CRUD в ней, но при желании вы можете сделать и абсолютно кастомные интерфейсы.
Для кого:
для тех, кому нужно часто создавать в проектах панель управления.
для тех, кому требуется кастомное решение и не подходят коробочные, но нет денег/времени на разработку с 0.
для тех, у кого нет времени разбираться с существующими решениями, которые требуют много времени и усилий на изучение.
Фишки:
???? Используются готовые компоненты React.
⚙️ Не важно, на чем написан back-end, от него нужен только REST API.
???? Написана на TypeScript, есть встроенная типизация.
???????? Адаптивный дизайн: Интерфейс библиотеки масштабируется под любой размер экрана. Это удобно при использовании на мобильных устройствах.
???? Локализация: мы поддерживаем разные языки.
???????? Интуитивно понятный интерфейс, с которым легко работать.
???? Различные темы оформления: вы можете изменить цветовую схему интерфейса в соответствии с вашими потребностями.
Если уже интересно, смотрите по ссылке https://github.com/dev-family/admiral. Будем рады звездочке на GitHub и рекомендации тем, у кого похожие боли. Ну и, конечно, обратной связи.