Наши статьи

Сравнение 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 очень распространен

Наличие кейсов банковских приложений

Flutter:
Есть (Рос Банк, NuBank). Так же от NuBank есть презентация на 54 слайда с аналитической информацией почему они выбрали флаттер.

React Native:
Известных кейсов нет

Работа с нативом

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 для разработки своего продукта.

Читайте также на Medium