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

Давайте приступим прямо к делу!

Что такое Джемстак?

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

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

Приложение Jamstack состоит из статических HTML-страниц, динамических с помощью JavaScript и дополненных сторонними сервисами через API и встроенную разметку. Отсюда его название происходит от JavaScript, API и гипертекстовой Markup.

Как работает Jamstack?

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

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

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

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

Преимущества Jamstack

Итак, каковы преимущества Jamstack? Зачем мучиться с преобразованием архитектуры вашего веб-приложения?

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

  1. CDN обычно быстрее, чем веб-сервер!

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

2. CDN, скорее всего, дешевле, чем веб-сервер!

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

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

3. CDN, как правило, более безопасен, чем веб-сервер!

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

Как начать использовать Jamstack?

Создание внешнего интерфейса

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

Распространенной интерфейсной средой для Jamstack является Next.js. Ниже показано, как начать работу с Next.js для разработки Jamstack. Самый простой способ начать работу — ввести следующую команду в терминале, и я назову проект mynextapp:

$ npx create next-app mynextapp

который сгенерирует для нас шаблонную страницу по умолчанию.

Перейдите во вновь созданный каталог, который мы только что создали, открыв папку в редакторе кода или набрав в терминале:

$ cd mynextapp

$ code .

Ниже приведен пример стартового дерева файлов Next.js по умолчанию, созданного командой create-next-app:

  • В папке node_modules хранятся все зависимости.
  • Папка pages — это место, где мы храним все компоненты нашей страницы. Идея состоит в том, что каждая страница в Next.js имеет свой собственный компонент React. На данный момент единственным компонентом, который у нас есть, является компонент index.js, который будет использоваться для главной страницы.
  • Папка api предназначена для конечных точек API.
  • Файл app.js действует как корневой компонент, и все наши различные компоненты страницы отображаются здесь:

  • В папке public хранятся все наши общедоступные ресурсы, например изображения.
  • Папка styles содержит все наши CSS-файлы и CSS-модули.
  • .gitignore для контроля версий.
  • package.json должен отслеживать наши различные зависимости.

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

В терминале выполните следующую команду:

$ npm run dev

В браузере введите localhost:3000, и появится следующее:

Контент, отображаемый в вашем браузере, определяется в компоненте index.js. Замените все содержимое основного ‹div› простым заголовком:

Теперь мы можем видеть наш новый контент, отображаемый в браузере:

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

Страницы и маршруты

В папке pages мы создаем все компоненты нашей страницы. Каждая страница в Next.js управляется компонентом React. Таким образом, для страницы «О нас» у нас будет компонент «О нас», для страницы «Цены» у нас будет компонент «Цены» и так далее. Каждый компонент страницы имеет свой собственный файл в папке pages. Поэтому имя файла и расположение каждого компонента привязаны к маршруту для этой конкретной страницы.

Например, в папке pages создадим файл about.js. Next.js автоматически создаст маршрут /about (имя файла) для обслуживания этого компонента. Имя маршрута привязано к имени файла.

Единственным исключением из правила является index.js. Next.js не создает маршрут /index, он просто создает маршрут /. Итак, все, что нам нужно сделать, это перейти в корень домена, чтобы увидеть компонент index.js.

В файле about.js давайте создадим функциональный компонент без состояния и экспортируем его:

Перейдите на страницу /about в браузере, чтобы увидеть страницу о компоненте:

Мы также можем создавать подпапки в папке pages, содержащие компоненты страницы.

Давайте создадим подпапку с именем pricing и файл с именем plan1.js. В файле plan1.js мы создадим функциональный компонент без сохранения состояния под названием Plan1:

Когда у нас есть подпапка, Next.js также создаст маршрут в соответствии с подпапкой. Следовательно, в данном случае маршрут следующий: localhost:3000/pricing/plan1.

И вот как легко сделать многостраничный веб-сайт с помощью Next.js.

Создание бэкенда

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

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

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

Развертывание вашего приложения

Развертывание веб-сайта и управление системами CI/CD, возможно, является одним из самых сложных аспектов разработки веб-приложения.

В мире Jamstack такие инструменты, как Codesphere, предлагают автоматизированный DevOps, упрощающий развертывание.

Что теперь?

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

Если вы хотите попробовать создать собственное приложение Jamstack или решить болезненную проблему управления системой CI/DC, перейдите на Codesphere, который предоставляет онлайн-редактор кода, в котором вы можете создавать, тестировать и развертывать свои приложения в пределах одной вкладке вашего браузера.

Спасибо за чтение!