Почему мобильное приложение на Flutter — хорошая идея для бизнеса в 2020 году

В условиях кризиса компании стремятся сократить расходы, ускорить выход на рынок и усилить присутствие в онлайне с помощью приложений. Из быстрых мобильных решений Surf рекомендует Flutter. Показываем в цифрах.

Кроссплатформенные приложения — это давняя мечта любого бизнеса, потому что отдельные (нативные) приложения для iOS и Android значительно дороже в разработке и поддержке.

В 2018 году команда Surf серьезно взялась за развитие кроссплатформенного направления. К лучшим практикам мы движемся все 9 лет, но именно в текущих условиях решением номер один для ритейла, финтеха и ecommerce стал Flutter.

Кроссплатформа бывает разной

Говоря простым языком, кроссплатформа — это набор инструментов (фреймворк), который позволяет создать приложение, подходящее сразу для iOS и Android. На первый взгляд звучит замечательно. На деле свои возможности и ограничения есть у каждого фреймворка. Их немало: React Native, Xamarin, PhoneGap, Titanium, Ionic, Flutter — самые популярные.

Идеальная кроссплатформа должна соответствовать двум требованиям:

  • быть экономичной с точки зрения разработки;
  • обеспечивать качественный пользовательский опыт.

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

Проблемы начинаются, когда приложение обрастает функциями и неизбежно усложняется (к этому приходит любой продукт на стадии развития).

Пользовательский опыт. Важно, чтобы пользователи воспринимали кроссплатформенное приложение как нативное — то есть как будто бы оно написано специально для этой платформы. Как минимум там должны быть плавные анимации, характерные для данной ОС элементы интерфейса, работа с жестами. И вот с этим плохо у всех, кроме Flutter.

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

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

Перед тем как начать активно использовать Flutter, мы сравнили его с React Native. По итогу выяснилось, что последний в перспективе будет для нас проблемой. Сейчас позволить себе использовать этот фреймворк могут только такие гиганты, как Microsoft. Остальным же придется либо форкать и поддерживать свою версию React Native, либо участвовать в opensource-доработках. Малым и средним компаниям это не выгодно, поэтому мы как и многие другие (Airbnb, Uber, Udacity) отказались от него. Мы — в пользу Flutter.

Герман Сапрыкин, Grab, Senior Engineering Manager

Flutter — это свежий взгляд Google на кроссплатформу. При всей очевидности экономической выгоды даже для объемных задач технология относительно новая (2018 год), из-за чего многие разработчики не спешат ее использовать.

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

Конструктор, натив и кроссплатформа Flutter

Для тех, кому надо оперативно и антикризисно, уже придуманы конструкторы. Такой софт (Mobincube, Imshop.io и другие) позволяет сделать приложение быстро и дешево.

Но он не подходит для проектов, где важна гибкость, производительность, есть сложные интеграции и бизнес-процессы (например, 6–7 вариантов оформления заказа в мобильной аптеке «Ригла»), где планируются регулярные обновления.

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

Поэтому сейчас мы все чаще наблюдаем, как крупные торговые компании отказываются от использования коробочных решений и создают собственные мобильные продукты. Рынок подтверждает, что быстрое решение не может быть постоянным.

Нативные приложения (написанные на родных языках ОС — Swift и Kotlin, для iOS и Android соответственно) не имеют серьезных минусов, но требуют значительных затрат на разработку и поддержку. Вам придется создавать бизнес-логику, верстку и интерфейс с учетом особенностей каждой платформы. Все это скажется на бюджете проекта.

Кроссплатформенное приложение на Flutter обладает достоинствами нативной разработки и позволяет переиспользовать большую часть кода между различными платформами, что позволит сэкономить, по нашим подсчетам, до 40% бюджета.

Почему мобильное приложение на Flutter — хорошая идея для бизнеса в 2020 году

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

Особенно любимая программистами функция hot reload собирает приложение из виджетов буквально за секунды. В зависимости от сложности и самобытности проекта все это дает от 20 до 50% экономии времени, которое можно направить на разработку других полезных функций.

Flutter — идеальная платформа для прототипирования. Я как-то раз участвовал в марафоне, где участник (data scientist без опыта разработки) просто взял и собрал прототип простейшего приложения за несколько часов. На Android аналогичная разработка заняла бы на порядок больше времени.

Степан Гончаров, Lyft, Staff Software Engineer

Native vs мультиплатформа vs реальность

Выбор фреймворка зависит от многих факторов, начиная с имеющихся ресурсов, заканчивая особенностями конкретного приложения. На сайте Google приведены три основных достоинства Flutter — посмотрим на них критически.

