Сравнение React Native/Flutter на реальном примере
Крупная финансовая компания собралась запускать новый продукт с мобильным приложением. Им нужно было быстрое решение для обеих платформ, и они начали выбирать между двумя кросс-платформенными фреймворками. Это были 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 очень распространен
Используются стабильные и быстрые мосты для доставки сообщений с (если необходимо) 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 для разработки своего продукта.