Переделка WordPress в стеке JS. Привет новой CMS для сайтов Next.js.

Мотивация

Jamstack временно отсутствует. Для большинства из нас (разработчиков) статически предварительно обработанные веб-сайты React неудивительны: маршрутизация страниц в браузере, «молниеносная» (как они обычно называют это) опыт и т. Д. Попробуйте Gatsby или Next.js, и вы получите Это. Если вы веб-разработчик, вы знаете React и, вероятно, знаете, что с ним делать. Но для многих нормальных людей это все еще выглядит как какой-то дорогой продукт, без которого они могут жить.

78,9% Интернета по-прежнему использует PHP. Что ж, многие из этих веб-сайтов старые, и в наши дни разработчики не так часто выбирают PHP. Но для WordPress (39,6%) это число постоянно растет. Введите в Google «E-commerce CMS», и вы получите от старых добрых советников несколько советов по устранению зависимости от разработчиков.

Между тем, многие современные Node.js CMS идут другим путем, без головы. Если вам нужен интерфейс, будьте готовы нанять разработчика. О, это будет вам стоить.
Или, если ваша система управления контентом на Node.js не просто безголовая, то где мне щелкнуть, чтобы установить плагин? Что ж, многие из них не поддерживают такие плагины.

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

Несмотря на преимущества Node.js, полнофункционального Javascript / Typescript, SPA и т. Д., Люди по-прежнему остаются в стеке LAMP. И не потому, что он лучший, мы можем винить его во многих проблемах. В одной статье, которую я прочитал, автор сравнивал Wordpress и Ghost CMS. Он обвинял Wordpress в том, что он медленный и небезопасный из-за его плагинов, а поскольку у Ghost CMS нет плагинов, он лучше по обоим пунктам. Но я не думаю, что отсутствие потенциально полезной функции можно рассматривать как преимущество.
Если проблемой является только наличие функции плагина, то проблема в основном дизайне CMS, а не в плагине. С другой стороны, если CMS не поддерживает расширения, опять же, что-то не так с основным дизайном CMS, потому что, на мой взгляд, эта CMS не будет рассчитана на будущее.

Должно быть решение, охватывающее все современные передовые технологии. Статически предварительно отрисованный React для внешнего интерфейса, зрелого и поддерживаемого серверного интерфейса (например, посмотрите Nest.js и TypeORM). GraphQL API, который отлично подходит для разработки CMS, где конечные пользователи могут создавать интерфейс любого типа.
Но я не мог найти такой же уровень универсальности, расширяемости, мощности в создании плагинов вместе с мощным графическим интерфейсом, с которым каждый может справиться, который предоставляет WordPress. Так я закончил работу над второстепенным проектом большую часть своего свободного времени последние два года.

Сегодня я решил обнародовать проект, поэтому представляю его: Cromwell CMS. Вы можете найти несколько примеров веб-сайтов по адресу: https://cromwellcms.com/docs/overview/intro#examples
CMS бесплатна и имеет открытый исходный код, вы можете проверить код или указать звездочку https: //github.com/CromwellCMS/Cromwell

Основной дизайн

Среда Node.js довольно удобно подошла к системе пакетов. Все в пакете. Один подобный другому можно установить с помощью простой команды npm и загрузить в плоскую структуру node_modules.
Cromwell CMS по традиции представляет собой набор пакетов и служб, которые можно установить и запустить независимо. Он наследует преимущества микросервисной архитектуры, и гораздо проще обновить CMS, просто выполнив одну команду npm или yarn.
Я также могу назвать это безголовой CMS, потому что на ней можно запускать сервер API с любым пользовательским интерфейсом.

Итак, есть 4 основных службы:
1. Служба сервера API. Сервер API написан с использованием Nest.js и TypeGraphQL, REST API для транзакций, GraphQL для потока данных. Оба типа API расширяются с помощью плагинов (об этом ниже).
2. Фронтенд-сервис (Next.js). По сути, это кастомный сервер Next.js.
3. Сервис админки. Обслуживает файлы админки.
4. Управляющий сервис. Эта служба запускает, просматривает и перезапускает другие службы при вводе пользовательского графического интерфейса. Например, в WordPress изменить тему проще, но с Next.js мы должны перезапустить сервер с другой сборкой приложения. Что ж, нечасто перезапускать серверы в рамках жизненного цикла производства, но в моих тестах это довольно стабильно, я считаю, что может работать при правильном обращении.

Тематический движок

Все темы являются пакетами npm. Просто установите пакет с определенным свойством в package.json, и CMS распознает его и отобразит тему в панели администратора. Затем пользователь может выбрать тему, и CMS возьмет готовую сборку приложения из пакета темы в node_modules, поместит его в рабочий каталог внешнего интерфейса и перезапустит сервер Next.js.

