Что такое «стек JAM»? Должны ли вы использовать его?

Стек JAM, часто стилизованный под Jamstack или JAMStack, относится к использованию JavaScript, APIs и Markup для разработки клиентоориентированных веб-сайтов. и приложений. Система, основанная на Jamstack, будет выполнять всю свою логику на клиенте, исключая серверные компоненты.

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

Используют ли статические сайты Jamstack?

Статические сайты, созданные только с помощью HTML, CSS и JavaScript, по своей сути являются клиентскими и не требуют внутреннего программирования. Таким образом, они соответствуют критериям Jamstack.

Однако Jamstack выходит за рамки простых веб-сайтов и блогов. В то время как статические сайты используют только аспект «разметки», возможно, с небольшим количеством JavaScript, приложение Jamstack может по-прежнему иметь серверную часть и постоянное хранилище данных.

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

Приложение Jamstack упростит работу на стороне сервера, отправляя данные через API. Вы по-прежнему можете реализовать свой собственный бэкэнд, но также часто используется стороннее решение, такое как Netlify или Google Firebase. Теперь единственная инфраструктура, которая вам нужна, — это базовый веб-сервер для предоставления вашего HTML и JavaScript в браузер пользователя.

Ключевые компоненты

Вот краткий обзор трех составляющих компонентов Jamstack:

• • JavaScript. Весь процесс осуществляется с помощью JavaScript в браузере пользователя. Вы можете использовать любой фреймворк, независимо от того, предпочитаете ли вы React, Vue, Angular или собственное ванильное решение.
  • API. Данные передаются в браузер пользователя и из него через API. Если форма должна быть отправлена, ее входные значения должны быть захвачены JavaScript и отправлены на ваш сервер или стороннюю службу. Это повышает удобство работы пользователей, позволяя отображать счетчики загрузки и индикаторы выполнения по мере получения данных.
  • Разметка. Контент создается с использованием удобочитаемых форматов разметки, таких как HTML и Markdown. Они могут быть переданы браузеру как есть для анализа с помощью JavaScript. Нет необходимости размещать сложную CMS для создания и редактирования контента. Вы бы добавили новую запись в блоге, написав файл Markdown и зафиксировав его в репозитории системы управления версиями вашего проекта.

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

  Удобный опыт разработки

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

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

  В большинстве случаев вы не будете самостоятельно размещать какие-либо компоненты инфраструктуры. Системы Jamstack обычно развертываются прямо на хостинге статических файлов, таком как Netlify, Firebase, GitHub Pages или даже в простой корзине S3. В качестве альтернативы вы можете поместить свое приложение в контейнер с помощью Docker и запустить его в кластере Kubernetes.

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

  Разделенные компоненты

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

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

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

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

  Недостатки

  Наиболее существенным недостатком Jamstack может быть та же модель обновления на основе кода, которая часто делает его таким привлекательным. Авторам контента и редакторам часто сложнее участвовать, так как им обычно нужно научиться писать разметку в HTML или Markdown. Это может быть пугающим для нетехнических писателей, знакомых с графическим интерфейсом WYSIWYG.

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

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

  Получить инструменты

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

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

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

  Заключение

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

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

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

  Наконец, не стремитесь делать что-то на 100% «в стиле Jamstack» — подход открыт для интерпретации. Концепция на самом деле заключается в том, чтобы поставить внешний интерфейс на первое место за счет использования возможностей JavaScript и API. Это не означает, что вы не можете запустить свою собственную инфраструктуру или написать свой собственный сервер.

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