В этом блоге мы рассмотрим Jamstack, современную веб-архитектуру, упрощающую создание сайтов, ориентированных на контент.
В последние годы архитектура клиент-сервер штурмом захватила мир веб-разработки, позволив разработчикам использовать базу данных для хранения контента и клиента для запроса данных с сервера. С развитием React, Angular и Vue такие понятия, как виртуальный DOM, JSX, повторный рендеринг, двусторонняя привязка и другие подобные темы, стали жаргоном для отрасли.
Эти концепции сделали веб-приложения более мощными благодаря множеству технологий и инструментов для интеграции с базами данных и серверами.
И здесь процесс создания веб-приложения стал более сложным, поскольку разработчику нужно было установить и настроить ряд инструментов. Все это требует многих часов разработки, что откладывает запуск продукта.
Наличие набора лучших практик и стандартной архитектуры может упростить процесс, и это привело к появлению современной архитектуры, основанной на собственном мнении, под названием Jamstack.
Фреймворки, такие как Next.js, Gatsby и Hugo, хорошо используют эту архитектуру и также предлагают новые идеи, включая инкрементную регенерацию сайта, поддержку TypeScript, интеллектуальное связывание и предварительную выборку маршрута.
Изучение Jamstack — современной веб-архитектуры
Статические сайты начали набирать популярность в 2015 году из-за Jekyll и других сопутствующих технологий. В том же году Матиас Бильманн и Крис Бах из Netlify придумали термин Jamstack.
Итак, что такое Jamstack?
По словам Матиаса Бильманна (CEO и соучредитель Netlify), Jamstack — это «современная архитектура веб-разработки, основанная на клиентском JavaScript, многократно используемых API и предварительно созданной разметке».
Короче говоря, Jamstack работает с JavaScript, API и разметкой.
Возможно, вы создали несколько веб-сайтов с помощью JavaScript, API и разметки, так что это совсем не ново с точки зрения технологий; вместо этого это новый подход к тому, как мы используем их вместе.
Jamstack отличается от React и Angular тем, что это не фреймворк, а архитектурный подход, который отделяет уровень веб-опыта от данных и бизнес-логики. Это позволяет легко добавлять пользовательскую логику и стороннюю интеграцию с помощью API.
Понимание технических особенностей Jamstack
Давайте заглянем под капот, чтобы понять технологии, лежащие в основе Jamstack:
JavaScript
Это первый элемент в создании веб-сайта Jamstack.
Если вы веб-разработчик, вы, вероятно, знаете, что JavaScript используется для обеспечения динамического поведения и логики веб-сайтов, обеспечивая отличный пользовательский интерфейс. Та же идея справедлива и для Jamstack.
Jamstack разделяет весь контент, предоставляя полную свободу по сравнению с традиционной архитектурой, в которой интерфейсная технология связана с базой данных и сервером.
J в Jamstack означает JavaScript, но вы можете использовать любую среду JavaScript, даже Python или Go.
И в результате Jamstack более гибок с точки зрения интерфейсных технологий, которые вы можете использовать.
API
Распространенным методом соединения клиентов и серверов является интерфейс прикладного программирования (API). Мы можем сделать это через GRPC, GraphQL или даже REST.
Вы можете думать об этом как об удобном канале для передачи запроса клиента и ответа сервера.
Возьмем пример.
Когда пользователь спрашивает о данных книги, сервер отвечает данными JSON, как показано на рисунке выше.
Действия на стороне сервера абстрагируются в многократно используемые API и становятся доступными с помощью JavaScript через HTTPS, во многом так же, как API работают в Jamstack. Для этого вы можете использовать как собственную пользовательскую функцию, так и услуги третьих лиц.
Вот почему серверу больше не нужно выполнять тяжелую работу; все теперь обрабатывается на стороне клиента. И по мере того, как API становятся более доступными, их можно использовать в качестве микросервисов, чтобы легко интегрировать и связывать для предоставления различных функций.
Разметка
Третий элемент Jamstack — разметка.
Запрос содержимого обычно отправляется на сервер пользователем. Сервер следует длинной последовательности, чтобы найти соответствующую информацию, а затем отвечает. Пользователь не должен ждать так долго.
Здесь в игру вступает разметка.
Jamstack использует предварительно созданную разметку вместо того, чтобы полагаться на сервер для создания содержимого для каждого запроса. Давайте копнем немного глубже.
Генераторы статических сайтов принимают данные или информацию в качестве входных данных, оценивают их, а затем генерируют готовый HTML-код. Эти готовые разметки, или HTML-страницы, размещаются на CDN, что позволяет посетителям легко получить желаемый контент.
На выбор доступно более 300 генераторов статических сайтов.
Чем Jamstack отличается от традиционной архитектуры?
До появления HTML, CSS и JavaScript веб-сайты были исключительно статичными; однако после их дебюта разработчики начали создавать динамические веб-страницы, которые затем обслуживались серверами.
По сути, когда пользователю нужна информация, клиент запрашивает у сервера контент, сервер извлекает указанный контент, применяет некоторую логику, а затем доставляет контент.
Но по мере того, как веб-разработка становилась все более сложной, появились некоторые шаблоны комментариев и архитектуры.
И именно оттуда родился термин Jamstack.
Здесь разработчик использует JavaScript или другую среду JavaScript для написания кода, который затем помещается в исходный репозиторий, такой как Git. Оттуда файлы автоматически отправляются в сеть доставки контента (CDN), что дает нам доступ к функциям предварительного рендеринга Jamstack.
CDN можно рассматривать как группу серверов, расположенных по всему миру для быстрой и эффективной загрузки веб-сайтов.
Преимущества джемстака
- Статический сайт
Начнем с того, что Jamstack предназначен не только для создания статических веб-сайтов; вы также можете разрабатывать динамические веб-сайты, но они будут отображаться как статические страницы. Это отличает Jamstack от других сред веб-разработки.
Поскольку статические веб-сайты создаются во время сборки, они быстрее и оптимизированы для SEO.
2. Повышение производительности
Генератор статического сайта получает набор контента или шаблонов в качестве входных данных, а затем предоставляет результат, который по существу представляет собой предварительно созданную разметку, распространяемую в CDN.
В результате, когда пользователь запрашивает информацию, выходные данные в виде страниц из CDN могут быть доставлены мгновенно, что делает процесс проще и быстрее.
CDN распределяет контент веб-сайта по многим группам серверов, поэтому, когда кто-то запрашивает контент, он отправляется с ближайшего сервера, что обеспечивает более быструю связь.
3. Экономичный и экономичный
Веб-сайты и веб-приложения Jamstack не размещаются на исходном сервере; вместо этого они предоставляются напрямую через CDN, что значительно снижает затраты.
Процесс обновления сайта или веб-приложений, как правило, автоматизирован, что значительно упрощает работу.
Даже CDN, такие как Cloudflare, предлагают щедрую бесплатную пробную версию, а Github поддерживает конвейер CI/CD. Это делает Jamstack рентабельным и недорогим.
4. Более безопасный
Традиционные серверные приложения уязвимы для различных атак, поскольку они используют множество API для передачи контента на исходный сервер.
Поскольку CDN содержит только файлы, доступные только для чтения, и не содержит активных подключений, вероятность использования хакером намного ниже.
5. Масштабируемость
У нас нет физического сервера в Jamstack, и даже обновление веб-сайтов в основном автоматизировано, поэтому нам нужно просто обновлять веб-сайт на основе используемого нами стека технологий.
Нет сложной логики, которую можно кэшировать, поскольку веб-страницы сохраняются в CDN, что устраняет необходимость иметь работающий сервер, а автоматическое развертывание позволяет легко масштабировать эти веб-сайты.
Стоит ли рассматривать Jamstack для своего следующего проекта?
Благодаря всем преимуществам Jamstack он может стать идеальным выбором для ваших проектов с большим объемом контента. Поскольку Jamstack можно разрабатывать с использованием ряда технологий, включая фреймворки и API, кривая обучения невелика.
Фактически, если вы знакомы с React и GraphQL, вы можете начать работу с Jamstack. Даже если вы знакомы с некоторыми другими технологиями, вы можете выполнить те же шаги для их внедрения.
Наконец, Jamstack обеспечивает хорошую работу вашего веб-сайта, быструю загрузку, безопасность и масштабируемость.
Двумя известными фреймворками, которые используют Jamstack, являются Gatsby и Next.js. Вы можете генерировать идеальный до пикселя и расширяемый код в обеих этих средах непосредственно из проектов Figma и Adobe XD с помощью плагина Locofy.ai.
Используя плагин, вы можете разбить свой дизайн на компоненты, которые ожидают реквизита, что упрощает подключение CMS по вашему выбору и создание приложения Jamstack.
Надеюсь, вам понравится.
Вот так — спасибо.
Рассмотрите возможность стать участником Medium, если вам нравится читать подобные истории и вы хотите помочь мне как писателю. Это стоит 5 долларов в месяц и дает вам неограниченный доступ к контенту Medium. Я получу небольшую комиссию, если вы зарегистрируетесь по моей ссылке.
Первоначально опубликовано на https://blog.locofy.ai.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
