В этой статье мы поделимся некоторыми основными концепциями и рекомендациями по знакомству с миром 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 г.