Необанк на Flutter

Flutter — один из самых современных кроссплатформенных фреймворков. Google выпустил его на рынок в 2018 году, и за эти годы Flutter уверенно потеснил конкурентов и стал №1 среди кроссплатформенных технологий. 

Google продолжает активно развивать Flutter, и не так давно выпустил третью версию фреймворка. Она стала настоящей революцией во фронтенд-разработке на необходимом уровне стабильности. Это значит, что теперь на единой кодовой базе можно разработать приложение и адаптировать его для разных цифровых платформ: iOS, Android, web, Windows, MacOS.

Мы создали концепт онлайн-банка, в котором опробовали Flutter web на практике. И готовы поделиться результатом.

Работает корректно на всех платформах и адаптируется к любому устройству

С помощью Flutter можно создать универсальный продукт сразу для трёх каналов распространения: мобильное, веб и десктоп-приложения. Применение одной технологии снизит бюджет, трудозатраты и риски на 60%

С помощью кроссплатформы Flutter можно переиспользовать 80-95% кодовой базы на разных платформах. Доработать придётся платформенные фичи и UX-решения. И всё же это займёт меньше ресурсов, нежели написание нескольких нативных проектов под каждую целевую платформу.

Создатели Flutter абстрагировались от платформенных механизмов создания UI. Это позволило сделать UI кроссплатформенным.

Владимир Макеев

Директор Surf

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

Как это работает в веб-версии: скачивается движок рендеринга, который весит 2.8Мб, и отрисовка происходит аналогично процессу в мобайле. Движок запускается через WASM. Аналогично работает, например, Figma. Такой процесс снимает вопросы с HTML, CSS, несовместимостью браузеров и ОС.

Для компиляции веб-приложения используется dart2js, он выполняет перевод программы на языке Dart в программу на языке JavaScript. Подробнее об этом можно прочитать здесь.

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

Адаптивность — сильная сторона приложения, разработанного на Flutter. Оно может подстроиться под любое пользовательское окружение и работать на любых операционных системах и браузерах. Возможно это благодаря тому, что для фреймворка реализован целый набор различных компиляторов, благодаря которым мы можем собрать Flutter-приложение для запуска на самых разных платформах. Веб-приложение при компиляции будет на 100% иметь ожидаемое поведение (и будет идентичным Android/iOS).

Новая версия Flutter может стать настоящей палочкой-выручалочкой в случаях, когда нужно, чтобы приложение было идентичным для всех платформ — iOS, Android, web, Windows, MacOS — и когда для приложения не нужно SEO-продвижение. Это могут быть сервисы с функциональностью таск-менеджеров, календарей, аналоги notion для создания заметок и текстовых документов, стриминги, сложные профессиональные приложения, например, музыкальные редакторы.

Внешний вид приложения можно менять на всех платформах

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

В веб-приложении на Flutter можно с лёгкостью узнать, на какой платформе запущен браузер, в котором исполняется приложение у пользователя прямо сейчас. А также реализовать любой UI, в зависимости от потребности дизайна или запроса бизнеса.

Разработка дешевле и быстрее

Скорость и экономия при разработке на Flutter обусловлена использованием единой кодовой базы. Там, где владельцу бизнеса потребовалось бы три команды разработчиков: для Android, iOS и веб, Flutter-команда может сделать в два раза быстрее. Это существенно ускоряет выход релизов.

Обычно для работы над нативным мобильным приложением банк набирает в штат две команды разработчиков (Android и iOS). В среднем, инхаус-команда крупного банка состоит из 50 iOS, 50 Android и 30 frontend-разработчиков. При средней зарплате в 250 000 рублей, налогах и IT-аккредитации, себестоимость команды достигает примерно 487 500 000 рублей в год. Только команда iOS-разработчиков обойдётся собственникам бизнеса в 187 500 000 рублей ежегодно. А если компании нужно реализовать приложение для разных платформ — iOS, Android, web, Windows, MacOS — бюджет и сроки проекта возрастут ещё больше.

Для мобильного приложения на Flutter экономия относительно нативной разработки составляет 40%. А с новым мультиплатформенным подходом бизнес может сократить бюджет проекта до 60%, реализовав на едином коде приложения для мобильной, веб и десктоп версии.

Приложение удалили из сторов — Flutter помогает

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

Один из выходов — создать прогрессивное веб-приложение. PWA (Progressive Web App) — технология, которая преобразует сайт в приложение, визуально и функционально не отличающееся от нативного. Его можно открыть в браузере или загрузить как обычное приложение на свой смартфон.

PWA устанавливается через браузер, в котором открыто веб-приложение с поддержкой Progressive Web Applications. На Android и iOS механизм одинаковый, отличие только в браузерах. На Android используется Google Chrome, а на iOS — Safari.

Для банков, которые оказались под санкциями, PWA — это единственное нормальное решение для замены iOS-приложения. У PWA пока есть одно ограничение: в нем нельзя отправлять push-уведомления пользователям iOS, но Apple анонсирует появление такой функциональности в 2023. Пока сообщения можно отправлять через мессенджеры и SMS.

Почему Flutter подходит для создания PWA:

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

Приложение на Flutter можно собрать в виде PWA, веб-приложения, iOS и Android. И оно будет работать идентично на всех платформах.

Как происходит переход банка на PWA:

1. Разрабатываем на Flutter PWA приложение. Через 2 месяца запускаем версию для тестирования внутри банка, а через 4 — версию с базовой функциональностью, доступную клиентам. 
2. Дорабатываем Flutter-приложение, чтобы в нем была вся реализованная в нативной версии функциональность. После этого можно заменить существующее приложение для Android на кроссплатформенное на Flutter. Пользователи iOS могут применять PWA. 
3. Параллельно разрабатываем веб-приложение на той же кодовой базе, что и мобильные, так как Flutter это позволяет.
4. После снятия санкций можно быстро собрать приложение для iOS, опубликовать в AppStore и конвертировать пользователей PWA в iOS-приложение.
5. После этого банк может забрать проект в инхаус и развивать его.

На своём опыте мы убедились, что Flutter отлично справился со сборкой на web, и сделал практически всё за нас. Остается только провести финальный чек-ап, найти и исправить ошибки, которые могут появиться при переходе на веб-платформу.

Подходит для создания мобильного банка со всеми базовыми функциями

Крупные российские компании и банки уже попробовали внедрить PWA. Эту технологию используют: Aviasales, IVI, DNS и Спортмастер. Среди банков пионерами оказались Сбер, Альфа-банк и Тинькофф. Для банков это особенно актуально, потому что есть риск попасть под санкции. Без доступа в сторы, с PWA можно оперативно развернуть веб-версию, не меняя процесса разработки и не переписывая всё с нуля — это возможно для PWA, написанного именно на Flutter.

В банковском приложении, написанном при помощи Flutter web, будет доступны те же функции, что и в мобильном приложении привычного банка. 

• В разделе «Карты» — видны открытые карты с общим и разделённым балансом.
• «Счета и «Цели» — имеют привычную функциональность «копилки» и доступных счетов: дебетового и кредитного.
• «История» — отображает траты каждого месяца по категориям. 
• «Автоплатежи», переводы по номеру телефона и оплата по QR-коду — тоже легко реализуемая функциональность.

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

Евгений Сатуров

Руководитель Flutter-отдела в Surf