Flutter add-to-app. Как проверять гипотезы и добавлять новые фичи в нативные приложения, когда нет ресурсов разработки

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

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

Ситуация 2. Бывает и случаи попроще, когда корпорация успешно развивает нативные приложения, и отдельные продуктовые команды хотят внедрять новую функциональность, проводить эксперименты и проверять свои продуктовые гипотезы через A/B тесты. Например, внедрить новый блок рекомендаций ресторанов и оценить его эффективность в сравнении со старым, добавить функцию онлайн-регистрации на рейс и проверить активность пассажиров; заменить сторис на первом экране приложения на баннеры с предложениями новых продуктов.

Что делать. Использовать технологию, которая позволяет объединить нативное приложение и кроссплатформенные компоненты. Проще говоря, изолированно и оперативно встраивать в объёмное нативное приложение небольшие кроссплатформенные фичи, чтобы их тестировать в реальных рыночных условиях. Такие модули также позволяют плавно и постепенно заменять нативные части приложения на кроссплатформенные без приостановки поддержки уже существующего приложения. Такая технология называется add-to-app и реализуется на Flutter. В этой статье расскажем, как работает Flutter add-to-app на реальных примерах, когда стоит использовать технологию в продукте, какие сложности могут возникнуть и как их обходить.

Add-to-app позволяет добавлять новую функциональность на Flutter в работающее нативное iOS или Android-приложения. Если в приложении не хватает какого-то экрана с новым продуктом или ещё нет программы лояльности,, то их можно разработать как кроссплатформенный Flutter-модуль и встроить в существующее приложение, например на Swift, Kotlin или React Native. Часть пользовательского интерфейса отобразится при помощи Flutter, не затрагивая нативные сценарии и части приложения.

Например, команда необанка Simply разработала платежи через add-to-app.

Add-to-app помогает сократить бюджет, потому что внедрение кроссплатформенной функциональности на Flutter обходится дешевле, чем нативная разработка. В этом случае созданием и внедрением модуля занимается одна команда Flutter-разработчиков, а в случае натива над этим работают две команды — iOS и Android. При этом, кроссплатформенный кусок интерфейса выглядит и ощущается как нативный. Тот же Simply внедрил модули на Flutter, чтобы не загружать нативных разработчиков и сэкономить время.

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

Или целое приложение. С помощью Flutter add-to-app можно реализовать полный переход с нативного приложения на кроссплатформенное, которое будут поддерживать только Flutter-разработчики. Каждый нативный функциональный модуль постепенно заменяется, пока приложение полностью не станет кроссплатформенным. При этом компания продолжает развивать продукт.

Например, мы помогали fashion-бренду Love Republic переходить с натива на Flutter за пять месяцев. Мы провели редизайн устаревшего приложения, обновили логику оформления заказа, доработали основные сценарии и смогли повысить конверсию в покупку в 2 раза. Мы заменили нативное приложение кроссплатформенным и на «Чёрную пятницу» приложение принесло компании рекордную прибыль.

Продуктовые команды из крупных компаний используют Flutter add-to-app гораздо чаще, чем рассказывают об этом публично. С одной стороны это странно при весьма активном сообществе, а с другой, это может быть связано с тем, что еще несколько лет назад эта технология работала неидеально и вызывала большие сложности при внедрении — про них расскажем позже. Тем не менее есть некоторые успешные кейсы применения технологии.

Яндекс Про внедрял Flutter-модули, чтобы легче масштабировать приложение и добавлять новые разделы

Яндекс разрабатывает свои сервисы на Flutter. Фреймворк используют команды Яндекс Про и Go. Например, в приложении Яндекс Go в разделе для каршеринга Драйв нативные части были постепенно переписаны на Flutter через add-to-app, чтобы упростить дальнейшую поддержку. А Яндекс Про использует Flutter add-to-app, чтобы перевести Android-приложение на кроссплатформу и одновременно создать приложение для iOS.

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

Один из примеров использования Flutter add-to-app в Яндекс Про — финансовый раздел для водителей такси. Яндекс добавил новый модуль, чтобы отобразить баланс, доступные банковские предложения и историю транзакций. При этом раздел с пластиковой картой и кешбэка остались нативными — разработчики использовали готовый BankSDK, тот же, что и в основных нативных приложениях Яндекс Банка.

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

Simply — первый мобильный необанк в Казахстане. Пользователи Simply могут оплачивать счета и услуги онлайн, расплачиваться в магазинах бесконтактно, переводить деньги на карты других казахстанских банков и зарубеж, копить кешбэк и открывать сервисы банка без доступа к интернету. Команда Simply разработала модуль платежей в приложениях для iOS и Android при помощи Flutter add-to-app. Разработчики выбрали такой вариант, чтобы объединить лучшие возможности от Flutter и Kotlin Multiplatform в одном продукте.