1. Быстрая разработка

  • Если сравнивать с двумя нативными приложениями, то разработка идет на 20–50% быстрее. Скорость зависит от сложности интерфейса и необходимых функций.
  • Если разработчик понимает, с какой стороны подступиться к задаче.
  • Если вам нужно не только срочно запустить приложение, но и ускорить дальнейшее развитие.

2. Выразительный и гибкий UI

  • Flutter позволяет реализовать нативный «look and feel», но прописывать UI-элементы придется вручную. Фреймворк сам настроит шрифты, физику скроллов жесты навигации и прочее.
  • Пользователи Apple находят небольшие отличия в UI (анимации, динамика).
  • Flutter идеально подходит для унифицированного UI/UX. Вы можете мимикрировать под нативные приложения и пользоваться привычными анимациями. Конечный пользователь не заметит разницы, если все виджеты будут настроены правильно.

3. Нативная производительность

  • Большинству современных приложений не требуется сложная логика. Запросы на сервер, работа с файлами и API платформы — все это во Flutter выполняется асинхронно и не ухудшает производительность приложения.
  • Команда Flutter заботится о быстродействии фреймворка. У него собственный графических движок, оптимизация в котором близка к нативной. Изображения меняются со скоростью до 60 кадров/с, что отлично воспринимается человеческим глазом.
  • На Flutter не получится сходу написать приложение, которое будет идеально работать на любом устройстве, любого года выпуска. Потребуются тесты, правки — все как на любом нативном фреймворке.

Почему разработка на Flutter дешевле

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

Представим, что один и тот же проект разрабатывают параллельно две компании с идентичными подходами к работе и квалификацией инженеров.

Почему мобильное приложение на Flutter — хорошая идея для бизнеса в 2020 году

Трудоемкость считаем в идеальных днях. Разработка идет в два этапа:

  • запуск MVP (минимально жизнеспособного продукта) — 15–17 недель;
  • последующее развитие — 3 двухнедельных спринта.
Экономика проекта на Flutter. Ячейка — это неделя. Цифра в ячейке — ставка.<br /><a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fflutter.surf.ru%2F&postId=131105" rel="nofollow noreferrer noopener" target="_blank">Во сколько обойдется запуск вашего приложения?</a>
Экономика проекта на Flutter. Ячейка — это неделя. Цифра в ячейке — ставка.
Во сколько обойдется запуск вашего приложения?

Получается, что Flutter в данном примере экономит нам 45,6% на разработке, 70,5% на QA с учетом использования автотестов в обеих командах, а также 33,3% на дизайне приложения.

Конечно, проекты бывают разные. Где-то Flutter может сберечь 15% бюджета, а где-то до 50%. Кроме того, возможно календарное преимущество при проектировании, так как вам не нужно синхронизировать логику между платформами. В Surf такие вещи обсуждаются до подписания, клиент заранее узнает преимущества и недостатки кроссплатформенных решений.

Приложение DSR (Digital Successful Routine) — это аналитическая BPM-система для менеджеров и команды ресторанов сети KFC. Благодаря идее Surf сделать его на Flutter нам удалось в рамках бюджета реализовать больше функций: уже в первой версии в приложении сделали отдельный интерфейс для работы с аналитикой и задачами для группы ресторанов. Кроссплатформенная технология для нас новая, но мы не пожалели. UI и анимации реализованы на высоком уровне, пользователи не отличают наше Flutter-приложение от нативного, все работает быстро.

Евгений Никитчук, KFC, бизнес-партнер

Flutter продолжает приносить выгоду и на этапе развития: команда меньше, релизные циклы проще, скорость выхода на рынок (time-to-market) сокращается.

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

Написание бизнес-логики на Flutter занимает столько же времени, что и на нативе. Однако верстка UI во Flutter безумно быстрая! Ты можешь за пять минут собрать макет экрана из кубиков и сразу приступить к бизнес-логике. Плюс к этому добавляются возможности отладки (hot reload), которые ускоряют верстку экранов просто в разы. В итоге нам удалось ускорить производство фич на проекте «Таксометр» почти в 2 раза в сравнении с нативной разработкой.

Илья Вирник, «Яндекс.Такси», Flutter/iOS разработчик

Этап развития

После релиза MVP начинается этап развития, на котором у Flutter-команды добавление новых функций, по нашим подсчетам, происходит на 20% быстрее. Достигается это преимущество за счет тестирования.

Плюсы:

Наличие автотестов, хорошее покрытие UI и бизнес-логики у Flutter уменьшает шанс того, что нововведения «сломают» что-то в текущей версии.

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

Минус:

Потребуется больше устройств, но это незначительно отражается на бюджете.

