УДК 004

Исследование, анализ и реализация метода оптимизации загрузки ui списков в ecommerce платформе Magento

Копылов Денис Валерьевич – аспирант Института компьютерных технологий и информационной безопасности Инженерно-технологической академии Южного федерального университета.

Аннотация: В рамках данной статьи рассматриваются основные способы построения списков в административной панели Magento и способы оптимизации загрузки UI списков. Результатом работы является программная реализация предложенного метода оптимизации и анализ результатов.

Ключевые слова: magento, ui компоненты, ui listing, закладки, bookmark, оптимизация загрузки, фильтры.

Введение

Системы интернет-торговли (eCommerce системы) заняли прочную нишу в жизни каждого человека и являются одними из главных двигателей торговли. Согласно данным аналитических исследований в период с 2011 по 2021 год, объем онлайн продаж в России увеличивался в среднем на 31% [1]. Диаграмма, отражающая количество продаж и динамику роста, представлена на рисунке 1.

image1

Рисунок 1. Диаграмма количества и динамики роста интернет-продаж в России за период с 2011 по 2021 годы.

Одним из передовых решений в области интернет-торговли является платформа Magento (Adobe Commerce). В данной статье рассматривается версия платформы 2.x, поэтому в дальнейшем при использовании слова Magento будет подразумеваться Magento 2.x. Данная платформа входит в 3-ку самых популярных систем интернет-коммерции и является неоспоримым лидером среди open-source решений при разработке и управлении интернет-магазинами [2]. Неоспоримым преимуществом данной платформы является открытость исходного кода и обширное сообщество разработчиков, развивающих и улучшающих данную платформу.

Исследование основных способов построения списков в административной панели Magento

Существует 2 основных способа построения списков в административной панели Magento:

  • Построение списков на основе блоков \Magento\Backend\Block\Widget\Grid\Container и \Magento\Backend\Block\Widget\Grid.
  • Построение списков на основе UI компонентов.

Первый способ не будет рассматриваться в данной статье, т.к. является устаревшим и не рекомендуется для использования.

Рассмотрим второй способ более подробно. UI компоненты предназначены для простой и гибкой визуализации пользовательского интерфейса. Другими словами, UI компоненты используются для представления отдельных элементов пользовательского интерфейса, таких как списки, кнопки, диалоговые окна и т.д [3]. В Magento представлено более сотни модулей, которые используют UI компоненты, и практически каждый из которых не обходится без использования списков.

UI компоненты представляют собой комбинацию:

  • XML схема - описывает структуру и конфигурацию UI компонента.
  • JavaScript класс, унаследованный от одного из базовых классов UI framework UIElement, UIClass или UICollection и содержащий логику UI компонента.
  • HTML template.

Благодаря данной структуре построения UI компонентов, логике объединения конфигураций из разных модулей и системе модификаторов (modifiers), все компоненты являются очень гибкими и могут быть легко расширены или изменены из разных модулей без необходимости переписывания исходных классов.

UI списки представляют собой базовый UI компонент включающий в себя ряд дочерних UI компонентов таких как:

  • фильтры (filters);
  • пагинацию (pagination);
  • колонки (columns);
  • массовые действия (massaction);
  • закладки (bookmark) и др. [4].

Стоит отдельное внимание уделить закладкам, т.к. они напрямую влияют на процесс загрузки UI списков. Закладки представляют собой UI компонент, который отвечает за хранение активного и измененного состояния списка. Данные состояния включают в себя:

  • примененные фильтры;
  • положение столбцов;
  • примененную сортировку;
  • нумерацию страниц и т.д.

Состояния списков хранятся в БД в таблице ui_bookmark.

Анализ и реализация метода оптимизации построения списков с помощью UI компонентов

Процесс загрузки и построения списков с помощью UI компонентов проходит в 2 этапа:

  1. Базовая загрузка UI компонента списка во время отрисовки страницы при GET запросе на соответствующий контроллер.
  2. Загрузка данных с помощью ajax запроса на сервер и отрисовка сетки списка на основе полученных данных.

Данных подход подразумевает отправку двух запросов на сервер, каждый из которых загружает данные из БД при помощи класса коллекции (Collection). Коллекции представляют собой специальных класс позволяющий:

  • получить несколько строк из таблицы;
  • объединять данные из нескольких таблиц;
  • фильтровать данные на уровне БД;
  • группировать данные на уровне БД и т.д.

Специфика реализации коллекций подразумевает выполнение дополнительных манипуляций с полученными данными и создания на их основе объектов классов моделей (Models).

При этом первый запрос не производит никаких дополнительных манипуляций, а полученные данные не отрисовываются на странице. Далее, если конфигурация UI списка подразумевает использование закладок, извлекается текущее активное состояние UI списка и отправляется ajax запрос на сервер с текущим состоянием в качестве параметров. На основе параметров из запроса на коллекцию накладываются соответствующие фильтры, применяется сортировка, выбирается срез данных на основе активной страницы. Упрощенная диаграмма последовательности представлена на рисунке 2.

image2

Рисунок 2. Упрощенная диаграмма последовательности загрузки UI списков.

Таким образом можно сделать вывод, что подход с использованием двух запросов на сервер является узким местом построения UI списков и увеличивает время конечной загрузки и отрисовки страницы минимум в 2 раза.

Одним из способов оптимизации построения UI списков является изменение логики построения и загрузки компонентов и данных. Использование одного запроса для формирования конфигурации UI компонента и первоначальной загрузки данных позволит избавиться от избыточного ajax запроса, что в свою очередь ускорит загрузку страницы и снизит нагрузку на сервер. Упрощенная диаграмма последовательности после оптимизации представлена на рисунке 3.

image3

Рисунок 3. Упрощенная диаграмма последовательности загрузки UI списков после оптимизации.

Результаты

На основе проделанной работы, описанной в данной статье, можно выделить следующие результаты:

  1. проведен анализ существующих решений построения списков в Magento;
  2. предложено решение оптимизации построения списков на основе UI компонентов;
  3. достигнута цель ускорения загрузки страницы с UI списком за счет сокращения количества запросов на сервер;
  4. снижена нагрузка на сервер за счет сокращения количества запросов;

Так же стоит отметить, что полученные результаты нашли отражение в качестве пул реквеста (Pull Request) в официальный репозиторий Magento для последующего внедрения в ядро Magento Open Source [5].

Список литературы

  1. Российский eCommerce между весной и летом 2022 г. // Data Insight URL: https://datainsight.ru/sites/default/files/Ecommerce_in_Russia_between_spring_and_summer_2022.pdf (дата обращения: 28.08.2022).
  2. Magento Open Source - software that delivers basic eCommerce capabilities to build a unique online store from the ground up. // Adobe URL: https://business.adobe.com/products/magento/open-source.html (дата обращения: 28.08.2022).
  3. Introduction to UI components // Commerce Frontend Development Guide URL: https://developer.adobe.com/commerce/frontend-core/ui-components (дата обращения: 28.08.2022).
  4. Listing (grid) component // Commerce Frontend Development Guide URL: https://developer.adobe.com/commerce/frontend-core/ui-components/components/listing-grid/ (дата обращения: 28.08.2022).
  5. Pull Request в официальный репозиторий Magento Open Source с реализацей отимизации загрузки UI списков // Github URL: https://github.com/magento/magento2/pull/32090.

Интересная статья? Поделись ей с другими: