Билдер сайтов на 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 — Разработкой занимался Павел Гвоздь
Николай Хохлунов
15 июля 2020, 16:39
modx.pro
3
895
+13

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

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 с выбором внешнего вида почти каждого элемента. А тут еще и верстка правильная и сам базовый шаблон интересный. Под свои проекты (не как разработчик) я бы использовал, особенно если со всем этим будут идти и работать еще какие-нибудь нестандартные фичи (типа оптовых цен и тп).
          Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
          6