Новичок в JAMstack? Все, что нужно знать, чтобы начать

Когда мы впервые написали этот пост, экосистема JAMstack все еще находилась в зачаточном состоянии.

Это было +/- 4 года назад.

Я помню, как разговаривал с основателями Netlify тогда. Они только что придумали термин «JAMstack», чтобы не называть это «статической сетью», и спрашивали, не поможем ли мы это продвинуть.

«Да, конечно», - ответил я размыто…

Братцы, мы сегодня благодарны, что воочию увидели рост этого ныне живого сообщества.

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

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

Я расскажу:

1. Что такое JAMstack?
2. Как начать с этим
3. Как продать JAMstack клиентам
4. Каковы лучшие ресурсы, чтобы оставаться в курсе

Готов к Джему?

1. Что такое JAMstack?

1.1 Определения

Давайте быстро избавимся от основных определений. JAMstack - это не определенный набор инструментов, а новый современный способ создания веб-сайтов и приложений. Вы можете спросить, откуда берется «JAM»? Из этих трех концепций, лежащих в основе этой парадигмы:

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

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

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

Отлично. Но что все это означает на практике?

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

Но это было 4+ года назад.

С тех пор бесчисленные разработчики почувствовали боль от работы с CMS.

Нам стало известно, что традиционные CMS (WordPress, Drupal) просто пытаются сделать… слишком много . Мы поняли, насколько они громоздки. Как чрезмерно самоуверенны. Эти дружественные админки стали менее дружелюбными.

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

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

Для новичков в этой концепции, вот лучшие практики https://vimeo.com/163522126?cjevent=739c2bd5136411e983c200840a240610, определяющие проект JAMstack:

1. Весь сайт / приложение на CDN
2. Атомные развертывания
3. Мгновенная аннулирование кэша
4. Все живет в Git
5. Автоматизированные сборки

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

1.2 Хронология

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

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

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

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

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

→ 2019 : Трудно сказать, что ждет нас в будущем, но это, без сомнения, будет захватывающим. 2019 год вступает в силу как год зрелости и доступности. Bud Parr привел отличные идеи в своем новогоднем обращении:

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

И это все к лучшему.

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

Вот краткий пример понимания ключевых различий между двумя подходами:

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

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

→ Строительство и хостинг связаны.

→ Пользователь запрашивает страницу. Файл обрабатывается и обрабатывается после (длинной) серии взаимодействия между базой данных, внутренним кодом, сервером, браузером и уровнями кэширования.

→ Обновления ядра отправляются на рабочие серверы, часто через FTP. База данных должна поддерживаться или обновляться.

→ Обновления контента проталкиваются через традиционные CMS, такие как WordPress или Drupal.

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

→ Строительство и хостинг развязаны .

→ Пользователь запрашивает страницу. Файл уже скомпилирован и напрямую передается в браузер из CDN.

→ Основные обновления проталкиваются через Git; сайт полностью перестраивается с помощью современных инструментов сборки, таких как статические генераторы сайтов.

→ Обновления содержимого проталкиваются через Git или CMS статического сайта.

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

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

Как так?

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

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

2. Начало работы с JAMstack

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

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

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

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

Начинать с нуля - лучший способ создать «чистый» JAMstack. Таким образом, вы действительно можете выбрать все необходимые части, чтобы создать то, что вы хотите. Как я объяснил ранее, строительство и хостинг отделены. Первое, что вы хотите решить, это то, что использовать для создания вашего сайта / приложения .

Современная внешняя экосистема может осложнить вашу жизнь. Не из-за отсутствия соответствующих инструментов. На самом деле, это как раз наоборот! Есть сотни возможностей, даже если некоторые явно выделяются.

JavaScript фронтэнд фреймворки:

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

В 2019 году начните работу с фреймворков Святой Троицы JavaScript: React , Vue & Angular .

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

Генераторы статических сайтов

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

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

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

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

Безголовая CMS для внутренних функций (Content Management System)

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

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

Вот кое- что, что должно помочь вам пройти этот квест.

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

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

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

→ Если вы только создаете небольшой блог для себя , почему бы не использовать Hugo для создания сайта, развернуть его на Netlify и использовать формы Netlify / Staticman для комментариев .

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

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

Весь этот процесс обеспечивает большую гибкость и обновленное чувство удовольствия для опытных разработчиков. Должен признать, что довольно сложно продать новичкам. Простота принятия - это то, чего сообщество JAMstack стремилось достичь уже долгое время. Тем не менее, я упомянул 2019 год как год доступности раньше, помните? Я тут не втираю вам какую-то дичь.

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

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

Рефакторинг внешнего интерфейса никогда не был более простым и прогрессивным процессом благодаря современным средам внешнего интерфейса. Мы прошли через это, итеративно перенося нашу старую архитектуру Backbone на Vue.js. И мы любили каждую часть этой операции.

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

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

