Тема
Приложения
Дата
Спрос на вопрос
38 показов в месяц

Capacitor, React Native или Flutter: чем платит бизнес за выбор

Flutter или React Native, а может Capacitor: экономия против натива у всех похожая. Разбираю, чем именно платит владелец приложения при каждом выборе.

Flutter или React Native, а может Capacitor - на бюджет разработки это влияет слабо. Все три дают примерно одинаковую экономию против двух нативных команд, порядка 40%, и приложение на любом из них выходит от 350 000 до 1 200 000 ₽ за 8-16 недель до релиза. Разница вылезает позже, и всегда в трёх местах: можно ли переиспользовать код в вебе, за сколько чинится критический баг в продакшене и кого вы найдёте на поддержку через два года.

Я восемь лет в мобильной разработке и два с половиной года владел архитектурой гибридного приложения на iOS и Android, поэтому дальше разговор про эти три пункта, а не про синтаксис.

Кроссплатформенная разработкаот 350 000 до 1 200 000 ₽сроки: 8-16 недель

Что у них общего

Все три решают одну задачу: одна кодовая база вместо двух. Одна фича делается один раз, тестируется один раз, релизится в оба магазина одним циклом. Один дизайн, один набор тестов, одно код-ревью.

Экономия против натива у всех примерно одинаковая, и не потому, что технологии похожи, а потому, что экономится одно и то же - второй комплект работы. На моём проекте это дало больше 10 000 $ разницы против нативной разработки при том же наборе функций: билеты, оплата, сканирование QR, бонусы, фотоальбомы.

Дальше начинаются различия, и они не в производительности, как принято думать.

Чем платит бизнес за Capacitor

Внутри нативного проекта работает WebView, а в нём - обычное веб-приложение. Системные возможности подключаются плагинами на Swift и Kotlin.

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

Чем платите. Особенностями WebView. На Android он обновляется отдельно от системы, и на дешёвых устройствах некоторых вендоров бывает старым: где-то не работает размытие фона, где-то иначе считается высота при открытой клавиатуре. На iOS отдельная история с резиновым скроллом и клавиатурой. Всё это решается, но это дни работы, а не ноль. И мажорное обновление самого Capacitor раз в год стоит примерно неделю: ломается не ядро, а сторонние плагины.

Чем платит бизнес за React Native

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

Что получаете. Списки и жесты ближе к нативу, чем в WebView. Огромный рынок исполнителей: любой React-разработчик входит в проект без переучивания, а таких людей больше всего. Обновления по воздуху тоже есть.

Чем платите. Экосистема веба недоступна: своя система стилей, никакого DOM, значит, готовые веб-библиотеки под графики, редакторы и карты не переиспользуются. Плюс двойная зависимость: обновления самого React Native исторически болезненные, а часть сторонних библиотек до сих пор требует ручной правки нативной части. И веб из этой же базы получается только частично, через отдельную прослойку, с оговорками.

Чем платит бизнес за Flutter

Собственный движок рисует каждый пиксель сам. Язык Dart, интерфейс не использует системные элементы вообще.

Что получаете. Лучшую из трёх производительность на тяжёлой анимации и сложной графике. Здесь Flutter объективно впереди, и если ваш продукт живёт за счёт плавности - интерактивные диаграммы, редактор, богатая анимация в каждом переходе - выбирайте его, спорить не буду. Плюс картинка идентична на iOS и Android, что экономит время дизайнера и тестировщика.

Чем платите. Языком. Dart не используется больше нигде, поэтому веб-разработчика в проект не подключить, а найм узкий: людей на рынке меньше, ставка выше, замена ищется дольше. Веб из той же базы формально есть, но бандл тяжёлый и для поисковой выдачи он не годится. И то, что Flutter рисует системные элементы сам, имеет обратную сторону: при выходе новой версии iOS или Android вы ждёте, пока фреймворк догонит внешний вид системы.

Три вопроса, которые решают выбор

ВопросОтвет «да» ведёт к
Нужен веб из той же кодовой базыCapacitor
Продукт живёт за счёт анимации и графикиFlutter
Уже есть команда React-разработчиковReact Native
Критично чинить баги за часы, а не за дниCapacitor или React Native
Приложение в основном про списки, формы и оплатулюбой, берите дешевле

Сравнение

Capacitor против Flutter: крайние точки выбора

Сравнение по осям, которые чувствует владелец приложения. Чем выше значение, тем лучше показатель.

А Capacitor Б Flutter

Переиспользование в вебе

А 95
Б 40

перевес А на 55 Тот же билд открывается в браузере

Тяжёлая анимация и графика

А 45
Б 95

перевес Б на 50 Свой движок рендеринга

Правка мимо ревью магазина

А 90
Б 35

перевес А на 55 Веб-слой обновляется по воздуху

Одинаковая картинка на двух платформах

А 60
Б 95

перевес Б на 35

Найти разработчика

А 85
Б 55

перевес А на 30 Веб-разработчиков больше, чем на Dart

Доступ к готовым библиотекам

А 90
Б 65

перевес А на 25 Вся веб-экосистема против пакетов Dart

Скорость исправления критичного бага

Это та строка, которую никто не закладывает в смету, а платит по ней каждый.

В магазине приложений релиз проходит ревью. На практике это от нескольких часов до недели, и предсказать нельзя. Если у вас в проде сломалась оплата, вы ждёте.

У Capacitor и React Native есть обновления по воздуху: собранный код выкладывается на сервер, приложение подтягивает его при следующем запуске. Исправление доезжает до пользователей за час. На своём проекте я держал такой механизм с возможностью откатиться на предыдущую версию, и это спасало не раз. Ограничение общее: так обновляется только код, а нативная часть - плагины, разрешения, версии SDK - всё равно едет через магазин.

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

Найм и стоимость поддержки

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

Самый широкий рынок у React Native: React знают почти все фронтендеры. Следом Capacitor: там нужен веб-разработчик, а их больше всего в принципе, только нужен человек, понимающий мобильную специфику, - таких меньше. Самый узкий рынок у Flutter, потому что Dart живёт только внутри Flutter, и специалист приходит на проект уже с конкретной специализацией и соответствующей ставкой.

Есть и обратная сторона, честная: разработчик на Flutter, которого вы нашли, скорее всего сделает приложение целиком, а вот веб-разработчик на Capacitor может не справиться с нативными плагинами, и вам понадобится второй человек на Swift и Kotlin.

Что я выбираю и почему

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

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

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

Посчитаем вашу задачу

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

Обсудить задачу
Обсудить задачу

Перезвоню сам

Оставьте имя и номер. Позвоню в рабочее время, обычно в течение пары часов.