Heretic: Простое Решение Для Создания Простых Сайтов

Давайте посмотрим правде в глаза: современная сеть стала очень сложной.

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

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

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

SPA (одностраничное приложение) — хорошее решение, не требующее перезагрузки каждой страницы при необходимости обновления контента.

Но проблема в том, что эти сайты создаются полностью на стороне клиента, в браузере; не каждая поисковая система сможет их проиндексировать.

В таких ситуациях хорошим решением является рендеринг страницы на стороне сервера (Server-Side Rendering, или SSR), а затем «переключение» в режим SPA (регидратации).

Когда пользователь захочет перейти на другую страницу, с сервера будет загружен небольшой фрагмент данных, и не будет необходимости перезагружать всю страницу.

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

Здесь в игру вступает Еретик.

ТЛ;ДР

• Репозиторий на GitHub
• Документация
• Демо

Что такое Еретик?

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

• Использовал Бульма - легкий, настраиваемый CSS-фреймворк на основе Flexbox.
• Используется модульная структура, вся источник открыт и доступен по лицензии MIT
• Использовал Webpack 5 для создания оптимизированных фрагментов, сжатых GZ, и загрузки каждой части сайта по требованию.

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

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

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

  Фиксировать

Синтаксис, используемый Марко, ничем не отличается от HTML, но при желании может предоставить массу возможностей для создания технически сложных проектов.

Чтобы использовать Marko, вам нужны только базовые знания HTML-разметки.

Отсюда и появилось название проекта.

Еретик – это человек, придерживающийся взглядов, противоречащих общепринятым взглядам.

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

С чего начать?

   

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

   

.

/node_modules .

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

npm run setup -- --defaults

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

Если вам не нужно ничего создавать, просто игнорируйте эту опцию.

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

npm run build-dev

Эта команда создаст ваш сайт в режиме разработки (быстрее, меньше оптимизации).

Чтобы создать веб-сайт в «живом» режиме, используйте вместо этого опцию строй-производство .

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

npm run server

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

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

В зависимости от языка перейдите в каталог .

/src/pages/test/content/lang-xx-xx (где xx-xx — код языка, например, ru-нас ).

Файл index.marko содержит содержимое страницы, и здесь можно использовать обычный синтаксис HTML. Если требуются дополнительные стили, вы можете создать файл в том же каталоге.

стиль.

scss (или стиль.

css ); Файлы компонент.js можно использовать для создания логики на основе JS. Более подробную информацию о структуре компонентов Marko (а эта страница фактически представляет компонент) можно найти в Документация Марко .

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

Что еще может сделать Еретик?

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

• Для каждой страницы можно указать не только заголовок, но и описание; вся информация, расположенная на странице, доступна всем движкам, которые индексируют контент и не могут отображать JS.
• Многоязычный контент также хорошо индексируется.

• Стилизованы страницы 404 и 500, а также есть страница, которая отображается при ошибках в режиме работы SPA.
• Возможность «демонизировать» сайт одной командой через ПМ2 и готовый файл конфигурации для NGINX (подробнее см.

  в документации )

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

Например, улучшить механизм интернационализации, чтобы он поддерживал шаблоны и множественное число.

Пишите тесты до конца.

И перевести имеющуюся локализацию «из коробки» на несколько языков (на данный момент есть только русский и английский).

Не забывайте, что это мой любимый проект с открытым исходным кодом, поэтому могут быть ошибки.

Ну, все находится в разработке уже пару недель, так что многое может улучшиться.

Пожалуйста, присылайте свои идеи и запросы на включение.

Теги: #Разработка сайтов #JavaScript #веб-дизайн #разработка сайтов #спа #ssr #marko #bulma

• Обзор Формулы Быстрой Прибыли – Работает Ли Она У Меня?

  19 Oct, 24

• Google Запустил Сервис Поиска Авиабилетов

  19 Oct, 24

• Холдинг Look At Media Объявил О Реорганизации При Поддержке Издательского Дома Дерипаски

  19 Oct, 24

• Вырезано, Чтобы Выпустить Настоящий Mvp

  19 Oct, 24

• Робот С Квадратными Колесами Ходит По Потолку

  19 Oct, 24

• Ведомости: За Восемь Дней В России Было Продано Почти 58 Тысяч Смартфонов Iphone 7

  19 Oct, 24

• Мультикоптеры, Работающие На Ископаемом Топливе

  19 Oct, 24

• Ии Существует, Но Это Не То, Что Мы Думали?

  19 Oct, 24

• Есть Ли Смысл Учиться Программировать Под Dos?

  19 Oct, 24

• Нет, Дорогая, Уходить Точно Рано!

  19 Oct, 24