Руководство для новичков по Headless CMS и Jamstack

Руководство для новичков по  Headless CMS и Jamstack

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

Тем не менее, когда я впервые начал заниматься фрилансом, я полагался на 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

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.