В среднем на Flutter будет в полтора раза меньше ошибок, чем на нативной разработке. Также вам понадобится всего один итоговый прогон. Разумеется, тесты функций, завязанных на железо устройства, придется прогнать на обеих платформах (iOS и Android). К примеру, сканер штрих-кодов, использующий камеру телефона.

Если разработка не замедлится слишком большим количеством ошибок, вы сможете сэкономить дополнительное время

С преимуществами разобрались, а что насчет областей применения?

Какие продукты можно реализовать на Flutter

Кратко — любые. Сейчас Flutter широко используется для создания приложений в Alibaba, «Яндекс», Airbnb, Uber и других крупных компаниях. Мы считаем, что фреймворк лучше всего подходит для среднего и крупного бизнеса.

(Малому бизнесу Flutter не противопоказан, но полноценное мобильное приложение — это значительный бюджет, поэтому тут скорее выберут дешевое коробочное решение.)

С помощью Flutter можно создать приложения для:

  • различного ритейла (программы лояльности, каталог, онлайн-магазин);
  • банков и финтеха (работа с малым бизнесом);
  • поставщиков и франчайзи;
  • крупного бизнеса (контакт-центры, контроль курьеров, организация внутренних процессов).

Поиски быстрых и выгодных решений привели во Flutter специалистов из разных сфер. Например, Медуза решила отказаться от натива в пользу кроссплатформы, чтобы было легче развивать приложения синхронно. Другие, как команда «Яндекс.Такси», нуждались в оперативном развитии одной из платформ.

У нас была цель — разработка UI за два с половиной месяца. C нуля. В таких жестких условиях главными для нас были: быстрая компиляция, хороший тулинг, скорость UI, легкость интеграции нативного кода и интеграция в нативный код. Все это есть во Flutter. Для нас он был новой технологией. Пришлось защищать проект перед начальством, так как у нас не было точных данных о скорости разработки, тестировании и стоимости поддержки. Но в итоге снятые в ходе разработки метрики полностью оправдали наш выбор.

Геннадий Евстратов, «Яндекс.Такси», руководитель группы iOS-разработки

На данный момент у Surf в разработке пять приложений на Flutter для различных отраслей и целей. Мы опросили клиентов, приложения которых уже запущены или еще находятся в разработке. Первое недавно вышло в релиз — приложение для аптечной сети «Ригла».

У «Риглы» около 70% мобильных пользователей и три аптечных бренда с единым складом. Создавать шесть нативных приложений неразумно. Мы долго изучали особенности натива и Flutter. В итоге для наших целей выбрали кроссплатформу от Google. Surf привнесли в продукт свежие идеи, часть из которых мы сразу же реализовали в веб-версии интернет-магазина.

Анастасия Боева, аптечная сеть «Ригла», директор по интернет-продажам

Вопросы и ответы

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

Почему Flutter, а не другая кроссплатформенная технология?

Flutter работает быстрее и стабильнее других фреймворков — на частоте 60 кадров в секунду. Это позволяет сделать анимации более плавными и запускать приложения даже на старых моделях смартфонов. Внешний вид и UX Flutter-приложений делают их неотличимыми для пользователя от нативных.

За счет чего экономится время разработки?

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

Из-за этого кроссплатформенные приложения выгоднее, чем нативные. Технические особенности Flutter позволяют разрабатывать приложения еще быстрее.

Насколько Flutter безопасен?

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

Что если Google забросит Flutter?

Если однажды Google решит свернуть проект, ваши приложения будут в безопасности. Исходный код Flutter общедоступен, в случае прекращения поддержки вы можете просто взять кодовую базу и все текущие наработки, а также спокойно реализовывать новые функции.

Почему все не перешли на Flutter, если он так хорош?

Flutter набирает популярность. По данным Stack Overflow за 2019 год, его назвали любимым фреймворком 75% опрошенных — а это 3 место. Но за нативные приложения можно не переживать, они никуда не денутся.

Заключение

Flutter — не волшебная палочка, но перспективный фреймворк по скорости внедрения и широте охвата. Мы убеждены, что на горизонте 3-х лет до трети среднего и крупного бизнеса перейдет на Flutter вслед за коллегами из Tencent, Alibaba, «Яндекс» и другими.

Если вы ищете вариант быстрой разработки приложения для iOS и Android с перспективами развития, без серьезных потерь в качестве и бюджете — дайте шанс Flutter уже сейчас, как это сделали Surf и наши клиенты.

Опытом мобильной разработки на Flutter делились клиенты Surf и гости Flutter Dev Podcast нашего тимлида Евгения Сатурова.

115115
11
162 комментария

