Не часто Spring разработчикам нужно разрабатывать админки, но когда нужно… Встает вопрос, какую технологию для этого выбрать. Неплохим решением может стать фреймворк Vaadin, или платформа Jmix, которую тоже разрабатывает наша компания. Языковая преемственность и возможность писать фронтенд код на бекенде очень подкупают, однако, эти технологии не лишены определенных проблем. В частности, глубокая кастомизация потребует серьезного погружения в технологию, что создает определенные риски для проекта. Возможно, есть какая-то альтернатива с использованием более популярных фронтенд технологий?

Да, она есть! Представьте, что есть такая технология, которая с одной стороны позволяет быстро стартовать проект, а с другой — дает возможность легко находить ответы на любые вопросы благодаря использованию мейнстримного React. Мы уже раньше рассказывали вам про Amplicode Frontend, но сильно в подробности не вдавались. Что ж, пора приоткрыть завесу и рассказать об этом инструменте подробней.

React-Admin — это мощный open-source фреймворк для создания административных пользовательских интерфейсов, построенный на базе React. Он предоставляет готовую инфраструктуру для разработки сложных интерфейсов, упрощая создание функциональных и масштабируемых административных панелей.

Сегодня мы представляем инструмент Amplicode Frontend — расширение для VS Code помогающее в разработке административного пользовательского интерфейса. 

Почему VS Code? Было бы удобнее использовать привычные всем инструменты от JetBrains, однако, WebStorm не имеет бесплатной версии, а поддержка js/ts входит только в Ultimate версию IntelliJ, использовать которые в России сейчас не так-то просто. Поскольку мы ориентируемся на российский рынок, было принято решение работать на платформе опенсорсного VS Code. При этом мы постарались минимизировать возможные сложности у Spring разработчиков, привыкших работать с IntelliJ IDEA и выпустили отдельный пакет расширений Amplicode Fullstack, который в том числе включает в себя конфигурацию  шорткатов, схожих с IntelliJ.

Создание Admin UI приложения

Пользователи Amplicode наверняка замечали опцию React Admin UI в меню Create в Amplicode Explorer. Это входная точка в функциональность по разработке административного фронтенда.

В достаточно простом визарде можно выбрать приложение, для которого разрабатывается Admin UI и некоторые другие настройки. На данный момент предполагается, что все эндпоинты, использующиеся в админке будут развернуты по некоторому стандартному пути.

После генерации мы получим пустой шаблон приложения с полностью готовым дата провайдером (модулем взаимодействия с API, объект React-Admin) и небольшую инструкцию в README.MD файле с дальнейшими шагами. В частности, прямо из MD файла можно вызвать команду установки Amplicode Frontend/Amplicode Fullstack в VS Code. Открыть сгенерированный проект в VS Code можно из Amplicode Explorer.

Полное понимание модели API

Чтобы админка работала, нам нужно сделать для нее Rest API. Учитывая, что большая часть экранов таких приложений - это круды, здесь пригодится функциональность Amplicode по созданию CRUD Rest Controller. В сгенерированном приложении data provider уже настроен на работу с такими эндпоинтами.

Пожалуй, Amplicode это первый инструмент, который работает поверх сразу нескольких IDE. Два плагина обмениваются информацией о схеме API, на основе которой в VS Code строит модель предполагаемых ресурсов (сущности в терминах React-Admin). Все задетектированные ресурсы отображаются в секции Detected Resources. Чтобы приложение “узнало” об их существовании, их нужно зарегистрировать.

В Amplicode Explorer (да, в VS Code он тоже есть) отображаются основные части приложения, включая список ресурсов, доступные для них операции, и экраны. В случае, если крудового API не хватает, можно драг-н-дропнуть в код любой эндпоинт из вкладки Endpoints, и Amplicode сгенерирует для его вызова код, включая typescript типы для реквестов и респонсов.

Генерация Экранов

Одна из интересных особенностей React-Admin — возможность отображать некоторые экраны, основываясь только лишь на ответе, пришедшем с сервера. Такие экраны называются гессеры (Guesser). В процессе регистрации ресурса Amplicode предложит сразу выбрать, какие гессеры нужно использовать. Это отличная точка для старта. Буквально в несколько кликов можно получить удобные, но не самые функциональные, экраны, с помощью которых можно управлять состоянием вашего приложения.

