JAM Поместите свою старую CMS в шкаф

Альтернатива крупномасштабным системам управления контентом для небольших проектов

Стек JAM - это система управления контентом для небольших проектов. Он ориентирован на создание веб-сайтов, использующих внешние API. Он быстрый, легко масштабируемый, удобен для разработчиков и более безопасен. Это концепция, которая в последнее время набирает обороты.

Давайте рассмотрим пример того, кто может извлечь выгоду из использования JAM Stack для разработки своего веб-сайта.

Познакомьтесь с Джоном.

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

Единственного, чего нет у Джона, - это надежного, быстрого и безопасного веб-сайта, на котором он может самостоятельно управлять контентом! Поскольку он успешный человек, он находит Боба, веб-разработчика, который создаст для него такой веб-сайт.

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

Джон и Боб соглашаются, что Wordpress как система управления контентом удовлетворит эти потребности.

Короче говоря, месяц спустя у Джона был сайт, который через два дня был взломан китайским ботом. Также от него ушла жена.

Бобу по сей день снятся кошмары о выборе плагинов ...

Хорошо ... Возможно, эта история немного преувеличена, но все мы слышали жалобы на Wordpress. Мы можем взглянуть на другие популярные системы CMS, такие как Joomla или Drupal, и все они имеют недостатки и кажутся сложными для веб-сайта малого бизнеса.

В идеальном мире у Джона был бы веб-сайт, который не был бы монолитом с динамически генерируемым контентом, поддерживаемым CMS. Он будет легковесным, развертывается один раз за необходимое обновление и может быть легко отредактирован с помощью инструмента, который используется не для всего (просто подождите, пока они запустят космический шаттл на Wordpress…).

Стек JAM

Я не говорю о накладном гитарном усилителе или о потреблении большого количества фруктозы из банки. Я говорю о Javascript, API и разметке. Чтобы лучше объяснить, что это означает, я буду ссылаться на определение с замечательного веб-сайта jamstack.org, который посвящен исключительно этой теме:

Javascript - любое динамическое программирование во время цикла запроса / ответа обрабатывается JavaScript, полностью работающим на клиенте. Это может быть любой интерфейсный фреймворк, библиотека или даже обычный JavaScript.

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

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

Это теория. А как насчет реализации? Что ж, нас уже окружают инструменты, реализующие стек JAM. Мы знаем их как генераторы статических сайтов, например Джекил, Гэтсби, Хексо и многие другие. Вы можете найти большое количество бесплатных и платных проектов на сайте staticgen.com, любезно предоставленном командой Netlify.

Вы также можете создать свой собственный веб-сайт, созданный из файлов JSON или разметки, или даже использовать существующую службу, которая предоставляет вам CMS, которая обслуживает контент через API. Они называются системами управления контентом без головы.

Безголовая CMS

Иметь веб-сайт - это весело и все такое, но как нетехнический человек может редактировать там контент? Как всегда, доступно несколько решений. Можно было бы управлять этим на стороне кодировщика и взимать с клиента 200 долларов за обновление кнопки. Но это не слишком профессионально.

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

1. CMS с API-управлением - наиболее популярная. Это CMS, которая позволяет создавать API для вашего веб-сайта без программирования. Для работы не требуется генератор статических сайтов. При таком подходе нам придется отправлять асинхронные запросы к нашему API при каждом посещении веб-сайта, чтобы всегда обслуживать свежий контент. Самые популярные проекты в этой группе - Contentful ($) или Strapi (БЕСПЛАТНО).
2. CMS на основе Git - они работают как графический пользовательский интерфейс для GIT. Вы можете писать сообщения через панель администратора, а внутри, после сохранения, CMS фиксирует ваше сообщение в репозитории кода и запускает повторное развертывание вашего сайта. Их преимущество перед CMS, управляемым через API, заключается в том, что вам не нужно тратить дополнительное время на ожидание ответа AJAX от основного содержания вашего сайта. Самыми популярными проектами в этой группе являются Netlify CMS (в паре с любым генератором статических сайтов) и Prose (работает только с Jekyll).

Вы можете найти еще много безголовых CMS на сайте headlesscms.org.

Существует способ объединить два типа CMS и передать данные веб-сайта в генератор статических сайтов один раз во время сборки. Потребовалось бы некоторое настраиваемое кодирование и CMS, управляемая API, чтобы иметь веб-перехватчики (например, Contentful. Strapi пока не хватает этой функции), которые могут запускать перестройку веб-сайта на наш сервер (например, Netlify). Есть интересная статья, описывающая эту реализацию.

