Какой фреймворк использует сбербанк

Какой фреймворк использует Сбербанк

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

Сбербанк использует фреймворк Angular, разработанный компанией Google, в качестве основного инструмента для создания веб-приложений. Angular был выбран благодаря своим многочисленным преимуществам, таким как высокая производительность, гибкость и масштабируемость. Фреймворк позволяет разработчикам создавать сложные веб-приложения, которые могут работать на различных платформах.

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

Какой фреймворк использует Сбербанк

Vue.js – это прогрессивный JavaScript-фреймворк, который позволяет разрабатывать современные веб-приложения. Сбербанк выбрал Vue.js, потому что он обладает рядом преимуществ:

• Простота использования. Vue.js имеет простую и интуитивно понятную структуру, что упрощает процесс разработки и позволяет быстро создавать высококачественные приложения.
• Гибкость. Vue.js обладает гибкой архитектурой, которая позволяет интегрировать его в уже существующие проекты, а также масштабировать и расширять их без проблем.
• Высокая производительность. Фреймворк Vue.js оптимизирован для быстрого выполнения и обработки данных, что позволяет создавать отзывчивые и быстрые приложения.

Однако, помимо Vue.js, Сбербанк также использует и другие популярные фреймворки, такие как React.js и Angular. Это демонстрирует стремление компании использовать наиболее передовые и продвинутые инструменты для разработки своих продуктов.

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

Основной инструмент для разработки

Angular – это платформа для разработки веб-приложений, разработанная и поддерживаемая компанией Google. Он позволяет создавать эффективные и мощные приложения, основанные на модулярной архитектуре и компонентах.

Фреймворк Angular позволяет разрабатывать надежные и масштабируемые веб-приложения с использованием модулей, компонентов, сервисов, директив и других инструментов. Angular также предлагает удобную систему управления состоянием, а также поддерживает разработку с помощью TypeScript – типизированного суперсета языка JavaScript.

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

Во-вторых, Angular имеет большую и активную общественность разработчиков, которая постоянно обновляет и улучшает инструменты и функциональность фреймворка.

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

Важно отметить, что использование Angular позволяет Сбербанку разрабатывать высококачественные и современные веб-приложения, соответствующие самым строгим требованиям безопасности и производительности.

Какой фреймворк использует Сбербанк

Сбербанк — ведущий финансовый институт в России, который предлагает широкий спектр банковских услуг и технологических решений. Один из ключевых аспектов развития Сбербанка — использование современных технологий и фреймворков в разработке программного обеспечения. Чтобы оперативно реагировать на потребности клиентов и переходить на новый уровень взаимодействия с ними, Сбербанк активно внедряет инновационные решения и фреймворки в свою разработку.

Одним из основных фреймворков, которые использует Сбербанк, является Spring Framework. Этот фреймворк является одним из самых популярных в мире и широко применяется в разработке корпоративных веб-приложений. Spring Framework обладает мощными функциональными возможностями, такими как инверсия управления (IoC), внедрение зависимостей (DI), а также предоставляет модули для работы с базами данных, безопасности и другими областями разработки.

Примечательно, что Сбербанк активно участвует в развитии Spring Framework и является корпоративным спонсором этого проекта. Это свидетельствует о важности и значимости, которую Сбербанк придаёт этому фреймворку в своей разработке.

Кроме Spring Framework, Сбербанк также использует другие фреймворки, такие как AngularJS, React.js и Vue.js, которые являются популярными веб-фреймворками для разработки пользовательских интерфейсов. Они обеспечивают мощные инструменты для создания современных и отзывчивых веб-приложений.

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

Сбербанк и его выбор фреймворка

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

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

Сбербанк также использует другие фреймворки, такие как React и Vue.js, в зависимости от конкретных задач и требований проекта. Это позволяет банку быть гибким и эффективно реагировать на изменения в технологической среде.

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

Роль фреймворка в разработке крупной финансовой организации

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

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

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

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

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

Почему Сбербанк выбрал определенный фреймворк

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

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

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

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

Преимущества выбранного фреймворка для Сбербанка