Однако, современный UI, как правило, гораздо сложнее, поэтому в Amplicode имеется функциональность по созданию полноценных экранов, которые разработчик сможет кастомизировать по своему усмотрению.

Визард упрощает процесс настройки параметров компонентов, предоставляет гибкие опции конфигурации, и автоматически интегрирует экраны в приложение. Информация об эндпоинтах позволяет Ампликоду сгенерировать наполнение экрана в зависимости от того, какую сущность мы хотим отобразить. Amplicode предлагает оптимальные компоненты доступные в React-Admin для каждого атрибута возвращаемой dto-шки.

И в результате, не написав ни строки кода руками, мы получаем полностью функциональный  экран:

Помощь в верстке

Amplicode Palette — это мощный инструмент для удобного управления и использования компонентов в разработке интерфейса. Он представляет собой интерактивную панель, которая обеспечивает доступ к библиотекам UI-компонентов — как из подключаемых UI-китов, так и к пользовательским компонентам, разработанным специально для проекта.

В созданном проекте сразу доступна палитра для React-Admin и MUI. Разработчик может не покидая IDE изучить большое количество компонентов из этих библиотек, выбрать подходящий для себя и драг-н-дропнуть его в свой код. Это до некоторого момента снижает порог входа в технологию, позволяя сверстать экран, не заглядывая в документацию.

Однако, любой компонент может потребовать дополнительной настройки. Здесь на сцену выходит еще одна панель, знакомая пользователям Amplicode из IntelliJ IDEA - Amplicode Inspector. Инспектор позволяет редактировать некоторые параметры компонентов, не прикасаясь к коду. Но самое важное, Инспектор показывает, что компонент в принципе умеет. Казалось бы, все существующие параметры можно увидеть, если вызвать code completion внутри JSX тега компонента. Но фронтенд имеет такую специфику, что каждый компонент имеет невероятно большое количество параметров, и разобраться с ними бывает достаточно сложно.

Компонент может наследовать большое количество свойств настолько специфических, что используются они крайне редко. В то время как вызов окна автодополнений по-умолчанию предлагает нам список свойств сортриванных по алфавиту, Amplicode инспектор выводит их в порядке наследования. То есть для реакт компонента мы сперва увидим свойства описанные непосредственно в нем, затем унаследованные от остальных. Кроме того для ui-китов MUI и React-Admin свойства, описанные в документации и наиболее часто используемые вынесены в отдельную группу. При добавлении нового компонента в палитру можно указать, какие именно свойства нужно вынести в группу наиболее часто используемых. Так же для удобства генераторы обработчиков событий вынесены в отдельные группы. 

Для некоторых свойств Amplicode может генерировать достаточно большие куски кода, которые было бы тяжело написать, даже используя документацию. Но после генерации разработчик имеет полную свободу в редактировании и адаптации созданного кода.

Возьмем пример с List экраном, который мы создали выше. Допустим, нам необходимо добавить таблице возможность настройки фильтров запроса. Задача не самая сложная, но тем не менее, трудозатратная. Но вместе с Amplicode она решается в два клика:

Настройка Security

Обеспечение защиты данных и ограничение прав доступа к ресурсам приложения это весьма важная задача, реализация которой при этом может быть не слишком простой. В Amplicode для Spring уже давно есть функция генерации конфигураций Spring Security. Для большинства режимов Security разработчик может настроить соответствующую конфигурацию в проекте Admin UI.

Как воспользоваться

Чтобы воспользоваться Amplicode Frontend вам понадобится среда разработки VS Code. Скачать расширение можно стандартным способом в маркетплейсе Visual Studio. Подробная инструкция по установке есть на нашем сайте https://www.amplicode.ru/download/.

Мы уверены, Amplicode поможет Spring разработчику еще в одном важном деле. Ждем ваших отзывов!

Подписывайтесь на наши Telegram и YouTube, чтобы не пропустить новые материалы про Amplicode, Spring и связанные с ним технологии!