Сегодня мы хотим поделиться нашим опытом разработки админ-панелей (CMS) с использованием Filament — чрезвычайно мощной библиотеки Fullstack-компонентов, основанной на фреймворке Laravel и технологии Livewire.

Мы используем Laravel в качестве основного фреймворка для разработки бэкенда всех наших проектов, и однажды возник вопрос: какое решение для админ-панелей выбрать? Мы остановились на Filament — тогда еще сырой, маленькой, почти незадокументированной open-source админке.

Как показало время, не зря.

В этой статье  мы не будем сравнивать Filament с другими админками, так как это не особо вписывается в формат (тем более, это  уже делали другие). Однако важно подметить, что мы достаточно долго выбирали между Filament и другой, на наш взгляд, более популярной среди русскоязычного комьюнити Laravel, библиотеки — Orchid (отечественная админ-панель с философией DIY).

Мы работали над  несколькими проектами на Orchid параллельно с проектами на Filament и остановились на последнем. Постараемся объяснить, почему мы считаем, что Filament — пожалуй, лучший выбор, который вы можете сделать, если ваша деятельность связана с написанием CMS.

Зачем вообще нужна админ-панель?

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

Filament — один из тех инструментов, который не предоставляет готовое решение. Вы должны самостоятельно создавать необходимые разделы, описывать поля и связи для ваших сущностей.

Начало работы с Filament

Подключить Filament к своему проекту очень просто. Достаточно подтянуть его через composer и выполнить команду artisan filament:install --panels и создать пользователя-админа artisan make:filament-user.

Теперь, перейдя по пути /admin вы увидите пустой дэшборд. На этом минимальная настройка Filament завершена.

Разделы (здесь они называются ресурсами), страницы, темы, панели, виджеты и многое другое также генерируются командами artisan make:filament-*, после чего редактируются под нужды проекта.

Вот несколько классных фич Filament, которые точно выдвигают его вперед среди остальных админок. 

Никакого JS

Вам совсем не нужно прибегать к использованию javascript, чтобы конструировать страницы. В Filament весь код ресурсов пишется в ресурс-классах, в декларативном стиле на языке программирования PHP, а сам ресурс удобно поделен на две части — форму и таблицу, отвечающие за постраничное отображение всех записей и просмотр/отображение отдельных записей соответственно. Также в ресурсах прописываются все необходимые сортировки и фильтрации, и делается это крайне просто.

В коде это выглядит примерно так:

А результат получается таким:

Можно заметить, что можно кастомить лейблы, делать тот или иной столбец searchable. Также можно отключать компоненты, скрывать их и производить другие произвольные манипуляции в зависимости от какого-либо состояния. То есть админка на Filament получается еще и интерактивной.

Если вам покажется, что этого мало, вы можете запросто написать кастомный javascript с любой логикой, какая вам нужна. Скрипт может быть либо глобальный (он будет работать на любой странице), либо на какую-то отдельную страницу.

Компоненты

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

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

Скриншот дашборда с официального демо Filament:

Доступ к ресурсам

Полезной особенностью Filament является поддержка управления доступом пользователей к различным ресурсам админ-панели посредством политик Laravel. Вы просто описываете привычные политики для ваших моделей и ресурсы Filament автоматически ограничат доступ пользователям, не удовлетворяющим правилам.

Это позволяет гибко настраивать права доступа пользователей.

Кастомизация

Кастомизировать можно почти все. Начиная от цвета акцентов, заканчивая версткой страниц с использованием Livewire. Можно вырезать ненужный функционал либо же, наоборот, добавить недостающий.

Масштабируемость

Filament легко масштабируется. Вы можете писать независимые друг от друга ресурсы или целые админ-панели, независимые друг от друга в рамках одного репозитория. Это позволяет не задумываться о том, что ваш код в одном разделе может сломать что-то в другом.

Или вы можете держать несколько версий админок для пользователей с разными ролями.

Еще Filament очень просто справляется с огромным количеством данных, сложными формами, интерактивностью и работой с медиа. Вряд ли вы столкнетесь с проблемой того, что не можете сделать что-то в Filament. Даже если это недокументированная фича.

Внедрение зависимостей

В любой метод любого компонента Filament, в который  можно передать callback, этот callback можно модифицировать, объявляя в нем параметры, которые будут разрешены Filament в зависимости от имени параметра.

Так вы можете передать $record в callback и этот параметр будет содержать в себе инстанс модели, с которой работает форма. Благодаря этому можно, например, проверять значения полей записи.

Или другой вариант — параметры $get и $set позволяют получать или задавать значение любого поля на форме в любой момент времени.

Выглядит это примерно так:

Активное сообщество разработчиков

Filament известен своим большим и активным комьюнити, которое разрабатывает и поддерживает его. Это обеспечивает актуальность библиотеки в экосистеме Laravel и в принципе.

Документация и обучающие материалы

Filament обладает качественной документацией и множеством примеров. Задокументировано не все, но сообщество выпустило много статей с самыми разными кейсами. Документация легко читается и покрывает почти все аспекты работы с библиотекой.

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

Немного о минусах

Поскольку Filament использует стек TALL (Tailwind CSS, Alpine.js, Laravel, Livewire), он может работать хуже, чем админка, написанная на каком-либо js-фреймворке. На каждое обновление интерактивных полей идет запрос на бэкенд.

Так, приложение может подтормаживать, если не грамотно его написать. Но даже это решается кэшированием.

Итого

Если вы еще не решили, на чем писать админки для ваших проектов или если у вас уже есть действующие проекты, настоятельно рекомендуем попробовать Filament.