Поздравляю! Теперь вы знаете основы Jam Stack!

Это работает?

Есть только один способ узнать! Я решил создать бизнес-сайт тропических смузи для нашего воображаемого друга Джона. Я выбрал Netlify CMS, разместил ее на их платформе, а позже добавил Netlify Forms и лямбда-функции.

Если вас не интересует Netlify CMS, вы можете сразу перейти к комментариям и оставить рекомендации для других потрясающих проектов на основе JAM-стека!

Netlify CMS

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

Чтобы просмотреть проект, вы можете посетить Smoothielicious Website или проверить проект в репозитории GitHub.

Это типичный веб-сайт. Здесь есть список смузи, несколько сообщений в блоге ниже и контактная форма. Волшебство случается, когда мы хотим обновить информацию на сайте. Панель администратора находится на /admin маршруте, и для входа требуется аутентификация. Его можно настроить для использования нескольких популярных сервисов, например Gmail, GitHub или Netlify Identity. Я пошел за последним. Он позволяет вам указывать роли пользователей и управлять всем с панели инструментов Netlify. Если мы заходим в админ-панель, мы видим что-то вроде этого:

Мы можем видеть несколько коллекций, таких как блог, страницы и продукты, которые мы можем определить в config.yml. Netlify-CMS читает, чтобы получить информацию о структурах данных на наших страницах (например, frontmatter). Ниже я приложил суть моего config.yml файла для этого проекта. У меня есть три коллекции: блог, продукты и страницы. Первые два имеют флаг create, равный true, который позволяет их добавлять. Страницы, с другой стороны, жестко запрограммированы, и только поля внутри них доступны для редактирования. Я настоятельно рекомендую документацию для получения дополнительной информации о доступных типах виджетов (полей).

Редактировать страницу отдельного предмета коллекции (в данном случае «продукта») довольно просто. Все виджеты полей, указанные в нашем типе коллекции, перечислены друг под другом. Справа есть предварительный просмотр того, как будет выглядеть страница. В моем случае я не добавлял никакого стиля, но можно добавить его, чтобы предварительный просмотр отображал фактический результат нашего сообщения.

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

На данный момент у вас есть веб-сайт, которым можно легко управлять через CMS, но он намного безопаснее, чем аналогичные страницы, основанные на других системах. Это действительно здорово, но у него много ограничений. А как насчет управления формами или обработки платежей?

Мы можем интегрировать какую-нибудь платформу «программное обеспечение как услугу» (SaaS), чтобы помочь нам в этом, но поскольку наши формы действительно просты, я буду использовать инструмент, поставляемый с Netlify, который называется Netlify Forms. Как это работает?

Раскройте возможности Netlify, встроенные в формы

Давайте воспользуемся встроенными формами Netlify! Поскольку наш веб-сайт небольшой, нам не понадобится тонна функций. Все, что нам нужно сделать, это сохранить отправленную форму, чтобы мы могли позже связаться с нашим клиентом.

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

<form method="POST" name="contact" netlify>...</form>

При следующем развертывании сайта Netlify обнаружит форму и прислушается к любым новым отправлениям.

Веб-сайты с динамической визуализацией, такие как созданный мной, должны иметь форму, добавленную как статический HTML. Чтобы исправить это, нам нужно добавить скрытую форму, которая на самом деле не будет использоваться, с теми же полями, что и наша настоящая форма. Единственная загвоздка в том, что первая (скрытая форма) должна иметь имя и параметры Netlify, а вторая (визуализированная) не имеет имени, но должна иметь скрытое поле ввода внутри, которое сообщит Netlify, чтобы сохранить отправку в обнаруженную форму. Чтобы уточнить, обычно ваша форма будет выглядеть так:

<form action="/success/" name="Contact" method="POST" netlify>
  ...
</form>

И когда мы динамически визуализируем нашу форму, у нас будет одна скрытая форма, которая выглядит так же, как приведенная выше, и наша динамически визуализированная форма будет выглядеть следующим образом:

<form action="/success/" method="POST">
  <input type="hidden" name="form-name" value="Contact">
  ...
</form>

Мне потребовалось несколько часов, прежде чем я узнал, почему моя форма отправляется неправильно, поэтому я надеюсь, что у вас не будет таких же проблем, как у меня.

