За последние 10 лет разработка дистанционного банковского обслуживания принципиально изменилась. Сейчас на переднем плане скорость и простота: мгновенные платежи, понятные шаги без лишних экранов, умные подсказки и одинаковое удобство на сайте и в мобильном приложении. Безопасность стала многоуровневой: биометрия (отпечаток, лицо), подтверждения в два шага и фоновые проверки на мошенничество. Появилась удаленная идентификация — возможность открыть счет и получить карту без визита в отделение, а также новые сценарии вроде оплат по QR и бесконтактных платежей. Важными деталями современной архитектуры ДБО стали HTML5 и React Native, о которых мы расскажем далее.
Из чего состоит архитектура приложений
Архитектура мобильных и веб‑приложений обычно делится на три части: фронтенд, бэкенд и API. Фронтенд — это «лицо» приложения, то, что видит пользователь: экраны, кнопки, поля ввода. Бэкенд — это «мастерская» за кулисами, где хранятся данные и выполняются правила: какие действия доступны пользователю, как провести платеж, как посчитать итог и т.д. API — это «окно общения» между фронтом и бэком, набор договоренностей о том, какие запросы и в каком формате можно задать, и какие ответы система должна вернуть. Вместе это похоже на магазин: витрина, склад с учетной системой и окошко, через которое витрина запрашивает то, что нужно.
Фронтенд отвечает за удобство и ясность: показывает баланс и историю операций, помогает заполнить форму без ошибок, подсказывает, если чего‑то не хватает, и аккуратно обновляет данные. Его задача — сделать так, чтобы человек быстро понял, что происходит, и уверенно завершил действие.
Бэкенд работает на стороне сервера и заботится о правильности и безопасности: проверяет, имеет ли пользователь право на действие, хранит информацию о счетах и платежах, следит, чтобы ни одна операция не потерялась и не дублировалась.
Благодаря такому разделению интерфейс можно улучшать, не ломая внутреннюю логику, а сервер — развивать, не меняя привычный для людей внешний вид.
HTML5: новый стандарт современной веб-разработки
В разработке веб-приложений основой остается HTML, который описывает структуру страницы: заголовки, формы, таблицы, кнопки. Он задает «скелет» интерфейса, благодаря чему браузер понимает, где форма для перевода, где блок с выпиской, а где видеоинструкция. Плюс HTML в том, что это открытый стандарт: страницы одинаково корректно отображаются в разных браузерах, а пользователи с ограничениями по зрению или моторике могут легче взаимодействовать с сайтом — экранные дикторы и навигация по клавиатуре работают хорошо, когда структура страницы описана семантически.
С выходом HTML5 веб-технологии вышли на новый уровень. Появились семантические теги, которые позволяют поисковикам более точно подбирать ссылки под запрос. Загрузка страницы стала быстрее, а сам язык оброс важными программными интерфейсами. В браузере появились нативные возможности для работы с мультимедиа: аудио и видео без плагинов, сложная графика и трехмерные диаграммы прямо на странице — например, графики расходов и курсы валют можно строить быстро и плавно, без тяжелых библиотек.
HTML5 принес новые возможности и для работы в офлайне. С помощью локальных хранилищ можно сохранять данные на устройстве, а фоновые процессы браузера позволяют использовать офлайн-режим и уменьшать нагрузку на сервер за счет кэширования данных. Также в HTML5 появилась поддержка двусторонней связи с сервером, что открыло возможность мгновенных уведомлений: как только банк проводит операцию, фронтенд ее получает и показывает пуш‑событие на веб‑странице.
Новые возможности мобильных приложений с React Native
Веб закрывает десктоп и часть мобильных сценариев, но главным каналом для розничного клиента остается мобильное приложение. Здесь все чаще используется React Native — технология, которая позволяет писать мобильные интерфейсы на JavaScript или TypeScript и собирать их в приложения для iOS и Android. React Native использует встроенные компоненты платформы — кнопки, списки, жесты — и мост для интеграции с системными функциями, так что пользователь получает скорость и плавность как в полностью нативном приложении, а команда разработки работает с единым стеком и готовой логикой.
Новая архитектура React Native сокращает накладные расходы на взаимодействие между JavaScript и нативным кодом, что особенно заметно в сложных экранах: длинные списки операций, бесшовная прокрутка, «живые» диаграммы и переходы между вкладками работают плавно даже на устройствах среднего уровня. Движок Hermes уменьшает время запуска, а библиотека анимаций Reanimated позволяет делать сложные анимации без потери кадра.
Так можно сохранять единую бизнес‑логику для обеих платформ, а платформенно‑зависимые детали — платежные листы, биометрию, камеры, пуш‑уведомления — делегировать тонким нативным модулям.
React Native в ДБО
React Native идеально подходит именно для архитектуры ДБО. Во‑первых, единый код означает более согласованный опыт. Банковское приложение на iOS и Android ведет себя одинаково, так проще обучать пользователей и сопровождать дизайн‑систему. Во‑вторых, скорость изменения важна для рынка: промо‑офер, новый тип вклада, обновленный сценарий оплаты — все это можно делать быстрее, когда большая часть логики общая. В‑третьих, React Native хорошо вписывается в микросервисный бэкенд: фронтенд общается с API‑шлюзом, получает данные в формате JSON, применяет кеширование, а критические части, вроде криптографии или бесконтактной оплаты, остаются в нативном коде и проходят отдельную сертификацию.
При этом вопрос безопасности решается не на уровне фреймворка, а на уровне архитектуры. Важно шифровать хранилище, тщательно работать с токенами и сессиями, использовать защищенные каналы и следить за целостностью приложения. Инструменты экосистемы React Native помогают встроить все это: есть проверенные модули для безопасного хранилища ключей, биометрии, интеграции с системными менеджерами учетных данных. В сочетании с серверным подтверждением операций, защитой от интернет-мошенничества и поведенческой аналитикой это дает тот уровень защиты, который ожидается от банка.
Реализация ИИ с помощью React Native и HTML5
Сегодня ДБО уже немыслим без ИИ — и здесь HTML5 с React Native открывают дополнительные возможности. На стороне клиента это, прежде всего, интерфейсы и локальные вычисления.
С помощью WebAssembly можно запускать модели машинного обучения прямо в браузере, чтобы оценивать риски по правилам, распознавать текст с чеков или классифицировать расходы по категориям. Это позволяет реализовать быстрые, приватные сценарии: подсказки по заполнению форм, проверка качества фото паспорта перед загрузкой, локальная категоризация транзакций без отправки сырых данных в облако.
В мобильных приложениях React Native дает доступ к нативным средствам машинного обучения. На iOS это Core ML, на Android — ML Kit; через мост можно интегрировать предварительно обученные модели для распознавания документов, офлайн‑перевода или подсказок в чате. Часть моделей может работать прямо на устройстве, что уменьшает задержки и повышает конфиденциальность. Для более тяжелых задач — персональные рекомендации, механизмы защиты от мошенничества в реальном времени, диалоговые ассистенты — используется серверная инференс‑платформа. Фронтенд отправляет минимально необходимые признаки через безопасный API, получает ответ и обновляет интерфейс без лишних перерисовок.
HTML5 помогает и с мультимодальными сценариями. Доступ к камере и микрофону через MediaDevices позволяет организовать видеозвонок с оператором или снять документы для скрининга клиента прямо из браузера. Такие функции становятся основой цифровых отделений, где клиент может пройти идентификацию и открыть продукт дистанционно. На мобильных устройствах аналогичные возможности предоставляются нативно, и React Native подключается к ним через модули, обеспечивая общую логику проверки и подсказок.
Есть и архитектурный аспект интеграции ИИ: интерфейс отделяют от интеллектуальных сервисов через хорошо спроектированные API. Это значит, что в мобильную и веб-разработку встраивается только необходимый уровень интеллекта — подсказки, локальные проверки, предварительная валидация — а тяжелые вычисления и обучение остаются на стороне платформы, где можно обеспечить масштаб и мониторинг качества. HTML5 и React Native обеспечивают быстрые итерации на уровне интерфейса, а микросервисы — гибкость на уровне логики и данных. В сумме это позволяет развивать продукты с участием ИИ без риска для стабильности.
HTML5 и React Native закрывают ключевой компромисс между скоростью развития и качеством пользовательского опыта. HTML5 дает нам зрелый, безопасный, доступный веб, который работает быстро, офлайн и интегрируется с мультимедиа и реальным временем. React Native приносит нативную плавность и глубокую интеграцию с устройством при высокой скорости поставки функций и исправлений. Вместе они позволяют строить фронтенд‑слой ДБО, который одинаково хорошо чувствует себя в браузере и на смартфоне, разделяет логику с бэкендом через чистые API и готов к встраиванию интеллектуальных функций.
