Что такое JAMstack

JAMstack — это подход в веб-разработке, который помогает разработчикам быстро создавать и эффективно обслуживать статические веб-сайты.

При таком подходе максимально возможное количество HTML-страниц предварительно создается и хранится в сети доставки контента (CDN). За отображение динамического контента отвечают компоненты, которые используют API. Благодаря этому нет необходимости запускать на стороне сервера монолитное приложение. В идеале это приводит к гораздо более быстрому взаимодействию с пользователем. Упрощается и сам процесс разработки веб-приложения.

Основа подхода

Основные термины JAMstack — это JavaScript, API и Markup.

• JavaScript — это основной язык программирования, который используют веб-приложения для работы в браузере.
• API (интерфейс прикладного программирования) — это способ запроса данных из других сервисов.
• Markup — это код разметки (HTML и CSS), предоставляющий браузерам инструкции по форматированию страниц.

Веб-приложения создаются с использованием только этих трех элементов. Статический веб-сайт, который видит пользователь, построен из разметки HTML, стилизованной с помощью CSS. JavaScript используется для динамического обновления контента и вызова API. API отвечает за взаимодействие с серверной частью.

Примеры использования 

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

При использовании JAMstack-подхода вы создаете несколько легковесных страниц, которые храните на CDN. Бэкенд при этом находится, например, на виртуальном сервере timeweb.cloud. Когда юзер открывает сайт на JAMstack, он немедленно получает эти страницы. Одновременно веб-приложение выполняет вызов через API к бэкенду, чтобы обновить статистику.

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

Если хотите посмотреть, что такое JAM-стек на практике, откройте, например, сайт freeCodeCamp.org. Этот учебный портал — JAMstack-сайт, созданный на базе генератора статических страниц Gatsby. Весь сложный динамический контент для прохождения курсов по программированию приходит по API.

Новый способ создания веб-сайтов и приложений был использован также при разработке портала для разработчиков web.dev. Он построен с помощью Eleventy — простого генератора статических сайтов.

Преимущества и недостатки

Ниже — основные преимущества JAMstack. Они касаются как опыта пользователей, так и процесса разработки.

• Производительность. Почти весь контент состоит из статических файлов HTML, которые обслуживаются из CDN. Это самый быстрый способ доставки веб-контента пользователям.
• Масштабируемость. Приложение отлично реагирует на значительный рост количества пользователей благодаря быстрому интерфейсу и гибкому взаимодействию с серверной частью через API.
• Улучшенный опыт разработчиков. JAMstack позволяет разработчикам сосредоточиться на создании привлекательного пользовательского интерфейса, не беспокоясь о внутренних проблемах или борьбе за высокую производительность.

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

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

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

Заключение

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

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