Подпишитесь на рассылку «Точки роста»
eng
image
Подписаться
Заказать звонок
Заказать демо
Чат

«Системные Технологии» переходят на модульный фронтенд

Рубрика:Спецпроект
Дата публикации: 26 Октября 2018
Автор:Валерий Поздняков


Новый архитектурный подход к веб-разработке: зачем он нужен и что изменится для заказчиков.

«Системные Технологии» переходят на модульный фронтенд

Компания «Системные Технологии» внедряет новую архитектурную концепцию для разработки клиентской части веб-приложений. На новом фронтенде уже сделаны «ST Портал продуктов», «ST Супервайзер», «ST Телеселлер» — составные части «ST Чикаго Веб».

Я инженер-программист в «Системных Технологиях», и разрабатываю ту часть веб-приложений, с которыми взаимодействуют конечные пользователи. Она называется клиентская часть или фронтенд. Помимо фронтенда существует еще бэкенд — серверная часть.

Веб — это будущее инструментов для бизнеса. Преимущества очевидны: во-первых, веб-приложения всегда под рукой, во-вторых, не нужно задумываться об обновлениях — открывая сайт, мы всегда работаем с последней версией, в-третьих, к сайту можно быстро и просто получить доступ с телефонов, планшетов, часов, телевизоров — был бы браузер.

Мы создаем и развиваем веб-продукты для разных ролей в бизнесе. Решения эволюционируют, и потребности пользователей различных приложений начинают пересекаться, появляется схожий функционал, который реализован в разных местах неодинаково. Со временем функционала становится много, также, как и пересечений. Возникают сложности.

image
Валерий Поздняков представляет «Модульный фронтенд» на конференции SFA-2018

Поэтому в 2017 году «Системные Технологии» решили реализовать новую архитектурную концепцию — единый модульный фронтенд. Мы за год переписали наши веб-продукты и разбили функционал на модули. Каждый модуль отвечает за конкретный набор бизнес-функций от начала до конца, то есть является полнофункциональным сам по себе. Все модули базируются на единой платформе и взаимодействуют между собой через неё. Платформа отвечает за общие зависимости, выступает посредником между модулями, реализует в себе общие базовые вещи, например, аутентификацию.

image

Плюсы

  • При модульном подходе на создание нового функционала и прототипов уходит меньше времени, так как можно использовать уже реализованные вещи. Ведь все находится в единой кодовой базе и использует единые технологии.
  • Подход повышает качество ПО. Ведь общие модули (пусть и в составе различных продуктов) использует большее количество клиентов. Это даёт обильную обратную связь, обеспечивает качество и надёжность. Если исправляется ошибка, исправление попадает ко всем клиентам, которые используют модуль (даже если он находится в составе разных продуктов).
  • За счёт использования одних и тех же модулей в разных продуктах автоматически обеспечиваются единые интерфейсные подходы. Это означает, что не надо привыкать к новому дизайну, стиль взаимодействия унифицирован.
  • Возможность индивидуальной доработки в «ST Чикаго веб». Теперь мы можем делать интерфейсные индивидуальные доработки в виде модулей.
Читайте также:
«ST Телеселлер»: пора звонить в точки

Пример приложения, построенного на модулях

Возьмем простой кейс — планирование и оценка обучения сотрудников. И создадим рабочее место для обучающего сотрудника. Ему необходимо назначать темы обучения, смотреть результаты в виде KPI-отчета и оценивать документы, созданные персоналом во время прохождения курса.

Шаг 1. На платформе «ST Веб» добавляем название приложения и фоновую картинку.

image

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

image

При старом подходе на этот этап нужно было бы потратить пару дней на разработку, настройку инфраструктуры, стабилизацию. И то получился бы только прототип, с которым пришлось бы ещё повозиться в будущем. Сейчас это занимает 15 минут. Все равно что выпить чашку кофе.

Шаг 2. Добавляем модуль назначения обучения — это индимодуль, решающий специфический кейс бизнес-процесса. Тут уже есть список сотрудников, возможность назначения обучения с выбором темы и даты.

image

Опираясь на реализованные вещи, нам не надо придумывать взаимодействие и разрабатывать заново распространенные интерфейсные блоки. Все за счет унифицированного дизайна и стиля взаимодействия.

Шаг 3. Теперь добавим готовый модуль для просмотра документов. Это общий модуль, но с предварительно настроенными фильтрами для просмотра документов выбранных сотрудников.

image

Шаг 4. Добавим пару ссылок на памятку и справку, и все, простое рабочее место готово. Тестируем, собираем, устанавливаем.

image

При прежнем подходе реализация клиентской части заняла бы около 60 часов. При новом — 16. Конечно, так будет не всегда. Это тот счастливый случай, когда все необходимые блоки для сборки есть в наличии. При создании сложных рабочих мест какие-то блоки придётся создавать с нуля. Однако уже многие блоки готовы, и список готовых частей постоянно пополняется.


Вам также могут быть интересны статьи: