В этой статье мы поделимся некоторыми основными концепциями и рекомендациями по знакомству с миром JAMstack.

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

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

Еще одним преимуществом является большое количество функций, которые традиционно обрабатывались в бэкенде, теперь выполняются в браузере пользователя. А то, что стек основан на JavaScript, — большой плюс для веб-разработчиков.

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

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

Проблемы, с которыми сталкиваются динамические веб-сайты

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

Кроме того, мы находимся на этапе, когда каждый создаваемый веб-сайт использует WordPress (что, возможно, не лучший выбор, но все же нам это нравится ❤️), чтобы привести пример. Это самая популярная CMS, перегруженная надстройками, скриптами и кучей других вещей, которые только тормозят то, что мы разрабатываем. Кроме того, у нас есть проблемы с безопасностью и дорогим хостингом.

Возможно, вам будет интересно прочитать: Как мы изменили дизайн нашего веб-сайта в WordPress

Когда мы не создаем сайт с помощью Jamstack?

Любой проект, основанный на тесной связи между клиентом и сервером, не создается с помощью Jamstack. Это включает в себя:

  • Сайт, разработанный с помощью серверной CMS, такой как WordPress, Drupal, Joomla или Squarespace.
  • Монолитное веб-приложение, созданное сервером на основе Ruby, Node или другого внутреннего языка.
  • Одностраничное приложение, использующее изоморфное представление для создания представлений на сервере во время выполнения.

Зачем начинать думать о статических веб-сайтах

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

Ускоряет время загрузки

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

Безопасно и надежно

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

Интерфейс и CMS отключены

У него нет CMS, которая диктует, как он должен структурировать свой контент и страницы. Отсутствие CMS, связанной с уровнем представления, дает вам возможность создавать все, что вы хотите, во внешнем интерфейсе, используя API для извлечения контента.

Снизить стоимость масштабирования

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

Лучший опыт разработчиков

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

Узнайте о наших услугах Nearshore.

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

Для внешнего интерфейса уже есть несколько статических генераторов, как мы увидим ниже:

  • NextJS: это платформа React для приложений SSR, статически сгенерированных приложений, одностраничных приложений, прогрессивных веб-приложений и настольных приложений.
  • Gatsby:это бесплатная платформа с открытым исходным кодом на основе React, которая помогает разработчикам создавать невероятно быстрые веб-сайты и приложения.
  • "NuxtJS": – это платформа Vue.js для универсальных приложений, статически сгенерированных приложений, одностраничных приложений, прогрессивных веб-приложений и настольных приложений.
  • Hugo: самый быстрый в мире фреймворк для создания веб-сайтов. Это один из самых популярных генераторов статических сайтов с открытым исходным кодом. Благодаря невероятной скорости и гибкости Hugo снова превращает создание веб-сайтов в удовольствие.

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

API, разметка и хостинг

Контент может быть статическим или динамическим HTML, который обслуживается API через Headless CMS, такой как Contentful, DatoCMS или WordPress. После внесения изменений в CMS будет включена новая компиляция вашего сайта, а затем реализована как статические активы.

Ваш сайт JAMStack можно легко и много раз бесплатно разместить в облачных сервисах, таких как Vercel, который полезно дополнить gatsby и next.js (от того же основателя последнего 😉), Netlify является одним из драйверов этого стека, Amazon S3 или даже простой CDN вроде Cloudflare. Подводя итог, это HTML, CSS и Javascript 🥰.

В следующей статье мы углубимся в Gatsby и Next.js, основанные на React. Мы посмотрим, какой из них выбрать в соответствии с вашим приложением и преимуществами каждого из них.

Хотите узнать больше о разработке Clarika? Оставьте нам свой вопрос здесь.

Первоначально опубликовано на https://clarikagroup.com 20 августа 2020 г.