Давайте признаем: современный 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'ы.

Комментарии (7)


  1. alexs963
    04.04.2022 18:11
    +3

    который будет представлять собой набор статических HTML-файлов.

    Как будто что-то плохое.


    1. xtremespb Автор
      04.04.2022 18:14
      +1

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


      1. ZoomLS
        05.04.2022 00:44
        +5

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

        Что касается многоязычности - например в движке для статичных сайтов Hugo, с этим проблем нет.


  1. AlexG37G
    04.04.2022 22:06

    Чем это лучше Вордпресса со статическими страницами для обычного пользователя?


  1. makar_crypt
    04.04.2022 22:16
    -1

    Очень интересный момент , каким способом при вставки в WYSIWYG  редактор сохраняются стили скопированого куска сайта ? Я же когда выделяю допустим параграф статьи на хабре , копирую в блокнот у меня же не исходный код со стилями копируется , а чисто текст , да и это правильно , даже если посмотреть низкоуровневыми программами "что у вас в системном буфере ОС" то можно увидеть что там нету стилей, как же происходит "трансфер" всех стилей в WYSIWYG  редактор


    1. garbagecollected
      05.04.2022 01:19

      Не надо низкоуровневых программ. Достаточно посмотреть документацию. Скрипт визуального редактора не отвечает ни за отображение контента, ни за вставку (это просто кнопочки). Браузер делает всё сам, если установить в нужном теге атрибут contentediable.


    1. ColdPhoenix
      05.04.2022 04:07
      +1

      Есть там стили.

      Буфер обмена позволяет сохранить в него содержимое одновременно в нескольких форматах.

      За счёт этого блокнот просто тупо берет себе текстовый вариант. В word/chrome при этом есть опция вставки без форматирования.

      Странно что ваша низкоуровневая программа не увидела несколько форматов.