Но что, если бы вы могли сделать это еще проще:

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

И WordPress, и Drupal теперь позволяют вам выполнять настройку без головы. Похоже, что даже крупные игроки очень серьезно относятся к развитию современного интерфейса. Но поверьте мне … это всего лишь вопрос времени, прежде чем более монолитная CMS последует их примеру.

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

2.3 Добавленные функциональные возможности / сторонние сервисы / SaaS

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

Какую бы динамическую информацию вам ни пришлось обработать, вероятно, есть кое-что для этого:

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

И этот список можно продолжать и продолжать.

3. Давая клиентам почувствовать джем

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

Конечно, вы получите энергичные кивки от разработчиков, когда упомянете, как JAMstack устраняет необходимость в сложном динамическом кэшировании. Но что насчет клиентов? Это не то, как ты будешь возбуждать их..

Потому что это не их жаргон.

Итак, как вы можете заставить клиентов понять преимущества перехода на установку JAMstack?

3.1 Превращение технических характеристик в бизнес-преимущества

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

Давайте возьмем удаление запросов к базе данных и, например, обслуживание контента на основе CDN. Мы можем свести это к производительности. Как это может иметь значение для клиента?

Во-первых, вы можете открыть приложение для тестирования скорости сайта, такое как Pingdom или PageSpeed ​​Insights, и открыть два очень похожих сайта (или один и тот же) - один статический, один динамический. Вы должны убедиться, что клиент видит разницу в результатах. Затем вы можете объяснить клиенту, насколько важным стало время загрузки страницы для привлечения пользователей и SEO . Далее следует простая ассоциация:

Теперь о выводе серверных частей, что воплощает аргумент надежности. Вы могли бы объяснить, что динамический сайт похож на шестиэтажный карточный домик, более уязвимый для коллапса, потому что он имеет больше частей, более сложную структуру. Статический сайт, с другой стороны? Это как 1-этажный карточный домик.

Супер легко построить и поддерживать. :)

И последнее, но не менее важное: вы можете перевести сокращенные эксплуатационные расходы и затраты на разработку в существенную экономию:

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

Трудно с этим поспорить.

3.2 Опровержение общих возражений

JAMstack еще не пуленепробиваемый. Обсуждая переход к нему, более технически подкованные клиенты или разработчики могут поднять некоторые (более или менее) законные проблемы. Вот два возражения, которые мы часто видели в онлайн-темах, которые все еще могли обсуждаться:

1) Настройка JAMstack - это хорошо, но мне нужно обрабатывать динамические функции на моем сайте.

Я повторю это в последний раз: сайты JAMstack, созданные сегодня, больше не являются статичными. Они гипер-динамические. Что касается предполагаемого отсутствия серверных функций, вам следует обратиться к разделу о дополнительных функциях и сторонних API.

2) Статические CMS - это круто и все, но мне также нужно управлять правами пользователей и ролями редактора.

Помните части о безголовых и отделенных традиционных CMS? Ну, вот ваш ответ на эти проблемы.

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

4. Кураторский список ресурсов

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

• The New Dynamic
• Радио JAMstack
• Блог Netlify
• Alligator.io
• JAMstack.org
• StaticGen - полный список доступных SSG
• HeadlessCMS- полный список доступных безголовых CMS

… И наш блог , очевидно! Убедитесь, что ничего не пропустили, подписавшись на нашу рассылку .

За эти годы мы также представили несколько наших собственных статей в репозиторий Github с потрясающим джемстаком, который также является отличным центром сообщества. О, наконец, вы должны подписаться на #jamstack в Twitter! Внесите свой вклад в JAMstack!

Есть много способов внести свой вклад в эту веб-революцию:

• Внесите свой вклад в открытые репозитории, которые вы любите или хотите изучать. Есть десятки SSG, безголовых CMS и сторонних сервисов, ожидающих разработчиков, готовых помочь.
• Создайте личный или сторонний проект с JAMstack.
• Напишите статью или создайте видеоролик, показывающий, как вы использовали проект JAMstack для XYZ. Такие платформы, как dev.to или DailyJS, позволяют разработчикам делиться полезным контентом.
• Поддерживайте любимых игроков индустрии, делясь их контентом или используя их продукты.
• Попробуйте продать JAMstack для вашего следующего клиентского проекта!

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

Скоро у нас будет контент, посвященный вопросу «Как внести свой вклад в JAMstack?», Так что следите за обновлениями!

Не стесняйтесь начинать разговор прямо здесь, в комментариях. Как вы думаете, JAMstack теперь пришел к зрелости? Если так, что вы планируете достичь с этим? Если нет, что, по вашему мнению, все еще отсутствует в его экосистеме?

Мы очень надеемся, что сообщество продолжит расти в 2019 году и что сила JAMstack побеждает последних скептиков!

© Перевод статьи https://snipcart.com/blog/jamstack