Фишки JAMstack: почему статические сайты превосходят традиционные динамические
В этой статье мы разберем с вами ключевые моменты разработки статических сайтов и познаем превосходство static site над traditional dynamic site.
Intro
Все больше и больше оборотов набирает довольно новый и нетрадиционный подход в создании сайтов — JAMstack.
Для начала давайте разберемся, что такое JAMStack, с чем его едят и почему он «превосходит» традиционные web-сайты. Дабы не углубляться в подробности и не превращать информационную статью в копипаст из официальных источников, я постараюсь описать в двух словах, что же такое этот JAMstack.
- JAMstack — не технология. Я бы назвал это методологией или подходом, который предлагает множество инструментов на выбор для создания статических сайтов. Он появился не так давно, но уже набрал довольно приличное комьюнити.
- JAMstack это — «J» — JavaScript, «A» — API, «M» — markup (так указано на официальном сайте).
Исходя из расшифровки аббревиатуры, становится понятным, что для создания статического сайта, который не будет уступать динамическому, нам необходимо всего 3 компонента:
- JavaScript — для придания интерактивности нашему сайту;
- API — источник информации, используемый сайтом;
- Markup — какой-то контент-генератор или, как некоторые его называют, «шаблонизатор», позволяющий создать разметку страниц.
Детали
JavaScript
Кто сталкивался с JavaScript, тот меня поймет, зачем он нужен и с чем его едят. Для тех, кто не сталкивался, немного поясню.
JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией языка ECMAScript (стандарт ECMA-262[8]). Тут подробнее. Вкратце — это то, что помогает пользователю взаимодействовать с DOM-элементами на web-страницах. По большому счету для совсем простых сайтов можно обойтись и без него.
API
API, или проще говоря, Application Interface, в данном случае подразумевает собой источник входной информации, контента, необходимого для встраивания в шаблон нашего Markup.
Это могут быть: контент-файлы, которые расположены непосредственно в контент-генераторе; сторонняя админ-панель, которая подключается к нашему генератору; полноценное REST API для вывода более структурированной и сложной информации.
Markup
На примитивном уровне можно использовать обычные HTML-файлы, которые залинкованы между собой и заведомо наполнены контентом. Но обычный сайт подразумевает под собой минимум 10 страниц, мультиязычность и возможность редактирования контента нетехническому пользователю.
Именно для этой цели были созданы SSG — статик сайт-генераторы.
Что делают эти SSG?
Ровным счетом ничего, кроме того, что из обычных файлов, заполненных контентом, генерируют связанные между собой HTML-страницы по заведомо разработанным HTML-шаблонам. Грубо говоря, создают HTML-страницы, подставляя значение этих переменных из контент-файлов на место переменных в шаблоне.
Мы остановили свой выбор на статическом контент-генераторе Hugo (здесь подробнее о нем). Почему?
- доступная документация;
- наличие CLI;
- поддержка мультиязычности;
- FREE;
- поддержка роутинга;
- и полное удовлетворение SEO-потребностей (редиректы, xml ... и т. д).
Все хорошо, но зачем? Есть массы традиционных CMS
Ответ довольно прост. С растущей потребностью в скорости загрузки и простоте поддержки готового продукта традиционные CMS — довольно непростой случай:
- уязвимость перед хакерскими атаками;
- при большом наплыве посетителей сервер перестает отвечать;
- зачастую низкая скорость сайта;
- требует постоянной поддержки и модерирования сервера.
Конечно, эти все проблемы решаемы. Но опять же — повторюсь, — для решения этих задач необходимо участие опытного веб-мастера, работу которого нужно оплатить. А еще представьте ситуацию, когда сайт взламывают, или он начинает «падать», или грузится долго. Это всегда оборачивается потерей денег для клиента.
Как JAMstack решет эти проблемы?
Для деплоя статического сайта вам не нужен традиционный web-сервер. Статический сайт можно разместить где угодно, и он будет работать от Git Pages до Amazon CDN или на прочих сервисах для хранения файлов. Их море. То есть проблема с сервером решена — он нам больше не нужен.
Безопасность. Максимум, что может совершить злоумышленник — скопировать наши HTML-файлы. Ну и на здоровье, они и так публичны :)
Скорость сайта. Тут все еще проще — страница уже собрана, она не строится в рантайме. Пользователю при запросе приходит простой HTML-файл, который уже заполнен контентом. Как плюс, приятные фичи Asset Optimization от Netlify позволяют cделать вес нашей страницы минимальным.
Никакой цикличной поддержки, бекапов и модерации. Все хранится в Github/Bitbucket/GitLab или в вашем архиве на жестком диске (ах да, это я об исходниках). А касаемо сгенерированного контента, в случае с Netlify ваш сайт размещен на тысячах CDN-серверов по всему миру :)
Звучит прикольно, но все еще непонятно, как это работает
Процесс работы с JAMstack я попытаюсь описать на личном опыте.
Первым делом мы регистрируемся на GitHub — это бесплатно. Затем создаем репозиторий и добавляем в него наш проект, разработанный на Hugo. После чего регистрируемся в Netlify, выполняем быстрый туториал и деплоим наш сайт.
На этом этапе все проще, чем кажется. Мы внесли изменения в контент и сделали коммит. Netlify это увидел и запустил новый процесс сборки. После успешного завершения сборки Netlify размещает сгенерированные файлы на CDN-серверах по всему миру. Все.
Конечно, нам нужна админ-панель. Для этого можно использовать Netlify CMS — бесплатно, Forestry — условно бесплатно, DatoCMS — условно бесплатно. Сам процесс описывать не буду, но если задаться целью, то все очень просто.
В итоге
Я на личном опыте убедился в том, что, если создавать сайт на JAMstack (я использовал Dato + Hugo + Netlify), время разработки сокращается в 2 раза. У клиента есть бесплатный SSL — сертификат и HTTP2. Нет аптаймов, сайт грузится быстро — можно хвастаться PageSpeed. Клиент по-прежнему может редактировать контент. В итоге из 15 сайтов, созданных на JAMstack, — 15 довольных клиентов.
Примеры:
cantoneri.com <<< ого, да это же интернет-магазин :)
clue.ouraring.com
noiseoftime.merikeskusvellamo.fi
