Давайте признаем: современный 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
Почему такое название?
В современном мире существует несколько стандартов, таких, как React и Vue. Сложность реализации быстрых и простых проектов с использованием подхода SSR, а также необходимость изучения специального синтаксиса, такого как JSX — все это значительно усложняет быструю разработку простых сайтов.
Синтаксис, используемый Marko, ничем не отличается от HTML, но при желании может предоставить массу возможностей для создания технически сложных проектов. Для использования Marko достаточно базовых знаний HTML-верстки.
Исходя из этого, появилось название, используемое проектом. Еретик – это человек, придерживающийся взглядов, идущих вразрез с общепринятыми. Так что почему бы и нет? ;-)
Если вы хотите сразу посмотреть демо, то без проблем можно сделать это прямо сейчас ;-)
Как начать работу?
Чтобы запустить сайт, вам понадобится веб-сервер, на котором работает 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'ы.
