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

100-7728111

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

Тем не наименее, когда я в первый раз начал заниматься фрилансом, я полагался на WordPress как на неопасный, испытанный и надежный вариант для моих клиентов, которым нужна была система управления контентом (CMS) для ведения блога либо портфолио.

Ранее момента я работал с HTML, CSS и обыденным JavaScript, и перейти к разработке PHP при помощи WP было не так трудно. Но когда я начинал учить WordPress, я сразу начал учить React. И разница была как денек и ночь (то есть темное время суток).

PHP и JSX / JavaScript решают делему вставки логики в разметку подобными методами. Но исходя из убеждений «опыта разраба», как я освоил современную среду JS-разработчика и компонентное построение при помощи React, я и не задумывался о том, чтоб когда-либо опять возвратиться к цельным файлам index.html / php / css.

И даже не гласите мне о XAMPP / Apache / MySQL!!! Я знал, что должен быть метод отдать моим клиентам то, что им необходимо, позволяя мне работать с новыми инструментами.

У меня не было довольно способностей для обсуждений в Твиттере о Headless CMS и Jamstack, но я изо всех сил пробовал осознать смысл Headless CMS.

Если б вы спросили меня о Headless CMS два месяца вспять: «Это похоже на иной метод сотворения CMS, чем в WordPress. Как как будто это всего только часть WordPress с административной панелью, я полагаю, и вы каким-то образом используете API, чтоб связать это с вашим наружным интерфейсом, который можно сделать. как желаете.»

По сути, это не так и далековато от правды. Но для чего выбирать Headless CMS, если не считать того факта, что JavaScript круче PHP?

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

Чтоб лучше осознать, что такового крутого в Headless CMS, поначалу нам необходимо иметь точное представление о том, как работает «обычная» CMS.

Рядовая CMS: WordPress

Есть и остальные, но по сути WP — неоспоримый фаворит в данной нам сфере. Во-1-х, я желаю сказать, что невзирая на всю ненависть, которую вызывает WordPress, он вправду работает. Он не ломается и не просит ремонта!

Яндекс представил YATI – новый тип нейросетей для ранжирования выдачи

Если WordPress отвечает вашим потребностям, во что бы то ни сделалось — придерживайтесь его. С классической CMS, таковой как WordPress, ваш наружный интерфейс, серверная часть и база данных, полная контента, работают совместно как единая система на вашем сервере.

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

Так как WordPress является всепригодным вариантом, вы, как разраб, время от времени будете зависеть от платформы исходя из убеждений того, что вы сможете сделать, в зависимости от того, ограничены ли вы проприетарными инструментами либо используете всепригодные.

А так как WP построен на PHP, он просит от сервера значимого размера работы всякий раз, когда клиент приходит к нам. Это может замедлить работу (замедление быть может в итоге несущественным), и по сути в этом может не быть необходимости для целей веб-сайта — страничку, которая никогда не меняется (к примеру, страничка О нас), просто не надо показывать сервером всякий раз, когда он вызывается.

Когда вы используете Headless, самое огромное изменение состоит в том, что ваш интерфейс, серверная часть и база данных есть как независящие сути.

Jamstackers обрисовывают это как разъединение «уровня представления» (наружного интерфейса) от «уровня логики / данных» (серверной части и базы данных).

Большая часть Headless CMS смотрятся и работают весьма похоже на админ-панель WordPress, если вы с ней знакомы. И не напрасно: как было сказано, она хороша! Не надо изобретать велик.

Но ваш интерфейс и ваша CMS больше не соединены вместе, и им нужен метод разговаривать вместе. Они делают это средством API.

И для разраба, и для создателя контента разделение значит: СВОБОДА!!

Сейчас у вас есть огромное количество вариантов того, как выстроить и настроить любой элемент головоломки. И они все работают независимо друг от друга, а это значит, что команда разрабов и команда по контенту могут сосредоточиться на том, что у их выходит идеальнее всего.

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

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

Исходя из убеждений разработчика-фрилансера, как круто иметь возможность поведать своим клиентам, что, как они совершат переход, им больше не придется платить за хостинг?!

Все, что должны знать разработчики о Figma

И если наступит время, когда они превысят выделенную бесплатную пропускную способность, наилучшие поставщики CaaS, такие как Prismic, предложат хорошие уровни цен для расширения.

«Отлично, это звучит достаточно круто. Но как, черт возьми, все это по сути работает?»

Перебегайте на Jamstack

Все станет наиболее понятным, если вы запомните, что JAM — это аббревиатура, обозначающая JavaScript + API + разметка.

В данной нам модели вы сможете пользоваться всеми преимуществами современной парадигмы компонентного JavaScript через библиотеки / фреймворки по вашему выбору. (Примечание: J может обозначать JS, но подойдет хоть какой язык / библиотека / фреймворк, которые могут показывать интерфейс.)