Спасибо за статью. Flutter действительно классная штука, и я считаю его лучшим мультиплатформанным решением сейчас, но позвольте добавить немного дегтя. Возможно, я сгущаю краски, но все же. Стоит понимать, что, как и любая мультиплатформа, flutter реализует штуки, которые до этого были реализованы нативными командами гугла и эппла. То есть в лучшем случае у вас будет возможность поддерживать все, что есть нового в этих платформах, но с определенной задержкой по времени. Это в лучшем. А в худшем часть функционала вообще не будет реализована или отдастся на откуп написателям плагинов.
     Продолжая предыдущий пункт. Совместимость с нативнми функциями реализуется с помощью плагинов. И эти плагины часто делаются обычными людьми, а не самой командой разработки флатера и могут косячить. И чем нетривиальнее ваша задача, тем больше вероятность, что вы упретесь в их некорректную работу. Например, я копался с флаттером в январе-феврале того года. И мне надо было реализовать логин во внутреннем браузере приложения. На тот момент существовало 2 плагина длля работы с встроенным браузером. 1 был откровенно плох (не помню то чно чем, но там был очень ограниченный набор функций). А во втором, который использовался массово, не работала клавиатура. То есть она не появлялась вообще, когда ты пытался заполнить текст в формах. Насколько я знаю, этот баг актуален до сих пор (спустя больше чем год).  То есть чем больше нетривиальных действий использует ваше приложение, тем больше вероятность встрять. А если ваше приложение не имеет серьезной логики, а нужно только для размазывания json по формам, то да, флаттер отличное решение. Только мобильная версия сайта в таком случае справится не хуже.
    Так же не забывайте, что флаттер разрабатывается командой гугла,а не эпла. Поэтому основной упор делается на элемента материал дезайна. Насколько я знаю, там есть и ios ui элементы, но их не так много. И ui вам скорее всего придется также разделять на 2 части, так как ваше приложение та же модерация эпла может завернуть из-за несоответствия гайдлайнам. То есть вы опять придете к 2 версиям ui и 2 версиям бизнеслогики. 
И ваш общий код будет просто нашпинован условиями if(IOS){} if(Android){}
Это то, с чем я столкнулся год назад. Возможно, сейчас это все решаемо

34

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

Пройдусь по некоторым пунктам:
1) "А в худшем часть функционала вообще не будет реализована или отдастся на откуп написателям плагинов." - хороший Flutter-разработчик должен быть таким писателем плагинов потенциально для каждой из поддерживаемых платформ, это факт. Да, есть кейсы, который вы сами не решите, например, вы вряд ли напишете WebView. С каждым днём таких проблем всё меньше, а экосистема развивается.
2) "Только мобильная версия сайта в таком случае справится не хуже." - ну это не так, приложение остаётся приложением и даёт другой уровень UX и вовлечения. На чём бы ни было оно написано.
3) "То есть вы опять придете к 2 версиям ui и 2 версиям бизнеслогики." - а откуда берётся 2 версия бизнес-логики? Что касается дизайна, наши проекты (как и подавляющее большинство приложений из топов сторов) чаще всего имеют уникальный кастомный дизайн с оглядкой на бренд-гайды кастомера. И там да, есть место для платформенных адаптаций, но речь не идёт о двух принципиально различных дизайнах с нуля под две платформы никогда. Проблем с ревью в Apple никогда не было по этому критерию.
4) "ваш общий код будет просто нашпинован условиями if(IOS){} if(Android){}" - полез специально проверять, на 90к строк кода нашего проекта 20 таких условных проверок. Кажется не страшно.

9

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

а то что не пройдет в эппл по гайдлайнам это интересно, про такое я еще не слышал о флаттере

1

Например, я копался с флаттером в январе-феврале того года. И мне надо было реализовать логин во внутреннем браузере приложения. На тот момент существовало 2 плагина длля работы с встроенным браузером.

Вести с полей — проблемы с внутренним браузером никуда не делись. У нас точно такая же задача (логин в сторонней системе через браузер) и ожидаем решения траблы с клавиатурой с октября 2019. Но справедливости ради, баг этот случается у примерно 2-5% аудитории.

1

Хорошая статья, по делу. Мы в Mad Brains тоже активно развиваем направление Flutter, пока опыт очень позитивный. Главная сложность — это специалисты. Приходится переучивать или учить с нуля. Для бизнеса это не особо критично, он получает результат, а вот для студий, желающих вступить на эту дорожку, может быть сложно.
Также в статье не хватает, как мне кажется, сравнения более развернутого с другими кросплатформенными решениями, например, с Kotlin Mutltiplatform. Уверен, подобный анализ будет полезным. Можем подготовить статью от нашей команды, если сообществу интересно

21

Подготовьте пожалуйста статью)

5

@Surf Как вы справляетесь с поиском специалистов?

1