Выбранный фреймворк предоставляет Сбербанку ряд важных преимуществ:

1. Высокая производительность

Фреймворк, используемый Сбербанком, был разработан с учетом требований к высокой производительности. Он оптимизирован для работы с большими объемами данных и обеспечивает быструю загрузку и обработку информации.

2. Масштабируемость

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

3. Безопасность

Фреймворк, используемый Сбербанком, обладает высоким уровнем безопасности. Он включает в себя механизмы защиты от различных атак и уязвимостей веб-приложений. Это позволяет Сбербанку обеспечить надежность и безопасность своих услуг для клиентов.

4. Разработка на одном языке

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

5. Поддержка от сообщества

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

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

Критерии выбора фреймворка Сбербанком

Сбербанк, будучи крупнейшим банком в России, имеет очень высокие требования к выбору фреймворка. При выборе фреймворка Сбербанк учитывает следующие критерии:

1. Безопасность: Фреймворк должен иметь надежные механизмы для защиты данных и борьбы с хакерскими атаками. Сбербанк использует множество методов для защиты от уязвимостей, таких как интеграция уровней безопасности и повышенное внимание к аутентификации и авторизации.
2. Масштабируемость: Учитывая огромный объем операций и клиентов, Сбербанку важно, чтобы фреймворк мог обрабатывать большие нагрузки и масштабироваться в зависимости от потребностей. Фреймворк должен иметь гибкую архитектуру и возможность работать в распределенной среде.
3. Производительность: Скорость и эффективность фреймворка являются ключевыми факторами при выборе Сбербанком. Фреймворк должен обеспечивать быструю обработку запросов и отзывчивость пользовательского интерфейса.
4. Модульность: Сбербанку важно иметь возможность легко добавлять и изменять функциональность фреймворка. Гибкость и расширяемость являются важными критериями при выборе фреймворка.
5. Поддержка сообщества: Сбербанк предпочитает использовать фреймворк, который имеет активное и профессиональное сообщество разработчиков. Это обеспечивает доступ к обновлениям, решению проблем и обмену опытом.

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

Детальный обзор фреймворка, используемого Сбербанком

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

Основными преимуществами фреймворка, используемого Сбербанком, являются:

• Высокая степень безопасности. Фреймворк предоставляет различные механизмы защиты от атак и уязвимостей, специфичных для банковской сферы.
• Поддержка различных языков программирования. Фреймворк позволяет разрабатывать приложения на разных языках программирования, что облегчает работу существующим командам разработчиков.
• Масштабируемость и производительность. Фреймворк способен обрабатывать большие объемы данных и обеспечивать высокую скорость работы приложений.
• Готовые компоненты и инструменты. Фреймворк предоставляет разработчикам набор готовых компонентов и инструментов, которые значительно упрощают разработку и обеспечивают высокую гибкость при создании приложений.
• Поддержка многоуровневой архитектуры. Фреймворк поддерживает многоуровневую архитектуру, что позволяет разрабатывать сложные системы с четкой структурой.

Фреймворк, используемый Сбербанком, является одним из ключевых компонентов их IT-инфраструктуры и является основой для создания новых и совершенствования существующих банковских продуктов.

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

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

SmartApp Framework для создания навыков семейства Виртуальных Ассистентов «Салют» на языке Python

License

sberdevices/smart_app_framework

Name already in use

• Local
• Codespaces

Use Git or checkout with SVN using the web URL.

Work fast with our official CLI. Learn more about the CLI.

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

SmartApp Framework

SmartApp Framework — это Python-фреймворк, который позволяет создавать смартапы для виртуальных ассистентов Салют.

Оглавление

Конфигурация

Фреймворк и смартапы

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

Виртуальный ассистент понимает текущие намерения пользователя и для каждой его реплики подбирает соответствующий запрос на выполнение (интент). Поведение смартапа для различных интентов описывается с помощью сценариев. Интенты и сценарии связываются через смартапы, написанные на SmartApp Framework.

Инструменты фреймворка

Фреймворк содержит следующие инструменты:

