Как создать универсальное приложение для iOS, Android, веба, десктопа и сэкономить 60% бюджета

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

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

• Коротко о Flutter
• PWA как альтернативный канал доставки приложения пользователям
• Как разработать приложения для мобайла, веба и десктопа на 60% дешевле
• Как Flutter упрощает адаптацию дизайна для разных платформ

Flutter — это кроссплатформенный фреймворк. Кроссплатформа подразумевает, что созданный с её помощью продукт может, используя единую кодовую базу, работать с разными операционными системами. На первом этапе для Flutter это стали iOS и Android. А потом инструмент расширил число ОС, но об этом чуть ниже.

Мир узнал о Flutter в 2018 году. К 2021-му технология потеснила конкурентов и вырвалась в безусловные лидеры среди кроссплатформ.

Google активно развивает Flutter, и в начале 2022 года выпустил третью версию фреймворка. Мы делали подробный обзор обновлений в этой статье. Новая версия стала прорывом во фронтенд-разработке, причём именно в ней создателям удалось добиться нужного уровня стабильности. Это значит, что теперь на одной кодовой базе можно создать приложение и «раскатать» его на разных цифровых платформах: мобильной, веб и десктоп.

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

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

• банки теряют клиентов и уменьшают число продаж;
• банки переплачивают за содержание команды iOS-разработки, которая в текущих условиях не приносит прибыли. Если привести приблизительные цифры, только инхаус iOS-команда, в которой обычно около 50 разработчиков, обходится банку примерно в 188 000 000₽ в год.

Как показывает наша практика, выход есть. И ниже мы о нём расскажем.

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

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

Flutter оптимален для PWA по нескольким причинам:

• Гибкость. Часть функций можно переиспользовать и адаптировать под свой коммерческий запрос.
• Тестирование. Код проверяется один раз и под платформы одновременно.
• Адаптивность. Проект корректно работает на всех браузерах и ОС.
• Экономия. Часов на разработку нужно меньше, а значит, сократится штат разработчиков и бюджет.
• Простая коммуникация. На проекте работает одна команда разработчиков.

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

PWA на Flutter позволяет быстро раскатать веб-версию, не переписывая всё с нуля. В нем будут доступны те же функции, что и в привычном мобильном приложении.

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

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

Что в итоге?

• Проблема с доступностью приложения пользователям iOS будет решена через 4 месяца.
• Для PWA, Android, настольного веб и iOS используется единая кодовая база: это позволяет синхронизировать релизы и снизить затраты на коммуникацию.

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

Разработка на Flutter позволяет на едином коде и силами одной команды реализовать проект сразу для всех нужных бизнесу цифровых каналов: PWA, iOS, Android и десктоп. Стоимость работы команды в год составит около 150 000 000 вместо 487 500 000 рублей.

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

Как это работает:

• в мобильной и десктопной версиях: Flutter реализовал собственный фреймворк для вёрстки, который собирается в аппаратной части устройства с помощью специального движка рендеринга.
• в веб-версии: скачивается движок рендеринга, весом 2.8Мб. Отрисовка происходит так же, как и в мобайле. Движок запускается через WASM — это бинарный формат, который запускается в браузере и участвует в потоковой передаче, декодировании и компиляции. По такому же принципу работает Figma. Он позволяет избежать сложностей при работе с HTML, CSS, несовместимостью браузеров и ОС. Для компиляции веб-приложения используется dart2js — он переводит программу, написанную на языке Dart в язык JavaScript. Подробнее об этом можно прочитать здесь.
  

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

Ещё одна сильная сторона Flutter-приложения — адаптивность. Такое приложение может подстроиться под любое пользовательское окружение и работать на разных ОС и браузерах. Это возможно благодаря тому, что для фреймворка реализован целый набор компиляторов. При компиляции, веб-приложение будет на 100% идентично операционным системам Android и iOS.

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

При традиционной нативной и веб-разработке перед бизнесом встает вопрос не только создания приложения, но и адаптации его дизайна под разные платформы. Это требует ресурсов и дизайнеров, и разработчиков и удлиняет time-to-market проекта.

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

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

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

Реализовав концепт, мы убедились, что Flutter стал настоящим мультиплатформенным решением, которое позволяет:

• быстро создать PWA, если нужно заменить мобильное приложение;
• сделать приложение, которое идентично ведёт себя на всех цифровых платформах — iOS, Android, web, Windows, MacOS;
• легко реализовать кастомный дизайн, который будет адаптироваться к разным платформам, и нужную функциональность;
• благодаря единой кодовой базе ускорить time to market проекта на 60% и снизить стоимость поддержки и развития приложений в 3 раза.