Краткое резюме:

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

Введение

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

Следовательно, продолжать называть такие сайты, как эти «статические сайты», будет недооценивать функциональность таких сайтов. Отсюда и термин JAMstack.

JAM в JAMstack означает JavaScript, API и разметку. Это шаблон архитектуры, который делает веб-приложения дешевыми и менее сложными в создании, обеспечивая лучшую производительность и масштабируемость.

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

В этом руководстве вы узнаете, что такое JAMstack, почему вам следует использовать JAMstack, а также о преимуществах JAMstack. В конце концов, у вас будет достаточно знаний о JAMstack, чтобы создать корзину покупок с помощью React и NextJS. После этого вы можете приступить к сборке с использованием подхода JAMstack.

В этом руководстве предполагается, что вы знакомы с Javascript и React JS, однако вам не нужно быть ниндзя ни в одном из них, чтобы следовать за ним.

ЧТО ТАКОЕ JAMstack?

По словам Матиаса Бильманна (генерального директора и соучредителя Netlify), он описал JAMstack как современную архитектуру веб-разработки, основанную на клиентском JavaScript, многоразовых API и предварительно созданной разметке.

Исходя из приведенного выше определения, мы могли бы рассматривать JAMstack как подход, который использует J avaScript или любую из его структур, таких как VueJs, Angular, Svelte или React, для создания повторно используемых компонентов, а затем взаимодействует с A ИП в другом, чтобы получать данные из множества различных источников. M arkup показывает, как страницы создаются с помощью генераторов статических сайтов, которые определяют, как должна отображаться каждая страница.

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

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

Кроме того, с JAMstack мы больше не используем монолитные приложения, а вместо этого разрабатываем более мелкие компоненты и развертываем их на глобальном CDN (пограничных серверах). Разработчики могут использовать SSG (генераторы статических сайтов) и улучшать свой сайт с помощью клиентского JavaScript и API-интерфейсов, что означает, что затем можно сосредоточить внимание на разработке, а не на деятельности, связанной с DevOps.

Интересно, что вы, вероятно, использовали JAMstack, даже не осознавая этого.

Базовые слова JAMstack

Я буду часто использовать эти термины в этой статье и подумал, что вы должны знать, что они означают;

  • API - это аббревиатура от Application Programming Interface, которая представляет собой программный посредник, позволяющий двум приложениям взаимодействовать друг с другом.
  • CDN (сеть доставки контента) - это система распределенных серверов (сеть), которые доставляют страницы и другой веб-контент пользователю в зависимости от географического местоположения пользователя, происхождения веб-страницы и сервер доставки контента.
  • Сервер - это компьютер, предназначенный для обработки запросов и доставки данных на другой компьютер через Интернет или локальную сеть.
  • База данных - это набор информации, организованный таким образом, чтобы к ней можно было легко получить доступ, управлять и обновлять.
  • SSG - генераторы статических сайтов (SSG) - это набор инструментов, которые принимают данные, контент и шаблоны, обрабатывают их и выводят папку, полную всех полученных страниц и ресурсов. Примеры текущие тенденции SSG включают;
  • Gatsby: Gatsby - это бесплатная платформа с открытым исходным кодом на основе React, которая помогает разработчикам создавать невероятно быстрые веб-сайты и приложения.
  • NuxtJS: NuxtJS - это платформа Vue.js для универсальных приложений, статически сгенерированных приложений, одностраничных приложений, прогрессивных веб-приложений и настольных приложений.
  • Hugo: Hugo - это самая быстрая в мире платформа для создания веб-сайтов. Это один из самых популярных генераторов статических сайтов с открытым исходным кодом. Благодаря своей удивительной скорости и гибкости, Hugo снова делает создание веб-сайтов увлекательным.
  • Gridsome: Gridsome - это фреймворк JAMstack для VueJs. Gridsome использует мощь молниеносной генерации статических сайтов, JavaScript и API для создания потрясающих современных веб-интерфейсов.
  • VuePress: VuePress - это минималистичный генератор статических сайтов на базе Vue. VuePress работает на Vue, Vue Router и Webpack.
  • Jekyll: Jekyll - это механизм синтаксического анализа, объединенный в виде рубинового драгоценного камня, который используется для создания статических веб-сайтов из динамических компонентов, таких как шаблоны, частичные файлы, жидкий код, уценка.
  • NextJS: Next.js - это фреймворк React, созданный Vercel (ранее Zeit). Next.js позволяет с легкостью создавать рендеринг на стороне сервера и статические веб-приложения с помощью React.

Как работает JAMstack

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

