Headless CMS: простое и быстрое решение, когда не хочется сильно лезть в код
Авторизуйтесь
Headless CMS: простое и быстрое решение, когда не хочется сильно лезть в код
Admitad Projects Frontend Developer
Что такое Headless CMS
Headless CMS — ряд программных продуктов, которые иногда могут заменить весь бэкенд для веб-приложений. Их функциональность ограничена, но часто её достаточно, чтобы быстро внедрить систему управления контентом на проект. Ключевой момент: Headless CMS позволяют хранить и управлять данными без программирования. Они берут на себя всю работу:
Например, есть фронтендер Василий. Ему нужно написать небольшое веб-приложение, минимум сложных функций. Чтобы сэкономить себе время и энергию на программирование бэкенда, Василий может использовать Headless CMS. Тогда все технические задачи решаться за вечер, и можно будет приступать к фронтенду.
Упрощенно можно сказать, что Headless CMS отвечают только за бэкенд-часть, за данные. Они могут взаимодействовать с любыми форматами их представления — от сайтов до приложений, потому что большинство проектов у Admitad Projects использует несколько каналов распространения контента.
Когда Headless CMS будет не самым эффективным решением — альтернативы
На проекте полноценный бэкенд
Headless CMS ориентированы на работу с данными в стиле CRUD. То есть они поддерживают только базовые операции с данными.
Реализовать сложную логику или организовать высоконагруженное приложение — это решение вам не подойдет. Будет проще написать бэкенд самому.
Можно хранить контент в коде проекта
Контент — например, статьи, если речь идет о блоге — можно хранить в исходниках, рядом с кодом фронтенда, использовать какой-нибудь язык разметки.
Такой подход поддерживают многие фреймворки. Например, для Nuxt есть модуль Content. Он обеспечивает загрузку и форматирование данных. Но потребуются доступ к репозиторию и желание работать с кодом.
Можно использовать конструкторы сайтов
И получать все блага подхода WYSIWYG. Плюсы — можно вообще не трогать код и собрать все из готовых блоков. Минусы — реализовать дополнительные функции очень сложно, а иногда просто невозможно.
Выбор подходящей CMS: что нужно знать
Предположим, вы решили попробовать для своего проекта Headless CMS. Всего есть порядка 100 разных Headless CMS. Есть каталог, из которого можно выбрать нужное решение.
Все CMS можно разделить на два типа — API Driven и Git-based.
API Driven Headless CMS похожи на классический бэкенд веб-приложений: есть база данных, есть сервер, который обслуживает запросы клиентов.
Некоторые CMS не предоставляют API, но имеют дружественный интерфейс для редактирования данных в Git-репозиториях. Их называют Git-based. Пример — FrontAid. Вначале все изменения пушатся в репозиторий, а затем происходит пересборка сайта или приложения.
Основное отличие API-Driven от Git-based в том, как именно будет храниться контент. Например, если вам не нужно публиковать в день десятки страниц или очень часто пересобирать сайт, подойдет решение Git-based. А если нужна полноценная система публикации контента — смотрите в сторону API-Driven.
Пример, как всё работает
Вот одностраничный сайт на Nuxt. Он работает в режиме SSR, то есть клиент получает отрендеренную страницу с готовой версткой.
На нашем сайте можно выделить блоки:
Сейчас это обычный статичный лендинг. С помощью Headless CMS мы это исправим. Используем сразу две системы:
На самом деле можно всё сделать через Directus, поскольку для Nuxt не имеет значения, откуда тянуть данные для сборки статического сайта — из файлов проекта или из API. Но мы посмотрим, как работают оба типа CMS.
FrontAid
Он позволяет редактировать исходный код на GitHub через веб-интерфейс. Нужно подключить FrontAid к репозиторию, объявить формат данных в model.json. По этому описанию FrontAid соберет интерфейс для редактирования. Все данные будут комититься обратно в репозиторий, в файл content.json. Его потом можно будет загрузить в приложение.
Вот как это выглядит на практике. Логинимся на FrontAid, создаём новый проект:
Подключаемся к GitHub, указываем репозиторий, ветку и путь к model.json и content.json.
Вначале нам нужно описать модель данных. Заходим в model.json. В нём уже объявлены поля для примеров. Можно использовать отдельное значение, структуру или коллекцию.
Это наш блок статического текста. Здесь указана опция rich text. Таким образом у нас будет редактор HTML в интерфейсе.
Для карточек будем использовать коллекцию. У нас есть заголовок — title, есть цена — price, есть единица — unit.
Мы задали структуру. Если все сделано верно, в интерфейсе FrontAid появятся объявленные поля:
Для примера в блоке описания выделим часть текста жирным шрифтом, часть — наклонным.
Добавим новую услугу — ретушь.
Сохраняем. Данные должны прийти в файл content.json.
Осталось использовать эти данные в шаблоне — index.vue.
Подгрузим файл, который получили из FrontAid строкой
Сделаем вывод добавленной услуги:
Sample — это уже готовые карточки товаров, они были объявлены ранее через массив.
Описание подключим следующим образом:
Осталось передать изменения:
Directus
Это API-based Headless CMS. Разворачивается как отдельное приложение, поддерживает базы данных. Есть веб-интерфейс для настройки и редактирования контента. С API можно взаимодействовать через REST или GraphQL.
Нам нужно настроить модель данных через админ-панель, а потом использовать API из нашего проекта на Nuxt.js. В качестве базы данных будем использовать SQLite. Так выглядит веб-интерфейс Directus:
Слева в меню есть базы данных, список пользователей, медиафайлы, документация и модель данных.
Чтобы собрать обратную связь, нам нужно определить коллекцию — она будет нашей таблицей с соответствующими форме полями.
Создаём новую коллекцию, называем её responses:
Можно сразу указать поля, которые будут для каждой записи заполняться автоматически.
Далее нам нужно создать три поля — имя, адрес почты и текст сообщения. При добавлении нового поля можно сразу указать тип визуализации:
Вот так будет выглядеть созданная коллекция:
Поскольку отправлять форму могут все, заходим в настройку ролей и для Public ставим разрешение на создание полей Username, Email и Message.
Переходим к наполнению нашей коллекции. Для клиентских приложений Directus предоставляет SDK. Подключается в проект в package.json, подключается командой “@directus/sdk”.
При нажатии кнопки нам нужно создавать новую запись в коллекции responses. Сделаем обработчик в файле index.vue:
Отправляем форму и заходим в нашу коллекцию. Видим ответ:
На самом деле возможность добавлять новые карточки товаров и менять текст можно также реализовать через Directus: завести отдельную коллекцию offers с нужными полями — названием, ценой, единицей измерения.
Заключение
Headless CMS можно быстро внедрить в проект. При этом необязательно писать много кода для бэкенда. Например, для Directus можно обойтись вообще без кода, если вам достаточно базовых операций с данными.
С другой стороны, некоторым решениям недостает функциональности. Модель рассмотренного FrontAid описывает произвольный JSON, и в теории мы можем сделать много вложенных структур, но ими будет сложнее управлять.
Headless CMS — компромисс между скоростью/простотой и функциональностью/расширяемостью.
Руководство для новичков по Headless CMS и Jamstack
Дата публикации: 2021-03-26
От автора: как веб-разработчик, который работает с малыми предприятиями над обновлением их устаревших сайтов, я всегда нахожусь в поиске новейших и лучших способов улучшить рабочий процесс и предоставить превосходный продукт.
Тем не менее, когда я впервые начал заниматься фрилансом, я полагался на WordPress как на безопасный, проверенный и надежный вариант для моих клиентов, которым нужна была система управления контентом (CMS) для ведения блога или портфолио.
До этого момента я работал с HTML, CSS и обычным JavaScript, и перейти к разработке PHP с помощью WP было не так уж сложно. Но когда я начинал изучать WordPress, я одновременно начал изучать React. И разница была как день и ночь.
PHP и JSX / JavaScript решают проблему вставки логики в разметку аналогичными способами. Но с точки зрения «опыта разработчика», как только я освоил современную среду JS-разработчика и компонентное построение с помощью React, я и не думал о том, чтобы когда-либо снова вернуться к монолитным файлам index.html / php / css.
И даже не говорите мне о XAMPP / Apache / MySQL. Я знал, что должен быть способ дать моим клиентам то, что им нужно, позволяя мне работать с новейшими инструментами.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Headless CMS?
У меня не было достаточно навыков для дискуссий в Твиттере о Headless CMS и Jamstack, но я изо всех сил пытался понять смысл Headless CMS.
Если бы вы спросили меня о Headless CMS два месяца назад: «Это похоже на другой способ создания CMS, чем в WordPress. Как будто это всего лишь часть WordPress с административной панелью, я полагаю, и вы каким-то образом используете API, чтобы связать это с вашим внешним интерфейсом, который можно создать. как хотите.»
На самом деле, это не так уж и далеко от истины. Но зачем выбирать Headless CMS, если не считать того факта, что JavaScript круче PHP?
Почему бы не придерживаться проверенной и универсальной системы управления контентом WordPress? Обезглавливание кажется, просто добавляет намного больше работы для достижения той же конечной цели, не так ли?
Чтобы лучше понять, что такого крутого в Headless CMS, сначала нам нужно иметь четкое представление о том, как работает «традиционная» CMS.
Обычная CMS: WordPress
Есть и другие, но на самом деле WP — бесспорный чемпион в этой сфере. Во-первых, я хочу сказать, что несмотря на всю ненависть, которую вызывает WordPress, он действительно работает. Он не ломается и не требует ремонта!
Если WordPress отвечает вашим потребностям, во что бы то ни стало — придерживайтесь его. С традиционной CMS, такой как WordPress, ваш внешний интерфейс, серверная часть и база данных, полная контента, работают вместе как единая система на вашем сервере.
Они неразрывно связаны друг с другом, поэтому, если вы хотите внести существенные изменения в любой из этих слоев, вам часто придется перестраивать все с нуля.
Поскольку WordPress является универсальным вариантом, вы, как разработчик, иногда будете зависеть от платформы с точки зрения того, что вы можете создать, в зависимости от того, ограничены ли вы проприетарными инструментами или используете универсальные.
А поскольку WP построен на PHP, он требует от сервера значительного объема работы каждый раз, когда клиент приходит к нам. Это может замедлить работу (замедление может быть в конечном итоге несущественным), и на самом деле в этом может не быть необходимости для целей сайта — страницу, которая никогда не изменяется (например, страница О нас), просто не нужно отображать сервером каждый раз, когда он вызывается.
Headless CMS: Prismic, Forestry, Strapi и др.
Когда вы используете Headless, самое большое изменение заключается в том, что ваш интерфейс, серверная часть и база данных существуют как независимые сущности.
Jamstackers описывают это как разъединение «уровня представления» (внешнего интерфейса) от «уровня логики / данных» (серверной части и базы данных).
Большинство Headless CMS выглядят и работают очень похоже на админ-панель WordPress, если вы с ней знакомы. И не зря: как было сказано, она неплоха! Не нужно изобретать велосипед.
Но ваш интерфейс и ваша CMS больше не связаны друг с другом, и им нужен способ общаться друг с другом. Они делают это посредством API.
И для разработчика, и для создателя контента разделение означает: СВОБОДА!!
Теперь у вас есть множество вариантов того, как построить и настроить каждый элемент головоломки. И все они функционируют независимо друг от друга, а это означает, что команда разработчиков и команда по контенту могут сосредоточиться на том, что у них получается лучше всего.
Если вам нужно внести существенные изменения — скажем, вы перестраиваете интерфейсную часть или вам нужно масштабировать серверную часть для удовлетворения растущего трафика — вы можете сделать это, не прерывая работу других составных частей.
Лучше всего, в зависимости от ваших потребностей: Вы всегда можете развернуть полнофункциональный сайт Jamstack бесплатно на неопределенный срок — плата за хостинг не требуется.
С точки зрения разработчика-фрилансера, насколько круто иметь возможность рассказать своим клиентам, что, как только они совершат переход, им больше не придется платить за хостинг?!
И если наступит время, когда они превысят выделенную бесплатную пропускную способность, лучшие поставщики CaaS, такие как Prismic, предложат отличные уровни цен для расширения.
«Хорошо, это звучит довольно круто. Но как, черт возьми, все это на самом деле работает?»
Переходите на Jamstack
Все станет более понятным, если вы запомните, что JAM — это аббревиатура, обозначающая JavaScript + API + разметка.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
В этой модели вы можете воспользоваться всеми преимуществами современной парадигмы компонентного JavaScript через библиотеки / фреймворки по вашему выбору. (Примечание: J может обозначать JS, но подойдет любой язык / библиотека / фреймворк, которые могут отображать интерфейс.)
Данные (контент вашего сайта) поступают через API — в данном случае это будет наша автономная CMS. Для вариантов с внешним размещением это иногда называют CaaS: «Контент как услуга».
И в отличие от настройки на основе PHP, которая требует множества вызовов от клиента к серверу для рендеринга страницы, Jamstackers любят создавать с помощью генераторов статических сайтов, таких как Gatsby или Next.js (мой личный фаворит). Эти фреймворки позволяют создавать сайты, на которых весь рендеринг происходит во время сборки, поэтому клиенту доставляется молниеносная статическая страница, которой не нужно взаимодействовать с сервером. Это разметка в нашем JAM.
Эта последняя часть — минимальная статическая сборка — одна из главных причин того, почему размещать сайты Jamstack дешево и часто бесплатно.
«Уровень представления» — то, что вызывается, когда клиент посещает сайт — занимает на сервере такой крохотный объем, что практически не имеет отношения к его потребностям в пропускной способности.
Одним из основных преимуществ модели Jamstack является то, что она
, поэтому вместо того, чтобы весь контент обслуживается одним хостом, он полагается на объединение нескольких децентрализованных источников, каждый из которых может быть настроен, масштабируется и заменяется при необходимости. Netlify, Vercel и Heroku являются одними из самых известных имен в области бесплатного хостинга и развертывания.
Стоит ли вам использовать Headless?
Очевидно, я не могу ответить на этот вопрос за вас — решать вам, вашей команде и потребностям проекта / клиента. Как уже было сказано: если вам нужно что-то, что просто работает, WordPress — фантастическое решение. Не позволяйте ненавистникам унижать вас.
Но если вы думаете о том, чтобы сделать решительный шаг, вот некоторые из основных моментов, которые следует учитывать.
Разделение означает большую автономию для команд разработки и создания контента.
Большинство разработчиков согласятся, что современная экосистема JS обеспечивает лучший опыт разработчиков.
У вас есть куча вариантов сервисов на выбор, и они отличаются друг от друга в своих предложениях
Он ориентирован на будущее, а это означает, что при необходимости в будущем будет проще перейти на новый сервис или создать новый уровень представления.
CaaS делает ваш контент повторно используемым, то есть его можно легко использовать в нескольких точках взаимодействия и по-разному представлять из одного источника CMS.
Хостинг часто бывает бесплатным / очень дешевым, и провайдеры CaaS обычно делают его относительно безболезненным для расширения по мере необходимости.
МИНУСЫ
Теперь вы находитесь во власти нескольких сторонних сервисов вместо одного хоста для предоставления контернта вашего сайта / приложения, а это означает, что есть больше способов, по которым что-то может пойти не так.
Возможно, работы и не больше, чем настройка сайта WordPress, но есть еще много динамичных частей, которые нужно адресовать и настроить, что может быть пугающим.
У вас есть тонны вариантов выбора сервисов, и они отличаются друг от друга в своих предложениях (это одновременно плюс и минус, потому что это означает, что, вероятно, потребует значительного количества исследований плюс проб и ошибок, чтобы найти лучший вариант для вашего проекта)
Поскольку вы обязаны своим новым повелителям CaaS хранить и доставлять ваш контент, вам придется столкнуться с изменениями политики / функций / цен, которые потенциально могут в мгновение ока разрушить всю вашу систему.
В будущем будет не так просто мигрировать с выбранной вами автономной CMS.
Вывод
WordPress — это проверенная в боях традиционная CMS, которая может справиться практически со всем, что вы ей подбросите. Очевидно, что наследие — не единственная причина, по которой он удерживает львиную долю Интернета.
Тем не менее, если вы ищете превосходный опыт разработчика и большую гибкость, я думаю, что Jamstack с автономной CMS — это то, что вам нужно.
Также стоит отметить, что я в основном описывал здесь облачные сервисы. Некоторые варианты headless CMS, такие как Strapi, размещаются самостоятельно, что означает, что у вас все еще есть разделенные слои, но все они живут вместе на вашем сервере. Это может быть предпочтительным для некоторых приложений.
Также: да, headless WordPress — это вещь. По сути, вы получаете все преимущества, но сохраняете панель wp-admin. Я бумаю, что у WP один из лучших API! Стоит учесть.
Мой любимый стек? Next.js, стилизованный под Tailwind, подключенный к Prismic CMS. Ваш опыт может отличаться, но эта связка отлично подходит для меня, и ее легко настроить! Я надеюсь, что это вводное руководство помогло пролить свет на эту довольно эзотерическую тему.
Автор: Sam Tanoak Sycamore
Источник: dev.to
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Основы создания тем WordPress
Научитесь создавать мультиязычные темы с нестандартной структурой страниц
Headless CMS: 7 преимуществ для роста продаж
Есть много причин для бизнеса, чтобы пользоваться Headless CMS (CMS – Content Management System или система управления контентом). Например, если вам необходимость использовать один и тот же контент в нескольких каналах продаж и у вас есть желание улучшить настройку кастомизации и избавится от беспорядка в традиционной платформе CMS.
Важно то, как бизнес управляет и хранит контент по продуктам и статьями. Это влияет на производительность сайта и мобильного приложения, а также влияет на конверсию. Поэтому некоторые компании хотят выйти за рамки традиционной CMS.
В Headless CMS можно отделить производство, управление и хранение контента от продвижения (рекламирование) и простой демонтрации (отображения) контента. Это разделение придаёт особое значение при создании контента, формировании аудитории для продаж и успеха в бизнесе в целом.
Многие знают WordPress, популярную CMS платформу. WordPress можно использовать для блога, для большого сайта и даже для интернет-магазина. WordPress объединяет управление контентом с отображением контента.
Пользователь входит в админ-панель WordPress, добавляет новую страницу, пишет контент, просматривает написанный контент и далее публикует страницу. Контент и его демонстрация тесно связаны между собой. WordPress предоставляет инструменты для создания контента, а также систему шаблонов для отображения веб-страницы в сети Интернет.
Но что, если вы хотите создать не веб-страницу? Что, если вам нужен контент, например, для Alexa Skill (виртуальный ассистент, разработанный Amazon)? Как насчет контента для чат-бота Facebook? Может вы хотите создать контент для поста в социальных сетях?
Цель Headless CMS в том, чтобы облегчить создание и хранение контента, а не его публикацию. Публикация этого контента вторична.
«Раньше на заре технологий было действительно сложно размещать что-то в Интернете. Но разместив что-либо в Интернете, людям сразу это было доступно, и они сразу это видели. Это всё, что требовалось – разместить контент. Сегодня всё изменилось – любой, у кого есть смартфон, может размещать видео в Интернете. Раньше невозможно было невозможно размещать видео в Интернете»
С другой стороны, охват людей и создание своей целевой аудитории в сети – это большая и тяжелая работа, потому что сегодня все в сети. Каждый является инфлюенсером. Каждый может мгновенно публиковать, что угодно без каких-либо технических навыков.
Таким образом, реальная проблема сейчас заключается именно в формировании своей аудитории в сети Интернет. Поэтому, зачем выбирать CMS, которая создана для размещения материала в Интернете? Зачем делать упор на решении простой проблемы (размещение контента) и игнорировать то, что требует тяжелой работы (поиск своей аудитории в сети)?
Таким образом, родилась идея создания Headless CMS. Headless CMS может и не обязательно лучше хранит контент, но она более гибка в создании и публикаций.
Далее рассмотрим 7 причин, чтобы внедрить Headless CMS в ваш бизнес.
Занимаясь электронной торговлей, бизнесу часто необходимо публиковать контент на нескольких каналах продаж.
Чтобы удовлетворить потребности покупателя и облегчить его опыт покупок – предоставить ему разнообразие продуктов и услуг в удобном для него канале продаж (веб-сайт, мобильное приложение и т.п.) – продавцу необходим быстрый доступ к информации о продукте, его наличии и доступности.
Однако, у многих компаний отдельные каналы продаж не связаны.
Компании обычно используют так называемую «объединённую» систему – используют отдельно CMS, которая создаёт веб-страницы, и объединяют её с собственной базой данных через панель администратора.
При этом у компаний обычно есть отдельное программное обеспечение для мобильного приложения. Это ПО также использует свою собственную базу данных и админ-панель.
Возможно, у этой компании есть ещё и чат-бот Facebook. Все эти каналы могут быть в отдельных системах с отдельным контентом.
Однако при использовании Headless CMS информация будет храниться в одной базе данных и управляться через единый интерфейс. Headless CMS – это инфраструктура для контента. Эта CMS управляет контентом и хранит его. Далее этот контент можно использовать для веб-сайта, для мобильного приложения или в Facebook.
Я знакома с омниканальным розничным продавцом, у которого более десятка обычных оффлайновых магазинов, отдел продаж и интернет-магазин. Этот бизнес решил сделать что-то радикальное: написать собственное программное обеспечение для своих торговых точек.
Это программное обеспечение будет:
Такой уровень настройки сломал бы любую обычную CMS. Только Headless CMS справится со всеми поставленными задачами.
Обычные CMS можно кастомизировать, но они имеют ограничения. Многие из этих ограничений связаны с необходимостью интегрировать системы по сознанию контента с продажами. Headless CMS имеет значительно меньше ограничений и, следовательно, более настраиваемая, кастомизированная.
Кастомизация тесно связана с интеграцией. Контент, хранящейся и управляемый в Headless CMS, намного легче интегрировать с другими системами, чем это делают обычные CMS.
Headless CMS – это просто API. Таким образом, подключение Headless CMS к большинству внешнех платформ достаточно просто. И Headless CMS дает бизнесу больше возможностей.
Часто для разработчиков легко то, что знакомо. Headless CMS использует стандартную технологию, поэтому она может быть значительно проще для разработчиков, чем кажется. Эта простота, в свою очередь, может привести к сокращению времени разработки и, следовательно, к снижению затрат.
«Объединённая» с другими системами CMS может способствовать медленной загрузке веб-страниц. Использование Headless CMS может привести к более высокой производительности, чем использование WordPress или аналогичных CMS.
Часто API используется для предоставления контента через Headless CMS с доступом только «для чтения». Это обеспечивает уровень безопасности, который невозможен для обычной CMS.
Более того, этот API может быть размещен за одним или несколькими уровнями кода, делая его менее уязвимым для атак. А администрирование Headless CMS может находится на другом сервере или в другом домене.
Таким образом, Headless CMS является более безопасной, чем типичная обычная CMS.
Некоторые производители Headless CMS считают, что их решения могут помочь в маркетинге и, следовательно, привести к росту конверсий. Идея Headless CMS ещё и в том, что она относительно проще в A/B тестировании, в том числе и при использовании другим ПО.
Конечно, тест все равно потребует разработки, но основанная на API Headless CMS, может значительно упростить его.
Практически любая технология имеет недостатки. Ваша компания может рассмотреть возможность использования Headless CMS для омниканальных продаж, кастомизации, интеграции и безопасности. Но у неё есть и недостатки.
