Будьте статичны: 5 причин попробовать JAMstack в вашем следующем проекте

1. JAMstack & Static Dev
2. 1. SEO
3. 2. Скорость
4. 3. Безопасность
5. 4. Развертывание и рабочий процесс
6. 5. Взрывающееся сообщество
7. Это для меня?

Независимо от того, создаете ли вы блог, настраиваете сайт электронной коммерции или разрабатываете одностраничное приложение на основе JavaScript, дни по умолчанию WordPress для всех, кроме самых простых проектов, прошли. Генераторы статических сайтов и сверхбыстрый дистрибутив на основе CDN обеспечивают работу нового поколения веб-сайтов, и сейчас настало время принять это.

Прежде чем углубиться в объяснение « почему» , давайте быстро посмотрим на что .

JAMstack & Static Dev

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

Реальную мощь разработки JAMstack легче всего понять по сравнению с динамическими веб-сайтами на основе CMS. Легко забыть огромное количество шагов, необходимых для выполнения запроса одной страницы, и сложность операций, которые постоянно выполняются на сервере для генерации окончательного HTML-кода, получаемого браузером пользователя. В качестве нашего (сильно упрощенного) примера мы будем использовать типичный сайт WordPress.

Когда пользователь запрашивает страницу, ваш сервер запрашивает базу данных MySQL и использует интерпретатор PHP, объединенный с данными из активной темы и плагинов, чтобы соединить HTML-документ, который затем может быть передан в браузер пользователя. По сути, эта чрезвычайно сложная операция является шаблонной . Учитывая, что даже скромный блог слишком сложен, чтобы кодировать каждую страницу вручную, этот метод разделения контента на повторно используемые компоненты и автоматизации сборки имеет смысл.

Но почему эта шаблонная операция должна выполняться на сервере? Нужны ли нам базы данных и серверное программное обеспечение (которое открывает десятки дыр в безопасности) только для того, чтобы создать простой блог? В то время, когда сами браузеры стали операционными системами, способными взаимодействовать с бесчисленными API-интерфейсами и запускать сложные приложения на стороне клиента, и когда во внешней разработке преобладает автоматизация на основе JavaScript с использованием npm, разве мы не переросли эту модель?

Генераторы статических сайтов, такие как Jekyll и Hugo, являются частью того, что делает это возможным. По сути, они заменяют PHP как нашу систему шаблонов, но вместо того, чтобы работать на сервере и генерировать контент на лету, они запускаются локально как часть вашего процесса разработки. Ваш HTML генерируется заранее, и ваш веб-сайт - теперь коллекция легко кэшируемых статических файлов - может распространяться среди пользователей по невероятно быстрой CDN (сети распространения контента).

Но их преимущества на этом не заканчиваются.

1. SEO

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

Во-первых, с JAMstack часто проще упростить ваши URL-адреса и архитектуру сайта, чем с динамическим сайтом и полной CMS. Вместо того чтобы полагаться на сложные перезаписи URL на стороне сервера, чтобы сделать ваш контент доступным по привлекательным URL-адресам (example.com/?p=12345 → example.com/nice-and-tidy/), ваши URL-адреса могут быть такими, какими вы хотите, чтобы они были. : они просто отражают расположение файлов вашего сайта.

Потенциал для нежелательного дублирования также значительно уменьшен. Многие CMS автоматически генерируют страницы для категорий, тегов и архивов на основе дат, которые вам могут даже не понадобиться. Обычно такие страницы обрабатываются директивами noindex или канонизируются с использованием дополнительных плагинов. Вместо этого генераторы статического сайта позволяют вам более точно настроить создание страниц и создать любую таксономию, подходящую для вашего контента. Если вам это нужно, многие генераторы включают мощную логику и функции для создания отфильтрованных, разбитых на страницы архивов.

Наконец, существует множество потенциальных преимуществ SEO для сайтов, активно использующих рендеринг на стороне клиента и JavaScript-фреймворки. Учитывая статическую природу вашего исходного кода, процесс предоставления предварительно отредактированных версий вашего HTML-кода ботам становится проще. Некоторые веб-хосты, которые специализируются на статических сайтах, такие как Netlify, даже предлагать предварительную визуализацию используя _escaped_fragment_ из коробки; это буквально одним щелчком мыши установить. Любой, кто интересуется этой областью, также хотел бы прочитать тематическое исследование Фила Хоксворса о изоморфный рендеринг со статическими сайтами ,

2. Скорость

Тесно связана с SEO, но, очевидно, для UX также важна скорость.

Преимущества статических сайтов в скорости могут быть феноменальными. Благодаря заранее сгенерированному HTML и исключению запросов к базе данных ваш контент можно мгновенно обслуживать из глобальной сети CDN, такой как Amazon Cloudfront. Эксперимент Матиаса Билмана для Smashing Magazine обнаружил, что с высоко оптимизированным динамическим веб-сайтом (включая надежную реализацию кэширования) время до первого байта в среднем было в шесть раз быстрее при использовании статической версии, распространяемой через CDN. Smashing Magazine сами будут переход на JAMstack и Netlify с их неизбежным редизайном.

Кэширование также становится намного проще. Используя WordPress (и даже любую динамическую CMS), URL-адреса могут возвращать различное содержимое в зависимости от строк запроса и таких факторов, как то, вошел ли пользователь, запрашивающий страницу, в систему. Изменения в тегах, категориях, комментариях, страницах автора и т. Д. Могут все влияет на актуальность кэшированной версии страницы. На статическом веб-сайте все URL возвращают один и тот же HTML всем пользователям, и обновления могут распространяться по всему миру практически мгновенно. Любой «динамический» контент вместо этого обрабатывается на стороне клиента с использованием JavaScript и API, таких как Disqus для комментариев и FormKeep для форм.