У каждой реализации JAMstack есть несколько отличительных черт, которые работают вместе:

  • Компоненты. Компонент можно рассматривать как конструктор Lego. Компоненты - это строительные блоки фреймворков JAMstack. Это многоразовые элементы пользовательского интерфейса, которые можно создавать, что интересно, вы можете использовать любую структуру JavaScript по вашему выбору, например VueJS, Angular, Svelte или React, как в нашем случае в этом руководстве.
  • Макеты. Если бы компоненты были химическими элементами, макеты были бы молекулами. Имеет смысл, да? Макеты - это компоновка компонентов, которые действуют как шаблон для данных, которые будут извлечены через API.
  • Страницы. Существуют отдельные макеты, которые нельзя использовать повторно. Подумайте о домашней странице или странице контактов. Они по-прежнему построены из компонентов.
  • Плагины: расширения для базовой платформы, плагины позволяют добавлять функциональные возможности на ваш сайт, не увеличивая при этом основную структуру. Некоторые фреймворки рассматривают плагины тем.
  • Конфигурация: у каждой платформы будет какой-то файл конфигурации. Этот файл будет содержать высокоуровневую информацию, такую ​​как имя сайта, ключи API и настройки для плагинов.

Рабочий процесс JAMstack выглядит следующим образом;

  • Сборка и размещение статических файлов разделены (развязаны).
  • Файлы обычно компилируются и отправляются в браузер из CDN.
  • Обновления или изменения в статических файлах проталкиваются через Git, поэтому файлы перестраиваются через SSG.

ПОЧЕМУ JAMstack?

Возможно, вы разработчик стеков LAMP, MEAN, MERN или MEVN и задаетесь вопросом, зачем вам нужен другой стек. Что ж, у меня есть несколько причин, по которым вам следует использовать JAMstack:

  • Пониженная сложность: мало или совсем нет сложных процедур, задействованных при создании приложений JAMstack, потому что вам нужно беспокоиться только о создании статических сайтов, а не о DevOps или управлении внутренней инфраструктурой.
  • Повышение производительности: создание с помощью JAMstack помогает создавать страницы во время развертывания, поскольку они в основном хранятся в виде разметки и могут быть доставлены через CDN.
  • Высокий уровень безопасности. Статические веб-сайты имеют очень низкий потенциал уязвимостей, поскольку они состоят из файлов HTML и внешнего API-интерфейса, обслуживаемого через CDN. Это снижает любой возможный риск атаки на веб-сайт. Сертификат SSL легко интегрировать с Let's Encrypt. Кроме того, он использует API-интерфейсы микросервисов на стороне сервера для защиты веб-сайтов.
  • Дешевое и быстрое развертывание: веб-сайты JAMstack можно легко развернуть, не беспокоясь о настройке и защите базы данных. Мы имеем дело только со статическими файлами, которые легко установить и запустить.
  • Превосходный опыт разработчика. Одно из самых важных преимуществ использования JAMstack - это несложность обучения. Используя только HTML, CSS и Javascript, разработчики могут создавать сложные веб-сайты. Использование генераторов сайтов устраняет необходимость поддерживать отдельный стек для контента и маркетинга.
  • Отличное сообщество: сообщество JAMstack со временем растет. Каждый день появляется новая поддержка различных функций. Еще более увлекательными являются создаваемые встречи местных сообществ. Интернет-сообщество тоже потрясающее.

JAMstack с Headless CMS

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

Вот список Headless CMS, которые вы, возможно, захотите рассмотреть, когда решите использовать его в своем следующем приложении JAMstack;

Строим нашу корзину.

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

При создании нашего приложения мы воспользуемся мощью JAMstack с Agility CMS (HeadlessCMS) для создания элементов (данных) наших продуктов. Мы также могли бы использовать NextJS в качестве генератора статических сайтов.

Почему AgilityCMS?

AgilityCMS - одна из немногих CMS без головы, ориентированных на JAMstack, со встроенным управлением страницами. Быстрее создавать, управлять и развертывать. Agility CMS - это Content-First Headless CMS, позволяющая выбрать любой язык программирования, а также получить гибкость, скорость и мощность, обеспечиваемые облегченными API-интерфейсами. Agility CMS легко настраивается с такими SSG, как Gatsby и NextJS.

Подход JAMstack в Agility CMS и его бесшовная установка с NextJS - вот почему он считается лучшим для этого руководства.

Начиная

Чтобы начать работу с AgilityCMS, выполните следующие действия.

  • Создайте аккаунт на AGILITYCMS. Вы можете использовать бесплатный уровень.

  • Процесс регистрации состоит из двух простых шагов.
  • Создайте свои данные
  • Следующим шагом будет создание деталей проекта.

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

Далее мы собираемся быстро создать наши данные.

При создании данных в AgilityCMS необходимо учитывать несколько шагов.

  • Шаг 1 - Создание нашей схемы (Свойства полей).

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

Обратите внимание, что все свойства поля установлены как обязательные.

  • Шаг 2 - Создание наших фактических данных.

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

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

