Изготовление сайтов в Москве, МСК. Введение в Jamstack: создавайте безопасные и высокопроизводительные сайты

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

Когда-то динамические сайты взорвались стеком LAMP. Затем стек MEAN стал основой для следующего поколения веб-приложений. Теперь, когда API и повторно используемые компоненты находятся на подъеме, статические сайты снова в моде. Это своего рода «возвращение к истокам», но не совсем.

Что такое джемстэк?

Логотип Jamstack

Предоставлено: Netlify

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

Разделим термин:

J означает JavaScript. JS прошел долгий путь с тех пор, как был представлен Netscape в 1995 году. С реактивными и прогрессивными библиотеками вы можете создавать веб-приложения, которые ведут себя почти так же, как мобильные.

A означает API. Вам не нужно программировать каждую функциональность самостоятельно, но вы можете положиться на стороннюю обработку для огромного количества задач.

M означает разметку. Вы можете повторно использовать уже разработанные компоненты или создавать новые, которые намного проще поддерживать.

Разве это не просто кайф?

В некотором смысле, да. Термин Jamstack, первоначально стилизованный под JAMstack, был придуман компанией Netlify как способ продвижения своей «универсальной платформы для автоматизации современных веб-проектов». Принципы, лежащие в основе Jamstack, на самом деле не новы, поскольку веб-компоненты и API существуют уже довольно давно.

Но точно так же термин Ajax (асинхронный JavaScript и XML) был придуман в свое время другой компанией — Adaptive Path — и хотя API XMLHttpRequest (XHR), который сделал возможным Ajax, также существовал некоторое время, оба Ajax и JAMstack были обновленной версией идей с законным использованием, которые были быстро приняты сообществом. Ажиотаж заслуженный: такой способ работы стал откровением для многих разработчиков по всему миру.

Статические сайты?

«Статические сайты» — это полная противоположность «динамическим сайтам», верно? Так как же обеспечить богатое и динамичное взаимодействие с помощью простых HTML-файлов? Ну, JavaScript.

JavaScript сильно развился со времен первых войн браузеров, закрепившись как язык программирования общего назначения с появлением Node.js и таких библиотек, как React, Angular и Vue.js. Возможности для разработки высококачественных пользовательских интерфейсов (UI) безграничны.

Конечно, JavaScript не панацея. Скорее всего, вы не будете заниматься с ним анализом данных или искусственным интеллектом. Но для веб-разработки вряд ли есть что-то, что вы не можете сделать с API, который вы можете использовать с методами JavaScript, поскольку есть вероятность, что кто-то уже создал для него микросервис.

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

Это и есть стек J·A·M: JavaScript, API, разметка.

Несвязанные, безголовые, микросервисы, бессерверные... Извините, что?

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

Связанный, развязанный или безголовый

COUPLED — это когда контент веб-сайта создается, управляется и хранится на серверной части сайта, где находится база данных (например, администратор WordPress). Затем этот контент извлекается из серверной части и представляется в браузере через внешний интерфейс (например, шаблон WordPress). В некотором смысле «связанное» приложение — это традиционный «полный стек», в котором серверная часть и внешний интерфейс являются разными сторонами одного и того же приложения.

Напротив, DECOUPLED — это когда серверная часть и клиентская часть управляются отдельно — это означает, что база данных и инструменты управления будут на одном сервере, а клиентская часть — где-то еще. Естественно, должна быть среда, с помощью которой они оба связаны, что обычно является API. Более того, поскольку серверная часть теперь эффективно отделена от передней части, фактически может быть несколько передних частей в разных местах! (Подумайте о разных витринах, использующих один и тот же движок, например Shopify.)

Короче говоря, в программном обеспечении HEADLESS просто нет внешнего интерфейса или уровня представления. Например, безголовая CMS может генерировать статический контент и размещать его где угодно: в мобильном приложении, на устройстве Интернета вещей, на статичном веб-сайте. Правда, это тоже «развязанная» ситуация, но здесь вам может даже не понадобиться API. Подумайте о движке WordPress, который экспортирует свои сообщения в виде статических файлов HTML: это безголовый. На самом деле, вы сейчас находитесь на странице, которая была сгенерирована именно таким образом.

