Давайте признаем: современный Web стал очень сложным. Веб-дизайнеры все меньше думают о пользователях с узким каналом, которые вынуждены ждать, пока загрузится очередная огромная картинка. Иногда нам просто нужен старый добрый веб-сайт, без каких-либо дополнений, таких, как постоянное подключение к базе данных, панели администратора с WYSIWYG редактором и т. д.

Да, существует несколько способов создать веб-сайт, который будет представлять собой набор статических HTML-файлов. Но этот подход имеет массу недостатков: каждая страница загружается индивидуально, а наша задача определенно не состоит в том, чтобы возвращаться в 2000-е (хотя ностальгия может быть прекрасной, что уж там).

SPA (Single-Page Application, или одностраничное приложение) — хорошее решение, которое не требует перезагрузки каждой страницы, когда содержимое нуждается в обновлении. Но проблема в том, что эти веб-сайты полностью генерируются на стороне клиента, в браузере; не каждая поисковая система сможет их проиндексировать. В подобных ситуациях хорошим решением является рендеринг страницы на стороне сервера (Server-Side Rendering, или SSR), после этого — «переключение» в режим SPA (регидрация). Когда пользователь захочет перейти на другую страницу, с сервера будет загружен небольшой фрагмент данных, и необходимости перезагружать полностью страницу не будет.

Идея состоит в том, чтобы создать такой шаблон (boilerplate), чтобы каждый веб-мастер (или любой человек, обладающий базовыми навыками верстки на HTML и CSS) мог создать веб-сайт, который будет достаточно быстрым и удобным в обслуживании. Здесь в игру вступает Heretic.

TL;DR

• Репозиторий на гитхаб

• Документация

• Демо

Что такое Heretic?

Heretic — это что-то среднее между фреймворком и шаблоном; он позволяет вам создать очень быстрый, современный веб-сайт, сочетающий подходы SSR и SPA.

• Heretic основан на Marko, языке, предназначенном для создания динамических и реактивных пользовательских интерфейсов

• Используется Bulma — легкий, настраиваемый CSS-фреймворк, основанный на Flexbox

• Используется модульная структура, весь исходный код открыт и доступен по лицензии MIT

• Используется Webpack 5 для создания оптимизированных фрагментов, сжатых GZ, и загрузки каждой части сайта по запросу

• Встроенная поддержка маршрутизации и интернационализации как на стороне клиента, так и на стороне сервера

• Сочетание рендеринга на стороне сервера (SSR) и одностраничных приложений (SPA), то есть веб-сайт работает как изоморфное приложение

• На стороне сервера используется высокопроизводительный фреймворк Fastify

Если вы хотите сразу посмотреть демо, то без проблем можно сделать это прямо сейчас ;-)

Как начать работу?

Чтобы запустить сайт, вам понадобится веб-сервер, на котором работает Node.js. Особых требований нет, поэтому, если вы можете установить и использовать Node, вы можете хостить и веб-сайт, собранный в Heretic.

Для начала работы вам потребуется клонировать Heretic из репозитория Github:

git clone https://github.com/xtremespb/heretic.git

Затем вам нужно будет установить необходимые модули NPM:

npm i

В случае успеха необходимые модули будут загружены в директорию ./node_modules. Также потребуется создать несколько файлов, каталогов и файлов конфигурации, чтобы начать процесс сборки:

npm run setup -- --defaults

Параметр --defaults необходим для создания страниц и навигации по умолчанию. Если ничего создавать не требуется, просто игнорируйте этот параметр.

Наконец, вы можете запустить процесс сборки:

npm run build-dev

Эта команда сгенерирует ваш сайт в режиме разработки (быстрее, меньше оптимизаций). Чтобы создать веб-сайт в "боевом" режиме, используйте вместо этого опцию build-production.

Наконец, запустите веб-сервер с помощью следующей команды:

npm run server

В случае успеха ваш сайт будет доступен по адресу http://127.0.0.1:3001.

Как добавить страницу?

Для добавления новой страницы на сайт необходимо выполнить следующую команду:

npm run cli -- --addPage test --navigation

Данная команда создаст новую "пустую" страницу, содержащую все необходимые элементы для того, чтобы сразу начать наполнение ее контентом. В зависимости от языка, перейдите в директорию ./src/pages/test/content/lang-xx-xx (где xx-xx — код языка, например, en-us). Файл index.marko содержит контент страницы, и здесь можно использовать обычный синтаксис HTML. В случае, если потребуются дополнительные стили, в этой же директории можно создать файл style.scss (или style.css); для создания логики, основанной на JS, можно использовать файлы component.js. Подробнее о структуре компонентов Marko (а данная страница фактически представляет собой именно компонент) можно прочитать в документации по Marko.

Подробнее о доступных командах и синтаксисту конфигурационных файлов можно почитать в документации, которая, как и весь исходный код проекта, доступна на Github.

Что еще умеет Heretic?

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

• В процессе сборки автоматически генерируется файл sitemap, а также манифест для различных платформ, что позволяет не думать об этом в будущем и не прикручивать никакие "костыли"

• Для каждой страницы можно указать не только заголовок, но и описание (description); вся информация, расположенная на странице, доступна всем движкам, которые индексируют контент и не умеют рендерить JS

• Мультиязычный контент также отлично индексируется

• Стилизованы страницы 404 и 500, также предусмотрена страница, отображающаяся в случае ошибок в режиме работы SPA

• Возможность "демонизировать" сайт одной командой через PM2 и готовый конфигурационный файл для NGINX (см. подробнее в документации)

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

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

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