Данные (контент вашего веб-сайта) поступают через API — в этом случае это будет наша автономная CMS. Для вариантов с наружным размещением это время от времени именуют CaaS: «Контент как услуга».

И в отличие от опции на базе PHP, которая просит огромного количества вызовов от клиента к серверу для рендеринга странички, Jamstackers обожают создавать при помощи генераторов статических веб-сайтов, таковых как Gatsby либо Next.js (мой личный победитель). Эти фреймворки разрешают создавать веб-сайты, на которых весь рендеринг происходит во время сборки, потому клиенту доставляется моментальная статическая страничка, которой не надо вести взаимодействие с сервером. Это разметка в нашем JAM.

Эта крайняя часть — малая статическая сборка — одна из основных обстоятельств того, почему располагать веб-сайты Jamstack недорого и нередко безвозмездно.

«Уровень представления» — то, что вызывается, когда клиент посещает веб-сайт — занимает на сервере таковой крошечный размер, что фактически не имеет дела к его потребностям в пропускной возможности.

Одним из главных преимуществ модели Jamstack будет то, что она ~ очень распределена ~, потому заместо того, чтоб весь контент обслуживается одним хостом, он полагается на объединение нескольких децентрализованных источников, любой из которых быть может настроен, масштабируется и заменяется по мере необходимости. Netlify, Vercel и Heroku являются одними из самых узнаваемых имен в области бесплатного хостинга и развертывания.

Разумеется, я не могу ответить на этот вопросец за вас — решать для вас, вашей команде и потребностям проекта / клиента. Как уже было сказано: если для вас необходимо что-то, что просто работает, WordPress — умопомрачительное решение. Не позволяйте ненавистникам унижать вас.

Но если вы думаете о том, чтоб создать решительный шаг, вот некие из главных моментов, которые следует учесть.

ЗА

Разделение значит огромную автономию для установок разработки и сотворения контента.

Большая часть разрабов согласятся, что современная экосистема JS обеспечивает наилучший опыт разрабов.

У вас есть куча вариантов сервисов на выбор, и они различаются друг от друга в собственных предложениях

Ссылки в PDF-файлах не имеют никакой ценности для SEO

Он нацелен на будущее, а это значит, что по мере необходимости в дальнейшем будет проще перейти на новейший сервис либо сделать новейший уровень представления.

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

Хостинг нередко бывает бесплатным / весьма дешевеньким, и провайдеры CaaS обычно делают его относительно безболезненным для расширения по мере необходимости.

МИНУСЫ

Сейчас вы находитесь во власти нескольких посторониих сервисов заместо 1-го хоста для предоставления контернта вашего веб-сайта / приложения, а это значит, что есть больше методов, по которым что-то может пойти не так.

Может быть, работы и не больше, чем настройка веб-сайта WordPress, но еще есть много оживленных частей, которые необходимо адресовать и настроить, что быть может пугающим.

У вас есть тонны вариантов выбора сервисов, и они различаются друг от друга в собственных предложениях (это сразу плюс и минус, поэтому что это значит, что, возможно, востребует значимого количества исследовательских работ плюс проб и ошибок, чтоб отыскать наилучший вариант для вашего проекта)

Так как вы должны своим новеньким властелинам CaaS хранить и доставлять ваш контент, для вас придется столкнуться с переменами политики / функций / цен, которые потенциально могут в мгновение ока повредить всю вашу систему.

В дальнейшем будет не так просто мигрировать с избранной вами автономной CMS.

Вывод

WordPress — это испытанная в боях обычная CMS, которая может совладать фактически со всем, что вы ей подбросите. Разумеется, что наследство — не единственная причина, по которой он держит львиную долю Веба.
Тем не наименее, если вы ищете потрясающий опыт разраба и огромную упругость, я думаю, что Jamstack с автономной CMS — это то, что для вас необходимо.

Также необходимо отметить, что я в главном описывал тут пасмурные сервисы. Некие варианты headless CMS, такие как Strapi, располагаются без помощи других, что значит, что у вас все есть еще разбитые слои, но они все живут совместно на вашем сервере. Это быть может желаемым для неких приложений.

Также: да, headless WordPress — это вещь. На самом деле, вы получаете все достоинства, но сохраняете панель wp-admin. Я бумаю, что у WP один из наилучших API! Стоит учитывать.

Мой возлюбленный стек? Next.js, стилизованный под Tailwind, присоединенный к Prismic CMS. Ваш опыт может различаться, но эта связка непревзойденно подступает для меня, и ее просто настроить! Я надеюсь, что это вводное управление посодействовало пролить свет на эту достаточно эзотерическую тему.

Создатель: Sam Tanoak Sycamore

Редакция: Команда webformyself.

Источник