• инструменты для создания сценариев;
• решения для автоматического тестирования;
• демо-приложение для просмотра примеров реализации;
• готовые механизмы для слот-филлинга и извлечения сущностей из текста.

Рекомендованные требования

• Linux, Mac OS или Windows (необходима установка Conda).
• 512 МБ свободной памяти.
• Python 3.6.8 — 3.9.6.

Настройка фреймворка

Обновление фреймворка

Для перехода на новую версию фреймворка выполните в терминале следующие команды:

При переходе на версию фреймворка >=1.0.7.rc4 со старым смартапом необходимо в директории смартапа из файла static/.text_normalizer_resources/static_workdata.json удалить строки ‘Ё на Е’.

Установка фреймворка

Для установки фреймворка выполните в терминале следующую команду:

Создание проекта

Для создания проекта выполните в терминале следующую команду:

После этого в текущей директории появится каталог с проектом. Он уже содержит в себе всё необходимое для запуска минимального приложения, включая базовый сценарий hello_scenario. Описание сценариев и форм можно найти в <YOUR_APP_NAME>/static/references/.

Тестирование онлайн

Для тестирования онлайн вам понадобится мобильное приложение Сбер Салют или собственное устройство, на котором будет запускаться смартап. Для такого тестирования:

1. Запустите в терминале dev сервер:

1. Передайте в интернет порт. Для этого потребуется внешний IP-адрес. Если у вас его нет, воспользуйтесь специальными сервисами (например, Ngrok).
2. Зарегистрируйтесь в кабинете разработчика — SmartApp Studio.
3. Создайте в SmartApp Studio свой смартап.
4. Перейдите в настройки смартапа и укажите в поле «Настройки вебхука» адрес вашего сервера. Сохраните изменения.
5. Запустите свой смартап с помощью фразы «Запусти <имя приложения>».

В терминале должны появиться записи о входящем сообщении, а ассистент ответит приветствием согласно сценарию hello_scenario.

Тестирование офлайн

Ниже представлен пример команды для терминала при тестировании офлайн и пример ответа, который выводится на экране:

Документация

Вы можете ознакомиться с подробной документацией по работе со SmartApp Framework в справочнике разработчика.

Обратная связь

C вопросами и предложениями пишите нам по адресу developer@sberdevices.ru или вступайте в наш Telegram канал — SmartMarket Community.

About

SmartApp Framework для создания навыков семейства Виртуальных Ассистентов «Салют» на языке Python

Как работают приложения Сбербанк Онлайн: Workflow API и фрэймворки

Много кто пользуется приложением Сбербанк Онлайн, но немногие знают, как оно работает. Настало время приоткрыть завесу тайны – в этой статье мы расскажем о некоторых подходах, которые используем в разработке.

Здесь не будет биг даты, блокчейна, аджайла и другого рокет-сайенса. Зато будет описано API, на котором работают наши самые популярные приложения. Ценность этой статьи не в прорывных идеях, а в подходах и практиках, которые работают в большом приложении с одной из самых требовательных аудиторий.

Надеемся, что наш опыт поможет читателям сделать свой продукт лучше, а главное масштабируемым, потому что большинство шишек при разработке API мы уже поймали и исправили.

О чем пойдет речь

Мы расскажем, как в мобильном и веб приложениях Сбербанк Онлайн работают платежные сценарии, а именно про API между приложениями и сервер-сайдом.

Почему фокус на API? Все просто – это фактически единственный мостик, который соединяет клиентские приложения и бэкенд. Если проект небольшой, то мы можем легко менять API и переписывать под него приложения. Но если проект масштабный (такой, как у нас), то даже небольшие изменения API требуют вовлечения большого количества ресурсов как на фронте, так и на бэкенде, и становятся очень дорогими. И второй момент – чем раньше мы зафиксировали API, тем раньше фронтальные и бэковые команды могут начинать разработку. Им просто надо будет сойтись в одну точку.

Сначала мы немного расскажем о наших возможностях и ограничениях, чтобы было понятно, почему мы выбирали то, а не иное решение, а потом представим сам протокол API на верхнем уровне.

Специфика и мотивация

