Поддерживаем редизайн платформы автоматизированного маркетинга

Mindbox — облачная платформа по автоматизации маркетинга для клиентских компаний. Помогает контролировать рассылки, настраивать персонализацию и управлять лояльностью. Один из крупнейших B2B SaaS сервисов в России. Фактически, Mindbox снимает нагрузку с внутренних IT-систем и позволяет перенести сбор, хранение и управление клиентскими данными в облачную CRM-систему с удобным управлением.

В 2021 году сервис начал редизайн и обратился в Evrone в поисках специалистов, которые помогли бы усилить собственную команду на этом этапе. Нужны были люди, которые бы закрыли часть задач по разработке нового фронтенда на аутсорсе. В итоге команду сервиса пополнили три React-специалиста. На время проекта они стали полноценными членами команды с равным доступом к репозиториям и регулярными one-to-one встречами.

Микросервисы

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

В новой версии все иначе: фронтенд разделён на микросервисы, по сути за каждую страницу теперь отвечает отдельное приложение. Это позволяет делать независимые релизы, которые не ломают друг друга. Ими занимаются независимые команды, которые за счет меньшего количества кода и наполненности по фичам могут глубже погрузиться в процесс и делать работу очень качественно. 

Стек

Новый микросервисный фронтенд собран на webpack, сами сервисы реализованы на React. Кстати, в новой версии даже отказались от популярной связки React+MobX в пользу стандартного реактовского функционала. В качестве транспортного слоя между облаком и UI используется Apollo GraphQL.

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

Отчеты

Одна из больших задач, которую помогли реализовать наши специалисты, это отчёты по рассылкам, лояльности и подписчикам. После редизайна в сервисе появился новый функционал, поэтому стояла задача интегрировать большое количество новых фильтров, которые можно было бы быстро включать/выключать и сочетать между собой. Но главное, новые отчёты строятся в интерфейсе за секунды, исчезла необходимость ждать несколько часов. 

Например, новый отчёт по рассылкам отображает воронку показателей за выбранный период и помогает сравнить рассылки между собой. Новые фильтры помогают посмотреть данные по всем рассылкам сразу, по каждой рассылке отдельно или по группам, например, триггерным или рассылкам из определенной кампании. В отчёте видно, сколько писем дошли до адресата, сколько из них открыли, кликнули и какая часть в итоге привела к заказам. Видна информация о рассылке: тема письма, кампания, теги, контент. Поддерживается выгрузка данных отчетов в CSV.

Страница с данными клиента

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

Персональные рекомендации

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

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

Тесты

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

Итоги

Что мы сделали помимо перечисленных задач:

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

Основные работы по обновлению продукта уже позади, поэтому Mindbox постепенно возвращается к текущей поддержке функционала силами инхаус разработчиков. Проект активно готовится к выходу на зарубежные рынки, и постоянно разрабатывает новые возможности для клиентов. 

Если вам нужна квалифицированная помощь в большом проекте, напишите нам. Мы подберем сотрудников под ваши задачи и поможем наладить работу в удобном для вас формате. Заполните форму внизу, и наши менеджеры вскоре свяжутся с вами.