Как разрабатывалось приложение на Flutter-платформе: кейс «Лиги Ставок»

Почему для сложного и многофункционального приложения выбрана Flutter-платформа, и в чем ее особенности, рассказал Валентин Калинин, Head of mobile & Team lead of outstanding development team в «Лиге Ставок».

Я занимаюсь мобильной разработкой с 2000 года, первые 10 лет профессиональной карьеры это был Symbian C++ для первых смартфонов от Sony Ericsson и Nokia. Еще 5 лет разработки под iOS и Android заставили меня искать кросс-платформенные решения и перейти на веб-фреймворки, которые как раз тогда начали бурно развиваться. Альфа-версия Flutter вышла в мае 2017 года. Я познакомился с ней спустя полгода и уже к маю 2018 года попробовал перенести несколько своих проектов в вебе на Flutter. К лету 2018-го полностью определился, что Flutter – это тот фреймворк, на котором хочется писать код: hot reload существует, есть общий код, работающий на iOS и Android, – и попробовал Angular Dart для веба.

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

Основные трудности на старте были связаны с тем, что команда никогда не работала ни с Redux-подходом, который мы применяем в качестве архитектуры для приложения, ни с Dart (язык программирования, на котором пишут во Flutter, – прим. автора), ни с букмекерским бизнесом. У нас был дедлайн и пять разработчиков с абсолютно разным бэкграундом, но общим интересом к новым технологиям и Flutter.

Проект стартовал сначала как два нативных приложения на Kotlin и Swift, где должен был быть только встраиваемый модуль на Flutter. Подходы, которые использовались при разработке, я перенес из веб-фреймворков. В течение нескольких месяцев часть бизнес-критичных функций оставалась в нативе, пока мы не поняли, что это не позволяет нам уложиться в срок. Кроме дополнительного тестирования, нативные интерфейсы принесли много багов и переделок на каждой из платформ. Их количество стало расти, как снежный ком, – в итоге решили полностью перейти на Flutter.

За 4 месяца мы сделали MVP продукта. Еще два ушло на альфа-версию, которая была запущена внутри компании на большое количество сотрудников и топ-менеджеров. Так наш рабочий MVP-продукт получил одобрение на дальнейшую разработку. В сентябре 2019 года состоялся старт открытого бета-тестирования, и с начала 2020 года началась миграция пользователей на новое приложение.

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

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

Начав с пяти Dart-разработчиков, активно растем и развиваемся: сегодня больше 10 разработчиков пишут приложения на Flutter. В основном чате команды больше 20 человек.

Так как фреймворк достаточно молодой, еще привлекаем ИТ специалистов:

● ищем заинтересованных в разработке на Flutter нативных разработчиков и разработчиков современных web frontend-приложений;

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

Flutter-коммьюнити растет. Пару лет назад были чатики на 200-300 человек, сейчас в них уже несколько тысяч участников, которые пишут, создают свои решения на Flutter. Часто бывает, что у кандидатов уже были пет-проекты или в прошлой работе они использовали Flutter, как не основной продукт.

Приложение имеет большой Real Time потока данных, потому что мы являемся поставщиком видеотрансляций огромного количества спортивных событий по всему миру в режиме 24/7. Пользователям передаются сотни и тысячи вариантов пари. Скорость обновления данных – один из самых критичных моментов. В спортивных событиях все меняется динамично, и пользователь должен всегда иметь возможность быстро совершить ставку на требуемое событие, без отказов из-за того, что данные устарели. Кроме того, мы сразу нацелились на вывод нескольких видеотрансляций: у нас доступна функциональность «картинка в картинке», где можно запустить одну видеотрансляцию, переключиться на другую или свернуть ее в превью, чтобы погулять по приложению или сделать ставку, и продолжить просмотр.

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

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

Внутри компании на Flutter мы практически ведем разработку в следующем режиме: 2 недели – разработка, неделя – подготовка к релизу. Это сильно сокращает сроки выхода на рынок, плюс – разработка ведется сразу на все платформы. Помимо iOS/Android мы присматриваемся к Flutter в качестве решения mobile-web. Процесс значительно упростился, потому что не требуется поддержание legacy-инструментов, которые пришли к нам с iOS/Android, для развития многомодульности или компиляции кода.

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

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

Также развиваем собственную дизайн-систему и стандартизируем подход к отрисовке интерфейсов. Flutter – это, в первую очередь, фреймворк для написания красивых UI-решений сразу на все платформы, что предоставляет возможность не вести параллельно несколько дизайн-систем под iOS/Android или веб.

У нас хорошо выстроен процесс continuous integration/continuous delivery, в котором используются авто-тесты.

Continuous integration (ci) — это система, которая по команде или настроенной реакции на действие (разработчик залил на сервер код своей задачи) проверяет итоговый проект на ошибки, запускает автотесты и сборку проекта. И если все хорошо, то в консоли ci и веб интерфейсе появляются сообщения в духе «build succes, 0 tests passed». После залива разработчиком своей задачи её нельзя слить с основным проектом, пока ci не сбилдит и не прогонит тесты и не скажет, что все налажено.

А delivery — это система, которая эти сборки может отдавать тем кому надо, или же, при соответствующей настройке, отправлять сборки в магазины. Для того, чтобы каждый тестировщик не ждал пока разработчик ему соберёт приложение и отправит, а мог сам скачать с этой системы итоговую сборку. Можно настроить выкладку в Appstore или Google play.

За счет того, что мы архитектурно строимся на Redux и Unidirectional Data Flow-подходе, можно качественно тестировать бизнес-функции и спокойно вести релизы без ночных переработок и мучений ручных тестировщиков.

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

Еще одно направление –– спортивная статистика. С 27 ноября по 2 декабря провели первый хакатон Liga Stavok Flutterthon, где основной задачей было создать виджеты, которые предоставляют для наших пользователей спортивную статистику в удобном виде, для дальнейшего встраивания в приложение. О результатах мы писали здесь: https://habr.com/ru/company/ligastavok/news/t/532882/