Автоответчик контактной формы

Автоответ на электронные письма - отличная функция. Он информирует пользователя, что его форма была отправлена ​​успешно, и мы свяжемся с ним в кратчайшие сроки. Netlify не имеет встроенной поддержки для этого, но мы можем легко ее добавить. Здесь мы можем выбрать два разных маршрута. Один из них - использовать платформу SaaS, которая позволяет отправлять электронную почту и легко интегрируется с Netlify. Второй - написать лямбда-функцию, которая будет отправлять электронное письмо с автоответчиком. Недавно Netlify добавил поддержку лямбда-функций, так что это не проблема.

В обоих случаях мы будем использовать крючки контактной формы. Когда кто-то отправляет контактную форму на странице, Netlify отправляет запрос POST всем конечным точкам, которые прослушивают это событие. Мы можем добавить их в панель Netlify наших веб-сайтов на вкладке settings > forms > form notifications.

Интегрировать Zapier очень просто. На это у меня ушло около 30 минут, только потому, что я впервые использовал этот инструмент. Все работало отлично, но была одна загвоздка. После пробного периода у Zapier нет бесплатного плана.

Я подумал, что поскольку я дешевый, я перейду на второе решение, лямбда-функцию. Это было не так просто, как интеграция с Zapier, но после нескольких часов размышлений я сошел с ума, я обнаружил все ошибки, а лямбда-функция также отлично работает. Все решение для настройки среды лямбда-разработки доступно в smoothielicious project repo. В лямбда-функции почтовой программы я использовал пакет nodemailer и создал простой HTML-шаблон электронной почты с MJML, чтобы он выглядел немного лучше.

И вуаля! Здесь нет необходимости в каких-либо проблемах с серверной частью. Подойдет простая функция.

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

Так я и поступил. Я создал учетную запись на mLab, провайдере базы данных mongoDB как услуги. Я, вероятно, не превысу лимит бесплатного уровня в 500 МБ хранилища, поскольку я буквально сохраняю и увеличиваю одно число. Ниже приведен код лямбда-функции для подключения к базе данных и увеличения счетчика. Я создал одну конечную точку add-page-visit, которая обновляет базу данных на mLab и возвращает текущее количество посещений страницы.

После развертывания функция доступна по адресу https://site.netlify.com/.netlify/add-page-visit, поэтому конечная точка совпадает с именем файла, но без расширения .js. Я также добавил отображение текущих посещений страницы вверху страницы, чтобы все могли это видеть.

А как насчет ценообразования?

В этом проекте я сильно полагаюсь на формы Netlify и лямбда-функции. До определенного момента они свободны. Общее правило заключается в том, что вы платите по мере использования, что означает, что сумма, которую вы платите, может варьироваться в зависимости от использования вашего сайта, но вы также можете выбрать ежемесячный план, который увеличивает лимиты и открывает некоторые дополнительные функции. Платежи рассчитываются за расчетный период, который составляет 1 месяц.

Цены на формы

Формы Netlify бесплатны до 100 отправок форм и / или 10 МБ загружаемых файлов в месяц. Если вы превысите этот лимит, вы заплатите 9 долларов за пакет из 500 отправленных форм и 500 МБ хранилища. Существует также план Forms PRO, который стоит 20 долларов в месяц и позволяет отправлять 1000 форм и 1 ГБ хранилища.

Цены на функции

Функции бесплатны до 125 000 запросов и / или 100 часов работы в месяц. Если вы превысите этот лимит, вы заплатите 19 долларов за пакет из 500 000 запросов и 500 часов работы. Вы также можете перейти на план Functions PRO, который стоит 25 долларов и позволяет обрабатывать 2000000 запросов в месяц и 1000 часов работы в месяц.

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

Цены вполне разумные, и вы платите только за то количество вещей, которые вам нужны, что действительно здорово, если вы действительно не знаете, какой трафик на сайт ожидать.

В заключение

Будущее за стеком JAM? Должны ли мы перестроить всю сеть, чтобы использовать ее? Или это еще одна несовершенная технология, которая никуда не годится?

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

Нажмите кнопку 👏, если вы нашли эту статью полезной!

Об авторе
Мацей - фронтенд-разработчик в EL Passion. Вы можете найти его на GitHub или LinkedIn.

Найдите EL Passion в Facebook, Twitter и Instagram.

Ресурсы