Zoia: легкая реактивная CMS для быстрой разработки сайтов

CMSJavaScriptNode.JSMongoDBReactJS
В данной статье я бы хотел рассказать о разрабатываемой мной системе управления контентом Zoia, написанной на Javascript. Это мой side-project, не связанный с основной работой, который я разрабатываю и развиваю в свободное время. Есть мнение, что каждый веб-разработчик должен рано или поздно написать свою собственную CMS, а кто-то даже и не одну :-)

TL;DR: demo.zoiajs.org, панель администратора (логин: admin, пароль: password), Github, лицензия MIT

Свершившийся факт: Javascript сейчас везде, его можно использовать не только на стороне клиента, но и на стороне сервера, а также в микроконтроллерах, автомобилях, смартфонах — одним словом, практически в любой области. Но «традиционной» для JS областью был и остается веб, где этот язык программирования оброс целым зоопарком библиотек, паттернов, утилит и фреймворков. Разобраться во всем этом достаточно сложно, а иногда все, что требуется — это сделать достаточно простой сайт, которым можно будет в случае необходимости быстро управлять: добавлять и редактировать контент, меню навигации и т.д.

Для подобных задач есть много CMS, написанных на PHP (некоторые из которых я использовал в работе, такие, GetSimple CMS), но я не встречал ни одной реактивной CMS, полностью написанной на JS и использующей Mongo в качестве БД (напишите, пожалуйста, в комментариях, если такое есть, а я пропустил). После знакомства с React и Marko уже не хочется возвращаться в суровый мир jQuery, и так родилась Zoia. Кстати, это уже вторая версия, первая работала как раз по-старинке (сейчас не поддерживается и не обновляется).

На текущей стадии разработки удалость реализовать следующее:

  • Zoia разрабатывается на Javascript — как на стороне сервера, так и на клиенте
  • Имеет модульную архитектуру, имеется возможность расширить функционал за счет добавления новых модулей
  • Распределенная архитектура: API на Fastify+Mongo, панель администратора на React+Redux, веб-сервер для userspace на Fastify+Marko — все это можно установить на различные серверы
  • Многоязычность «из коробки», уже есть английский и русский языки, можно добавлять любое количество языков — используется Lingui.
  • Большое количество вспомогательных компонентов, библиотек и утилит: для генерации форм, динамических таблиц (пока только в панели администратора), авторизации и т.д.
  • Сборка осуществляется при помощи Webpack
  • Редактирование контента: можно использовать несколько шаблонов дизайна (например, для различных страниц); есть опция выбора способа управления контентом: либо редактор WYSIWYG (используется CKEditor 5), либо редактор кода HTML (ACE Editor соответственно); при сохранении происходит оптимизация контента (минификация кода и применение типографа) — при выставлении соответствующих опций; существует возможность структурировать дерево категорий, в которых находятся страницы, и использовать «хлебные крошки»; есть «загрузчик» картинок (реализация как для CKEditor, так и для ACE)
  • Управление пользователями: добавление любого количества пользователей, возможность редактировать их профиль, устанавливать пароль и статус
  • Управление навигацией: удобное управление деревом навигации, возможность добавления «подменю»
  • Готовые скрипты для сборки, подготовки конфигурации systemd, NGINX и т.д.

Немного об архитектуре. Как я уже сказал выше, система состоит из API (обслуживает запросы к базе, обработку данных), панели администратора (работает как SPA, использует роутинг на стороне клиента, разработана с использованием React+Redux) и пространства пользователя (изоморфная архитектура, разработано с использованием Marko, рендеринг осуществляется на стороне сервера с последующей регидрацией на клиенте). Панель администратора обращается к API прямо со стороны клиента, веб-сервер пространства пользователя обращается к API до рендеринга. Авторизация осуществляется через JWT.

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

Так выглядит шаблон по-умолчанию:



Панель администратора выглядит следующим образом:



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

Сфер применения CMS несколько, но основной задачей (как уже сказал выше) я вижу разработку легковесного решения для создания сайтов средней сложности, которые бы использовали возможности как современного Javascript, так и большого числа современных инструментов разработки и хранения данных.

План по дальнейшей разработке на относительно ближайшее будущее следующий:

  • Необхдимо на(до)писать документацию по разработке модулей, а также по готовым компонентам панели администратора
  • Продумать и написать тесты (сейчас их нет вообще :)
  • Прикрутить регистрацию/авторизацию/личный кабинет со стороны клиента + авторизацию через соц. сети (OAuth)
  • Разработать необходимые модули с допонительным функционалом (блог, каталог товаров, Интернет-магазин и т.д.)

Демо-версия с некоторыми функиональными ограничениями находится здесь: demo.zoiajs.org, также доступна панель администратора (логин: admin, пароль: password). Каждый ровный час база сбрасывается к настройкам по-умолчанию, нужно будет проходить повторную авторизацию.

Код CMS доступен на Github, так что при желании можно присоедниться к разработке, репортить баги и т.д. Я буду рад контрибьюторам ;-)
Tags:javascriptnode.jsreactreduxmongofastifymarkowebpackes6cms
Hubs: CMS JavaScript Node.JS MongoDB ReactJS
+4
8k 43
Comments 21

Popular right now