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

Что это за JAMstack?

Для начала JAMstack — это архитектура и философия программного обеспечения, которая придерживается следующих компонентов:

  • Javascript,
  • API,
  • Markup.

Если это звучит знакомо, то потому, что это так! Например, у вас React приложение, которое вы компилируете с Webpack и, в конечном счете, обслуживаете из S3? Да, это приложение JAMstack.

Простой HTML файл, который не имеет JavaScript и буквально не делает ничего динамического? Да, это также приложение JAMstack.

Не путаем с бессерверным приложением

Если вы больше ориентируетесь на облачные технологии (например, AWS, GCP, Azure), вы, возможно, склонны думать о бессерверности и JAMstack как об одном и том же. Конечно, у них есть общие черты в философии управления ресурсами, например, в хостинге сайта на S3. Но приложение JAMstack не всегда будет бессерверным.

Рассмотрим приложение, размещенное в статическом хранилище у выбранного вами облачного провайдера. Да, вы можете обслуживать приложение бессерверным способом, но вы можете иметь дело с API, использующим WordPress или Rails, которые, безусловно, не являются бессерверными.

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

Составляющие JAMstack

Вернемся к стеку JAM: он обычно состоит из трех компонентов: Javascript, API и Markup. Его история связана с превращением термина «статический сайт» во что-то более значимое (и востребованное на рынке).

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

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

Javascript

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

Именно здесь вы часто будете видеть, как в игру вступают UI-фреймворки, такие как React, Vue, и новички, такие как Svelte.

Пример «Простой компонент» с сайта reactjs.org

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

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

API

Использование сильных сторон API — это основа того, как сделать приложение JAMstack динамичным. Будь то аутентификация или поиск, ваше приложение будет использовать Javascript для отправки HTTP-запроса другому провайдеру, что в конечном итоге улучшит работу в той или иной форме.

В Gatsby придумали фразу «контентная сетка», которая довольно хорошо описывает возможности.

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

Например, если у вас есть безголовый (headless) WordPress API, в котором вы размещаете свои записи блога, учетную запись Cloudinary, в которой вы храните свои специализированные мультимедийные файлы, и Elasticsearch, который предоставляет функции поиска, все они работают вместе, чтобы предоставить качественный и единый опыт для людей, использующих ваш сайт.

Markup

Markup — разметка. Это критическая часть. Будь то написанный от руки HTML или код, который компилируется в HTML, это первая часть, которую вы предоставляете клиенту. Это своего рода де-факто часть любого сайта, но то, как вы его обслуживаете, является самой важной частью.

Чтобы считаться приложением JAMstack, HTML необходимо обслуживать статически, что в основном означает, что он не будет динамически отрисовываться с сервера.

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

Статический вывод Gatsby на AWS S3

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

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

Одно замечание о «хостинге»

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

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

Карта распределения CDN (пример)

Что делает приложение JAMstack таким классным?

Приложения JAMstack по своей сути удовлетворяют большинству, если не всем, из пяти основных принципов AWS Well-Architected Framework (хорошо структурированный фреймворк). Это основные концепции, которые AWS рассматривает для создания быстрой, безопасной, высокопроизводительной, отказоустойчивой и эффективной инфраструктуры.

AWS с хорошей архитектурой

Скорость

Тот факт, что вы обслуживаете приложения JAMstack как статические файлы непосредственно из CDN (обычно), делает вероятным то, что ваше приложение будет загружаться очень быстро. Прошли те времена, когда серверу приходилось тратить время на создание страницы, прежде чем отвечать; теперь вы обслуживаете страницу в виде простого HTML «как есть» или с некоторым типом гидратации на стороне клиента, как в случае с React.

Стоимость

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

Масштабируемость

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

Обслуживание

Основа вашего статического сайта — не сервер, а это значит, что вам не нужно его обслуживать. Будь то Netlify, S3 или любой другой провайдер, ваш статические HTML, CSS и JS поддерживаются без головной боли.

Безопасность

Удваивая количество серверов, которые вы должны лично обслуживать, вам не нужно так сильно беспокоиться о том, чтобы блокировать способы проникновения.

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

Зависимость от ваших API

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

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

Считается ли мой сайт JAMstack?

Мы уже говорили о 3-х компонентах (Javascript, API, Markup), но о чем мы не говорили, так это о том, что вам не обязательно использовать все 3 из них, чтобы считать ваш сайт достойным названия JAM.

На самом деле все сводится к разметке и тому, как вы ее обслуживаете. Вместо того, чтобы ваше приложение Rails отображало ваш HTML-код для вас, вы можете разместить на S3 предварительно скомпилированное приложение React, которое обращается к Rails через набор API.

Но вам даже не нужны API. Вам даже не нужен Javascript! Пока вы обслуживаете HTML-файл без необходимости его компилирования на сервере во время запроса (то есть предварительного рендеринга), у вас есть сайт JAMstack.

Какие есть примеры JAMstack?

freecodecamp.org

Да! freecodecamp.org и его обучающий портал — это сайт JAMstack, построенный на Gatsby. Даже несмотря на сложности предоставления приложения для прохождения курсов по программированию, freeCodeCamp может объединить мощь генератора статических сайтов и мощных API-интерфейсов, чтобы дать людям во всем мире возможность изучать код.

Вы можете увидеть, как Куинси из freeCodeCamp рассказывает об этом больше на JAMstack_conf 2018:

Примечание: порталы новостей и форумов в настоящее время не являются сайтами JAMstack.

impossiblefoods.com

Главный сайт Impossible Foods — это не что иное, как сайт Gatsby! Все, от их рецептов до средства поиска местоположения, скомпилировано с помощью нашего любимого «молниеносного» генератора статических сайтов.

web.dev

Ресурсный центр Google web.dev создан с использованием растущего по числу пользователей 11ty. Вы даже можете найти код с открытым исходным кодом по адресу:

https://github.com/GoogleChrome/web.dev

Какие инструменты я могу использовать для создания сайтов или приложений JAMstack?

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

Создание вашего приложения

Это самое интересное. Как вы собираетесь создавать свое приложение? Со Scully вы можете выбрать свой любимый вариант UI-фреймворка и сразу приступить к работе. Вот несколько популярных, но далеко не исчерпывающих вариантов:

Обслуживание вашего приложения

Мне нравится думать об этом как о простой части, зависящей от ваших настроек. Такие инструменты, как Netlify и Zeit, упрощают настройку, подключаясь к вашему репозиторию Github и создавая каждый раз, когда появляется новый коммит, но, конечно, у вас есть такие опции, как AWS, если вы хотите большего контроля.

Делаем приложение динамичным

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

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