В результате скорость разработки новых фичей увеличилась в 2 раза, а переход внутри нативных приложений во Flutter-модуль для совершения платежей проходит незаметно для 100% пользователей. Команда подчеркивает еще одно преимущество add-to-app — расширяемость, которая очень нужна молодому банку. Проверенный платежный модуль от команды Simply будет интегрироваться в приложение Мой Beeline.

Xianyu, Alibaba внедрял модули, чтобы ускорить обработку транзакций

Xianyu — сайт для продажи подержанных товаров или аналог Авито от Alibaba Group. Команда Xianyu начала изучать возможность внедрения Flutter-модулей еще в 2020 году. Код для цепочки транзакций был в плохом состоянии и не мог обеспечить адекватную поддержку бизнеса. Их гипотеза состояла в том, что использование Flutter поможет настроить архитектуру и ускорить обработку транзакций.

Результат: Xianyu решили две глобальные бизнес-задачи.

В процессе внедрения команда Xianyu столкнулась с трудностями:

Трудности с внедрением вполне объяснимы: в 2020-м году во Flutter уже был add-to-app, но он работал очень плохо. Технология не была готова для широкого использования. Но в течение трёх последних лет команда Flutter вносила технические изменения во фреймворк, например, добавили FlutterEngineGroup, поэтому сейчас add-to-app работает лучше. Настолько лучше, что с ним строит свои сервисы Яндекс. Наши разработчики провели исследование (R&D) и протестировали технологию. Сейчас её можно использовать и эффективно решать бизнес-задачи.

Чтобы новая фича оказалась внутри существующего приложения, мы проходим через пять шагов:

Когда мы заменяем натив кроссплатформенными модулями

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

Можно выпускать кроссплатформенное приложение итерационно: сначала сделать MVP и включить в него 20-30% от того, что уже умеет нативное приложение. Часть функциональности при релизе уйдёт, а пользователям и бизнесу это невыгодно. Крупным компаниям лучше переходить на Flutter постепенно через add-to-app. В этом случае мы встраиваем модули, чтобы помочь нашим клиентам перейти на кроссплатформу параллельно основной работе приложения и релизу обновлений. И компаниям не нужно будет поддерживать свои нативные приложения и в это же время платить за разработку нового.

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

Немного технических деталей. У add-to-app есть ограничения, но в ходе исследования мы выяснили, что каждое из них так или иначе можно обойти.

Ограничение №1. Нельзя встроить несколько модулей

Решение. Можно через вложенность модулей

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

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

Именно технического ограничения, которое бы сделало внедрение нескольких модулей в одно приложение невозможным, нет. Возможно, «под капотом» это не очень красиво выглядит, но работает и на производительности не отражается. И скорее приносит неудобства разработчикам, а не клиентам и пользователям.

Ограничение №2. Неудобная разработка модулей под нативное приложение

Решение. Неудобства испытывает только разработчик, который пишет код

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

В Яндексе тоже с этим столкнулись:

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

Позволяет дорабатывать уже существующие приложения

Если бизнес-проект ведётся много лет, и в приложении накопилось много легаси, из-за чего оно теряет в производительности и плохо масштабируется, можно подумать о внедрении модуля на Flutter. Во-первых, не будет необходимости переписывать все приложение сразу. Во-вторых, новый модуль заменит устаревший код и улучшит работу приложения. И в-третьих, компания сможет продолжить развитие продукта, добавляя модули без остановки работы приложения и без новых релизов в сторах. Потери некоторых функций, которая могла бы быть, если резко переходить с нативного приложения на Flutter MVP, тоже не будет.

Поддерживает разные нативные технологии

Интеграция Flutter не исключает использования нативных языков и фреймворков. Add-to-app «дружит» с разными технологиями, поэтому в приложении можно использовать нативные SDK Android и iOS, Swift, Kotlin Multiplatform, React Native и Flutter одновременно. У компании просто появляется возможность внедрения Flutter-компонентов в существующее приложение и плавного перехода на кроссплатформу. Если речь идёт о внедрении дополнительных функций для тестирования, add-to-app — возможно лучший подход.

Можно развивать проект или разрабатывать новые функции без нативных разработчиков

Даже если у компании уже есть нативные приложения и она выделяет бюджет на содержание двух отдельных команд, не всегда есть смысл нагружать нативных разработчиков задачами, связанными с тестированием гипотез. И если команда уже занята на других проектах, для внедрения функциональности приходится искать и нанимать новых сотрудников. Найти двух хороших native-разработчиков сложнее, чем одного Flutter-разработчика, и внедрить новые фичи с add-to-app быстрее и дешевле. А при долгосрочном переходе на кроссплатформу можно нанять полноценную Flutter-команду.

И ещё несколько преимуществ:

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

Сколько это стоит: примерно столько же, сколько обычная разработка функциональности на Flutter. Использование add-to-app может быть дороже, но незначительно. Это связано с неудобствами для разработчиков во время интеграции и тестирования.

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

Где еще почитать и послушать об add-to-app: