JAMStack или JavaScript, API и стек разметки — это современный сдвиг в пространстве переднего плана для разработки быстрых веб-приложений.

JAM Stack существует уже некоторое время, хотя недавние разработки в SSG (генераторы статических сайтов) сделали JAM Stack одним из любимых вариантов стека.

Что такое JAMStack?

JAM Stack — это стек, рабочий процесс и способ создания веб-сайтов, где динамическое поведение обеспечивается JavaScript, данные передаются только через API и разметку обеспечивает необходимую структуру/заполнитель для статического или динамического содержимого.

Основная идея заключается в том, что статическая разметка всегда будет быстрее, чем динамически созданная разметка с сервера

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

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

Окончательный рендеринг будет незаметным изменением от SSR HTML до компонентов, сгенерированных JavaScript.

И если JS Renderer достаточно умен, в самом DOM не будет никаких изменений. Многие интерфейсные библиотеки и фреймворки делают это с помощью Virtual DOM (vDOM) и применяют только различия между vDOM и фактическим DOM.

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

  • Сверхбыстрый; поскольку этап создания контента удален, пришло время это сделать. Запрошенные страницы могут быть доставлены, как только сервер найдет контент для доставки.
  • Низкая стоимость сервера; Стоимость сервера низкая, поскольку мы не тратим время и ресурсы сервера на динамическое построение разметки.
  • Бэкенды для внешнего интерфейса (BFF); Теперь бэкенд может сосредоточиться только на обслуживании потребностей внешнего интерфейса с помощью API, а не тратить энергию на заботу о генерации разметки ответа.
  • Следовательно, Backend будет существовать только для удовлетворения потребностей FrontEnd. Это также означает, что Backend Teams могут сосредоточиться на решении проблем на уровне API.
  • Обслуживание статического контента в основном будет осуществляться на уровне DevOps.
  • Улучшенное кэширование; Поскольку маловероятно, что статическое содержимое изменится, кэширование может быть более обширным, чтобы ускорить доставку содержимого. Возраст кэшированного контента может быть больше.
  • Использовать CDN; CDN (сети доставки контента) также можно использовать для доставки статической разметки; не только медиафайлы

Проблемы

Поскольку есть блестящие преимущества; есть также некоторые проблемы, которые необходимо решить при выборе использования стека JAM. Такие проблемы, как:

  • TTI или Time to Interactive; Более длинные TTI могут быть огромной проблемой, если JS неэффективен или не оптимизирован.
  • Оптимизация на усмотрение; Доставка JavaScript и CSS должна быть оптимизирована, и есть инструменты для автоматического решения этой задачи, но крайне необходима свобода действий разработчиков.
  • Накладные расходы на синтаксический анализ JS; Поскольку вся динамика перенесена на JS, пользователю придется ждать, пока JS сделает страницу функциональной и готовой к использованию, а время синтаксического анализа JS является еще одним узким местом.
  • Следовательно, JS, поставляемый клиентам, должен быть оптимизированным, небольшим по размеру и содержать только те части, которые потребуются немедленно.
  • SEO; SEO не является большой проблемой, так как сканеры могут выполнить необходимый JS; хотя для сканеров это дополнительный шаг. Снимки SSR и HTML могут решить эту проблему, но это дополнительный шаг для сборки сайта.

Почему вас это должно волновать?

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

Как разработчик внешнего интерфейса

Как разработчик внешнего интерфейса, стек JAM возлагает на вас большую часть ответственности за приложение. Возможно, вам также потребуется знать о DevOps приложения.

Как бэкенд-разработчик

Как мы обсуждали выше, стек JAM продвигает BFF (Backend For Frontend) для разработки приложений.

Это означает, что усиление защиты API гораздо важнее. Безопасность, доступ, авторизация и т. д. становятся очень важными.

Бэкенд может быть разработан как монолит или микросервис, но эта деталь реализации не касается фронтенда. Вам решать, как вы разбиваете приложение и когда вы это делаете.

Как разработчик полного стека

Что ж, все, что написано выше для Frontend и Backend, теперь ваша забота. Вам также может потребоваться больше знаний об архитектуре системы и DevOps для бесперебойной разработки и запуска приложения.

Поскольку идея DevOps как кода все больше и больше поддерживается разработчиками и инженерами DevOps; вы своего рода армия из одного человека в JAM Stack.

Когда сказать «Нет!» в стек JAM?

Каким бы блестящим он ни был, иногда стек JAM является чрезмерной инженерной практикой в ​​качестве решения для дизайна приложения.

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

  • Насколько важно иметь сверхбыстрое веб-приложение
  • Есть ли в вашей команде независимые разработчики Frontend и Backend?
  • Как часто меняется динамическая часть вашего приложения?

  • Можете ли вы потратить на несколько серверов и обслуживание CDN? И сколько?
  • и Т. Д.

Как «JAMStack»?

Как мы обсуждали в начале, стек JAM состоит из трех основных частей.

Разметка — это всегда HTML, а JavaScript всегда будет добавлять интерактивность в HTML.

API сами по себе представляют собой совершенно другую проблему; хотя для JAM Stack; давайте считать, что API-интерфейсы на месте и следуют большинству лучших практик.

Теперь вопрос об инструментах и ​​рабочем процессе разработки.

Основные инструменты можно поместить в скобки:

SSG (генераторы статических сайтов)

SSG — это инструменты, отвечающие за создание статической страницы, отсюда и название. Некоторые часто используемые генераторы:

Сборка и развертывание

Разделы сборки и развертывания также известны как CI (непрерывная интеграция) и CD (непрерывное развертывание). Именно здесь вышеупомянутые SSG будут выполнять и генерировать страницы и публиковать их на указанном хосте.

Вы можете найти руководство по размещению вашего статического сайта бесплатно здесь и здесь

Популярные инструменты CI/CD на рынке, которые вы можете выбрать:

CMS (система управления контентом)

CMS — это место, где мы будем управлять Контентом. Это не обязательно для всех сайтов JAM Stack, хотя для сайтов, где API используется для контента, выбор CMS является важной частью.

Чтобы CMS хорошо взаимодействовали со стеком JAM, они должны выполняться безголовым способом. Некоторые из популярных вариантов:

Вывод

JAM Stack работает очень быстро, если все сделано правильно. И есть так много вариантов, чтобы создать быстрое решение с помощью JAM Stack.

Какой у вас стек JAM?

Дайте мне знать в комментариях 💬 или в Твиттере на @patel_pankaj_ и/или @time2hack

Если вы нашли эту статью полезной, пожалуйста, поделитесь ею с другими 🗣

Подпишитесь на блог, чтобы получать новые статьи прямо на почту.

Первоначально опубликовано на https://time2hack.com 2 июня 2020 г.