Приложения большие. Когда мы писали эту статью, приложение Сбербанк Онлайн на Android занимало около 800 000 строк кода, на iOS – 500 000 строк кода. И это только наш код, без подключаемых библиотек.

Обратная совместимость и много пользователей. MAU – 32 млн активных пользователей мобильного приложения. И если мы не сделаем обратную совместимость на уровне API, очень многим пользователям по всей стране придется качать приложения заново. Это очень нехорошо. Кстати, это одна из причин, почему у нас так много кода.

Сбербанк Онлайн разрабатывает много небольших команд. Вы, наверное, слышали про Agile в Сбербанке. Это правда, мы работаем по Agile в командах по 9 человек.

Приложение банковское: несмотря на то, что функциональность банковских приложений растет очень быстро, основное, что происходит в дистанционном банкинге – это последовательный процесс (обработка клиентских заявок). Такие процессы мы называем workflow. Заявки эти могут быть разного рода и обрабатываются они огромным количеством взаимосвязанных сервисов в периметре банка.

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

Омниканальность. Крайне важная история. Чтобы не разрабатывать бэк несколько раз – отдельно для мобильных приложений и отдельно, например, для веб-версии и банкоматов, нужно сделать так, чтобы API был максимально схожим для всех каналов (как минимум должна быть одинаковой структура ответа).

Мобильное приложение

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

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

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

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

Если обобщить все эти требования – приложения должны разрабатываться на нативных языках, иметь повторно используемые компоненты внутри себя, но при этом вся бизнес-логика должна управляться со стороны сервера.

Как делать не стали

После того как мы обозначили граничные условия, расскажем, какие существующие решения мы анализировали.

Программирование на JSON

Логику проще описать императивно кодом, чем выдумывать (и изучать!) новый декларативный язык, который всегда будет ограничен сильнее, чем родной язык платформы. Кроме этого, надо предусмотреть песочницу, обработку ошибок, какой-то этап пилотирования – псевдокод должен постепенно распространяться на пользовательские устройства и при любых сбоях откатываться назад. Всё это усложняет разработку без ощутимых преимуществ.

Не используем описание стилей компонентов, поскольку они могут разниться от форм-фактора, платформы и даже режима работы (портретная/ландшафтная ориентация, responsive в web). Декларации стилей в конечной реализации всегда будут качественнее, ближе к реальности и корректнее работать с краевыми случаями. Кроме этого, бывает, что компоненты со схожей логикой принципиально по-разному работают на разных устройствах: например, ввод номера телефона – с телефонной книгой на мобильном устройстве и без неё в вебе.

Фиксация модели данных в интерфейсе приложения

Этот способ еще называется «прибить гвоздями». Смысл в том, что интерфейс приложения строится на уникальных идентификаторах объектов, которые передаются с сервера. В такой схеме любые изменения на стороне сервера приводят к переработкам клиентской части. Невозможно повторно использовать код. Сложно поддерживать.
Единственное, почему стоит выбирать такой способ на своем проекте, – уверенность на 99%, что API не будет меняться. Ну или если проект совсем небольшой и проектировать API дороже, чем быстро переделать пользовательский интерфейс под изменения в API.

Добавляем к каждому объекту признак стиля. UI приложений строим на основании этого признака. Стилей ограниченное число, поэтому появляется возможность строить интерфейс динамически. Но с увеличением функциональности UI приходится увеличивать количество стилей.
В этом варианте становится возможно управлять отображением отдельных элементов, но повышается сложность реализации связанности между разными полями. И главное – с ростом вариативности UI у вас будет постоянная необходимость расширять протокол API.

У JSON API детально описаны рекомендации по структурированию данных и описанию взаимосвязей между ними, но нет ничего, что могло бы описывать представление. Наша задача затрагивает в том числе визуальное расширение – добавление новых полей ввода, так что такой вариант нам не подходит.

Web Components / React Components API

Концепция веб-компонентов, которая в том числе значительно повлияла на API компонентов React, нам подходит уже намного лучше: с одной стороны, у нас есть контроль за отображением, с другой стороны – есть возможность привязывать данные к элементам UI.
К сожалению, всё слишком сильно завязано на HTML + CSS + JS. Напрямую не используешь, но запомним – потом пригодится.

