Разработка UI для банкоматов

Дима Королев, Tinkoff.ru

Зачем?

  • Снятие и пополнение без ограничений
  • Самоинкассация для SME
  • Экономия на комиссиях
  • Новые каналы связи с клиентами

Имиджевая тема

Требования

  • Лучший в мире
  • Быстрая разработка
  • Быстрые релизы

Почему не стандартный банкомат?

Что использовать для GUI?

  • WPF?
  • MFC?
  • Qt?
  • Web?

Разные устройства

Пять моделей банкоматов и терминалов с разным поведением и устройствами.

Разные устройства

Пять моделей банкоматов и терминалов с разным поведением и устройствами.

Web application

  • Гибкое и универсальное решение
  • Уже есть экспертиза

Какой выбрать фреймворк?

  • React?
  • Angular?

Устаревший Chromium

  • Затрудненный дебаг
  • Странные баги из-за кастомизации

Утечки

Приложение работает постоянно — высокий риск появления утечек памяти.

API

Построенный на событиях API для взаимодействия с ATM

Одинаковые клиенты

Ограниченный набор разрешений экрана и одинаковые интерфейсы взаимодействия с клиентом

Универсальное и одинаковое ПО

Современная аппаратная основа

Клиентский рендер

React

Как работаем с CSS?

  • Static CSS?
  • Sass/less?
  • CSS-модули?
  • CSS-in-JS?

Emotion

Плюсы

  • Компонентный подход
  • Изоляция стилей
  • Динамика

Минусы

  • Отсутствие статики
  • Раздувание JS
  • Медленней, чем CSS

Как управлять состоянием?

  • Redux?
  • Mobx?

Redux

Как общаться с API?

  • redux-thunk?
  • redux-saga?
  • redux-observable?

Redux-thunk

API

Построенный на событиях API для взаимодействия с ATM

(простите за повтор)

Сценарий "Платеж наличными":

  • 8 событий сценария
  • 11 асинхронных запросов
  • События ввода
  • События ошибок

Сильное зацепление

  • Сломали переиспользование
  • Сломали тестирование

Redux-saga vs.
redux-observable

RxJS

redux-observable

Понятность и управляемость

Минусы

  • Сложнее дебаггинг и тестирование
  • Потоки сложны для понимания

Typescript

Как будем тестировать?

  • Юнит-тесты?
  • Модульные тесты?
  • E2E-тесты?

Ручное тестирование

Юнит-тесты

jest

Автотесты

Эмулятор

Закон Мёрфи

Всё, что может пойти не так, пойдет не так

Selenium

autoit

Итоги

Контроль над поведением ATM

Стабильная и быстрая разработка

Удобство для пользователей

Возможность экспериментировать с форматами

Мораль

Думай

Изучай

Спрашивай

Конец

email: dima@korolev.dk
github: /dmitry-korolev
telegram: @dimakorolev