Что нужно знать, чтобы начать работать с JAMstack

5 (100%) 1 vote[s]

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

Свободный перевод с дополнениями с https://snipcart.com/blog/jamstack by Mathieu Dionne.

Что означает слово «JAM»? На официальном сайте мы найдем расшифровку: это аббревиатура из заглавных букв трех основных составляющих этой технологии:

JavaScript: любое динамическое программирование в процессе цикла запрос/ответ обрабатывается JavaScript, полностью выполняется на стороне клиента.

API: абстрование на стороне сервера всех функции или действий с базой данных в  API, который повторно используется и доступ к которому осуществляется с помощью JS по протоколу HTTPS. Будь то SaaS (software as a service — одна из форм облачных вычислений, модель обслуживания, предоставляющая подписчикам готовое прикладное программное обеспечение, которое полностью обслуживается провайдером), сторонние сервисы или созданные самостоятельно.

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

Что все это означает на практике?

«Общим для всех сайтов JAMstack является то, что они не зависят от веб-сервера».

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

Но это было 5+ лет назад.

С тех пор с увеличением числа владельцев мобильных устройств и изменением требований к функциональной стороне сайтов проблемы, связанные со скоростью работы сайтов с CMS стали приоритетными. Попытки разработчиков соответствовать новым требованиям приводят к тому, что сайты с CMS (WordPress, Drupal) становятся громоздкими и сложными в управлении. А минимальный эффект от оптимизации не стоит таких колоссальных трудозатрат.

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

JAMstack сместил фокус с абстрактного бэкэнда к мощному веб-интерфейсу.

Чтобы новичку было проще понять принцип, как работает проект JAMstack, вот самая простая схема:

    • Автоматизированная сборка: разметка Jamstack предварительно собрана, изменения содержимого не будут запущены, пока вы не запустите другую сборку.
    • Весь сайт/приложение на CDN, что открывает скорость и производительность.
    • «Aтомарное развертывание», при котором никакие изменения не вступают в силу до тех пор, пока все измененные файлы не будут загружены
    • Мгновенное аннулирование кэша.
    • Все живет в Git, что упрощает организацию и тестирование рабочих процессов.

Но это не появилось в один момент, а создавалось в течение нескольких последних лет.

Этапы развития 

С момента появления в процессе роста JAMstack проходил такие этапы:

→ 2015 : Статические сайты постепенно возвращаются из руин ранних лет Интернета. Первые отрицатели CMS снова делают их «крутыми».

→ 2016 : Происходит естественная обратная реакция: статические сайты совсем не крутые — им не хватает слишком много функций, чтобы создавать что-либо кроме блогов. В это время небольшая группа энтузиастов-разработчиков создает «JAMstack» и постепенно продвигает его принципы в кругах разработчиков.

→ 2017 : JAMstack имеет уже небольшое нишевое сообщество. Статические сайты больше не являются «статичными» как таковыми. Эта современная веб-революция предоставила все функции, необходимые для создания «гипер-динамических» сайтов и приложений. Sequoia Capital, Mailchimp & Red Bull являются одними из первых крупных предприятий, создавших проекты JAMstack.

→ 2018 : Вот фраза, которую часто можно было слышать в этот период: «Только что обнаружил JAMstack, и это потрясающе!». Gatsby, Netlify, Contentful и т.д. объявили о привлечении значительных средств финансирования.

→ 2019 : Год зрелости и общедоступности. JAMstack уже вырос за пределы нишевого сообщества. Большинство разработчиков интерфейсов узнают об этой технологии, и многие начинают изучать ее. Подобно Stackbit, JAMstack открывает свои двери для менее технически подкованных пользователей. Количество серверных функций, позволяющих привнести больше бэкэнд-функций в проекты, ориентированные на интерфейс, также огромно.

Stackbit — это новый SaaS, рассчитанный на  разработчиков любого уровня, который позволяет быстро создавать собственные сайты JAMstack. 

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

→ 2020: в начале нового десятилетии ничто не указывает на снижение уровня принятия JAMstack. Если сервисы и API-интерфейсы в экосистеме продолжат показывать свою жизнеспособность и прибыльность, мы увидим, как более важные игроки будут придерживаться этой идеи, еще больше увеличивая принятие. Обеспокоенность большинства обозревателей сферы веб-разработки по поводу слишком большого количества вариантов JAMstack в ней говорит лишь о том, что будущее JAMstack-eров выглядит ярко!

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

Сравнение рабочих процессов (JAMstack и традиционный)

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

JAMstack и традиционный сайт

Этот рисунок представляет хоть и урезанное, но точное представление о том, что на самом деле происходит под капотом.

Вот как это выглядит более подробно:

Традиционный рабочий процесс

