Вот так вот, ни жданно ни гадано, вышла новая версия ShopModxBox. Это не стандартный релиз, так как, вся шаблонизация и фронт написаны на реакте (и т.п. сопутствующих технологиях). То есть это весьма современно, но, скорее всего, будет очень сложно для многих, кто привык писать в админке на чанках-сниппетах, а не на JS с использованием gulp/webpack и т.п. Но наверняка должны найти и те, кто оценит это начинание.
Сразу уточню, что данная версия является пилотной и больше меня и изучения общественного мнения. Если спрос будет низкий, то новые релизы будут появляться нечасто, хотя все равно появляться будут.
Для тех кто не совсем еще в теме и не знаком с GraphQL (да и вообще никому лишним не будет), предлагаю сразу заглянуть сюда: https://shopmodx.ru/db/
По большому счету это сердце новой сборки. это GraphiQL, веб-интерфейс для формирования граф-запросов и выполнения их.
Краткий экскурс по этому инструменту.
Я буду кратко рассматривать отдельные моменты, так как почти на все есть информация в интернете. В этой статье вообще практически не будет подробных изложений, потому что материал на столько объемный, что написать придется не один десяток статей. Эта статья просто вводная.
Здесь вы не можете просто так редактировать и отправлять запросы на сервер, так как на сервере используются уже подготовленные запросы, а на вход принимаются названия конструкций передаваемые переменные. К примеру, чтобы получить данные по нескольким MODX-документам, выполняем запрос MODXResources.
Вот как это работает:
При чем обратите внимание на переключатель Локальное хранилище. Локальное - это запросы в самом браузере. Не локально - это на сервер запрос отправляется. К примеру, сейчас включена подгрузка некоторых данных на сторону браузера, и в браузере вы можете делать выборки документов, с сортировками и некоторыми фильтрами.
К слову, на стороне сервера тоже есть локальное хранилище и удаленные источники данных, но про это я позже расскажу. Сейчас это слишком сильное колдунство.
Попробуйте сами поиграться с запросами в браузере передавая те или иные параметры. Блок запроса с допустимыми параметрами описан там же. Вот делаю текущую выжимку из него:
# Все документы
query MODXResources(
$modxResourcesLimit:Int = 10
$modxResourcesPage:Int
$withPagination:Boolean = false
$modxResourcesContextKey:String = "web"
$modxResourcesShowHidden:Boolean
$modxResourcesShowUnpublished:Boolean
$modxResourcesStorage:ReactCmsStorageStoreType
$modxResourcesSort:[MODXResourceSortBy]
$modxResourcesParent:Int
$modxResourcesTemplates:[Int]
$modxResourcesOptions:JSON
$modxResourcesUri:String
$getImageFormats:Boolean = false
)
{
...RootMODXResources
}
Обратите внимание на кнопку Docs в правом верхнем углу интерфейса. Кликните ее. Увидите документацию по API. Это еще одна сильная сторона GraphQL - генерируемая документация. Не надо сверки никакие делать, при каждом изменении схемы документация всегда актуальная.
Главное отличие GraphQL от REST и прочих вещей - это то, что по сути механизмы построения API отдаются на сторону клиента. Это клиентское приложение решает какие данные ему нужны, в какой последовательности, вложенности и объеме. То есть если вам нужна информация по заказу только количество товаров и стоимость - ок, запросите только эти данные. Нужны более подробные данные (включая описание товаров и т.п.) - не вопрос, просто запросите и эти данные тоже. При чем все необходимые данные можно получить одним запросом. Конечно, для того, чтобы это именно так и работало, нужна первичная настройка графа на стороне сервера, чтобы он понимал запросы, знал откуда данные брать и в каком виде отдавать, но если все настроено правильно, со стороны клиента можно слать всякие разнообразные и хитрые запросы.
По большому счету, если вы поймете как работают запросы в GraphQL, вы поймете ценность новой сборки ShopModxBox. Иначе, скорее всего, вас это все будет слишком сложно без особого интереса. В ShopModxBox он повсюду. Он отрабатывает входящие запросы на вебсервер, определяет какие компоненты вызывать, получает для них все необходимые данные и в дальнейшем вся жизнь протекает через него. Могу точно сказать, REST не дает такой гибкости и повсеместного применения.
Установка и дальнейшая ценовая политика.
Пока что сборка и все сопутствующие компоненты будут распространяться бесплатно. Что потом будет, время покажет. Ничего не могу на счет этого сейчас сказать точно. Но скорее всего большая часть технологий постоянно будет в открытом доступе (рынок опенсурса сейчас такой). Но установка сейчас не будет прям так что вжух. Совсем новичкам может быть сложно. Да и вообще много там что будет сложно. Огромным плюсом будет уже имеющийся опыт работы с современным JS.
И так, по порядку.
Это уже готовый сайт со всей базой данных и т.п. Дамп базы в корне сайта лежит. Конфиг-файлов там нет.
Сейчас советую такой алгоритм:
1. Устанавливаем MODX-2.4.2 (просто потому что текущая версия дев-сайта такая).
2. Сносим установленную БД и заливаем дамп базы из архива.
3. Заливаем на этот установленный сайт все файлы из архива.
4. Накатываем сверху в режиме обновления свежую версию MODX (2.5.2 точно работает, более свежей под рукой не было, а оффстраница скачивания MODX 500 отдает).
Пробуйте зайти в админку, как минимум админка должна работать. Если не работает, пытайтесь занова. Логин/пароль в админку admin/admin (конечно же потом надо сменить пароль, если сайт в сети).
5. Настройка nginx. Для первичного запуска админки хватает базовых настроек веб-сервера, но для сборки желательны специальные настройки по типу того, что я сейчас покажу. Вот мой конфиг: https://gist.github.com/Fi1osof/382783330daeba487d444838cab829df
Здесь ключевые моменты следующие:
- Вот это https://gist.github.com/Fi1osof/382783330daeba487d444838cab829df#file-shopmodxbox-nginx-conf-L1-L35 блок для специального кеширующего поддомена. Правила подмены УРЛов картинок на него чуть ниже находятся. Смысл в том, чтобы использовать phpthumbof не на стороне генерации страницы (которой у нас сейчас вообще нет), а получать картинки через коннекторы. При чем кеширующий сервер на nginx нужен для того, чтобы раз получить картинку пережатую от MODX, и больше его не дергать, пока кеш картинки актуальный. Плюс к этому еще и УРЛы вечные получаются. Про это я писал тут: https://modxclub.ru/topics/absolyutnyie-ssyilki-bez-primesej-resajznutyix-kartinok-1268.html
Обратите внимание, что в конце статьи есть ссылки на картинки с городских бань. Статье три года, портал уже пережил очередное перерождение, а ссылки на картинки по прежнему живые.
Важно! Нгинкс с вот этим просто так не заработает, будет ругаться сильно. Найдите в этом конфиге вот такую запись: proxy_cache thumbs;
Вот этот параметр и надо прописать в конфиг самого нгинкса nginx.conf в директиву http. У меня это так выглядит:
http {
proxy_cache_path /var/cache/nginx_thumbs/ levels=1:2 keys_zone=thumbs:100m;
То есть надо путь к папке прописать и прочие параметры.
Второе, на что надо обратить внимание в конфиге, это то, что все основные запросы отправляются на порт 3000. Там и крутится node-сервер. Конечно же вы можете нод-сервер запускать на другом порту, и конфиг нгинкса соответственно подправить.
6. Запуск непосредственно node-сервера.
Здесь тоже несколько этапов.
Копируете config.sample.js в config.js и правите его, указав параметры доступа к БД и обязательно УРЛ, по которому будет доступен этот сайт. Дело в том, что нода будет слать запросы на MODX, и для этого она должна знать куда их слать.
2) Вот это корневая папка скина: https://github.com/MODX-Club/ShopModxBox/tree/master/assets/components/modxsite/templates/shopmodx/v4.0
Там, в принципе, уже исполняемые скрипты все сжаты и пересобирать ничего не требуется (если только у вас не отличается сильно операционка, у меня убунта 16 используется, node-js 8.9). Надо только просто скачать все зависимости. Выполняем npm i в этой папке.
После того, как все скачается, можно пробовать запускать сервер. Выполняем там же npm run start:prod
Если все ОК, сайт должен заработать (фронтовая часть). Если что-то не так, пишите в комментах, лучше со скриншотами, постараюсь подсказать.
Ну и для тех, у кого получилось запустить, да еще и что-то поправить захотелось.
Сразу скажу, что там не все так просто (я еще не до совершенства свои техники отработал, еще работать и работать). Но все же какую-то кастомизацию я постарался заложить. Расскажу подробней о структуре.
При запуске сервера, выполняется вот этот компонент: https://github.com/MODX-Club/ShopModxBox/tree/master/assets/components/modxsite/templates/shopmodx/v4.0/app/modules/Site
Практически все файлы в этом модуле проксирующие, то есть просто пробрасывающие запрашиваемые модули из других компонентов. Сделано это для того, чтобы можно было переопределять эти запрашиваемые модули. К примеру, вот здесь в компоненте shopmodx-react (который отвечает за всю основную логику в плане работы этого магазина в связке с MODX), вызывается основной компоненте рендеринга именно в модуле Site, а не в самом себе. https://github.com/MODX-Club/shopmodx-react/blob/master/components/App/index.js#L28
Сейчас там просто происходит проброс обратно на shopmodx-react https://github.com/MODX-Club/ShopModxBox/blob/master/assets/components/modxsite/templates/shopmodx/v4.0/app/modules/Site/components/App/Renderer/index.js
А можно взять и переопределить его.
Не все там именно так сделано. Я экспериментирую, обыгрываю различные варианты. К примеру, вот этот компонент релит какой рендер-компонент использовать в зависимости от запрошенной страницы, и в нем базовые рендер-компоненты заложены в дефолтных параметрах https://github.com/MODX-Club/shopmodx-react/blob/master/components/Pages/DefaultPage/index.js#L14-L32
То есть в данном случае можно будет просто при вызове компонента передавать иные рендер-элементы.
Кому интересно, покопайте этот компонент как следует, в нем прописаны и основные запросы для типовых страниц.
В общем, на сегодня я закругляю повествование. Не буду кричать тут зачем все эти сложности вообще нужны. Кто в теме и не лень будет поковырять код, а то и запустить сайт, отписывайтесь в комментариях и будем совместно думать куда и как двигаться дальше. Если мало кто заинтересован, то я буду продолжать дальше двигаться сам. Но хотелось бы, чтобы было совместно, так интересней.
От себя только скажу зачем мне это надо.
600 тысяч пакетов и полмиллиарда скачиваний в день. Это, мягко говоря, несколько больше, чем доступно в сфере MODX. Даже у меня там уже некоторое количество компонентов заимелось https://www.npmjs.com/~fi1osof
Второе: мне сложно передать свои эмоции, но JS - это реально круто! Не говорю, что это последний язык на планете, но лично для меня php в прошлом. Конечно, где надо, я и на пыхе попрограммирую, но все же это уже не вдохновляет.
Третье: в плане шаблонизации не приходится писать на нескольких языках, как сейчас на сервере пхп, на фронте JS. Здесь и там и там пишешь на одном языке и не паришься.
На самом деле у меня личных мативов еще десяток-другой найдется, но это уже ничего не меняет.
И еще такой момент: если будет заинтересованность и будут донейты и/или спонсорские предложения, то я готов гораздо больше времени уделять доработке сборки, написанию новых модулей, документации и т.п. Только уточню, 300-500 рублей погоды не делают. Все это отнимает очень много времени и сильно мозг напрягает. Бюджеты требуются посерьезней. Если что, пишите на почту n.lanets@modxclub.ru
UPD: Тут телега появилась: https://t.me/reactmodx. Стучитесь.
Судя по всему, мало кто еще понимает что такое современный JS, реакт и т.п. и зачем это вообще нужно. Вот в качестве интересного примера: https://stackblitz.com/edit/test-google-map
Это аналог сервиса jsfiddle.org, только специализированный под реакт и ангулар. Посмотрите код, конечный вывод, и прикиньте, как быстро вы сможете имеющимися у вас на текущий момент средствами накидать компонент для вывода гуглокарты с любыми кастомными на ней HTML-элементами (при том, что гуглокарта в принципе просто так не дает кастомные элементы выводить).
Привет всем. Во первых, всех с праздниками и наверное всем хотелось бы пожелать жажды нового и тяги к будущему, потому что только мы можем сделать будущее настоящим.
Во вторых, да собственно по сабжу.
Пакет развернуть мне не удалось, причины скорее всего технические, но все по порядку..
Локально (под Windows7+OpenServer) я не развернул даже пакет react-study не стал долго копаться в проблемах и воспользовался modhost и все заработало с полу-тыка. ShopBox - правда не развернулся места ему не хватило но все равно там есть на что посмотреть.. как я понимаю в v4.0/ это подготовленный скин в котором можно начинать трудится, а все конфетки в пакете shopmodx-react который подтягивает еще пару интересных пакетов react-cms, modx-react ..
Включу хотелку ... хотелось бы видеть пакет который будет самодостаточен в плане работы с МОДХ без дополнений Магазина а что то схожее с modxsite .. но я так понимаю что его можно выпилить из этой сборки.
И напоследок, хотелось бы поблагодарить Николая за то что он делает.
Буду следить за всем этим обязательно, более того буду пробовать, щупать и вообще двигать себя в этом направлении.
п.с. на самом деле вопросов на столько много что даже не понятно с чего начинать, так что пока изучаю сборку
Добрый день и тоже с праздником!
Выпиливать ничего не надо. Для этого и делаются отдельные компоненты типа modx-react и react-cms. Главный базис - это react-cms. Конечно же он далек от конечной версии, там многое еще на базе заготовок. Но, до сих пор нет на рынке полноценного компонента CMS на базе node+react, поэтому приходится пилить что-то свое, по мере необходимости. Во всяком случае сервер-рендеринг, GraphQL и прочее в нем уже есть (кстати, даже серверные заголовки 200, 500, 301, 404 и т.п.). Меня этот пакет вполне устраивает, хоть над ним еще и придется поработать.
Пакет modx-react появился уже после этого релиза. В него я прописываю основные модели для работы с БД MODX. Он не работает сейчас напрямую с БД, а через modxsite-процессоры, и пока только документы и пользователи, но тем не менее, позволяет получить необходимые данные. https://github.com/MODX-Club/modx-react/tree/master/src/components/ORM
На будущее есть идеи, и скорее всего, это компоненты станут более полными и самостоятельными.
Не за что.