Jamstack

Будучи веб-разработчиком, вы наверняка слышали о Jamstack. Это самое популярное слово в веб-разработке. Но что это такое?

Jamstack - это аббревиатура, которая расшифровывается как JavaScript, API и Mark-up (разметка). Это архитектура, которая обещает, помимо прочего, более быстрые, дешевые и безопасные сайты. И все больше и больше сайтов переходят на эту архитектуру.

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

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

Наследие веб-сайтов

Существует множество стеков веб-разработки: LAMPstack, MEANstack, WAMPstack и другие. Они относятся к используемым технологиям, таким как Linux, MySQL и PHP. Хотя эти технологии и приложения отличаются друг от друга, все они работают практически одинаково: унаследованные веб-сайты - это программы, которые работают на сервере и запрашивают данные из базы данных, создавая каждую страницу каждый раз, когда пользователь загружает ее. Сайты WordPress следуют этой архитектуре.

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

Однако устаревшие веб-сайты, как правило, медленные (особенно для тех, кто пользуется нестабильным интернет-соединением), их сложнее и дороже масштабировать, а также они менее безопасны. Поэтому в 2015 году Матиас Бильманн, генеральный директор Netlify, ввел термин JAMstack, который позже был переименован в Jamstack, имея в виду новую веб-архитектуру, над которой он и Крис Бах, соучредитель, работали в Netlify, и которую начали изучать другие веб-разработчики.

Вместо того чтобы сервер обрабатывал запрос, предварительно созданная HTML-страница обслуживается в сети доставки контента (CDN) и доставляется пользователю. Сервер не задействован.

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

J - это JavaScript

Представленный миру в 1995 году компанией Netscape, JavaScript стал синонимом Интернета. Он предоставляет возможность вводить логику в веб-сайты, позволяя им реагировать на действия пользователей (например: флажки, формы, призывы к действию) - каждый раз, когда веб-сайт делает что-то большее, чем просто отображение статической информации, вы должны поблагодарить за это JavaScript!

Jamstack использует JavaScript на стороне клиента с такими библиотеками, как React и Vue, для разработки и создания веб-приложений, которые ощущаются и действуют как мобильные приложения.

Возможно, вы уже знакомы с такими популярными библиотеками пользовательского интерфейса JavaScript, как React, Vue и Angular.

А - это API

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

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

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

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

М - это разметка

Часть "М" в Jamstack, вероятно, является самой важной. Она переводится как "разметка". Это означает, что пользователю предоставляются статические HTML-файлы.

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

1. Ручной набор текста: Вы можете напечатать HTML-файлы самостоятельно. Это больше подходит для небольших, простых веб-сайтов.
2. Генераторы статических сайтов: Это самый популярный подход для сайтов Jamstack. SSG генерирует статические HTML-файлы из исходных данных (обычно написанных на легком языке разметки, таком как Markdown) и шаблонов. Более подробно я рассказываю об этом в другой статье.

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

CDN

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

CDN сами по себе не могут генерировать веб-страницы, но поскольку веб-страницы Jamstack предварительно созданы, их можно обслуживать из CDN.

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

Примерами провайдеров бессерверного хостинга являются Netlify и Vercel.

Микросервисы против монолитной архитектуры

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

Jamstack использует подход микросервисов, при котором части сайта разбиваются на части и передаются третьим лицам через API. В качестве примера можно привести использование провайдера платежей, например Square или Paypal, для обработки платежей или использование Auth0 для аутентификации.

Полезная аналогия, созданная The New Stack, - это сайт бронирования авиабилетов. Процесс бронирования билета содержит множество подэтапов, которые в данном сценарии включают резервирование билета, выставление счета клиенту и отправку подтверждения по электронной почте о том, что билет забронирован. В монолитной архитектуре все три процесса были бы встроены в одно приложение. Однако в архитектуре микросервисов каждый этап работает независимо от другого и может быть передан на аутсорсинг третьим лицам. Основной функцией сайта может быть бронирование билетов, но выставление счетов может быть передано на аутсорсинг платежной компании, например Stripe, а рассылка электронных писем - на аутсорсинг почтовой компании, например Mailchimp, и все это через API.

Заключение

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

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