Билдер сайтов на MODX из прототипов в Figma

Определимся сразу с вводными:
  1. Я менеджер проектов с техническим бэкграундом. В статье будет мало кода, много концепций. Еще, так как я менеджер, мои проблемы отличаются от проблем программистов.
  2. Задача данного текста — это получить фидбэк от тех, кто в потенциале мог бы использовать данный инструмент в своих проектах или критику от тех, кому идея показалось бредовой.
  3. У проекта уже есть MVP, который решает свою задачу, что и сподвигло меня написать эту статью.
КОРОТКО О ПРИНЦИПЕ РАБОТЫ

Существует набор варфреймов в FIGMA — это может быть 10 шапок, 5 футеров, 12 обложек и так далее. Из этих элементов мы собираем прототип, не исключая кастомизации. После разработки дизайна мы знаем, из каких примерно блоков состоит макет. Набор блоков, из которых состоит макет, мы передаем в компонент MODX, который в ответ нам отдает сборку с настроенными шаблонами, TV-полями и ресурсами в соотвествии с макетом. Остается доработать верстку и несобранный функционал.



КАКИЕ ЗАДАЧИ РЕШАЕТ БИЛДЕР

Задача 1: Стандартизация проектов

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

Задача 2: Увеличить скорость разработки сайта

Для меня как менеджера проектов увеличение скорости равно уменьшению себестоимости. При первых подсчетах (на пальцах) сборщик обещал до 70% экономии от общего бюджета на типовых сайтах. На данный момент лучший результат около 50%. Я понимаю, что данный расчет приблизительный и быстро посчитать выгоду невозможно.

Задача 3: Повысить качество

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

ИЗ ЧЕГО СОСТОИТ

Библиотека в FIGMA

Тут все просто. Я собрал самые популярные паттерны и пронумеровал их.



Библиотека модулей/чанков

Каждый блок из FIGMA мы сверстали (UIkit 3) и подключили к MODX, описали все возможные элементы, которые нужно создать для этого чанка, это может быть TV или системная настройка. Например вот так выглядет CENTER-HEAD-2:



И его код:
{$_modx->regClientCss('assets/template/css/center-head-2.css')}
{var $searchPage = $_modx->config.content_search_page}
{var $contactsPage = $_modx->config.content_contacts_page}
{var $comparePage = $_modx->config.content_compare_page}
<div class="center-header">
    <div class="uk-container">
        <div class="uk-grid uk-grid-medium uk-flex-middle uk-flex-between" uk-grid>
            <div class="uk-width-auto@m">
                <a class="logo" href="/">
                    <img src="{1 | resource: 'logo'}" alt="{$_modx->config.site_name}">
                </a>
            </div>
            <div class="uk-width-auto@m">
                <form class="search-block msearch2" action="" method="get" id="mse2_form">
                    <div class="search-block__field">
                        <input class="search-block__input" type="text" name="" placeholder="Поиск" value="">
                        <button class="search-block__btn" type="submit">
                            <span class="icon icon-loupe"></span>
                        </button>
                    </div>
                </form>
            </div>
            <div class="uk-width-auto@m">
                <a class="uk-button" href="#callbackForm" uk-toggle>Заказать звонок</a>
            </div>
            <div class="uk-width-auto@m">
                <a href="tel:{$contactsPage | resource: 'phone'}" class="center-header__phone">{$contactsPage | resource: 'phone'}</a>
                <div class="center-header__hours">{$contactsPage | resource: 'schedule'}</div>
            </div>
            
            <div class="uk-width-auto@m uk-text-right uk-flex-last@m">
                {if $comparePage?}
                    <a class="center-header__elem-icon" href="{$compare| url}">
                        <span class="icon icon-compare"></span>
                    </a>
                {/if}
                {'!msMiniCart' | snippet: [
                    'tpl' => '@INLINE
                       {var $cartPage = $_modx->config.content_cart_page}
                        <a id="msMiniCart" class="center-header__basket" href="{$cartPage | url}">
                            <span class="icon icon-cart"></span>
                        	<span class="ms2_total_count">{$total_count}</span>
                            <div class="center-header__basket_title">Корзина</div>
                            <div class="center-header__basket_status">{if $total_cost}<span class="ms2_total_cost">{$total_cost} {"ms2_frontend_currency" | lexicon} </span>{else}Пусто{/if}</div>
                        </a>'
                ]}
            </div>
        </div>
    </div>
</div>

Компонент MODX

Компонент из коробки имеет 4 заготовленные структуры:

  • Лендинг
  • Визитка
  • Корпоративный
  • Интернет магазин
Для каждой структуры настроены базовые элементы, типа страницы корзины или оформления заказа для интернет-магазина.



Внутри структуры мы можем настраивать вручную набор чанков (в перспективе забирать из FIGMA)



Результатом работы компонента является архив, который мы устанавливаем на чистый MODX и получаем дельно настроенную заготовку для разработки сайта, в которой есть:

  1. Базовая настройка, например ЧПУ
  2. Частичная настройка страниц, подключен слайдер, контакты, подключено меню в шапке, настроены формы обратной связи.
  3. Установлены бесплатные дополнения, pdoTools, translit и т.д.
Итог

MVP билдера показал, что можно сэкономить на повторяющихся задачах и работа была проделана не зря, но есть вероятность что данных подход работает только в моей реальности, поэтому жду в комментариях любые мысли, которые возникли у вас при чтении данного материала. Спасибо!)



Пример сборки.

P.S — Разработкой занимался Павел Гвоздь