Как решили делать

UI-контейнеры

Объекты упаковываются в контейнеры, презентационную логику приложения строим на этих контейнерах. Основное преимущество – можем группировать несколько простых объектов в один контейнер. Это дает свободу в программировании UX/UI на клиенте, например, можем управлять скрытием/отображением одного поля при заполнении данных в другом. При этом базовых типов объектов – ограниченное число, и весь бизнес-транспорт реализуется на них.

Мы выбрали именно этот подход. Сначала мы опишем протокол API, а потом – как устроены фрэймворки внутри мобильных и веб-приложений.

Чтобы было понятнее, рассмотрим API на примере простого процесса, например, перевод между своими счетами. Как добираемся до точки входа, не рассматриваем – это не процесс и для этого есть свой API (о нем мы тоже как-нибудь расскажем). Итого, процесс у нас начинается с точки входа:
/>

Транспорт данных

Для начала договоримся об основных принципах – как передаём данные. За основу возьмём самый простой подход – пары «ключ-значение». Ключом пусть будет строка из букв латинского алфавита, значение – тоже строки, но уже произвольные.

Формы для заполнения бывают сложные, с вложенными элементами и подразделами, значит, надо допускать вложенность. Можно именовать ключи в формате camelCase, но они могут быть плохо читаемым (например, в логах) или даже «портиться» в системах, нечувствительных к регистру. Нужно ввести разделитель.

Самый очевидный разделитель – точка – во многих языках используется для доступа к свойствам объекта. При неаккуратном использовании ключи с таким разделителем будут создавать словари (или объекты), в которых возможны коллизии. Например, “foo.bar” = “foobar” и “foo.bar.baz” = “foobarbaz” в javascript может повлечь перезапись свойства “bar” объекта “foo” со строки на объект. В конце концов, договорились на двоеточии: с одной стороны, явное визуальное разделение и семантическое отражение вложенности, с другой стороны, достаточно безопасно для всех используемых языков.

Что делать с повторяемыми полями? Вводим дополнительное правило: между парой разделителей могут быть либо латинские буквы, либо цифры. Получаются конструкции вида: children:5:name:first.

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

Решение: значение – либо строка, либо список строк. Так решение выглядит типовым, но в то же время накладные расходы оказываются незначительными.

Шаг – это состояние процесса. Первый шаг у нас – выбор счета списания и счета зачисления и ввод суммы.

UI на этой картинке не видно, потому что шаг – это про серверную логику, а не про презентационную. Есть два подхода к работе с шагами: можно передавать с сервера только разницу (нарастающий итог в клиентском приложении) или каждый шаг целиком (нарастающий итог на сервере).

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

Из дополнительных плюсов: при возврате к редактированию не нужно проигрывать весь сценарий или передавать дополнительный параметр “отдай всё”. При старте шага клиентское приложение сразу же получает всю нужную информацию для построения экранов.

Экраны

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

Для экранов мы ввели два правила:

1. переход между экранами может быть только линейным, без ветвлений;
2. переход между экранами не требует взаимодействий с бэкэндом.

UI компоненты (блоки)

UI компонент – независимый компонент, который реализует клиентскую логику и наполняет документ данными. По сути, это ассоциация между управляющей командой в протоколе и куском кода и разметки в приложении. На первом экране три компонента:

1. Счет списания
2. Тот же компонент для счета зачисления
3. Сумма перевода

Поля – это атомарные компоненты, которые выступают транспортом для отдельных элементов данных и обрабатывают пользовательский ввод в случае деградации блока. Типов полей ограниченное число и все они поддерживаются на уровне фрэймворка: text, checkbox, select, multiselect.

Это значит, что любая версия приложения может отрисовать интерфейс, опираясь только на типы полей.

Поля в UI-компонентах из нашего примера:

1. Поле со ссылкой на справочник в счете списания и счете зачисления. Почему ссылка на статический справочник? Потому что счет мы выбираем из списка карт (счетов), без лишнего обращения к серверу.