→ Сборка и хостинг связаны.
→ Пользователь запрашивает страницу. Файл запрашивается и обрабатывается после (длинной) серии взаимодействий между базой данных, внутренним кодом, сервером, браузером и уровнями кэширования.
→ Обновление ядра отправляется на рабочие серверы, часто через FTP. База данных постоянно должна поддерживаться или обновляться.
→ Обновление контента осуществляется через традиционные CMS, такие как WordPress или Drupal.

Рабочий процесс JAMstack

→ Сборка и хостинг не связаны.
→ Пользователь запрашивает страницу. Файл уже скомпилирован и напрямую передается в браузер из CDN.
Основные обновления осуществляются через Git, при этом сайт заново полностью перестраивается с помощью современных инструментов сборки, таких как статические генераторы сайтов.
Контент обновляется через Git или через CMS статического сайта.

Преимущества для разработчиков

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

За счет чего это происходит?

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

Если без шуток, в подходе JAMstack есть много полезного как для разработчиков, так и для клиентов (материальная — прежде всего).

Точка входа, или по-простому «с чего начать?» — первое, что нужно знать разработчику.

С чего начать работу с JAMstack

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

JAMstack ориентирован на внешний интерфейс. Если в целом вы новичок в веб-разработке, вам нужно будет оттачивать свои навыки JavaScript . Также изучите как можно больше об API — это позволит вам вывести свои проекты на новый уровень.

Как только вы это освоите, то с возгласом: «Он оно чё, Михалыч!» поймете, о чем речь, и сможете понять, какие инструменты нужны именно вам для реализации своих идей.

Новые проекты

Лучше всего начинать с нуля — это хоть и сложный, но самый правильный способ создать «чистый» JAMstack. Кроме того, что вы будете полностью в курсе архитектуры проекта и логики его работы, еще и сможете сознательно выбирать все необходимые части, чтобы постепенно создать то, что хотите. В дальнейшем и с масштабированием не будет проблем (если вы это предусмотрите на этапе проектирования). Первое, что нужно решить, это то, что использовать для создания своего сайта/приложения. И исходить нужно из того (вернее, помнить), что сборка и хостинг в JAMstack разделены

Современная экосистема внешнего интерфейса на самом деле может осложнить жизнь новичка на самых его первых шагах. Именно не из-за отсутствия соответствующих инструментов. Как раз наоборот: есть сотни возможностей, причем вполне равнозначных и сопоставимых, несмотря на то, что некоторые из них более известны, чем другие.Вот тут, «не успев насладиться солнышком на пляже», можно сразу и утонуть.

Выбор фреймворка JavaScript

фреймворки JAMstack

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

И начинать нужно с наиболее «фэймост»,  «стабле» и «саппортед», или так называемых фреймворков Святой Троицы JavaScript: React , Vue & Angular .

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

Можно  присмотреться к новому Svelte: этот относительно новый фреймворк следует по стопам React & Vue, создавая собственный путь в будущее. Svelte действует как компилятор. Он сбрасывает виртуальный DOM и компилирует компоненты в JavaScript, что значительно облегчает работу и повышает производительность.

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

генераторы статичных сайтов JAMstack

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

На основе этих  JS-фреймворков созданы одни из самых мощных известных генераторов статических сайтов — Gatsby & Next.js для React, Nuxt и Gridsome для Vue. Эти генераторы позволили SSG проникнуть в совершенно новые сферы.

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

После всплеска появления новых SSG сегодня их (новых) становится меньше, зато бывалые (к этому времени) лучшие игроки становятся более зрелыми. Например, Гэтсби значительно вырос за последние несколько месяцев и продолжает расти. Будет ли 2020 год годом, когда мы увидим поддержку инкрементных сборок  и распараллеливание сборок для больших и сложных сайтов (переход на архитектуру потоковой обработки, чтобы исключить этап сборки)? Все очень на это надеятя. У статичных сайтов есть реальные ограничения в реальных случаях использования — они не могут обрабатывать частые обновления контента и не могут масштабироваться до больших и сложных сайтов.

Хорошие новости для разработчиков Angular: наконец-то появился первый генератор статических сайтов на базе Angular ! Scully , безусловно, станет инструментом для мониторинга в ближайшие месяцы. Это означает, что все основные инфраструктуры веб-интерфейса теперь имеют свои инструменты JAMstack, предоставляя разработчикам еще больше выбора в работе с инструментами, к которым они привыкли и чувствуют себя комфортно.

Еще один новый генератор, имеющий хорошую поддержку,  это JS-powered 11ty. Вы можете прочитать документацию об этом SSG здесь .

Headless CMS для внутренних функций

Headless CMS JAMstack

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

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

