Как создать универсальное приложение для iOS, Android, веба, десктопа и сэкономить 60% бюджета
Мы работаем с Flutter уже больше трёх лет. За это время создали более 25 проектов с помощью этого фреймворка. Недавно мы решили опробовать возможности новой версии Flutter Web и создали концепт банка. Что из этого вышло, читайте в статье.
Наш концепт подтвердил на практике, что на Flutter можно быстро создавать не только мобильные, но и веб, и десктоп-приложения. Это даёт бизнесу новые возможности: при помощи одного фреймворка можно реализовать универсальное приложение или оперативно заменить существующее приложение, если из-за санкций его удалили из сторов.
Вы в блоге Surf, более 12 лет мы разрабатываем мобильные и веб-решения для бизнеса
О чём в этой статье:
Вводная часть: что такое Flutter
Flutter — это кроссплатформенный фреймворк. Кроссплатформа подразумевает, что созданный с её помощью продукт может, используя единую кодовую базу, работать с разными операционными системами. На первом этапе для Flutter это стали iOS и Android. А потом инструмент расширил число ОС, но об этом чуть ниже.
Мир узнал о Flutter в 2018 году. К 2021-му технология потеснила конкурентов и вырвалась в безусловные лидеры среди кроссплатформ.
Google активно развивает Flutter, и в начале 2022 года выпустил третью версию фреймворка. Мы делали подробный обзор обновлений в этой статье. Новая версия стала прорывом во фронтенд-разработке, причём именно в ней создателям удалось добиться нужного уровня стабильности. Это значит, что теперь на одной кодовой базе можно создать приложение и «раскатать» его на разных цифровых платформах: мобильной, веб и десктоп.
Наши Flutter-разработчики провели эксперимент и создали концепт онлайн-банка, в котором опробовали Flutter web на практике. О том, какие потребности бизнеса закрывает новая версия фреймворка, мы и расскажем в статье.
Изучите подробнее концепт по ссылке: онлайн-банк на Flutter
Вызов №1: найти альтернативный канал доставки мобильного приложения пользователям
Владельцы крупного бизнеса, особенно банков, пытаются найти варианты доставки своих приложений до пользователей в ситуации, когда они удалены из основных сторов. Особенно остро эта проблема стоит для владельцев устройств с ОС 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-коду — эти функции тоже легко интегрировать.
Как PWA поможет банку заменить нативное мобильное приложение: разбираем по шагам
- Разрабатываем на Flutter PWA приложение. Через 2 месяца запускаем версию для тестирования внутри банка, а через 4 — версию с базовой функциональностью, доступную клиентам.
- В течение 10 месяцев дорабатываем Flutter-приложение, чтобы в нем была вся реализованная в нативной версии функциональность. После этого можно заменить существующее приложение для Android на кроссплатформенное на Flutter. Пользователи iOS могут применять PWA.
- Параллельно разрабатываем версию приложения для настольного веба на той же кодовой базе, что и мобильные, так как Flutter это позволяет.
- Передаем проект в инхаус.
Что в итоге?
- Проблема с доступностью приложения пользователям iOS будет решена через 4 месяца.
- Для PWA, Android, настольного веб и iOS используется единая кодовая база: это позволяет синхронизировать релизы и снизить затраты на коммуникацию.
Вызов №2: разработать приложения для мобайла, веба и десктопа на 60% дешевле
Для работы над нативным мобильным приложением банк набирает в штат две команды разработчиков (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 сокращает стоимость поддержки и развития приложений в 3 раза
Новые мультиплатформенные возможности Flutter пригодятся не только банкам. С их помощью можно быстро реализовать проекты с возможностями таск-менеджера, календаря, аналоги notion для создания заметок и текстовых документов. На Flutter можно создавать стриминговые платформы и профессиональные приложения со сложной функциональностью, например, музыкальные редакторы.
Создатели Flutter абстрагировались от платформенных механизмов создания UI, что позволило сделать его кроссплатформенным.
Как это работает:
- в мобильной и десктопной версиях: Flutter реализовал собственный фреймворк для вёрстки, который собирается в аппаратной части устройства с помощью специального движка рендеринга.
- в веб-версии: скачивается движок рендеринга, весом 2.8Мб. Отрисовка происходит так же, как и в мобайле. Движок запускается через WASM — это бинарный формат, который запускается в браузере и участвует в потоковой передаче, декодировании и компиляции. По такому же принципу работает Figma. Он позволяет избежать сложностей при работе с HTML, CSS, несовместимостью браузеров и ОС. Для компиляции веб-приложения используется dart2js — он переводит программу, написанную на языке Dart в язык JavaScript. Подробнее об этом можно прочитать здесь.
В результате получается веб-приложение, у которого под капотом такой же графический движок, что используется для отрисовки Flutter-приложения на Android и iOS. А поскольку методы самого рендеринга идентичны, то и отличий не будет. Пользователь на своей стороне не заметит никаких изменений.
Ещё одна сильная сторона Flutter-приложения — адаптивность. Такое приложение может подстроиться под любое пользовательское окружение и работать на разных ОС и браузерах. Это возможно благодаря тому, что для фреймворка реализован целый набор компиляторов. При компиляции, веб-приложение будет на 100% идентично операционным системам Android и iOS.
UI приложения адаптируется под разные устройства: например, при выходе из полноэкранной версии браузера в нижней части экрана появляется таббар, как в привычных мобильных интерфейсах. При этом скорость работы в веб-версии очень высокая.
Вызов №3: UI нужно адаптировать и дорабатывать под каждую платформу отдельно
При традиционной нативной и веб-разработке перед бизнесом встает вопрос не только создания приложения, но и адаптации его дизайна под разные платформы. Это требует ресурсов и дизайнеров, и разработчиков и удлиняет time-to-market проекта.
Решение
Flutter позволяет упростить этот процесс и создать универсальный дизайн, который быстро и легко адаптируется под любую платформу. Давайте рассмотрим, как это работает, на примере нашего концепта.
Мы намеренно создали обезличенный прототип в лаконичном минималистичном стиле, чтобы показать, насколько легко можно создать дизайн в фирменном стиле банка. В систему можно загрузить кастомные шрифты — движок Flutter будет их корректно отображать.
В веб-приложении на Flutter можно с лёгкостью узнать, на какой платформе запущен браузер, в котором исполняется приложение у пользователя прямо сейчас. А также реализовать различный UI, в зависимости от потребности дизайна или запроса от бизнеса.
Нестандартные проблемы требуют нестандартных решений. Мы уже не впервые находим это решение в использовании Flutter для создания больших проектов для наших клиентов. На наш взгляд, именно Flutter наиболее совершенно реализовал концепцию мультиплатформенности, которая не просто оптимизирует процесс разработки и сокращает затраты, но и помогает преодолевать кажущиеся непреодолимыми форс-мажоры.
Реализовав концепт, мы убедились, что Flutter стал настоящим мультиплатформенным решением, которое позволяет:
- быстро создать PWA, если нужно заменить мобильное приложение;
- сделать приложение, которое идентично ведёт себя на всех цифровых платформах — iOS, Android, web, Windows, MacOS;
- легко реализовать кастомный дизайн, который будет адаптироваться к разным платформам, и нужную функциональность;
- благодаря единой кодовой базе ускорить time to market проекта на 60% и снизить стоимость поддержки и развития приложений в 3 раза.
Если хотите заказать нам разработку универсального приложения на Flutter и сэкономить 60% бюджета, пишите на vc_hello@surfstudio.ru.
Узнайте подробнее о нашем опыте в кроссплатформенной разработке.
Рекомендуем почитать:
✅ PWA + Flutter: созданы друг для друга
✅ Как мы сделали ещё один мобильный банк на Flutter — для «СМП Банка»
✅ Антикризисные технологии: может ли PWA стать заменой мобильному приложению
Все так здорово выглядит, но сто процентов не все так идеально и у Флаттер Веба есть какие-то ограничения. Можно пару примеров?
Спасибо, что читаете! И вы, конечно, правы: у Flutter Web есть свои минусы: нет прямого доступа к сторам (это затрудняет доставку приложения к пользователям) и низкая совместимость с iOS – как известно, эта платформа капризнее в интеграциях, чем Android. Немного подробнее о минусах PWA мы писали вот здесь: https://vc.ru/services/424911-antikrizisnye-tehnologii-mozhet-li-pwa-stat-zamenoy-mobilnomu-prilozheniyu Сейчас мы как раз готовим новую статью, в которой подробнее рассмотрим все реальные сложности по разработке и внедрению веб-приложений, так что следите за публикациями!
Комментарий недоступен
Здравствуйте! Про движок – мы описали механику взаимодействия с графическими элементами. Если вы нашли недочёты в нашем концепте, напишите, пожалуйста, подробнее: что именно можно сделать лучше. Ведь, как мы все знаем, в вёрстке – нет предела совершенству :)
Комментарий недоступен
Спасибо за интересный вопрос! Long tap и drag-and-drop – это не нативные жесты, они обрабатываются внутри Flutter. Никакой разницы с нативными приложениями не будет. Face-ID работает для PWA, поскольку Apple предоставляют API для взаимодействия с ним через Safari. С Dynamic Island ничего подобного Apple не предоставляет, поэтому взаимодействовать из браузера пока с ним невозможно. Ответ на любой вопрос про взаимодействия простой: Flutter PWA может всё то же самое, что и обычный PWA. Никаких ограничений на Flutter нет, и с точки зрения взаимодействия с платформой ограничен тем же самым, что и обычный PWA.
Было бы круто если бы показали пример, чтобы пощупать в живую.
Как то щупал примеры с сайта флаттера в вебе, они работают конечно неплохо, но выглядят неестественно чтоли, не как обычное веб-приложение