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

Жизненный цикл разработки программного обеспечения (SDLC) состоит из критических фаз, таких как building, testing, deployment и maintenance. Мы, как разработчики программных приложений, принимаем участие во всех этих этапах.

Как говорится, «время — деньги», чем больше времени мы тратим на разработку приложения, тем больше мы склонны тратить на разработку приложения. Однако стоимость не ограничивается только доставкой. Нам нужно убедиться, что приложение защищено, работает быстро и соответствует разумной цели обслуживания.

Безопасность, скорость и стоимость — три основных столпа разработки приложений.

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

Джемстек

Матиас Бильманн (генеральный директор и соучредитель Netlify) определил Jamstack как:

"Современная архитектура веб-разработки, основанная на клиентском JavaScript, многоразовых API и встроенной разметке".

В отличие от любых других существующих технологических стеков, таких как MEAN, MERN, FARM и многих других, Jamstack представляет собой архитектурную концепцию. JAM Jamstack означает,

  • JavaScript: широко используемый популярный язык программирования, используемый для обработки цикла запроса/ответа и в основном работающий на клиенте. Это может быть любая внешняя библиотека или обычный JavaScript.
  • API: Интерфейс прикладного программирования. API в архитектуре Jamstack абстрагирует серверные процессы или действия базы данных. Обычно доступ к нему осуществляется через HTTPS с использованием JavaScript.
  • Markup: Это готовый шаблон разметки, в котором есть и данные, и презентации (HTML/CSS). Мы можем использовать генераторы сайтов или инструменты для их создания.

Также обратите внимание на три основных ключевых слова, использованных Матиасом Бильманном в определении:

Традиционная архитектура клиент-сервер против Jamstack

Давайте разберемся, чем Jamstack отличается от традиционного монолитного клиент-серверного приложения.

Клиент-серверная архитектура

В традиционной архитектуре клиент-сервер клиент обычно представляет собой браузер, портативные устройства или другие интерфейсы для связи с сервером. Сервер необходим для предоставления данных/информации по запросу. Всякий раз, когда клиент запрашивает страницу, сервер подготавливает страницу с использованием шаблона, данных, стилей и отправляет ее клиенту в качестве ответа. Мы храним данные в базе данных или файловой системе CMS.

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

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

Ключевой вопрос, который нужно задать, заключается в том,

Кто это будет делать?

Прямой ответ:

Вы и ваша команда.

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

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

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

Джамстек Архитектура

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

  • Лучшая безопасность
  • Шкала
  • Представление
  • Ремонтопригодность
  • Портативность
  • Опыт разработчиков

Но что это за характеристики?

  • Разметка приложения prebuilt, а не генерируется во время выполнения.
  • Все приложение находится на CDN(or ADN). CDN означает сеть доставки контента, а ADN — сеть доставки приложений.
  • Все живет в GIT или подобной системе контроля версий.
  • Automated создается с рабочим процессом, когда разработчики продвигают код.
  • Automatic развертывание готовой разметки в CDN/ADN.
  • Практически Server Less(с некоторыми условиями). Все, что вам нужно для создания функциональных компонентов, доступно как APIs и microservices.

Давайте разберемся с некоторыми терминологиями, которые мы видели сейчас.

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

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

Мы используем Static Site Generators(SSG) для создания готовых разметки. Мы узнаем о них больше через некоторое время.

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

Предположим, исходный сервер myexample.com обслуживает содержимое приложения из какой-то части США. Такой пользователь, как я, из Индии хочет получить доступ к странице с myexample.com. В зависимости от скорости моей сети, аппаратного обеспечения, близости сервера и многих других факторов мне может быть неудобно отображать страницу.

Разве не было бы здорово, если бы содержимое страницы находилось рядом со мной безопасным образом? А вот и CDN, сеть доставки контента.

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

Jamstack использует это для достижения скорости, производительности и безопасности приложения.

Автоматическая сборка и развертывание: исходный код приложения Jamstack должен находиться в Version Control System, например Git. Поставщики CDN/хостинга приложений могут создавать интеграции с платформой, поддерживаемой Git, например GitHub. Это обеспечивает значительную гибкость для запуска сборки, когда в GitHub отслеживается новая фиксация. Когда сборка завершается успешно, встроенная версия также развертывается для предварительного просмотра.

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

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

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