Монолитные (сильно связанные) и микросервисы (слабо связанные)

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

С другой стороны, СЛАБОСВЯЗАННЫЕ программные компоненты работают больше как плагины, которые можно удалить или заменить, и, возможно, функциональность изменится, но ядро ​​приложения по-прежнему будет работать. Этот принцип позволяет «аутсорсингу» функциональности через сторонние API — часто называемые «микросервисами» — поскольку они предоставляют второстепенные функции (изменение размера изображения, вход в систему, сохранение), которые сами по себе не являются неотъемлемой частью приложения.

Бессерверные и традиционные вычисления

По общему признанию, «бессерверный «— это неправильное название. Каким бы вычислительным предприятием вы ни занимались, в нем будут задействованы серверы. Но способ доступа к серверам и управления ими может быть совершенно другим.

В ТРАДИЦИОННОЙ МОДЕЛИ у вас может быть фактический физический сервер (иногда называемый «голым железом») или виртуальный частный сервер, где ресурсы выделены для вас — среди других пользователей — на физическом сервере. Ресурсы ограничены, и независимо от того, используете ли вы их на 100% или нет, вы платите за них, как если бы вы это делали.

В БЕССЕРВЕРНОЙ МОДЕЛИ существует огромный пул ресурсов, предлагаемых множеством серверов, связанных между собой. Вы можете просто получить то, что вам нужно, когда вам это нужно, и масштабировать (вверх и вниз) по требованию. Вы не можете точно определить какой-либо физический сервер как свой — все, что вы знаете, это то, что ресурсы есть независимо от того, откуда они берутся.

Традиционная модель Бессерверная модель

Физические серверы с ограниченными ресурсами Пул неограниченных ресурсов

Склонен к неисправностям (например, выход из строя жесткого диска) Более надежная архитектура*

Ограниченная масштабируемость Неограниченная масштабируемость

Платить за все, включая неиспользуемые услуги Платите за то, что используете (оплата по мере использования)

Простое использование Нужно научиться реализации

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

Практические примеры Jamstack

Это было очень важно, особенно если вы новичок в этих идеях. Итак, давайте сделаем перерыв в теории и посмотрим на некоторые практические примеры использования Jamstack в реальной жизни.

Пример 1: Превращение WordPress в статический сайт для увеличения скорости в 10 раз

Если статика — это путь, то что может быть лучше, чем взять динамический блог WordPress (WP) и превратить его в статический? Таким образом, мы снизим скорость загрузки страницы и задержку как минимум на один фактор, значительно повысим безопасность и улучшим нашу SEO-оптимизацию.

Коротко о процессе

Используйте генератор статических сайтов (SSG) для создания постов и страниц из WP, но в статическом формате (текст, Markdown, HTML).

Синхронизируйте статическое содержимое с репозиторием на GitHub, GitLab или Bitbucket.

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

Расслабьтесь и наслаждайтесь бесплатным хостингом для безопасных и быстрых веб-сайтов с автоматическим развертыванием. 😎

Но что насчет...

Конечно, это порождает массу вопросов:

Что с админом?

А как насчет категорий и RSS-канала?

Как мне теперь управлять контентом?

Как насчет разделов комментариев и новостной рассылки?

На этом этапе вы можете попрощаться с WP Admin, так как теперь вы будете создавать контент с помощью SSG. Фактически, SSG, такие как Jekyll, специально разработаны для создания блогов, а такие SSG, как Gatsby.js, уже поставляются со всеми включенными батареями.

Управление контентом (например, изменение существующих сообщений) — вот где на помощь приходит безголовая CMS. Для комментариев и информационных бюллетеней, разве вы уже не используете внешний API для них, таких как Disqus и Mailchimp?

Как вы на самом деле это делаете?