Это шаг, которого вы ждали. После создания нашего общего содержимого (корзины) мы нажимаем НОВЫЙ значок, чтобы создать наши фактические данные.

Просто не правда ли?

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

Использование Next.Js в качестве генератора статических сайтов

Next.js - это фреймворк React, созданный Vercel (ранее Zeit), и согласно nextjs.org

С Next.js вы можете создавать рендеринг на стороне сервера и статические веб-приложения с помощью React.

Вот еще несколько интересных функций, которые предлагает Next.js:

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

С учетом сказанного давайте перейдем к созданию нашего статического сайта.

Для начала клонируйте репо, убедитесь, что это стартовая ветвь, которая клонирована.

Начиная

  • Используя свой терминал, перейдите в каталог клонированного репо и запустите команду в терминале npm install, чтобы получить все зависимости.
  • Выполните команду npm run dev, чтобы запустить приложение.

Приложение откроется по адресу http: // localhost: 3000 /.

Если все работает хорошо, ваше приложение должно выглядеть так

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

Получение продуктов через API

Чтобы наши продукты отображались, нам нужно получить продукты через API из Agility CMS.

На странице «Приступая к работе» вы можете получить или просмотреть значения для своего экземпляра GUID и URL-адресов API, нажав кнопку Ключи API. Вы можете нажать Показать ключи API, чтобы увидеть эти значения.

Теперь, когда у нас есть ключ API, давайте использовать его в наших проектах.

В index.js внутри папки страниц добавьте следующие выделенные коды.

Next.js использует getInitialProps для асинхронной выборки данных с сервера, который затем заполняет реквизиты.

Понимание переменной URL

Переменная URL состоит из нескольких вещей, которые стоит обсудить, прежде чем продолжить;

https://{guid}-api.agilitycms.cloud/{apitype}/{lang}/{requestType}/{requestParams}

  • guid - ваш уникальный идентификатор для вашего экземпляра.
  • Тип API - «предварительный просмотр» или «выборка».
  • lang - код языка для запрашиваемого содержания.
  • requestType - представляет конкретный тип запроса, который вы хотите сделать (например, «элемент», «список», «страница», «карта сайта / плоский» или «карта сайта / вложенный»), тип нашего запроса. это список.
  • requestParams - параметры, относящиеся к этому типу запроса, обычно это идентификатор типа контента, который вы хотите получить. Обычно это название вашего общего содержания, в моем случае это список товаров, возможно, ваше общее содержание может быть другим.

В приведенном выше коде мы получили список продуктов из API и установили его в свойствах продукта. Затем мы заполняем наш список продуктов, передавая его компоненту Product в качестве свойств.

Затем давайте перейдем в папку с нашими компонентами и добавим в Products.js следующие выделенные коды.

Мы просто сопоставили наши продукты, вернули компоненты продукта и передали продукт как опору.

Наконец, давайте покажем наши товары. Внутри Product.js в нашей папке компонентов добавьте выделенные коды.

В нашем коде мы передали элементы продукта для отображения компоненту продукта.

Товары включают изображение, название и цену.

Давайте теперь посмотрим на наш отображаемый продукт.

Функциональность корзины

Теперь, когда у нас есть элементы нашего продукта, отображаемые с помощью нашего API, давайте создадим функциональность, которая позволяет добавить элемент в корзину. Мы бы использовали React Context API и LocalStorage, чтобы оставаться в корзине в нашем браузере.

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

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

Внутри папки страниц создайте файл _app.js и вставьте в него приведенные ниже коды.

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

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

Вместе с поставщиком контекста мы отправили одно значение (корзину) для хранения элементов корзины.

Мы также передали один метод (addToCart), позволяющий добавлять в корзину.

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

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

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

Мы создали компонент contextCart и создали экземпляр createContext (), а затем экспортировали его.

Наконец, мы должны создать файл cart.js в папке наших страниц.

Этот компонент отображает только элементы корзины.

Скопируйте в файл следующие коды.

Строки кода в значительной степени объясняют, мы деструктурировали корзину как свойства из cartContext, чтобы получить длину каждой отдельной корзины, мы использовали функцию .length, доступную нам через Javascript. Наконец, давайте посмотрим на результат работы приложения.

Дополнительное репо для этого проекта можно найти здесь.

Вывод

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

Хотя мы использовали Next.js в качестве нашего генератора статических сайтов и Agility CMS (для создания наших данных), вы можете использовать любую другую SSG или Headless CMS, которая лучше всего подходит для вас.

Мы только коснулись поверхности, вы можете улучшить это приложение, рассчитав общую стоимость товаров или добавив функцию оформления заказа с помощью Stripe или Paypal.

Добро пожаловать в мир JAMstackers.

Пожалуйста, поделитесь своими отзывами и опытом работы с JAMstack в разделе комментариев ниже, мы также можем обсудить ваш прогресс в twitter. Cheer’s ✌✌

использованная литература