Это дает вам гибкость выбора и снимает бремя поддержки кода.

Экосистема Jamstack для разработки, создания, развертывания и обслуживания приложений

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

На высоком уровне,

  • Разработчики пишут код, фиксируют и отправляют его в приложение исходного репозитория, такое как GitHub.
  • Интеграция с поставщиком CDN (например, Netlify или Vercel) запускает рабочий процесс, который запускает сборку для создания предварительно созданного контента.
  • Затем предварительно созданный контент развертывается поставщиком CDN в CDN, и для вас генерируется уникальный защищенный URL-адрес. URL-адрес генерируется для каждой фиксации, чтобы вы могли предварительно просмотреть приложение в производственной среде перед их развертыванием.
  • Вы делитесь этим URL-адресом со своими конечными пользователями или клиентами для доступа к приложению.
  • Пользователи запрашивают ресурсы из CDN (доступной поблизости), которая обслуживает готовый контент. Для любых сервисов вызов API идет к отдельным микросервисам, размещенным в облаке.

Примеры SSG, хостинга, API в Jamstack

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

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

Вот несколько категорий, основанных на среде программирования, с которой они созданы.

  • Reactjs: Gastby, Next.js, React static и многие другие.
  • Vue: Gridsome, Nuxt, VuePress и многие другие.
  • Vanilla JS: 11ty (одиннадцать).
  • Угловой: Скалли
  • Голанг: Хьюго
  • Python: Pelican, Cactus, MkDocs
  • Java: JBake
  • Ruby: Jekyll, Slate, Middleman и многие другие.
  • Svelte: Sapper.js

Пожалуйста, проверьте этот список генераторов сайтов отсюда.

Хостинг и строительство

Вот несколько платформ, которые вы можете начать использовать бесплатно для развертывания и размещения веб-приложений.

… и многое другое.

API

Существует множество существующих API-сервисов, которые вы можете выбрать в зависимости от потребностей. Вот несколько,

Аутентификация

Оплата

Электронная почта

Обслуживание клиентов

  • "Внутренняя связь"

Поиск

Комментарий

Управление изображениями и видео

Обработка формы

Автономная CMS

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

Повтор сеанса с открытым исходным кодом

Отладка веб-приложения в рабочей среде может быть сложной и трудоемкой. OpenReplay — это альтернатива FullStory, LogRocket и Hotjar с открытым исходным кодом. Это позволяет вам отслеживать и воспроизводить все, что делают ваши пользователи, и показывает, как ваше приложение ведет себя при каждой проблеме. Это похоже на то, как если бы инспектор вашего браузера был открыт, когда вы смотрите через плечо вашего пользователя. OpenReplay — единственная доступная в настоящее время альтернатива с открытым исходным кодом.

Удачной отладки, для современных фронтенд-команд — Начните бесплатно отслеживать свое веб-приложение.

Но подходит ли он только для статических сайтов? Как насчет корпоративных приложений?

Архитектура JAMStack отлично подходит для статических сайтов, таких как блоги, маркетинговые сайты. Природа предварительно созданной разметки делает все готовым для доступа пользователя. Однако не заблуждайтесь, что мы не можем использовать Jamstack за пределами этих вариантов использования. Мы также можем использовать архитектуру Jamstack в корпоративном приложении.

Бессерверная природа Jamstack позволяет нам создавать наши сервисы в виде API, используя бессерверную инфраструктуру. Такие провайдеры, как Netlify, Vercel, AWS, поддерживают их по умолчанию. Мы также можем использовать частичный Jamstack, если это необходимо. Целевая страница может быть построена статически, а другие страницы используют традиционную архитектуру.

Заключение

Как вы уже говорили, Jamstack — это новый подход к разработке, сборке и развертыванию приложений. Архитектура является гибкой для предоставления услуг plug-and-play в соответствии с нашими потребностями. Стоимость разработки резко снижается, а удовлетворенность клиентов повышается.

Первоначально опубликовано на https://blog.openreplay.com 27 октября 2021 г.