Хотя установка через npm удобна для разработчиков, она не кажется удобной для пользователя. Поэтому я решил пойти еще дальше и внедрил графический интерфейс для управления пакетами в панели администратора. Когда пользователь заходит на рынок тем или плагинов (в графическом интерфейсе панели администратора, такой же, как «Добавить новый плагин» в WordPress) и нажимает «установить», CMS внутренне запускает команду yarn для добавления пакета. Аналогичное происходит при удалении / удалении.

Затем каждую тему можно настраивать в редакторе тем с перетаскиванием на панели администратора (своего рода конструктор веб-сайтов). Пользователь может перемещать блоки, изменять текст, изображения, добавлять плагины и т. Д. React дает нам возможность предоставлять такие системы из коробки.

Я пытаюсь объединить лучшее из обоих миров: правильно запрограммированный интерфейс на React и мощь графического интерфейса обычного конструктора веб-сайтов. Что ж, Cromwell CMS builder еще не является мощным, как хорошо известные решения, но моя цель - сделать это так. Важно то, что он следует подходу «сначала код», что, на мой взгляд, является правильным способом создания веб-сайтов. Никаких искаженных макетов, созданных с нуля в некорректном конструкторе веб-сайтов (на самом деле это возможно и в Cromwell CMS, но вы этого не сделаете).
Так или иначе, почти каждый, начиная с любой CMS, просто выбирает готовую тему.

Что касается разработки тем, вы можете создать любое приложение Next.js, просто создайте его с помощью Cromwell CLI, который настраивает процесс сборки Next.js, чтобы сделать ваше приложение CMS-совместимым. Есть также некоторые рекомендации, например, следование методам статической оптимизации Next.js, поэтому во время выполнения Next.js будет использовать инкрементную статическую регенерацию, благодаря чему ваш веб-сайт будет работать невероятно быстро, как любой другой веб-сайт со стеком JAM. Технически предварительно обработанные страницы во время сборки будут повторно сгенерированы после того, как пользователь установит тему, но это близко к рабочему процессу стека JAM и доступно всем.

Плагины

Плагины - это пакеты, которые могут экспортировать расширения или подписываться на действия (так же, как хуки в Wordpress). Плагины дают вам возможность создавать ваше приложение с использованием лучших (или, по крайней мере, одной из лучших) фреймворков.
Вы можете экспортировать пользовательский контроллер Nest.js, преобразователи TypeGraphQL, сущности TypeORM и многое другое. Поскольку и REST, и GraphQL API могут быть расширены как автор плагина, у вас есть выбор, что лучше всего подходит для вашего приложения.
В интерфейсе вы можете зарегистрировать виджеты для панели администратора или интерфейса темы (пользователь должен будет разместить ваш плагин в редакторе темы).
См. наше руководство для получения дополнительной информации.
Плагины могут быть установленным в панели администратора, и все расширения будут применены автоматически без какой-либо ручной команды CLI.

Что получают ваши клиенты

- Сверхбыстрый интерфейс благодаря мощности React и Next.js статически выполняет предварительный рендеринг страниц.
- Интернет-магазин и платформа для ведения блогов. Помимо предоставления передовых технологий, он должен иметь приличный опыт работы с панелью администратора, не хуже, чем у известной CMS. Современный блочный текстовый редактор на основе Editor.js

- Бесплатный полнофункциональный интернет-магазин и тема для блога. Бесплатные плагины. Это, и я буду добавлять больше. Пользователь может просто перейти с любой другой CMS и бесплатно начать пробовать или использовать Cromwell CMS. Что касается меня, это побочный проект, в который мне очень нравится вкладывать свободное время, и он не изменится. Все, что добавлено бесплатно, останется бесплатным навсегда.

- Простота установки и использования тем и плагинов. В графическом интерфейсе админ-панели все правильно. Конструктор веб-сайтов.
- Как следует из предыдущих пунктов - заманчивая возможность существовать без веб-разработчиков.
- Оптимизация для SEO. На каждой странице есть статически предварительно обработанный HTML-код. CMS позволяет редактировать мета-теги SEO, предоставляет автоматически сгенерированную карту сайта и robots.txt.
- Миграция. Экспортируйте свои данные из других CMS в файл Excel и импортируйте их.
- Электронная почта, платежи и другие интеграции.

В заключение

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

Я не говорю, что моя система лучше WordPress (поскольку я еще не потратил на нее и десяток лет), но я пытаюсь решать проблемы и предлагать решение, которое может быть лучше во многих отношениях.
А пока я прошу поделиться мнением о том, как его улучшить. И проект с открытым исходным кодом, любой желающий может его попробовать. В конце концов, все зависит от сообщества. Как скоро мы перейдем на новый самый популярный язык при разработке серверной части? Настанет ли день, когда Node.js будет обеспечивать 78,9% Интернета? ;)