3. Безопасность

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

Поскольку на вашем сервере не работают базы данных, плагины или динамическое программное обеспечение, вероятность внедрения кода и взлома значительно снижается. Когда ваш веб-сайт представляет собой набор статических файлов, все динамические функции обрабатываются с помощью API и клиентского JavaScript, что исключает необходимость полагаться на плагины CMS. Хотя вполне возможно, что внешний API-интерфейс, обрабатывающий постоянные данные, может представлять уязвимость, устранение вашей CMS устраняет многочисленные точки отказа и векторы атак. Что касается статичных блогов, то не сложно сказать, что безопасность, по сути, не является проблемой , по крайней мере, по сравнению с обычной установкой WordPress.

Сертификаты SSL также просты в установке и доступны бесплатно благодаря автоматизированным центрам сертификации, таким как LetsEncrypt ,

4. Развертывание и рабочий процесс

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

Основной принцип разработки JAMstack заключается в том, что все живет в Git-репозитории; все, от компонентов нашего статического сайта, файлов конфигурации генератора, CSS и JS, до нашего письменного контента (сохраненного в виде текстовых документов уценки). С вашим сервисом хостинга / развертывания, настроенным на постоянное зеркалирование соответствующей ветви вашего репозитория, внести изменения можно так же просто, как отправить коммит в GitHub. Весь ваш сайт - код и контент - находится в одном централизованном месте, защищенном надежным контролем версий, и может быть настроен для непрерывного развертывания.

Но как насчет клиентов? Нетехнические пользователи? Специалисты по созданию контента, которые знакомы с редакторами в стиле WordPress, но для кого GitHub и уценка - незнакомая территория?

Эта проблема была признана много лет назад, и многие интересные решения начинают появляться. Некоторые из них удивительно просты. Если ваши редакторы контента знакомы с основы уценки - как, # заголовок, ** полужирный **, * курсив * - тогда нет причин, по которым они не могут редактировать базовый репозиторий. Инструменты как Prose.io Интеграция с GitHub, чтобы обеспечить дружественный пользовательский интерфейс для нетехнических авторов. Создайте ветку для редакторов контента, а затем просто объедините их изменения, чтобы опубликовать новый контент.

Кроме того, есть десятки так называемых «безголовые» решения CMS которые идеально подходят для статических сайтов. По сути, это системы управления контентом, ориентированные на API, которые отделяют ваш контент от внешнего интерфейса вашего сайта. Siteleaf Например, работает с Jekyll и GitHub, чтобы предлагать облачное редактирование с вашими существующими инструментами - как утверждает их сайт, веб-сайты должны быть в состоянии пережить свои CMS .

Как я уже сказал, это быстро развивающаяся область; Вы столкнетесь с проблемами при адаптации к статическому рабочему процессу, особенно для более амбициозных проектов. Любой, кто заинтересован в использовании статических сайтов на коммерческой или крупномасштабной основе, должен проверить Статья Стефана Баумгартнера в Smashing Magazine.

5. Взрывающееся сообщество

Растущая популярность статической разработки сайтов породила несколько невероятных новых сервисов.

Возьмите электронную коммерцию , например. Для небольших ритейлеров - тех, кто обычно полагается на WordPress и WooCommerce, - статический веб-сайт теперь вполне жизнеспособен. Snipcart это основанная на JavaScript система покупок и покупок, которая позволяет разработчикам добавлять функции электронной коммерции на любой веб-сайт. Управление товарными запасами и продажами осуществляется через панель инструментов Snipcart, а ее API-интерфейс позволяет интегрироваться с системами управления запасами, поставщиками услуг доставки и т. Д. Альтернативные решения включают FoxyCart и Shopify кнопка покупки ,

Для блогеров , которые обычно используют предварительно созданную тему для своего сайта, теперь есть сотни вариантов - просто посмотрите Хьюго а также Hexo тематические каталоги. Стоит отметить, что некоторые технические ноу-хау все еще необходимы для того, чтобы начать работу с одним из этих статических генераторов. Они, безусловно, далеки от того, чтобы стать процветающими тематическими площадками сами по себе, но в некотором смысле это хорошо: раздутые темы, наполненные ненужными плагинами и инструментами для создания страниц, здесь не проблема!

Есть также хостинг-провайдеры, специализирующиеся на статических сайтах. Netlify это самый известный и не зря. Они предлагают глобальный CDN, бесплатные настраиваемые домены и сертификаты SSL, а также интеграцию с GitHub, что позволяет выполнять сборку и атомарное развертывание прямо из командной строки. Сервис также имеет мощный интерфейс для обработки вещей, которые обычно обрабатываются на вашем сервере, таких как перенаправления, пользовательские 404, защита паролем, проксирование и т. Д. (Да, это означает, что больше нет htaccess ).

Это для меня?

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

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

Так это для тебя? Если вы отдаленно знакомы с веб-разработкой и еще не пробовали современный генератор статических сайтов, нет лучшего времени, чтобы попробовать и сделать этот вызов для себя. Читайте ресурсы ниже, смотрите Выступление Матиаса Бильмана в Smashing Conf, а затем попробуйте перестроить свой личный сайт с использованием современных статических инструментов разработки, отключить базы данных и получить быстрый CDN.

Вам будет трудно вернуться назад, и возможности растут с каждым днем.

Ресурсы