Крупная финансовая компания собралась запускать новый продукт с мобильным приложением. Им нужно было быстрое решение для обеих платформ, и они начали выбирать между двумя кросс-платформенными фреймворками. Это были React Native и Flutter. Помимо таких параметров, как производительность, частота кадров, потребление батареи, они также сравнивали ценные бизнес-характеристики, такие как сложность найма разработчиков, поддержка экспертизы, стоимость команды. Сравнение React Native/Flutter на реальном примере
Крупная финансовая компания собралась запускать новый продукт с мобильным приложением. Им нужно было быстрое решение для обеих платформ, и они начали выбирать между двумя кросс-платформенными фреймворками. Это были React Native и Flutter.
Когда эта компания обратилась к нам с проблемой выбора фреймворка, мы решили, помимо ответов на стандартные вопросы, показать им разницу на реальном примере, сделав mvp с минимальным функционалом (так как обе экспертизы присутствовали в нашей команде), которое ответит на многие их вопросы.
Проект: приложение с 2 экранами.
1 - считать данные с кредитной карты с помощью камеры 2 - чтение данных с кредитной карты с помощью nfc
Производительность/графика
Flutter: стабильные 60 fps, поддержка 120 Гц дисплеев, прогрев шейдеров, хорошо справляется с анимациями, быстрая разработка анимаций, быстрый старт приложения
React Native: до 60 fps, плохо справляется с тяжелыми анимациями, старт приложения занимает больше времени
Поддержка
Flutter: Поддерживается google и коммьюнити, ими разрабатываются готовые библиотеки для использования, так же очень большое количество популярных библиотек от коммьюнити. Большое коммьюнити
React Native: Поддерживается командой facebook, большое количество библиотек, большое комьюнити, легче заходить, так как javascript очень распространен
Flutter: Используются стабильные и быстрые мосты для доставки сообщений с (если необходимо) payload. Нативные библиотеки подключаются так же, как при разработке нативного приложения и используются так же. Так же можно открывать нативные экраны и использовать весь остальной нативный функционал
React Native: Для работы с нативом необходимо разрабатывать бриджи общения с нативом, которые сложны в разработке и до сих пор имеют несколько нерешенных проблем
Скорость разработки
Flutter: Быстрая за счет hot reload, hot restart и системы виджетов. Большое количество уже готовых виджетов
React Native: Есть аналогичный hot refresh, но в большинстве случаев работает не стабильно, ломая работу библиотек, javascript небезопасен, многие компоненты необходимо обновлять вручную
Тестирование
Flutter: Виджет тестирование, юнит-тесты, интеграционное тестирование. SDK для тестов поставляется вместе с Flutter
React Native: Инструменты тестирования неэффективны, так как используются разные движки javacript для разных режимов отладки
Найм разработчиков
Flutter: Меньшее количество резюме и вакансий из-за относительной новизны, но Dart это смесь из других ООП языков, что значительно снижает порог входа в язык абсолютно незнакомому с ним человеку что влияет на качество и скорость подбора, выше средняя ЗП по СНГ
React Native: Большее количество вакансий и резюме, низкий порог входа за счет javascript, что больше негативно влияет на качество и скорость подбора
Время разработки Demo App, ч
Flutter: 10
React Native: 18
Возникшие проблемы при разработке Demo App
Flutter: Не было flutter библиотеки для чтения номера карты. В нативной части библиотеки пришлось использовать часть кода из другой нативной библиотеки
React Native: Проблемы с версией gradle для подключения библиотек, долгая инициализация проекта, нерабочий релизник проекта из-за версий библиотек
Время сборки приложения с нуля (Mac Pro m1), сек
Flutter: 60
React Native: 180
Размер файла сборки (дебаг версия), мб
Flutter: 30.8
React Native: 50.4
В итоге, проанализировав риски, компания выбрала Flutter для разработки своего продукта.