Почему мы решили написать о Flutter именно для E-commerce приложений? По данным аналитики Data Insight в 2022 году в России общий оборот рынка интернет-торговли составил 5,7 трлн рублей (на 38% больше в сравнении с 2021-м), а количество онлайн-заказов выросло на 65%, до 2,8 млрд.

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

Что такое Flutter, и почему мы говорим о нём в контексте E-commerce

Flutter — это фреймворк от Google для разработки мобильных и веб-приложений. Он позволяет использовать одну и ту же кодовую базу для деплоя под разные платформы, экономя время и ресурсы разработчиков.

Google выпустил Flutter в 2017 году после анализа преимуществ и недостатков существующих кроссплатформенных решений. В начале своего пути, как и любая новая технология, Flutter столкнулся с определенной долей скепсиса со стороны ИТ-профессионалов. Сомневались, достаточно ли он функционален и продолжит ли Google финансировать и развивать платформу? К счастью, Flutter успешно перешагнул через все «детские болезни» и резко вырвался вперед по популярности. Теперь это самая востребованная кроссплатформенная технология на рынке.

Что такое кроссплатформа? Кроссплатформа — это набор инструментов, который позволяет создать одно приложение для нескольких платформ. Это отличает Flutter от нативной разработки приложений для E-commerce, где для разных ОС пишется два приложения на разных языках программирования. Фреймворк позволяет использовать единую кодовую базу для шести основных платформ: iOS, Android, MacOS, Windows и Linux и веб.

Наш опыт с Flutter

В Surf мы начали работать с Flutter в 2019 году и теперь у нас большая команда разработчиков на этой платформе. Мы активно участвуем в развитии Flutter в России — создаем подкасты, публикуем статьи и устанавливаем стандарты через наш репозиторий SurfGear.

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

Flutter отлично подходит для e-commerce приложений, но наш опыт подсказывает, что эту технологию недооценивают. 

• Владельцы e-commerce проектов часто выбирают коробочные решения, как быстрый и недорогой вариант. Но «коробка» ограничивает компанию в доработке своего основного инструмента для цифровых продаж. Изменить что-то в готовых решениях сложно — в результате компания получает приложение, которое не всегда удобно для пользователей  и имеет низкую конверсию.

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

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

Кстати, именно по этой причине мы считаем Flutter оптимальным решением не только для e-commerce но и для финансовых приложений — на этом фреймворке можно разработать банковское приложение за 6 месяцев. 

Давайте сравним все эти варианты более подробно:

Что выбрать для E-commerce app: Flutter vs коробочное решение

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

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

Ограничения коробочных приложений

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

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

• Ограниченная техническая поддержка. Сбои и ошибки придётся исправлять самостоятельно. Доступ к поддержке обычно доступен только на более дорогих тарифах, но даже там можно столкнутся с длинным временем ответа и медленным устранением проблем.

Преимущества Flutter:

Запуск проекта на Flutter — это не только кодинг, но и много подготовки. Мы изучаем потребности клиентов, как устроены внутренние процессы компании и как пользователи будут взаимодействовать с продуктом. Затем с нуля разрабатываем удобный и понятный UI/UX. По сравнению с готовыми решениями, такой подход всегда дает больше свободы. Можно настроить рабочий процесс как угодно, реализовать любой дизайн и добавить функции, полезные в ритейле — например, программу лояльности.

Flutter:

• Помогает добиться отлаженного UX: фреймворк позволяет создавать интуитивные интерфейсы для любых пользовательских сценариев.

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

• Гибкий: Flutter позволяет решать любые задачи: можно создать собственный процесс заказа, адаптированный под конкретную индустрию или целевую аудиторию. Возможна интеграция программ лояльности любой сложности.

• Безопасный: код полностью принадлежит клиенту, он полностью контролирует проект и определяет его дальнейшее развитие. Это отличает кастомную разработку на Flutter или любом другом языке от готовых решений, где код находится в собственности разработчика и лишь арендуется клиентом. 

Flutter vs нативная разработка

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

• Для iOS: Swift, Objective-C
• Для Android: Kotlin, Java, 

Разработка ведется в Xcode для экосистемы продуктов Apple, Android Studio — для всех остальных платформ.

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

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

Мы в Surf начали работать с этой технологией в 2019 году. С тех пор мы создали в компании большой отдел Flutter-разработки, сотрудничаем с Google в части развития фреймворка, развиваем и поддерживаем Flutter-сообщество в России: записываем подкасты, пишем статьи, задаём собственные стандарты архитектуры в репозитории SurfGear. 

За два с лишним года мы реализовали на Flutter более 10 разноплановых проектов, опытным путём проверив, что Flutter подходит для решения самых сложных задач: будь то видеостриминговый сервис, где необходимо высокое качество видео и скорость его передачи, или банковское приложение, где особенно важна безопасность. В этой статье мы уже разбирали, почему Flutter — оптимальное решение для банковского приложения. 

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

Другой популярный вариант: компания вкладывает много ресурсов в кастомную нативную разработку. Такое приложение обладает очень большим преимуществом перед коробкой: конверсия в нём выше, а реализовать запросы компании — проще. Но у нативной разработки есть один серьёзный недостаток — это высокая стоимость. 

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

Flutter vs коробочное решение

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

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

Недостатки коробочного решения:

