Новая версия сайта Почта Банка
Интересный и архитектурно уникальный проект с интеграцией конструктора сайта на React в коробочное решение 1С-Битрикс.
Отрасль
Финтех
Услуги
Разработка, техническая поддержка
Технологии
PHP, Bitrix Framework, Nextjs, React, TypeScript, Kubernetes, Yandex Cloud, Tina.io
Почта Банк
pochtabank.ruПервый и единственный почтовый банк страны. Основные направления деятельности: кредитование физических и юридических лиц, инвестиционные продукты, услуги для бизнеса и финансовых организаций.
Победитель Workspace Digital Awards-2023 в категории «Лучшие сайты для финансовой сферы»
Цель
Перенести сайт крупного банка на новую платформу и повысить его отказоустойчивость
Описание проекта
Разработка сайта крупного банка — это вызов и для заказчика, и для разработчиков. Нужно учесть много нюансов: тяжелый функционал, максимальная безопасность, высокая скорость работы. Расскажем, как создавали уникальное техническое решение на базе 1С-Битрикс, с чем пришлось столкнуться, чтобы в сверхсжатые сроки запустить совершенную новую версию сайта одного из крупнейших российских банков.
Задачи
1.
Редизайн проекта.
2.
Внедрение современного быстрого стека на фронте.
3.
Смена Платформы на 1С-Битрикс.
4.
Развертывание облачной архитектуры.
5.
Создание инструментов для удобного управления гипотезами маркетинга.
В больших корпорациях не всегда получается быстро принимать инновационные решения. Идея создания новой версии сайта созревала несколько лет. В это время у старой версии было несколько системных проблем, которые нужно было решить:
серьезные ошибки в оптимизации мета-тегов и заголовков h1;
старый «движок» на базе C# делал поддержку проекта дорогой и не оперативной;
большое количество накопившегося технического долга и недостаточная документируемость проекта;
архитектура решения, которая, как часто это бывает в процессе развития, уже не позволяла гибко решать текущие задачи.
Старый движок делал поддержку проекта дорогой и не оперативной
С#
Скорость и современный фронтенд
Быстродействие современного сайта чаще обусловлено скоростью загрузки проекта в браузере, а не скоростью ответа бэкенда. Поэтому в архитектуру сайта Почта Банк заложили Next.js. Этот фреймворк дает максимальное покрытие кейсов производительности из коробки и все ее релизы заточены на улучшение. Работающий на базе react и TypeScript, Next.js делает разработку эффективной, гибкой и легкой для дальнейшего развития.
Новый технологический стек
1C-Bitrix
Next.js
React
Kubernetes
Next.js обеспечил для проекта точки роста по производительности:
сжатие и минификация через самые современные инструменты;
модульная архитектура JS позволяет легко делать динамические и «ленивые» подгрузки кода, не изобретая своих велосипедов;
TreeShaking для минимальной загрузки кода на проект;
динамическая адаптация изображений для разных устройств и форматов: закрывает всю матрицу пересечений браузер х формат х разрешение экрана;
динамические шрифты для ускорения загрузки страницы;
переходы между страницами без перезагрузки всего приложения (SPA);
автоматический gzip компрессор статики;
удобное управление приоритетами загрузки third party скриптов;
свой статический кеш страниц.
Самое главное что все перечисленное работает из коробки и почти не требует настройки. Да, все это можно делать и на JQuery/vanilla стеке, но это крайне неэффективно. Потребовалось бы написать определенное количество велосипедов и увеличить срок разработки проекта вместо того, чтобы использовать проверенный и популярный в мировой практике инструмент.
Помимо жестких требований к скорости работы фронта, также нужно было сохранить дружелюбность нового сайта к SEO. Есть миф, что React и SEO плохо дружат. На самом деле технология SSR полностью закрывает этот вопрос. Она позволяет отдавать скомпилированный HTML SEO-роботам. Опыт и экспертиза команды «Вебпрактик» также подтверждают, что проекты на базе React из различных сфер отлично залетают в топы поисковых выдач. А Google большое значение придает еще и производительности frontend-части проекта.
Помимо жестких требований к скорости работы фронта, также нужно было сохранить дружелюбность нового сайта к SEO.
Есть еще одно предубеждение, что проекты на React делать сложнее и для этого нужна большую команду. Но все зависит от задачи и опыта разработчиков. Практический опыт «Вебпрактик» по разработке сайтов крупным корпорациям показывает, что React повышает производительность создания и развития проектов. Этот подход позволяет отдать часть работы бэкендеров на клиентское приложение (теперь бэкенд не отвечает за шаблоны). Но это только улучшает процесс коллаборации внутри команды и задает четкие линии ответственности.
Итоговый набор ключевых инструментов front‑end части проекта
Тип
Инструмент
Комментарий
Front-End Framework/шаблонизатор
Next.Js/React
Самые популярные в своем классе инструменты в мире (npm trends)
Язык
TypeScript
Обеспечивает уменьшение количества ошибок на уровне разработки нежели просто JS
Сборка
SWC
Самый быстрый инструмент компиляции
Библиотека компонентов
StoryBook
Обеспечивает документацию компонентов, повышает переиспользуемость
Обеспечение качества кода
Eslint/Prettier
Позволяют команде писать код по принятым стандартам и не отклонятся от них. При помощи Husky разработчик не может отправить код оформленный не по стандарту
Итоговый набор инструментов
React
Storybook
Typescript
SWC
Eslint
Next.js
Новый дизайн сайта
Дизайн-систему новой версии сайта сделала команда агентства ДАЛЕЕ.
У коллег очень сильная UX-экспертиза в финтехе, и мы очень им благодарны за профессиональное и творческое сотрудничество. В процессе работы над проектом мы вместе разработали десятки макетов и решили много нестандартных интерфейсных задач.
У коллег очень сильная UX-экспертиза в финтехе, и мы очень им благодарны за профессиональное и творческое сотрудничество. В процессе работы над проектом мы вместе разработали десятки макетов и решили много нестандартных интерфейсных задач.
pochtabank.ru. Страница «Кредит наличными»
Контентная система управления и конструктор
В банке разветвленная оргструктура с десятком ответственных лиц, которые модерируют свой раздел сайта. Вдобавок к этому накладываются сложные бизнес-процессы согласования контентных изменений. Поэтому в техзадании заказчика изначально были достаточно широкие требования к системе управления и хранения контента. Фактически требовался версионированный конструктор, чтобы вносить изменения и делать деплой одной кнопкой.
В техзадании заказчика изначально были достаточно широкие требования к системе управления и хранения контента.
Основные требования
1.
Наличие визуального конструктора блоков.
2.
Библиотека блоков.
3.
Наличие параметризации блоков.
4.
Возможность в некоторых случаях вкладывать одни блоки в другие.
5.
Зависимость блоков, страниц от геолокации.
6.
Возможность править группы страниц, меняя конкретный блок сразу у всей группы.
7.
Версионирование страниц и блоков, чтобы сохранялась история изменения и возможность откатить изменение.
Для такого конструктора решили создать отдельную тестовую площадку, где все изменения контента можно просмотреть и перенести по согласованию на прод без участия разработчиков. Все исправления вносятся сразу в базу, поэтому отпала необходимость делать отдельный инстанс с переносом через git.
Так как основная разработка велась на React, то часть требований по конструктору сразу закрыл open source инструмент tina.io. Он позволил на современном и удобном стеке реализовать визуальное редактирование блоков, их состав, структуру и порядок.
Библиотеку блоков закрыл функционал Storybook, который обеспечил повышенную переиспользуемость и документированность компонентов. Структуру страниц, блоков построили на базе инфоблоков. Версионирование реализовали с помощью включенного функционала документооборота.
Нативный функционал Битрикс легко интегрировался с инфоблоками и отлично закрыл этот кейс.
Визуальный редактор контента
Tina.io
Api Based на базе Bitrix Framework
В проекте мы использовали современный фронтенд на базе React, а от бэкендеров требовалось на базе Bitrix Framework создать api и отдать его команде фронтенда.
Для обмена контрактом мы использовали стандарт OpenApi. Специально для Битрикс написали код, из которого генерируется конфиг (и выложили код в open source). Пакет также поставляет SwaggerUI для упрощенного тестирования. Как мы строим API Based подход на Bitrix Framework, рассказываем на PHP конференции.
Для миграций использовали phinx, а консольные команды писали на базе symfony/console. В качестве баз данных мы использовали репликацию на базе Mysql как сервис Яндекс. Облака. Качественная оркестрация этого сервиса позволяет при сбое в master почти моментально переключить трафик на slave, который становится мастером в автоматическом режиме.
Отказоустойчивость и масштабируемость сайта
Сайт банка — это высоконагруженный проект с ежемесячным трафиком около 5 млн пользователей. Поэтому основным требованием к инфраструктуре проекта была отказоустойчивость. При создании новой версии сайта Почта Банка решали задачу перехода на облачную архитектуру.
Команда devops-инженеров «Вебпрактик» помогла развернуть отказоустойчивое решение в Яндекс.Облаке, которое стало практически стандартом для российского финансового сектора.
Задачи масштабирования и отказоустойчивости решили посредством построения кластера на базе Kubernetes. Это система с открытым исходным кодом для автоматизации развертывания, масштабирования и управления контейнерными приложениями. Как PHP-приложение на примере Bitrix Framework можно разместить в Kubernetes, рассказываем в докладе на PHP митапе.
Смотрите запись нашего доклада на rndphp о реализации архитектуры данного проекта
Для повышения отказоустойчивости проекта внедрили умный кеширующий слой Varnish. Это помогло снизить нагрузку на основной сайт, уменьшить объем используемых ресурсов и получить экономический профит.
Система кеширования
Varnish Cache
Для решения задач управления трафиком (таймауты, повторные попытки, балансировка нагрузки) и улучшенной наблюдаемости (трассировка, мониторинг, логирование) в качестве Ingress контроллера внедрили Istio.
В качестве мониторинга использовали Prometheus для сбора метрик и Grafana для удобной визуализации и построения дашбордов. Логирование закрыли стандартным ELK стеком. Для мониторинга исключений на frontend и backend мы внедрили Sentry.
Для облегчения работы команды с релизами использовали ChatOps на базе Telegram. Можно выполнить разные сценарии через команды, не подключаясь к кластеру. Туда же мы получаем все алерты от prometheus и sentry.
Нагрузочное тестирование подтвердило достижение целевых показателей скорости ответа при целевом количестве посещений с запасом. Также тестировали стрессовые сценарии масштабирования кластера с помощью настроенных HPA политик. Это важно в период проведения рекламных акций, когда возникают пиковые нагрузки. Настроенные HPA политики позволяют схлопываться кластеру до минимальных ресурсов в облаке, потребляя наименьшее количество ресурсов.
Мониторинг
grafana
ELK
Prometheus
Sentry
Istio
Тестирование
В качестве приемочных автотестов использовали популярный framework на TypeScript: Playwright (Open source инструмент от Microsoft). Мы интегрировали автотесты в Gitlab CI для улучшения процессов развития проекта при внесении изменений. Написанные тесты на TypeScript в теории могут поддерживать и frontend-разработчики. Это удобно, когда разработчики пишут на одном языке.
Инструмент автоматизации тестирования
Playwright
Документация
Мы постарались не допустить ошибок предыдущего продукта и поддерживаем основную документацию в идеологии docs-as-code, используя open source инструмент docusaurus.
Новый сайт Почта Банка — уникальное в своем роде техническое решение, в котором мы показали, что можно запускать современный и качественный проект на базе 1С-Битрикс, интегрируя в него лучшие отраслевые решения и передовые технологии. В настоящее время команда «Вебпрактик» продолжает развитие сайта pochtabank.ru.
Ведение документации
Docusaurus
Команда
Иван Поддубный
CTO
Василий Кульков
руководитель отдела менеджеров веб-проектов
Александр Забанов
бэкенд-тимлид
Павел Воробьев
старший фронтенд-разработчик
1 менеджер проекта
5 бэкенд-разработчиков
5 фронтенд-разработчиков
3 QA-инженера
2 контент-менеджера
Команда заказчика
Никита Филиппов
Руководитель дирекции интернет продаж
Павел Куданкин
Руководитель направления веб-проектов
Артем Гусаров
Эксперт в направлении веб-проектов
Денис Корнеев
Веб-аналитик в центре аналитики веб-продаж
Клиент о нас
Вебпрактик» успешно создали новую версию сайта «Почта Банк». Был обновлен дизайн и разработана современная программная платформа, обеспечивающая интеграцию с внутрибанковскими и внешними системами.»
Павел Куданкин
Руководитель направления веб-проектов, Почта Банк