Мы не можем описывать здесь все тонкости SSG и безголовых CMS, но следите за обновлениями для будущих выпусков этой серии. Мы представим пошаговое руководство по переносу сайта WordPress.

Пример 2: Бесплатное размещение статических сайтов с помощью автоматизированного конвейера

«Бесплатно» — это то, что вы часто слышите в сообществе Jamstack — и, к счастью, это не бесплатно, так как вам все равно придется сообщить нам номер своей кредитной карты бесплатно.

Коротко о процессе

В этом случае мы возьмем наш статический сайт (например, блог, который мы перенесли в Примере 1) и разместим его в Интернете:

Установите репозиторий GitHub, GitLab или Bitbucket.

Развертывание на Netlify, GitLab Pages или GitHub Pages.

В этот момент каждое изменение в репозитории автоматически запускает новое развертывание (через веб- перехватчики), которое можно очень элегантно откатить в случае возникновения проблемы.

Почему компании делают это бесплатно?

Накладные расходы на размещение HTML-файлов в уже развернутой CDN минимальны. Помните, что здесь нет никаких реальных вычислений, никакого PHP-рендеринга. Если вы не размещаете у себя очень популярный сайт, который потребляет много трафика, компании не возражают против предоставления некоторого хостинга. И это может быть хорошей рекламой для них.

Раздавая много бесплатных услуг, компании также запирают вас. К тому времени, когда вам понадобится услуга премиум-класса (а если ваш бизнес будет расти, вы это сделаете), вы уже с ними. Это справедливо — и, кроме того, на тот момент вам уже нужно было либо разработать специальное решение вашей проблемы, либо все равно заплатить за услугу.

Как вы на самом деле это делаете?

Оба случая, Netlify или GitHub/GitLab, очень просты и требуют минимальных усилий. (Тем не менее, мы подробно рассмотрим этот процесс в следующей статье.)

Как Jamstack сравнивается с разработкой полного стека

Давайте посмотрим, как этот новый подход сравнивается со стеком LAMP или MEAN:

ЛАМПА/СРЕДНИЙ стек Джемстек

Веб-серверы, на которых работают сайты Глобальные развертывания в CDN

Загрузка по FTP/SSH, перезапуск сервера Автоматизированные трубопроводы

Страницы, отображаемые во время выполнения Предварительно обработанные страницы для ускорения

Монолитные приложения (например, WordPress) API-интерфейсы и микросервисы (внешняя и внутренняя части отделены друг от друга)

Полный стек (передние и внутренние языки) Единый стек («JavaScript везде»)

Что еще можно сделать с Jamstack?

Надеюсь, теперь вы понимаете преимущества создания своего сайта. Но, возможно, вы все еще скептически относитесь к тому, как выполнять самые базовые действия без внутренней обработки, например вход пользователей в систему и управление динамическим содержимым или его хранение без реляционной базы данных (RDBMS).

Вот еще несколько примеров того, что вы можете сделать с помощью Jamstack:

внедрение бессерверной базы данных со статическим сайтом

идентификация как услуга (IDaaS): аутентификация без сохранения состояния

безголовые системы управления контентом

использование бессерверных функций на статических сайтах

управление многоцелевыми формами

обрабатывать мультиплатформенные уведомления

безголовые тележки для покупок

реактивный поиск

Вывод

Развитие вещей неизбежно, особенно в сфере ИТ. Раньше это был стек LAMP, а затем стек MEAN. Сейчас это Jamstack, а через пять-десять лет это будет что-то другое. Лучше принять эти изменения и сделать их своими!

Изучение новых способов ведения дел может показаться хлопотным, но оно также может оживить ваше стремление к развитию. Вы можете обнаружить, что тратите меньше времени на обслуживание серверов и беспокойство о проблемах безопасности. Вы можете обнаружить, что разработка требует меньше усилий, а ваши клиенты довольны. В результате вы даже можете стать более конкурентоспособными (и иметь возможность просить о повышении зарплаты).