mmxApp - разработка новых composer дополнений

19 апреля в Белграде прошла встреча разработчиков, на которой я рассказал про создание новых composer-only дополнений.



По старой традиции, заодно предложил и готовое решение для этой разработки, как уже было с modExtra и App.

Новый проект называется mmxApp, и предназначен для локальной разработки в Docker на Linux и MacOS.

Давайте посмотрим небольшую демонстрацию:



Что происходит на этом видео?

1. Клонируем проект из репозитория
2. Создаём файл с настройками
3. Переименовываем проект из mmx-app в mega-ultra-app
4. Запускаем контейнеры Docker
5. Устанавливаем MODX внутрь контейнера PHP
6. Заодно ставится и наше новое дополнение

Теперь можно начинать разработку.

Логика работы

Используется 4 контейнера Docker:
— MariaDB для базы данных.
— Node для фронтеда.
— Php-Fpm для бэкенда.
— Nginx для вывода этого всего у вас в браузере.

Новое приложение лежит в корне проекта под указанным именем mega-ultra-app. При старте Node и PHP контейнеров, оно монтируется им в корень файловой системы.

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

Но это только исходники, нужно же создать дополнение внутри MODX: пространство имён, плагины, чанки, и всё такое. Для этого используются встроенные CLI скрипты установки и удаления — там нет ничего сложного, просто работа с базой данных.

На мой вгляд, это сильно проще сборки старого транспортного пакета.

Фронтенд

Фронтенд работает с теми же исходниками, но внутри своего Node контейнера.

Я предлагаю использовать Vite вместе с Vue 3 и Bootstrap 5, что даёт нам возможность подключать фронтенд в режиме для разработки с горячей заменой модулей (HMR). В принципе, ничего не мешает использовать React вместо Vue, или любой другой фреймворк.

Для унификации своих дополнений я уже выпустил готовую Vue библиотеку с интеграцией в админку MODX @vesp/mmx-frontend. Просто устанавливаете как зависимость, затем берёте её конфиг и расширяете. mmxForms уже так и делает.

Плагин

Плагин является просто ссылкой на метод handleEvent внутри основного класса App и по умолчанию нужен для двух операций:

1. Вывод страницы дополнения в админке, путём подмены контроллера на лету с регистрацией js и css.
2. Обработка запросов в API от админки и, если нужно, публичного сайта.

Скрипты фронтенда могут регистрироваться в двух режимах: разработка и продакшн. Логика такая: если в директории assets/dist дополнения лежит файлик manifest.json со ссылками на собранные файлы, то используем их — это продакшн.

Если такого файла нет, то пробуем подключиться к порту 9090 контейнера Node, для загрузки файлов сервера разработки Vite.

Таким образом, можно при разработке иногда собирать фронтенд для проверки разрмера файлов и скорости загрузки продакшен версии. А потом удалять manifest.json и снова работать с HMR.

Бэкенд

Серверная часть основана на моей библиотеке vesp/core, и основная логика находится в App->run():

1. Запрос прилетает на адрес, совпадающий с namespace вашего дополнения, например /mega-ultra-app/....
2. Выставляются маршруты в методе setRoutes().
3. Если запрос соответствует маршруту, запускается соответствующий контроллер.
4. В ответ отдаётся JSON, с которым и работает Vue приложение.

Контроллеры должны быть наследниками Vesp\Controllers\Controller. Для работы с таблицами исользуются модели Eloquent.

В mmxApp лежит пример работы с таблицей items: миграция, модель и контроллер — так что можно надобавлять всего по образу и подобию, наделать маршрутов и организовать работу с любыми сущностями.

Сниппеты и Чанки

У меня сниппет ссылается на метод App->handleSnippet(), по той же логике, что и плагин. Подключает js и css в нужном режиме и в качестве ответа выводит только элемент для монтирования фронтенд приложения.

Понятное дело, что это просто пример, использовать Vue на публичном сайте вовсе необязательно. Можно делать всё по старинке обычными чанками вообще без подключения скриптов и стилей — это уже вам решать.

Публикация дополнения

Когда мы создали все свои модели, таблицы, контроллеры и прочее, наступает время выгрузить новое дополнение для установки на сайтах. Обязательно соберите фронтенд перед выгрузкой — юзеры не смогут подключиться к вашему контейнеру с Node!

Дальше 2 варианта: публичное или приватное приложение.

Для публичных используем репозиторий на Github, а потом указываем его ссылку на packagist.org.



Приватные проекты хранятся в приватных репозиториях, и для доступа к ним вам нужно будет настроить свой composer.json по инструкции.

Заключение

Вот такой коротенький рассказ про разработку новых дополнений. Теперь у вас больше нет причин не пробовать разработать что-то по-номому!

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

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

Например, я уже сделал таким способом небольшой магазин для одного заказчика. Раньше там было оформление заказов через FormIt и SimpleCart, а теперь собственный компонент:



Я снова могу разрабатывать что-то в MODX!

Ссылка на код заготовки — github.com/bezumkin/mmx-app.
Ссылка на презентацию в Белграде — file.modx.pro/files/9/7/1/9710a725c5fd155ae6932ea37557f8b7.pdf.

Вопросы можно задавать в комментариях.

Обновлено 24.04.2024

Попробовал записать скринкаст по разработке