Вот кое- что в помощь по прохождению этого квеста.

Развертывание

Создав свой сайт/приложение, вы должны решить, где оно будет жить. Большинство разработчиков размещают свой код на страницах GitHub , Netlify или на  Zeit.

Вот несколько примеров того, как можно сделать новый стек:

→ Для небольшого блога только для себя можно использовать Hugo для создания сайта, развернуть его на Netlify (на котором есть формы Netlify/Staticman для комментариев) . Для управления контентом, редактирования подключение безголовой CMS (например, Ghost как безголовой CMS или стартовые Netlify CMS с GatsbySiteStarter, HugoSiteStarter,  Middleman Site Starter, Preact CLI c автоматическим развертыванием без строчки кода) сделает жизнь менее технически подкованных пользователей проще. Для блогов в этой связке определенно нет недостатка.

→ Для корпоративного высокодинамичного приложения с потребностями SEO можно использовать Next/Nuxt.js для статически визуализируемых приложений на фронте, когда Contentful представляет собой CMS , которая направляет ваш контент на различные платформы (PWA, настольные ПК, веб-сайты, приложение и т. д.).

→ Для интернет-магазина можно использовать производительность статически сгенерированных файлов (Eleventy), добавить систему управления контентом, например DatoCMS или Forestry и подключить простое, но настраиваемое решение для электронной коммерции, такое как Snipcart.

→ Для документации поддержки нового проекта можно использовать сочетание Nuxt и Sanity.

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

Появление таких инструментов, как конструктор сайтов Stackbit, открывает новую эру для JAMstack. Что он делает, так это предоставляет интерфейс для сборки стека внешнего интерфейса без сложных интеграций.

Миграция или рефакторинг существующих проектов в JAMstack

Как раз благодаря современным средам внешнего интерфейса рефакторинг внешнего интерфейса никогда не был более простым и прогрессивным процессом.

Это также верно для бэкэнда. Известно, что многие разработчики, которые раньше работали с WordPress и другими монолитными CMS, прошли сложный путь от неприятия до признания и уже с любопытством смотрят на JAMstack. Тем более, что каждый день появвляются новые инструменты, при помощи которых становится все проще перенести традиционные проекты в более современную инфраструктуру.

Такие SSG, как Jekyll, предлагают простой способ переноса данных CMS благодаря имеющимся импортерам . То же самое можно сказать о безголовых CMS, таких как Contentful и DatoCMS, — они делают процесс перехода от традиционных систем к безголовым очень простым.

Но можно реализовать JAMstack еще проще, используя традиционный CMS в качестве бэкэнд-интерфейса: натяните на него JSON/REST API и используйте выбранные инструменты JAMstack внешнего интерфейса для визуализации статического HTML в браузерах. Получается, что вы легко можете повторно использовать данные, например, из текущего проекта WordPress, и прикреплять их все или выборочно ко новому JAMstack.

И WordPress, и Drupal теперь позволяют вам выполнять настройку headless. Это говорит о том, что даже такие крупные игроки очень серьезно относятся к развитию современного интерфейса.

Например, платформа управления веб-сайтами для разработчиков Pantheon имеет множество ресурсов для разделения традиционной CMS.

Добавленные функции — сторонние сервисы — SaaS

Сайты JAMstack, создаваемые сегодня, более динамические, чем обычные статические . Нынешний экономный API и бурное развитие SaaS предлагают интересный подход à la carte. Другими словами, вы можете из множества внешних сервисов выбрать нужные и использовать по-настоящему модульный стек разработки. Какую бы динамическую информацию вы ни обрабатывали, сегодня с абсолютной уверенностью можно сказать, что для этого вы обязательно найдете и способы, и инструменты:

    • Webtasks и Serverless могут обрабатывать множество внутренних функций.
    • Snipcart, Foxy.io , Moltin и Shopify’s Buy Button могут работать с электронной коммерцией.
    • FormKeep, Typeform , Formspree и даже Netlify — помимо создания, развертывания и размещения вашего проекта — могут обрабатывать отправку форм.
    • Algolia, Google Custom Search, Fuse.js, Lunr.js и List.js могут обрабатывать функции поиска.
    • Disqus и Staticman могут обрабатывать пользовательский контент, такой как комментарии и обзоры.
    • Cloudinary может управлять, оптимизировать и доставлять изображения и видео.
    • Auth0 может обрабатывать аутентификацию и авторизацию для веб-приложений и мобильных приложений.

Список ресурсов JAMstack

Если вы хотите идти в ногу с быстро развивающейся экосистемой JAMstack или даже внести свой вклад, вот несколько ресурсов (не забывайте и о ссылках, имеющихся в статье), за которыми нужно следить:

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 559

Популярные записи