Успех бизнеса сегодня во многом зависит от скорости работы и надежности веб-приложения или сайта. А для того, чтобы разработать и запустить быстрый и надежный сайт на Jamstack, вам пригодятся сервисы, которые сильно упрощают работу. В этом обзоре мы расскажем об инструментах, которые получили наибольшую популярность. Многие из них мы используем и в своих проектах. Конечно, список далеко не полон, но перечисленных инструментов хватит, чтобы строить более качественные, быстрые и надежные сайты в более сжатые сроки и в конечном счете увеличить показатели вашего бизнеса.
Какие виды инструментов понадобятся
Для упрощения разработки на Jamstack были созданы сторонние сервисы, предоставляющие API. Вы сможете подключить их бесплатно или за небольшую ежемесячную плату к своему сайту, что избавит вас от необходимости писать собственный backend. Основные инструменты для запуска вашего сайта - хостинг, SSG, CMS, аутентификация, serverless функции и платежные системы. Есть и дополнительные инструменты, о них расскажем в отдельном разделе.
Хостинг
Вам понадобится хостинг, который обеспечит автоматизированные развертывания. Схема работы следующая: у вас может быть репозиторий в GitHub, с которого хостинг-платформа после каждого коммита в репозиторий автоматически совершает онлайн-развертывание (через веб-хуки), запускает необходимые инструменты сборки (например, Jekyll) и регрессионные тесты (такие, как Travis CI).
Netlify. Именно руководитель компании Netlify Mathias Biilmann придумал термин Jamstack. Простота использования этого сервиса не имеет себе равных. Возможности тоже радуют: всемирный CDN, бесплатный SSL, поддержка командной строки и многое другое. В своих проектах мы чаще всего используем именно эту платформу.
Vercel. Ещё одной часто используемой платформой является Vercel, так как он хорошо работает в связке с Next.js. Неудивительно, ведь и Vercel, и Next.js - продукты одной компании.
Heroku. Этот сервис стоит упомянуть, поскольку он позволяет размещать приложения любой сложности, построенные на Node.js, Ruby, Python, Java, PHP, Go, Scala и Clojure и других языках.
Cloudflare. Из прочих сервисов можно вспомнить Cloudflare. Это компания, которая обеспечивает самые низкие задержки для сайтов, размещенных на их CDN.
CMS
Раньше, при господстве монолитного подхода, всякий раз, когда мы использовали ту или иную систему управления контентом, такую как WordPress, также нужно было пользоваться и привязанным к ней набором тем, таким образом фронтенд был жестко спаян с бэкендом.
Но потом появились “безголовые” CMS - по сути, только бэкенд без фронтенда. Поскольку headless CMS обычно предоставляет API и позволяет генерировать HTML страницы во время во время сборки проекта, при этом фронтенд сайта может быть создан на чем угодно. Интерфейсов даже может быть несколько при необходимости (например, веб-сайт и мобильное приложение могут использовать один источник данных в виде headless CMS).
CMS бывают Self-Hosted и SaaS. Из первой категории - Ghost, Strapi, Netlify.
Из SaaS headless CMS можно отметить Contentful, DatoCMS, Prismic, Forestry. Мы сами часто используем Sanity и Storyblok. Sanity нравится нам из-за ее кастомизируемости, а Storyblok из-за функциональных возможностей, простоты и наличия live visual editor, а также низкой стоимости.
Сегодня существуют CMS на любой вкус и кошелек, у большинства имеются бесплатные тарифные планы, которые подойдут даже для среднего или крупного по размерам бизнеса.
Генераторы статических сайтов (SSG)
Если вам нужно перевести динамические страницы на JAMstack, без SSG не обойтись. Если решите использовать SSG, то сможете продолжить использовать знакомую CMS (если у неё есть headless API) и наслаждаться новыми возможностями: разделением кода и данных, предварительной загрузкой, кэшированием, оптимизацией изображений и другими улучшениями производительности. Во время сборки проекта происходит запрос данных к CMS, что запускает генерацию статических выходных данных (например, веб страницы).
Вот список одних из самых популярных SSG:
- GatsbyJS (чаще всего используется в Jamstack проектах),
- 11ty (кстати, посмотрите наш стартер на 11ty, вы поймете, насколько это удобный SSG. https://github.com/frontenso/frontenso-11ty-starter)
- Hugo (самый быстрый генератор),
- Jekyll
- Next.js (сайт, который вы сейчас читаете, написан на этой технологии)
и многие другие.
SSG можно подключить и к WordPress, так как эта CMS предоставляет headless API.
Аутентификация
IDaaS, также называемая иногда «Аутентификация как сервис» (AaaS), включает в себя управление регистрацией пользователя, подтверждением и аутентификацией только с помощью API. Суть сервиса заключается в том, что пользователь аутентифицируется сторонним API и возвращается к вам с действующим «токеном», который вы можете подтвердить или отозвать, если потребуется.
Самым известным сервисом является Auth0. Он предлагает руководства по быстрому старту для ряда типовых сценариев. Это отличный вариант, если вы хотите реализовать комплексное решение и уже имеете некоторый опыт внедрения аутентификации.
У Netlify тоже есть решение для аутентификации, очень простое, но с рядом ограничений. Зато позволяет настроить пользовательскую аутентификацию за 10 минут!
Стоит отметить и Firebase Authentication. Этот сервис интересен тем, что предоставляет анонимную аутентификацию и отлично работает в связке с другими сервисами Firebase и Google, а также поддерживает множество auth провайдеров.
Платежные системы
Преимущества headless e-commerce те же, что и у headless CMS: значительное сокращение затрат (хостинг, лицензии, обслуживание, нет необходимости разрабатывать собственные user flows, связанные с платежами), меньшее время вывода на рынок и бесшовная интеграция всех каналов общения с клиентом.
Здесь нужно упомянуть Stripe, это одно из самых популярных решений для онлайн платежей, предоставляет удобный API для интеграции, работает в 35 странах мира, поддерживает 135+ валют и способов оплаты, предлагает подписки и многое другое. Stripe отлично работает с Jamstack.
Ещё одна хорошая новость в том, что у популярных e-commerce SaaS платформ есть безголовые API (например, у таких как Shopify или BigCommerce).
Foxy.io и Snipcart предоставляют простой сервис, который очень легко интегрировать в различные форматы. Foxy.io основан на подписке, тогда как Snipcart взимает процент с транзакций.
Backend/serverless функции
В том случае, если имеющиеся API не отвечают вашим потребностям, вы можете сами создать микросервис, на удобном для вас языке и со всеми необходимыми функциями. Такую возможность дают AWS Lambda, Azure Functions или Google Cloud Functions. Также Netlify Functions, Firebase Cloud Functions, Vercel Serverless Functions. Теперь вам не нужно самим поддерживать серверную инфраструктуру - инкапсулируйте логику в функции, разверните их в облаке, подключите их через RESTful API, а остальным займется облачный провайдер.
Дополнительные инструменты
Мы перечислили основные сервисы, которые помогут вам начать или продолжить развивать бизнес с помощью JAMstack. Конечно, это далеко не всё: API для JAMstack предлагают также такие удобные возможности, как подключение к облачным базам данных (Amazon DynamoDB, Google Firestore), обработка форм (Form.IO, Formcarry, Formspark, и Netlify Forms), сторонний поиск (Google Custom Search, Elasticsearch) и уведомления (OneSignal, Pushwoosh и Truepush). Практически любые бизнес-потребности на сегодняшний день могут быть удовлетворены десятками надежных и, как правило, недорогих сервисов.
Если наша статья не полностью удовлетворила ваш интерес, посмотрите сайт The Power of Serverless. Это список с большим количеством категоризированных serverless инструментов.
Заключение
Как видите, сторонние сервисы уже созданы для большинства типовых задач, стоящих перед бизнесом. Подумайте, сколько времени и труда вы можете сэкономить, если поручите выполнение таких задач сторонним решениям, доказавшим свою надежность и эффективность? Очень часто экономия получается значительная, а вы можете сосредоточится на бизнес-процессах, присущих именно вашему предприятию. Множество крупных корпораций и популярных стартапов уже перешли на использование Jamstack, самое время сделать это и вам. Если вам нужна помощь в таком переходе, или вы не знаете, с чего начать - обращайтесь к нам. Мы с удовольствием поможем!