UPD: modstore.pro/packages/sites-themes/prolektsitebuilder
Николай Хохлунов
15 июля 2020, 16:39
modx.pro
6
3 734
+13

Комментарии: 25

Aborrol
15 июля 2020, 18:33
0
Интересная идея, хотелось бы увидеть реализацию!

Из предложений, может
Результатом работы компонента является архив:
заменить на настройку при установке компонента? Тогда архив не нужен
    Николай Хохлунов
    15 июля 2020, 18:42
    0
    Спасибо, надеюсь комментарии сообщества приблизят к публичной версии.

    Ты имеешь в виду, что мы манипулируем со сборкой на которой установлен компонент, а не скачиваем отдельный архив? Можно рассмотреть как один из вариантов развития проекта.
    Raimei
    16 июля 2020, 10:35
    0
    Задумка интересная. За UiKit пламенный лайк, отличный инструмент
      W.H.I.T.E
      16 июля 2020, 12:50
      0
      Гениальная мысль.
      {$_modx->regClientCss('assets/template/css/center-head-2.css')}
      А склеивать и минифицировать в один CSS не нужно?
        Олег
        16 июля 2020, 14:00
        0
        Кстати перехватить ивент то можно, было бы желание
        Andrei
        16 июля 2020, 21:25
        0
        Отличная идея в рамках modx. Мне кажется на многих системах к этому все и идет, те же сборки на opencart или bitrix с выбором внешнего вида почти каждого элемента. А тут еще и верстка правильная и сам базовый шаблон интересный. Под свои проекты (не как разработчик) я бы использовал, особенно если со всем этим будут идти и работать еще какие-нибудь нестандартные фичи (типа оптовых цен и тп).
          Димон П
          08 января 2021, 17:59
          0
          Колюня, тема огонь!
          Есть уже нароботка какая то? Можно мне первому потестить? )
          Телеграм — motoset
            Александр Мельник
            08 января 2021, 21:58
            0
            Я вот в сомнениях, писать этот текст или нет.
            Но если он появился, то я все же решил написать.
            Дмитрий, Вы близко знакомы с Николаем? Пили на брудершафт?
            Что за обращения — Колюня? Так даже близким друзьям не говорят… Так можно сказать только другу, с которым родился в одной палате роддома и уже 40 лет бок о бок живешь.
              Димон П
              08 января 2021, 22:04
              0
              Александр, это задело вашу тонкую душевную организацию? ))
              Если в сомнениях дак и не надо писать ниче
                Димон П
                08 января 2021, 22:06
                0
                Колька если обиделся — сам напишет. В заступниках не нуждается ))
                  Александр Мельник
                  08 января 2021, 22:10
                  0
                  Я заступаюсь не за Николая. Я заступаюсь за логику, мораль и здравый смысл)
              Александр Туниеков
              09 января 2021, 03:46
              0
              Когда релиз будет? Я не спец в верстке и мне такой модуль пригодился бы.
              Денис
              11 февраля 2021, 21:06
              0
              Любая движуха для MODX полезна!
              Если это даст возможность создавать стандартные сайты ( разнообразие которых будет расти ), то это оч сильно усилит присутствие MODX на рынке.

              Главное интерент-магазин, услуги и блог полноценный сделайте в заготовках.
                Николай Хохлунов
                09 августа 2021, 15:43
                0
                Да в заготовках все это будет, вернулись к компоненту спустя долгое время)
                  Дима Сайт old см. профиль
                  27 апреля 2022, 02:20
                  0
                  @Николай Хохлунов, здравствуйте. Как можно записаться на бета-тест билдера?
                    Николай Хохлунов
                    12 июня 2023, 11:10
                    0
                    Добрый день, запустили бетку modstore.pro/packages/sites-themes/prolektsitebuilder
                      Александр Туниеков
                      13 июня 2023, 12:05
                      0
                      Хм… я как-то ожидал конструктор сайтов как тильда. Установил и блоки натыкал на сайте. Но задача конечно сложная… Вообще даже не тестировал. А привязка конкретно к блогу, интернет-магазину жесткая? Произвольный сайт из блоков можно собрать? Например сообщество MODX или сообщество майнкрафт?
                        Николай Хохлунов
                        13 июня 2023, 12:11
                        0
                        Добрый день, спасибо за тест
                        1. К тильде возможно придем если экономически целесообразно будет
                        2. Можно собирать любую структуру, не обязательно то что заготовлено
                          Александр Туниеков
                          13 июня 2023, 12:17
                          0
                          А как это может быть монеторизовано. За эксклюзивные блоки и темы оплата?
                            Николай Хохлунов
                            13 июня 2023, 12:46
                            0
                            Возможно за сборки, может еще как то, пока не решили, тестируем)
                            Андрей Шевяков
                            13 июня 2023, 12:18
                            0
                            Добрый день!
                            А есть где почитать как этим пользоваться?

                            Лицензия почему то не подтянулась, хотя в настройках все есть:




                            Не понятно дальше как пользоваться этими шаблонами, которые есть в Списке билдов.

                            Все на тесте развернул, могу дать доступ посмотреть, может есть ошибки какие то?
                              Николай Хохлунов
                              13 июня 2023, 12:48
                              0
                              Добрый день, готовим материал с подробным описанием. Напишем вам в ВК, который указан в профиле, что бы помочь
                  ruslan
                  08 июля 2023, 12:41
                  0
                  добрый день
                  компонент нельзя загрузить с репозитория
                    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
                    25