• Низкая адаптация к рынку. Новые фичи для операционных систем появляются в коробочных приложениях гораздо позже, чем при кастомной разработке. Приложение быстро перестаёт оправдывать ожидания пользователей. 
• Низкая конверсия. В коробочном решении сложно настроить удобный флоу заказа, учитывающий всю специфику компании: разные варианты доставки, систему лояльности, персонализированные предложения. Из-за этого пользователи часто бросают процесс оформления заказа на полпути, конверсия, соответственно, падает.
• Минимальная техподдержка. Сбои и ошибки придётся решать собственными силами. Техподдержка доступна только в расширенных версиях с увеличенным тарифным планом. К тому же, она не решает кастомные запросы компании.

В чём выигрывает Flutter:

Разработка приложения на Flutter — это разработка с нуля. Она подразумевает большую подготовительную работу: исследование потребностей клиентов компании, особенностей внутренних процессов, всех точек взаимодействия клиента с продуктом, проектирование удобного UI/UX. Результат всегда будет заведомо более кастомный, чем с типовым коробочным решением. В приложении можно детально проработать флоу, реализовать любой дизайн, учесть программу лояльности и другие полезные для ритейла фичи.

Flutter:

• обеспечивает качественный UX — он позволяет тщательно изучить пользовательский опыт и спроектировать удобный интерфейс с учётом всех юзкейсов.
• обеспечивает высокую конверсию. При разработке на Flutter, как и при нативной, можно учесть все барьеры и стоп-факторы. И сделать путь клиента к заказу максимально коротким и понятным.
• гибкий в реализации любых задач и запросов. На Flutter можно сделать свой флоу заказа, с учётом индустрии или особенностей ЦА. Также можно реализовать программу лояльности любого уровня сложности.
• надёжный: кодовая база в этом случае — собственность заказчика. В отличие от коробочного решения, где код принадлежит компании-разработчику и только арендуется заказчиком. В разработке на Flutter, как и при любой другой кастомной разработке, компания управляет проектом и влияет на его развитие.

Flutter vs нативная разработка

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

• для iOS: Swift, Objective-C и Xcode;
• для Android: Kotlin, Java и Android Studio.

У таких приложений, как правило, нет критичных недостатков. В них можно полноценно пользоваться сложными фичами, задействуя камеру, GPS или акселерометр. Но и разработка и последующее сопровождение нативных приложений существенно дороже. Разработчики подстраивают весь интерфейс, бизнес-логику и вёрстку под особенности каждой платформы. 

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

Почему Flutter — хороший выбор для e-commerce приложения

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

Можно реализовать любой дизайн. Для e-commerce приложений важен уникальный и удобный UX/UI. Flutter позволяет реализовать любой дизайн, даже со сложными анимациями, как в приложении The Hole.

Быстрый выход на рынок. Приложение на Flutter можно запустить быстрее, чем нативное. Это важно в условиях жесткой конкуренции e-commerce индустрии, где каждый день, проведенный за разработкой, означает, что компания не получает прибыль.

Обеспечивает безопасность данных. Код приложения защищен от реверс-инжиниринга, и соответствует всем требованиям безопасности.

Использует полный потенциал iOS и Android. В этом плане, Flutter практически не уступает нативным приложениям. Фреймворк имеет доступ к Touch и Face ID, сканеру отпечатков, GPS, камерам и любым другим платформенным API.

Примеры успешного использования Flutter: 3 кейса Surf

Flutter набирает популярность для разработки приложений в секторах среднего и крупного бизнеса. А некоторые компании уже отказывается от нативных решений в пользу этой кроссплатформенной технологии. Рассмотрим, как Flutter помогает решать бизнес-задачи на примерах наших клиентов в сфере E-commerce и не только.

1. Сети аптек «Ригла», «Живика», «Будь здоров»

Самя большая российская аптечная сеть обратилась к нам с задачей разработки приложений для трех своих брендов: «Ригла», «Живика», и «Будь здоров». Цель была амбициозная: шесть приложений для двух операционных систем. С помощью Flutter мы собрали их на одной кодовой базе и сократили расходы клиента на разработку на 40% по сравнению с нативными решениями.

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

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

2. Приложение доставки продуктов «Ужин дома»

Для проекта «Ужин дома» мы разработали на Flutter лаконичное и функциональное приложение. Этот кейс подчеркнул важность синергии между веб-сайтом и мобильным приложением в e-commerce.

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

3. Видеостриминговая платформа The Hole

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

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

4. Приложение для прорабов и строителей «Петрович.BRO», кейс Surf

«Петрович» — это крупная сеть магазинов строительных материалов. Клиент пришел к нам с задачей по перенесению функциональности веб-сервиса Петрович.BRO в формат мобильного приложения.

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

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

5. Приложение для модного бренда LOVE REPUBLIC, кейс Surf

За 6 месяцев мы создали обновленное приложение для fashion-бренда LOVE REPUBLIC. Клиент планировал редизайн и обновление функций, так как с момента релиза первого приложения прошло уже много времени, и  рынок e-commerce значительно изменился. Нужны были новые возможности, которые помогли бы увеличить число продаж через мобильный канал. И в этом кейсе Flutter помог создать удобное приложение с современным дизайном, полностью соответствующим обновлённой концепции бренда.

Помимо других задач,  нужно было настроить deep linking (внешнее связывание) и защищённые маршруты, для того чтобы связать приложение с официальным сайтом LOVE REPUBLIC. Deep linking помогает наладить быстрый доступ к внутренним компонентам приложения.

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

В разработке мы использовали AutoRoute — навигационный пакет Flutter. Он позволяет легко создавать deep linking и использует генерацию кода для упрощения настройки маршрутов.

Заключение

Flutter сегодня — это самая востребованная кроссплатформенная технология. Ожидается, что использование Flutter в разработке приложений увеличится, особенно среди узнаваемых брендов в ритейле (Ригла), фудтехе (KFC) и финтехе (Росбанк).

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