Лучшие практики по интеграции компонентов React в Drupal 8

Главные вкладки

Аватар пользователя Max-Z Max-Z 11 сентября 2018 в 17:10

Трудно не заметить, насколько активно сейчас продвигается тема Headless Drupal. Идея звучит многообещающе - объединить передовую фронт-енд библиотеку React и самую продвинутую на текущий момент CMS.
К сожалению, вся информация по теме сводится к нескольким статейкам, каждая из которых подает тему отрывочно, кроме того, предлагает очень разные методы имплементации.
Было бы здорово провести хотя бы поверхностный анализ предлагаемых методов, дополнить их и определить лучшие практики.

В частности, меня интересует так называемый Progressive decoupling – т.е. частичный decouple, позволяющий использовать разные компоненты React на страницах, которые рендерит Drupal 8.
За основу по ряду причин я взял вот эту статью, однако вместо стандартных RESTful services я решил использовать JSON API модуль, посколько официальная документация рекомендует его для большинства случаев.

В упомянутой статье автор предлагает установить приложение React с помощью create-react-app в папку с кастомным модулем, провести ряд модификаций, после чего подключить сгенерированные командой build файлы как библиотеки этого модуля через файл my_module.libraries.yml.
Далее утверждается, что лучший метод внедрения React компонентов является модуль Paragraphs (который, судя по всему, уйдет в историю после полноценного запуска Layout Builder).
Если существует способ использовать разные “параграфы” как заготовки для React компонентов – это действительно было бы очень удобно.

И здесь возникает ряд вопросов – какова должна быть структура кастомного модуля? Должен ли я использовать роутер, контроллер, файл “my_module.module” или, например, мне нужен Plugin?
В каком файле лучше прописать функцию hook_preprocess_paragraph__HOOK function (которая должна подключать js библиотеки к разным типа “параграфов”)?

Буду благодарен всем, кто поделится опытом и выскажет свои соображения по теме!

Лучший ответ

Аватар пользователя gun_dose gun_dose 11 сентября 2018 в 19:46
1

Имхо, частичный decouple - путь в тупик. Как по мне, надо либо отрывать голову совсем, либо на vanilla js писать красивости.

По модулю: скорее всего вам нужен rest resource. Для генерации заготовки кода используйте друпал-консоль. Команда drupal gprr. Но если jsonapi покрывает все ваши потребности, то и он не нужен. Библиотеку с вашим скриптом можно подключить в хуках препроцесса. В файле .module или даже в теме.

Комментарии

Аватар пользователя gun_dose gun_dose 11 сентября 2018 в 19:46
1

Имхо, частичный decouple - путь в тупик. Как по мне, надо либо отрывать голову совсем, либо на vanilla js писать красивости.

По модулю: скорее всего вам нужен rest resource. Для генерации заготовки кода используйте друпал-консоль. Команда drupal gprr. Но если jsonapi покрывает все ваши потребности, то и он не нужен. Библиотеку с вашим скриптом можно подключить в хуках препроцесса. В файле .module или даже в теме.

Аватар пользователя Max-Z Max-Z 19 сентября 2018 в 10:51

Я обошелся без Rest resource, сгенерировал обычный модуль, подтягивающий js библиотеки и заменяющий ими указанный paragraph.
В целом я остался доволен - минимум кода и прощай Views Slideshow. Какое-то время ушло на освоение JSONAPI. Отказ от использования views в угоду применению filter, sort & include непосредственно в axios-запросе поставил ряд нестандартных задач.
Например, запрос поля image почему-то упорно не выдает url загружаемого в материал изображения, пришлось устанавливать доп. модули Consumers и Consumer Image Styles, при этом он присоединяет к запросу эти данные только если запрашивать поле с изображением через include. При этом я получил два отдельных массива для одного типа Материала, т.е. для одного слайдера нужно параллельно запускать две функции .map в разных массивах. Пришлось слить массивы в один, объединив объекты с одинаковыми индексами.
Кстати, React-модуль Rewire делает умную штуку. Build-версия приложения содержит только сам компонент, а React я подтягиваю через CDN как библиотеку модуля. Если таких компонентов много, можно добавить эту библиотеку в саму тему.
В любом случае потратить немного времени, чтобы разобраться с JSONAPI и получить готовенький responsive Slider, который еще и реагирует на жесты на touch экранах, это лучше, чем изобретать велосипед в Views Slideshow.
Я не говорю, что это оптимальный метод, но делать фронт-енд на React - удобно и востребовано.

Аватар пользователя gun_dose gun_dose 19 сентября 2018 в 13:04

Вот кстати все эти инклюды и консьюмеры сперва вызывают интерес, потому что можно полностью отказаться от вьюс и можно менять фронт как хочешь, не меняя при этом бэк. Но потом это всё надоедает и начинаешь лепить REST-вьюсы именно из-за того, что просто надоедает на фронте каждый раз референсы вытаскивать из инклюдов и хочется получить более простую структуру JSON.

Аватар пользователя Max-Z Max-Z 19 сентября 2018 в 14:53

Хорошо подмечено. Мне вот хочется еще реакт-каруселей модных добавить для вывода товаров вместо стоковых пейджеров. Вьюхи уже настроены, а от одной мысли, что нужно опять морочиться с JSONAPI как-то не по себе становится:)

Аватар пользователя Max-Z Max-Z 11 сентября 2018 в 20:52

Спасибо, буду пробовать. Кстати, я читал Вашу статью по этой теме:)
По поводу полного decouple - согласен, планирую проект на contenta.cms+contenta.js.
Частичная интеграция понадобилась для сайта, который уже функционирует.

Аватар пользователя gun_dose gun_dose 12 сентября 2018 в 0:45

Ну а какими, например?)) Просто есть всякие штуки на реакте, которые есть и на жквери и на ванильном джаваскрипт. Это не говоря уже о том хрестоматийном случае, когда некий сферический сеньор в вакууме написал 2000 строк на реакте, чтобы реализовать то, что делается в css с помощью position: absolute ?

Где я вижу реальную пользу от применения реакта - это переписать корзину коммерс на react + redux. Это будет особенно полезно, учитывая полную деградацию аяксовых форм на восьмёрке.

Аватар пользователя Max-Z Max-Z 12 сентября 2018 в 10:02

Например, заменить корявый Views Slideshow на современный слайдер из библиотек
React.
Прежде всего, мною движет любопытство + желание ближе познакомиться с темой создания модулей на D8, ну и конечно лишний раз попрактиковаться с React, которая в отличие от того же Друпал, переживает куда лучшие времена:)

Аватар пользователя gun_dose gun_dose 12 сентября 2018 в 10:28

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