Мы занимаемся разработкой на аутсорсе. Часто стартуем новые проекты. Не работаем с готовыми CMS – всё на фреймворках с нуля, обычно PHP, node.js у нас на бекенде. В таких проектах постоянно требуется создавать панель управления. 

В 90% случаев это довольно однотипные таблички и формы. Процесс их создания превращается в рутину. В остальных 10% встречаются и сложные задачи, которые требуется реализовать в панели управления: особенные интерфейсы, логику. 

Мы искали инструмент, чтобы клепать однотипные админки, но при необходимости создавать и кастомные решения. У нас были такие требования:

  1. Мы хотим решение, которое быстро создает CRUD (create, read, update, delete) и требует минимальных усилий. 

  2. Мы хотим иметь возможность создавать какой-то сложный интерфейс, если этого потребует задача.

  3. Мы делаем классные, красивые проекты, поэтому хотим визуально приятное решение. 

  4. Мы хотим, чтобы решение не зависело от языка на back-end, так как, например, мы начинали с PHP, Laravel, но со временем в стэке появились node.js, Go.

Короче говоря, хотели быстро, красиво и кастомно. 

Изучение существующих решений

Конечно, сначала мы посмотрели в сторону готовых решений, которые нам советовали. Они хорошие, но:

  • созданы специально для каких-то фреймворков / языков типа laravel, node.js

  • умеют только генерировать CRUD, жестко заданной структуры, где ты не сможешь ничего своего внедрить или создать кастомно.

  • нельзя стилизовать

Вот, что мы рассматривали:

Панели управления для Laravel

Для 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://github.com/refinedev/refine 

  • 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 стало гораздо удобнее и быстрее. Благодаря реакту на фронте, стало проще делать кастомные страницы. 

Но…и этот подход оказался не идеальным. И вот почему:

  1. Админ панель была сильно связана с php. Нам хотелось иметь возможность использовать ее для проектов на других языках.

  2. Для разработки в том числе и фронта требовалось поднимать всю инфраструктуру: фронт админки, бэкенд, базу данных.

  3. Сложность разработки кастомных страниц, так как требовалась очень плотная работа бэкенд и фронтенд разработчиков. Структура 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 и рекомендации тем, у кого похожие боли. Ну и, конечно, обратной связи.

Комментарии (0)