Андрей Ситник в твиттере поднял тему лэндингов и статики. Основная мысль в том, что можно разрабатывать лэндинги как статический HTML без сборки. Меньше подвижных частей — меньше точек отказа, проще разработка и поддержка. Я оказывался в ситуациях, когда для минутных правок на сайте нужно было час сражаться с ошибками запуска dev-режима.
Обычно лэндинг — это одна страница под маркетинговые задачи. Нужно показать товар/услугу, CTA и подвести пользователя к целевому действию. Часто лэндинги одноразовые, сделал и забыл. Некоторые лэндинги живут долго и регулярно меняются. Бывают многостраничные и мультиязычные лэндинги. Но чаще это маленький проект, который нужно сделать быстро и минимальными усилиями.
Лэндинг можно рассматривать как большой однофайловый компонент. В HTML есть
<style> для стилей, <script> для скриптов, <body> для контента. Можно даже не выносить в отдельные файлы, если кода мало. Базовая модульность обеспечивается с помощью <link>, @import, <script type="module"> и ESM. Для удобства в современных браузерах есть <script type="importmap">.Для карусели, анимации, валидации форм и прочего могут понадобиться сторонние библиотеки. Большинство из них поставляются в виде standalone-скриптов. Подключить можно как есть с CDN или положить рядом с проектом. Что-то можно подсобрать с помощью esm.sh или bundlejs, если ну очень нужно.
Для нетривиальной логики с реактивным интерфейсом (калькулятор цен, конфигуратор продукта) есть HTML-first библиотеки: Alpine.js, petite-vue, hyperscript и десяток других. Они доступны в виде standalone и работают без сборки. В таком же режиме можно использовать Vue.
Чтобы избежать копипасты повторяющихся частей есть веб-компоненты. Google и Bing разворачивают Shadow DOM и видят всё, что внутри, поэтому проблем с SEO быть не должно. В качестве альтернативы трансклюзия фрагментов с помощью sl-include, include-fragment, i-html или даже сниппета htmz. Если сервер позволяет, можно настроить SSI и ESI, главное помнить о нюансах с безопасностью.
Сценарий мультиязычности решается на уровне каталогов и стандартной серверной маршрутизации. Перенаправление на нужную версию делается встроенным в начало страницы скриптом. Или за счёт сервера/прокси, если есть возможность. Переключение языков — обычные ссылки.
Графика оптимизируется один раз руками (squoosh, squish) или через прокси для картинок. Минификация при малом количестве ресурсов не так важна. Сжатие gzip включено на любом сервере и без минификации тоже достаточно эффективно.
Для редактирования контента нашёл интересный инструмент — Textolite. Это админка с WYSIWYG для редактирования статического HTML. После изменений перезаписывает исходный HTML-файл. Работает на PHP, но он есть на любом популярном хостинге. Правда выглядит, что проект заброшен, а аналогов не нашёл.
Звучит всё это как возврат в 00-е, когда так создавали сайты. Отчасти так и есть. Но не всегда старое — значит плохое. Плюс появились новые возможности, которых в то время не было. В итоге такой олдскульный подход вполне может подойти для многих лэндингов. Не нужно усложнять простые задачи инструментами, которые мы по привычке тянем из больших проектов потому что так “принято”.
#html