2. Два отдельных поля для суммы и валюты в компоненте ввода суммы

Таким образом, формат для полей имеет такую структуру:

События

Так как приложения ничего не знают о процессе, логично, чтобы события (кнопки, которые видит пользователь) тоже были частью ответа от сервера.

События мы разделили на два типа.

1) Основные – они есть почти на каждом экране в привычных местах для пользователя. Как пример, это события «назад» и «продолжить». Первое осуществляет переход на шаг назад, а второе собирает заполненные данные с клиентской формы и отправляет их на сервер вместе с командой «Перейти на следующий шаг».

2) И специальные – для нестандартных действий, которые мы заранее спрогнозировать не можем, да и смысла закладывать их в часть движка нет, так как они редко используются.
В нашем случае на экране только основные события – «продолжить» и «назад». Они реализованы на уровне платформы.

У всех событий есть ряд атрибутов, такие как сам тип события, title и признак видимости. И никакого UI на сервер-сайде вроде размера кнопки, положения и цвета. Эта логика реализуется на фронте.

Справочники

Со справочниками все стандартно. Если он небольшой, то мы его присылаем полностью в ответе от сервера и называем статическим. Сделано это для того, чтобы минимизировать количество запросов к сервер-сайду и время отклика на действие пользователя в интерфейсе. Чтобы его отобразить в форме на экране, добавляем поле с типом – selectList, одно из свойств которого – ссылка на статический справочник.

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

Ошибки валидации на клиенте и сервере

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

Примерно так выглядит структура ответа:

Фрэймворки

Теперь немного о том, как с этим протоколом работают фрэймворки внутри приложений. Условно фрэймворки можно разделить на две основные части: workflow engine + обработчик UI-контейнеров. Такое разделение вызвано не только архитектурой приложений, но и организационной структурой. Движок разрабатывают и поддерживают платформенные команды, а UI-контейнеры фактически являются точками расширения и их программируют фичёвые команды. Таким образом, большему количеству команд не нужно вносить изменения в ядро.

Workflow engine

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

При этом движок не знает, сколько именно в сценарии будет шагов процесса, как шаги будут разбиты по экранам и какие там будут поля.

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

Как работают UI-контейнеры?

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

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

Два режима работы фрэймворка

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

Слева – как может отображаться контейнер для ввода суммы на списке из простых типов полей. Справа – если в сборке приложения есть UI-контейнер. Несмотря на то, что в режиме списка простых полей нет слайдера и есть отдельное поле вместо иконки с выбором валюты, – мы можем передать все данные с PL и процесс будет рабочим.

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

Каких правил мы стараемся придерживаться при работе с UI-компонентами:

• Поддерживать работу функционала в режиме списка простых типов полей. У любого прикладного проекта есть соблазн превратить динамический протокол в статический. Поэтому мы всех просим сначала разработать функционал на типовом UI-контейнере, а потом обогащать UX/UI добавлением кастомных контейнеров на этой модели данных. Это не только позволит в будущем обновлять процессы на старых сборках, но и автоматически поддерживает логическую целостность API.
• Не менять модель данных (JSON) для UI-контейнера, если он уже готов (проходит финальное тестирование или уже в продакшене). Так как логика на PL жестко связана с моделью данных, её изменение сломает функционал на версиях мобильного приложения, которые не обновляются. Тем не менее, модель можно расширять при условии сохранения обратной совместимости.
• Называть свой UI-компонент системным именем. Так как имя UI-компонента – обязательный атрибут протокола и должен быть минимум один на каждом экране, мы ввели специальное системное имя, которые реализует простой список полей.
• Не реализовывать бизнес-логику на UI-компонентах. Логику необходимо реализовывать на сервере, почему – писали выше.

Coming soon…

Мы очень старались писать лаконично, но это первая техническая статья про платформу Сбербанк Онлайн и она должна была многое охватить.

Пишите в комментариях, что непонятно, что интересно – постараемся писать меньше, но чаще и в цель. У нас много интересных вызовов, и поэтому много материала.