Jamstack — это популярная философия веб-разработки, цель которой — ускорить как веб-разработку, так и время, необходимое для загрузки веб-страницы. Опираясь на DevOps и CI/CD, Jamstack переворачивает устоявшиеся методы создания интерактивных веб-страниц, перенося выполнение кода во время загрузки с веб-серверов на встроенный в браузер JavaScript и внешние сервисы, доступные через API. Конечным результатом является удобный для разработчиков подход к созданию статических веб-сайтов, которые отображаются очень быстро и могут быть легко настроены для нескольких платформ.
Архитектура Jamstack
Jamstack — это архитектура веб-приложений, основанная на трех столпах, которые обозначают инициалы в ее названии: JavaScript, APIи наценка. Веб-страницы на сайте Jamstack состоят из стандартного языка разметки, поэтому их можно создавать и тестировать где угодно, без зависимости от серверов приложений или серверных технологий, таких как Node.js. Любая интерактивная функциональность обеспечивается стандартным кодом JavaScript, который выполняется в браузере и выполняет вызовы API-интерфейсов многократного использования через HTTPS. Эти вызовы используются для доступа к внешним данным или любым другим функциям, которые не могут быть встроены в саму веб-страницу.
Чтобы понять, почему Jamstack является революционным, рассмотрим стек LAMP, который иллюстрирует то, как большинство разработчиков думали о веб-разработке за последние 15 лет. ЛАМПА означает Линукс (операционная система, на которой работает большинство веб-серверов), Апач (серверное программное обеспечение, работающее на этих машинах с Linux), MySQL (база данных, в которой хранятся данные веб-приложения) и PHP/Perl/Питон (язык, используемый для написания серверного кода). Когда вы указываете в браузере на веб-сайт на базе LAMP, веб-сервер выполняет серверный код, который генерирует веб-страницу «на лету», извлекая данные по мере необходимости из базы данных MySQL.
Архитектура LAMP позволяет разработчикам создавать динамические и интерактивные веб-сайты, но для нее также требуется мощный веб-сервер — и чем больше трафика получает сайт, тем больше вычислительной мощности на стороне сервера ему требуется. Даже при наличии полнофункционального сервера создание и загрузка динамических веб-страниц может занять много времени. В мире людей с ограниченным вниманием, которые часто просматривают Интернет на своих телефонах, эта задержка стала серьезной проблемой.
Jamstack родился как часть движения статических веб-сайтов, которое возникло в середине 2010-х годов как реакция на традиционную модель того, как веб-сайт должен работать. Чтобы понять Jamstack, вам необходимо понять технологию, лежащую в основе статических веб-сайтов.
Статические сайты и Jamstack
Если бы вам пришлось объяснять новичку, как работает Интернет, это могло бы звучать примерно так: Где-то в файловой системе веб-сервера есть HTML-файлы, доступные по HTTP-адресам, которые веб-браузер загружает, а затем интерпретирует для создания веб-страницы. . Но это описание статический сайт: предполагается, что файлы HTML уже существуют, когда веб-браузер ищет их. Но в течение последнего десятилетия в большей части Интернета доминировали динамические веб-сайтыкоторые генерируют HTML-файлы на лету в ответ на веб-запросы, часто на основе параметров, передаваемых на веб-сервер через формы или в самом URL-адресе.
Генераторы статических сайтов
На заре Интернета, когда веб-страницы были неизменно статичными, многие веб-разработчики писали HTML-код вручную. По мере того как веб-страницы становились все более сложными, появились такие инструменты, как Dreamweaver от Macromedia, которые начали программно генерировать статические HTML-страницы. По мере развития движения статических веб-сайтов начала появляться новая волна генераторов статических сайтов, включая Гэтсби, Хьюго и Джекилла. В отличие от инструментов WYSIWYG, таких как Dreamweaver, генераторы статических сайтов управляются из командной строки и предназначены для хорошей интеграции с процессами CI/CD. HTML-файлы генерируются этими инструментами, часто на основе контента, написанного в Markdown, и автоматически загружаются в репозиторий контроля версий, например GitHub. Поскольку эти файлы помечены как готовые к производству, статические страницы на действующем веб-сайте автоматически обновляются.
Сети доставки контента
Важно иметь в виду, что статический в этом контексте не подразумевает простые неинтерактивные страницы Web 1.0. Эти страницы могут включать расширенный JavaScript, который выполняется в браузере и выполняет вызовы API к базам данных, серверным функциям или размещенным бессерверным функциям. Но поскольку ни одно из этих действий не выполняется на веб-сервере, статическому сайту не требуется промышленный веб-хостинг с базой данных. Многие статические сайты развертываются на сети доставки контентаили CDN, где контент зеркалируется на нескольких серверах по всему миру для быстрой доставки пользователям в любой точке мира.
Матье Дионн, руководитель отдела маркетинга Snipcart, описывает первые дни этого нового мира статических веб-сайтов в своем блоге и упоминает, что примерно в 2015 году «основатели Netlify… только что придумали термин «Jamstack», чтобы обойти его». негативный смысл слова «статическая сеть».
В этом разделе мы описали процесс Jamstack. Теперь давайте кратко обсудим Netlify и его роль в экосистеме Jamstack.
Netlify и Jamstack
Netlify — компания, занимающаяся облачными вычислениями и веб-хостингом, а ее соучредитель Матиас Бильманн придумал термин Jamstack. Услуги Netlify ориентированы на клиентов, которые хотят создавать сайты на основе философии Jamstack.
Netlify утверждает, что решила конкретную проблему, которая сдерживала статические веб-сайты, а именно: аннулирование кэша. Динамические веб-сайты, управляемые базой данных, могут потреблять много ресурсов сервера, но вы можете быть уверены, что они предоставят последнюю версию вашего веб-сайта любому посетителю, который зайдет. Поскольку веб-сайты Jamstack часто размещаются на нескольких распределенных серверах CDN, обновления не так просты. Каждому серверу CDN может потребоваться от нескольких минут до часов, чтобы выяснить, что его кэшированная версия сайта больше не действительна. Чтобы обойти эту проблему, CDN Netlify обеспечивает мгновенную аннулирование кэша для файлов HTML.
За годы, прошедшие с тех пор, как Netlify поднял флаг Jamstack, компания использовала эту технологию в качестве основы своего предложения PaaS, предоставляя платформу контента для таких крупных компаний, как Nike и Peleton.
Джемстэк с Гэтсби
Netlify — не единственный хостинг-провайдер в пространстве Jamstack, и у него нет каких-либо прав на товарный знак или права собственности на этот термин. Доступны различные решения для хостинга и развертывания Jamstack, и к ним присоединяются большинство крупных облачных провайдеров, включая Amazon Web Services, Google Firebase и Microsoft Azure. В это пространство вошли и другие, более специализированные компании, в том числе Gatsby, Inc., создатель одноименного генератора статических сайтов.
Gatsby (компания) создала высококлассное предложение услуг на основе генератора сайтов Gatsby. Поскольку генератор сайтов Gatsby имеет открытый исходный код, его также предлагают другие поставщики услуг, включая Netlify.
Безголовая CMS
Конечно, создание и размещение веб-сайта — это только начало, как вы знаете, если вам когда-либо приходилось управлять веб-сайтом. Вам также нужен способ создавать новый контент и добавлять его на свой сайт. Поскольку люди, которые этим занимаются, обычно не являются программистами, им понадобится удобный инструмент, а именно: система управления контентомили CMS. Традиционные CMS, такие как WordPress, предлагают внутренний пользовательский интерфейс (UI), в котором вы можете вводить контент веб-сайта, управлять базой данных, в которой хранится этот контент, и создавать динамические веб-страницы, которые представляют этот контент в ответ на запросы браузера.
CMS для сайтов Jamstack работают по-разному, и их обычно называют Обезглавленный. Безголовая CMS предлагает пользовательский интерфейс для ввода и управления контентом, а также базу данных или другие средства его хранения, но сама не генерирует HTML-код для анализа браузером. Вместо этого статические HTML-страницы веб-сайта используют JavaScript для вызовов API CMS, а CMS возвращает контент в формате, который JavaScript может преобразовать в веб-страницу.
Эта система тщательно отделяет контент от представления, что, конечно же, является давним идеалом программирования. Поскольку CMS имеет доступный API, его можно легко использовать на нескольких веб-страницах. Например, если вы создали отдельные версии своего веб-сайта для мобильных устройств, компьютеров и смарт-часов, все эти версии смогут получить доступ к одному и тому же контенту, хранящемуся в CMS.
У Netlify, как и следовало ожидать, есть собственное предложение в этой области, которое называется NetlifyCMS, но есть и другие предложения; разработчик Небойша Радакович разбирает их в своем введении в «безголовые» CMS. В этом списке много новичков, а также одно очень знакомое имя. Хотя мы использовали WordPress в качестве примера традиционной CMS, его также можно запускать как автономную CMS для поддержки сайта Jamstack.
Зачем использовать Jamstack?
Мы коснулись многих преимуществ использования Jamstack, но теперь, когда у вас есть полная картина, стоит их повторить:
- Скорость: Статические сайты загружаются быстрее — и это не только вопрос удобства. Google наказывает медленные сайты, снижая их рейтинг в поиске, а клиенты, привыкшие к быстрым ответам, часто отказываются от транзакций электронной торговли, если шаги загружаются медленно.
- Опыт разработчика: Разработчики могут создавать статические сайты, используя методы DevOps, которые изменили практику и производительность отрасли. А философия Jamstack создает стеки сайтов, которые четко разделяют задачи, позволяя разработчикам сосредоточиться на своих областях специализации: дизайнеры и разработчики внешнего интерфейса могут создавать сайты без необходимости свободно владеть серверным языком, в то время как разработчики серверной части могут сосредоточиться по API. Вопросы по содержанию полностью решаются в рамках CMS.
- Гибкость: Статические сайты могут размещаться на традиционных веб-серверах, CDN, специализированных сервисах или их комбинации. А поскольку автономные CMS взаимодействуют с внешними интерфейсами через API, вы можете легко создавать сайты для нескольких платформ, использующих один и тот же контент.
Когда не следует использовать Jamstack
Несмотря на все эти преимущества, следует сказать, что Jamstack не для всех. Обратная сторона того, что Jamstack адаптирован к потребностям разработчиков, заключается в том, что если вы хотите запустить сайт на основе Jamstack, вы будете больше зависеть от разработчиков, чем вам хотелось бы. Это не так уж плохо для компаний, которые уже имеют или готовы нанять специальную команду веб-разработчиков с навыками, необходимыми для Jamstack. Но многие небольшие магазины привыкли использовать готовое коммерческое программное обеспечение или программное обеспечение с открытым исходным кодом, которое позволяет им управлять своими веб-сайтами без необходимости ежедневного участия разработчиков. В частности, сайты электронной коммерции, как правило, полагаются на широкий спектр плагинов и библиотек, разработанных на протяжении многих лет для традиционных решений веб-хостинга; их эквиваленты Jamstack не так широко распространены и развиты, а это означает, что Jamstack не всегда хорош для электронной коммерции.
Популярен ли Jamstack?
Несмотря на шумиху вокруг него, Jamstack в настоящее время поддерживает довольно небольшую часть всех веб-сайтов. По оценкам Web Almanac, в 2021 году сайты, созданные с помощью генераторов статических сайтов (почти все из которых были бы созданы в соответствии с философией Jamstack), составляли лишь около 1 процента всех веб-сайтов. Тем не менее, Jamstack переживает период быстрого роста: ее рыночная доля увеличивается более чем в два раза каждый год в течение последних трех лет. Один из важных признаков растущего интереса разработчиков к этой технологии: около трети разработчиков Jamstack являются новичками на сцене и имеют опыт работы менее двух лет.
Учебники по Jamstack
Хотите пойти глубже? Ознакомьтесь с этими руководствами для разработчиков Jamstack:
- Hasura, компания, специализирующаяся на системе API GraphQL, используемой Gatsby и другими платформами Jamstack, предлагает хорошее руководство высокого уровня, которое шаг за шагом проведет вас через архитектурные соображения и варианты выбора, которые входят в сайт Jamstack.
- Веб-хостинг Digital Ocean предлагает хорошее руководство по созданию сайта-портфолио Jamstack с использованием Angular и Scully.
- Netlify предлагает видеоруководство, которое охватывает множество вопросов: от основ до более сложных тем, а также включает введение в создание сайта Jamstack, управляемого базой данных.
Освоив основные концепции, изложенные здесь, вы будете готовы использовать принципы и технологии Jamstack для своих веб-сайтов. Приятного обучения!
