Новая версия сайта Почта Банка

Клиент - Почта Банк

Задачи проекта:

Редизайн сайта

Внедрение современного быстрого стека на фронте

Смена Платформы на 1С-Битрикс

Развертывание облачной архитектуры

Создание инструментов для удобного управления гипотезами маркетинга.

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

Заказчик уже на уровне выбора подрядчика понимал, что разработка будущего проекта будет вестись на базе 1С-Битрикс, опираясь на преимущества этого решения:

большое количество подрядчиков, работающих с этой системой;

широкий функционал, закрывающий многие задачи клиента “из коробки”;

отличная готовая админка, привычная менеджерам.

В архитектуру сайта Почта Банк заложили Next.js. Этот фреймворк дает максимальное покрытие кейсов производительности из коробки и все ее релизы заточены на улучшение. Работающий на базе react и TypeScript, Next.js делает разработку эффективной, гибкой и легкой для дальнейшего развития.

Next.js обеспечил для проекта точки роста по производительности:

- Сжатие и минификация через самые современные инструменты.

- Модульная архитектура JS позволяет легко делать динамические и «ленивые» подгрузки кода, не изобретая своих велосипедов.

- TreeShaking для минимальной загрузки кода на проект.

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

- Динамические шрифты для ускорения загрузку страницы.

- Переходы между страницами без перезагрузки всего приложения (SPA)

- Автоматический gzip компрессор статики

- Удобное управление приоритетами загрузки third party скриптов

- Свой статический кеш страниц.

Помимо жестких требований к скорости работы фронта, также нужно было сохранить дружелюбность нового сайта к SEO. Есть миф, что React и SEO плохо дружат. На самом деле технология SSR полностью закрывает этот вопрос. Она позволяет отдавать скомпилированный HTML SEO-роботам. Опыт и экспертиза команды «Вебпрактик» также подтверждают, что проекты на базе React из различных сфер отлично залетают в топы поисковых выдач. А Google большое значение придает еще и производительности frontend-части проекта.

Использовали React, чтобы повысить производительность создания и развития проекта. Этот подход позволяет отдать часть работы бэкендеров на клиентское приложение (теперь бэкенд не отвечает за шаблоны). Но это только улучшает процесс коллаборации внутри команды и задает четкие линии ответственности.

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

Основные требования

- Наличие визуального конструктора блоков.

- Библиотека блоков

- Наличие параметризации блоков

- Возможность в некоторых случаях вкладывать одни блоки в другие

- Зависимость блоков, страниц от геолокации

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

- Версионирование страниц и блоков, чтобы сохранялась история изменения и возможность откатить изменение.

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

Так как основная разработка велась на React, то часть требований по конструктору сразу закрыл open source инструмент tina.io. Он позволил на современном и удобном стеке реализовать визуальное редактирование блоков, их состав, структуру и порядок.

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

Нативный функционал Битрикс легко интегрировался с инфоблоками и отлично закрыл этот кейс.

В проекте мы использовали современный фронтенд на базе React, а от бэкендеров требовалось на базе Bitrix Framework создать api и отдать его команде фронтенда.

Для обмена контрактом мы использовали стандарт OpenApi. Специально для Битрикс написали код, из которого генерируется конфиг (и выложили код в open source). Пакет также поставляет SwaggerUI для упрощенного тестирования. Как мы строим API Based подход на Bitrix Framework, рассказываем на PHP конференции.

Для миграций использовали phinx, а консольные команды писали на базе symfony/console.

В качестве баз данных мы использовали репликацию на базе Mysql как сервис Яндекс. Облака. Качественная оркестрация этого сервиса позволяет при сбое в master почти моментально переключить трафик на slave, который становится мастером в автоматическом режиме.

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

Команда devops-инженеров «Вебпрактик» помогла развернуть отказоустойчивое решение в Яндекс.Облаке, которое стало практически стандартом для российского финансового сектора.

Задачи масштабирования и отказоустойчивости решили посредством построения кластера на базе Kubernetes. Это система с открытым исходным кодом для автоматизации развертывания, масштабирования и управления контейнерными приложениями.

Для повышения отказоустойчивости проекта внедрили умный кеширующий слой Varnish. Это помогло снизить нагрузку на основной сайт, уменьшить объем используемых ресурсов и получить экономический профит.

Для решения задач управления трафиком (таймауты, повторные попытки, балансировка нагрузки) и улучшенной наблюдаемости (трассировка, мониторинг, логирование) в качестве Ingress контроллера внедрили Istio.

В качестве мониторинга использовали Prometheus для сбора метрик и Grafana для удобной визуализации и построения дашбордов. Логирование закрыли стандартным ELK стеком. Для мониторинга исключений на frontend и backend мы внедрили Sentry.

Для облегчения работы команды с релизами использовали ChatOps на базе Telegram. Можно выполнить разные сценарии через команды, не подключаясь к кластеру. Туда же мы получаем все алерты от prometheus и sentry.

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

В качестве приемочных автотестов использовали популярный framework на TypeScript: Playwright (Open source инструмент от Microsoft). Мы интегрировали автотесты в Gitlab CI для улучшения процессов развития проекта при внесении изменений. Написанные тесты на TypeScript в теории могут поддерживать и frontend-разработчики. Это удобно, когда QA и тестировщики пишут на одном языке.

Мы постарались не допустить ошибок предыдущего продукта и поддерживаем основную документацию в идеологии docs-as-code, используя open source инструмент docusaurus.

Новый сайт Почта Банка — уникальное в своем роде техническое решение, в котором мы показали, что можно запускать современный и качественный проект на базе 1С-Битрикс, интегрируя в него лучшие отраслевые решения и передовые технологии. В настоящее время команда «Вебпрактик» продолжает развитие сайта pochtabank.ru.