Всем привет!
А вы уже слышали про новый тренд - headless cms, или на русский манер "Безголовые ЦМС"? Если нет, то советую к прочтению вот эту замечательную (на мой взгляд), статью:
А я вот для себя такое понятие открыл совсем недавно, буквально пару дней назад. Просто решил прежде чем опубликовать топик о своем движке, осмотреть интернеты на предмет похожих технологий. Точно сказать не смогу, плохо это или хорошо, что не наткнулся на подобную информацию раньше. Если бы наткнулся, то может и более заточено под общие тренды движок получился. Но зато так у меня получился собственный движок без попытки скопировать что-то другое :) То есть то, что у меня получилось, это почти на 100% воплощение моих собственных идей (хотя и конечно же почти на 100% с применением кучи сторонних технологий). И хотя кто-то скажет, что идея во фронте не нова, что это всегда было в битриксе (с чем я и не поспорю), но все же, где-нибудь вы уже видели битрикс без админки вообще?...
Админский доступ: логин demo пароль demo. Авторизовавшись, вы сможете редактировать и добавлять карточки товаров и других пользователей, но не сможете отредактировать пользователя demo (такой вот неправильный супер-пользователь).
Для тех, кто задается вопросом бесплатный ли это движок, с исходным ли он кодом и все такое, спойлер: да, все бесплатно и с открытым кодом. Детали будут ниже представлены, сейчас просто вводная часть с теорией.
Как вообще все началось? Началось с одного нашего давнего долгостроя, который начинали еще делать на MODX. Но в процессе с толкнулись с рядом проблем:
1. Это стартап с набором идей, которые время от времени корректируются, в след за чем приходилось корректировать и структуру проекта, иногда кардинально. И вот когда возникала необходимость вслед за эти отредактировать несколько таблиц в БД, переписать процессоры для редактирования этих данных, ну и соответственно интерфейсы, скажу так: иногда это занимало даже не один день и было мучительно больно.
2. Информации действительно много. Много и всяких взаимосвязей у объектов. И даже когда сущностей было в несколько раз меньше, чем сейчас, уже погда возникли серьезные сложности с тем, чтобы быстро обучить менеджеров по наполнению. Да, в MODX можно раскидать различные поля по отдельным блокам, чтобы боле менее сгруппировать поля по логике, но, если вы когда-нибудь пробовали в MODX без всяких сторонних дополнений хотя бы отсортировать TV-поля, вы меня должны понять.
3. Даже если в админке все более менее сгруппировать, все равно остается сложность в том, чтобы объяснить менеджеру куда и в каком виде какая введенная информация выведется на конечной странице сайта.
Вот и возникла идея в том, чтобы дать менеджерам возможность редактировать информацию абсолютно в любом месте, где он ее на сайте видит, лишь бы прав ему на это хватило. И все это без какой-либо дополнительной админке. Так сказать, полный front-end wysiwyg.
Что из этого вышло и как это работает, можете посмотреть здесь: https://new.sportpoisk.info/companies/Hk3lbJB6ofOz/
Сохранить изменения в компании у вас не получится, но редактирование вам доступно, можете поиграться с этой компанией.
К слову о том, чтобы редактировать там, где эту информацию видишь, можете заглянуть и сюда: https://new.sportpoisk.info/@55.73473208955258,37.56079654980476,11/search/test/company/Hk3lbJB6ofOz
Эта же компания, но выводится в другом месте. И здесь ее можно так же редактировать.
Ну а заодно и оцените скорость работы... И это еще не предел. Про скорость я еще напишу ниже.
Бонусом отмечу, что сейчас этот сайт так же полностью работает на prisma-cms, просто со своими плюшками поверх ядра...
Вот, собственно, к этому я пришел за последние два года. Путь был долог, тернист и сложен, через освоение javascript с нуля, написание чистых graphql-запросов и резолверов, тонны оптимизации по производительности (первые рабочие node-js проекты на сервере требовали до 1.5GB оперативки только под node-процесс, в сравнении с 45Mb текущими), настройки политик безопасности с нуля и т.д. и т.п. Объем был действительно огромен. А с учетом того, что параллельно подобный проект ведется не один, это добавляло еще свои сложности (надо было как-то прийти все-таки к тому, чтобы в разных проектах можно было использовать одни и те же модули с индивидуальными доработками). Все проекты не могу показать, но вот еще один: https://pivkarta.ru/
А теперь побольше технических тонкостей.
1. Если вы еще не знакомы с javascript и node-js и не разворачивали у себя даже простейшие проекты, но интерес есть сильный, сразу скажу, будет в любом случае сложно. Это гораздо сложнее, чем разработка на php. Так что если интерес не велик и сводится только к тому, чтобы просто посмотреть, советую лучше даже не начинать. Там огроменный пласт технологий и неограниченный простор для всяких логических и технических ошибок, от которых чаще всего не спасает даже хорошая документация.
2. Все сопутствующие компоненты по этому направлению я выкладываю вот сюда: https://github.com/prisma-cms
Здесь коротко обозначу что за что отвечает:
- https://github.com/prisma-cms/server Серверная часть API, отвечает за обработку входящих API-запросов и формирование ответов. По сути работа с первоисточниками данных (их редактирование и чтение).
- https://github.com/prisma-cms/front Здесь все, что связано с отображением на конечный сайт, включая SSR (server-side rendering).
- https://github.com/prisma-cms/boilerplate Готовая заготовка всего этого в кучу, так, чтобы развернул и полетело. http://prisma-cms.com/ тоже вот на этом как есть работает, только с небольшими модификациями поверх. Вот бранч конкретно этого сайта, вы так же можете его у себя развернуть сразу с движком товаров: https://github.com/prisma-cms/boilerplate/tree/site
Как все это разворачивать, написано там же. Уточню на всякий случай: https://github.com/prisma-cms/boilerplate
Там на ломаном "английском", но это технический английский, так что наверняка будет понятно тем, кто в теме. Там описано сразу два режима работы движка, полностью автономно (когда все находится на вашем собственном сервере, включая базу данных) и с использованием облачного бэкэнда https://www.prisma.io/cloud/
Во втором случае процесс установки значительно проще, так как вам не придется устанавливать docker и настраивать prisma локально, а достаточно будет только на ноде проект скачать и запустить. Но и там есть тонкости, к примеру с тем, что для получения API-токена вам надо чтобы из консоли браузер запускался, то есть по сути локально запускалось. Но и в этом случае есть обходной путь: или развернуть и потестировать все локально, или развернуть на удаленном сервере, а локально только node-проект запустить, чтобы получить токен с использованием браузера, и потом токен скопировать на сервер. (Да, как я и говорил, здесь очень много всяких тонкостей, с которыми сталкивался всякий, кто пробовал с node-js работать. Но я уже привык...).
Если вы не испугались и решили идти дальше, напомню, что я уже писал подробно про процесс установки призмы: https://modxclub.ru/topics/razvorachivaem-graphcool-prisma-na-golom-zheleze-2750.html Прежде чем начать устанавливать по свежей англоязычной инструкции, советуется сначала этот материал прочитать. Там есть пара неактуальностей и по ней не стоит устанавливать, но зато в ней более подробно расписывается что и как устроено.
А что тут так мало?
Таки да, каждый спросит, "А что тут так мало? Почему все, что мы увидели, это какой-то невзрачный сайт, в котором даже цены не выводятся?".
Тут все очень просто, хотя и не обычно. Собственно, в этом и есть суть headless cms, или как их еще называют api-first cms. В таких проектах главное не отображение, а API. То есть все строится вокруг организации процесса управления контентом без всякого отображения, то есть без front-end. Задача сводится к тому, чтобы организовать процесс хранения и управления контента в чистом виде. А где и как этот контент будет использоваться и выводиться - это уже задача конечных проектов по визуализации, которые получают эти данные в чистом виде по API. То есть при наличии одного такого API-источника, точек вывода информации может быть сколько угодно. Это могут быть сайты, мобильные приложения, другие сервисы (которые, в свою очередь, могут выступать как потребителями информации, так и поставщиками ее).
По этой причине сам сайт http://prisma-cms.com/ - это всего-лишь демо-морда. А все самое интересное - это непосредственно бэкэнд, с которым работаешь по API. К примеру, вот API-интерфейс http://prisma-cms.com/api/
Почитайте в интернетах что такое graphql и с чем его едят, и тогда сможете и этим интерфейсом воспользоваться.
P.S. конкретно это статья - еще только затравка и изучение спроса. Мне сейчас неведомо насколько подобные технологии уже известны среди моей аудитории и есть ли уже спрос на нее. Если есть, пишите вопросы в комментариях, буду подробно расписывать. Скажу только, что расписывать есть что. То, что я сделал, это не просто копирование готового движка, который можно найти на каждом углу. Там довольно хитрая система расширения API, которая позволяет в считанные минут настроить базу данных под себя и получить кучу методов для работы с ней. А тестирование - это вообще отдельная песня. Чего только стоят тесты на покрытие кода...
UPD: Кстати, в свое время я уже писал довольно подробные уроки про react и graphql
и даже выводил простенький интерфейс для формирования и выполнения graphql-запросов: https://modxclub.ru/react-lessons/lesson2
Можете выполнить в нем, к примеру, вот такой запрос:
query{
users{
id
username
fullname
resources{
id
pagetitle
longtitle
uri
}
}
}
А чуть позже я вам выведу более полноценный интерфейс, чтобы вы могли оценить разницу.
Артем, судя по всему ты пытался отправить сообщение с мобильника. К сожалению, в используемом текстовом редакторе draft-js есть старая бага, проявляющаяся на некоторых сочетаниях "андроид+клавиатура+мобильный браузер". В результате кириллица не воспринимается и отправляется пустое сообщение (или неполное). Открыто несколько тикетов, вот собирательный: https://github.com/facebook/draft-js/issues/1895
Надеюсь скоро поправят и проблема исчезнет. Пока что гарантировано сообщения отправляются только с компа или в латинице.
Остается только решить вопрос как обновлять текущего пользователя - не понял, а в чем вопрос тогда? Использовать ли для этого процессоры?
Николай, это очень интересный проект! Буду внимательно следить за его развитием.
Желаю успехов!