CODEGURU

Всё, что вы хотели знать о JAM Stack, но боялись спросить

Что такое JAM Stack 🍒

К десертам JAM Stack, конечно же, не имеет отношения. Это даже не набор конкретных инструментов. Это подход к созданию сайтов и веб-приложений. JAM на самом деле означает:

  • Javascript — отвечает за весь интерактив, работает, естественно, только на клиенте
  • API —все серверные дела, а также работа с базой данных реализуются с помощью API, работа с которым осуществляется с помощью Javascript
  • Markup — Вёрстка осуществляется с помощью шаблонов, из которых при сборке проекта генерируется HTML. Для этого используются готовые генераторы статических сайтов или самостоятельно настроенная система сборки.

Вот так всё незамысловато.

Немного истории

К 2016 году среди разработчиков сформировалось устойчивое мнение, что статичные сайты это плохо, это не круто, им не хватает функционала и они годятся максимум для простенького блога. Но тут вдруг Javascript стал переживать второе рождение и выяснилось, что статичные (вроде как) сайты на самом деле могут быть ого-го какими динамичными. Вот тут-то впервые и заговорили всерьёз о JAM Stack. А чего не заговорить, когда такие гиганты, как Sequoia Capital и Red Bull используют его для своих веб-проектов. В 2018 году начался уже прямо бум JAM Stack. Всё больше разработчиков приходят от него в восторг и совершенно ожидаемо такие проекты как Gatsby, Netlify, Contentful привлекают солидные инвестиции. Так что если вы ещё не разобрались, что это за JAM Stack, то сейчас самое время. Чтобы не бежать потом за паровозом.

Зачем нужен JAM Stack

Для этого сначала посмотрим как схематично выглядит работа традиционных серверных сайтов и сайтов JAM Stack.

Традиционные серверные сайты:

  • Пользователь запрашивает страницу. Хостинг обрабатывает его запрос и начинает выполнять цепочку операций (иногда очень длинную) между базой данных, сервером и т.д. И только по завершении этой работы пользователь получает в ответ HTML-страницу.
  • Все обновления сайта загружаются на сервер через FTP.
  • Существует отдельная сущность — база данных, которую необходимо поддерживать и обслуживать. При этом она является неотъемлемой частью сайта.
  • Для обновления контента необходимо использовать CMS (например, Wordpress, тьфу, тьфу, тьфу)

JAM Stack сайты:

  • Пользователь запрашивает страницу. HTML-файл уже лежит готовенький и только и ждёт этого запроса. Ответ следует моментально.
  • Обновления загружаются в Git, после чего сайт автоматически пересобирается с помощью генератора статических сайтов или самостоятельно настроенной системы сборки.
  • Для обновления контента используется Git или Headless CMS.

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

Не верите? Ну давайте подробнее:

  • Полное отсутствие серверных операций и базы данных на самом сайте автоматически убирают массу проблем с безопасностью. Нет базы данных — нечего взламывать.
  • Статичный контент, который доставляется с помощью CDN — это чертовски быстро.
  • Все серверные операции и работа с базой данных реализованы с помощью API. Это API существует отдельно от самого сайта.
  • Более простая разработка снижает стоимость этой самой разработки

С чего начать? 😵

В любом новом деле начало это самое трудное. Но это ненадолго, потом будет легче. Итак, если вы решили попробовать JAM Stack, то в первую очередь следует освежить свои знания Javascript. Далее необходимо решить, какой инструмент для сборки проекта из арсенала современного фронтенда вы будете использовать. Предлагаю остановиться на одном из лидеров: Angular.js, React.js, Vue.js. Или же можно выбрать уже готовый генератор статических сайтов: Jekyll, Hugo, 11ty, Gatsby, Nuxt. Это что касается фронтенда.

А как же бэкенд?

Для бэкенда отлично подойдёт одна из множества headless CMS: Dato, Directus, Contentful, Storyblok. CMS поможет вам управлять правами доступа и ролями пользователей и, собственно, самим контентом. Кстати, этот сайт, который вы сейчас читаете, сделан по JAM Stack на связке Nuxt.js и Directus.

Публикация сайта

Как только ваш сайт готов, пора показать его миру. Самыми популярными решениями для этого являются Github pages, Netlify и Zeit.

А как же всякие там формы, комментарии и т.д?

Да, раньше статичный сайт не мог иметь никаких форм, пользователи не могли оставить комментарий на таком сайте. Но сейчас всё изменилось. Как я уже говорил ранее — статичные сайты сейчас ого-го какие динамические. И если вам нужна форма обратной связи или возможность комментирования пользователями, то к вашим услугам масса облачных сервисов. Да можно даже подключить функционал e-commerce. И это совершенно чётко укладывается в идеологию JAM Stack.

Итак, для e-commerce есть вот такие решения:

Для форм вот такие варианты:

Если вам нужен поиск, то пожалуйста:

Хотите, чтобы пользователи могли оставлять комментарии? Да не вопрос:

И это далеко не полный список. Инструментов ещё очень много.

В общем, JAM Stack это очень круто. Конечно же, не все задачи можно решить в рамках этого подхода. Но в 90% случаев тот же Wordpress можно легко заменить на решение в стиле JAM Stack и все от этого только выиграют: вы получите более простой и приятный процесс разработки, а ваши клиенты получат более быстрый, надёжный сайт с меньшей стоимостью развёртывания и поддержки.