Разработка компонента для MODX Revolution без использования Ext JS

Предисловие ​

MODX Revolution использует JavaScript библиотеку Ext JS версии 3.4 для построения интерфейса панели управления (ПУ). Это привело к тому, что разработчики тех компонентов для которых необходим CMP (Custom Manager Pages), т.е. отдельные страницы для управления и предоставления функционала или для расширения существующих страниц и функционала, также используют выше названную библиотеку. У такой реализации есть несколько преимуществ:

• Малый размер самого компонента, т.к. нет необходимости подключать сторонние фреймворки и библиотеки
• Легкая читаемость кода компонентов. Если у вас есть знания библиотеки, то вы достаточно быстро можете разобраться в работе того или иного компонента и в случае необходимости изменять или расширять их функционал
• Избежание конфликтов между фреймворками. В теории, если разные компоненты на одной странице ПУ MODX загрузять несколько библиотек, фреймворков и даже несколько версий одной и той же библиотеки, то конфликтов не избежать

Это не все преимущества, поэтому перейдем к недостаткам, точнее к одному конкретному, из уст разработчиков или тех кто хочет разработать компонент для MODX он звучит так: "Ext JS 3.4 устарел или я не хочу его использовать". Итак, я услышал и в этой статье покажу как можно разработать фронт компонента без Ext JS, вместо него будем использовать Vanilla JS.

Начало ​

Для примера я возьму за основу пакет modExtra, после того как мы настроем его как нам нужно (в документации на странице репозитория подробно описано как это сделать) нам необходимо удалить все js файлы и создать файл test.js в папке assets/components/modextra/js/mgr/, а содержимое будет такое:

modExtra.init = function() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', modExtra.config.connector_url + '?action=mgr/item/getlist');
  xhr.setRequestHeader('Powered-By', 'MODx');
  xhr.setRequestHeader('modAuth', MODx.siteId);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      try {
          var data = JSON.parse(xhr.responseText);
          console.log(data);
      } catch(err) {
          console.log(err.message + ' in ' + xhr.responseText);
          return;
      }
    }
  }
  xhr.send();
}

Ну или используя последние нововведения в ECMAScript:

modExtra.init = () => {
  fetch(modExtra.config.connector_url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      'modAuth': MODx.siteId
    },
    credentials: 'include',
    body: `action=mgr/item/getlist&HTTP_MODAUTH=${MODx.siteId}`
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
}

Далее нам нужно внести некоторые правки в файл core/components/modextra/controllers/home.class.php, нас интересует строка 67 и его нужно заменить на следующую:

Ext.onReady(function() {modExtra.init();});

И в этом же файле в методе loadCustomCssJs нужно удалить все вызовы метода addJavascript и добавит загрузку нашего файла:

$this->addJavascript($this->modExtra->config['jsUrl'] . 'mgr/test.js');

Собираем наш пакет и открываем в браузере страницу нашего компонента и в консоли браузера мы увидим наши записи, которые нужно будет создать предварительно в БД.

Как это работает ​

Почти все компоненты в MODX работают одинаково, краткое описание:

• Отправляется запрос в коннектор c параметрами. Обязательным является параметр action в котором относительный путь до нужного процессора
• Коннектор запускает процессор который делает запросы в БД, предварительно совершив много полезных и нужных действий, например, проверяет права пользователя на совершаемое действие
• Коннектор возвращает данные

Заключение ​

Разработать компонент без использования Ext JS для MODX Revolution можно. Для некоторых этот факт был известен хотя бы потому что уже существуют такие компоненты, которые используют Angular, jQuery и др. фреймворки и библиотеки, например такие как: modSizeControl, modxNotes и TVTable, две были разработаны, а последний был модифицирован и поддерживается нами.