Site icon AppTractor

Flutter vs React Native vs нативный код: сравнение быстродействия

inVerita и ее команда разработчиков мобильных приложений постоянно изучают производительность кроссплатформенных мобильных фреймворков, доступных на рынке, чтобы ответить на вопрос, какая технология лучше всего подходит для вашего продукта. Так мы и решили сравнить Flutter, React Native и нативную разработку.

Да, можно заметить, что React Native не выполняет никаких действий непосредственно на процессоре, и очевидно, что тяжелые задачи лучше будут работать у Flutter или Native приложений. Поэтому в этой статье мы решили исследовать производительность пользовательского интерфейса, которая оказывает гораздо большее влияние на повседневного пользователя мобильных приложений.

Измерение производительности пользовательского интерфейса является сложным и требует от инженера одинаковой реализации одинаковых функций на всех платформах. Мы использовали GameBench в качестве инструмента тестирования, чтобы не сомневаться и быть уверенными в том, что мы остаемся объективными (это не меняет того факта, что мы действительно любим Flutter в большинстве аспектов :), и по-прежнему выполняем множество проектов на React Native и нативной разработке). В GameBench есть много возможностей для улучшений, но нам удалось поместить каждое приложение в единую среду тестирования, что и было нашей целью.

Исходный код открыт, поэтому, пожалуйста, поэкспериментируйте и поделитесь своими мыслями с нами, если хотите. В UI-анимациях в основном используются разные инструменты на разных платформах, поэтому мы сузили все до библиотек, поддерживаемых каждой платформой (кроме одного случая), или, по крайней мере, мы сделали все возможное, чтобы добиться этого. Результаты тестирования могут отличаться и зависеть от ваших подходов к использованию тестов. Мы считаем, что вы, как потенциально истинный эксперт по конкретной технологии, можете довести свой конкретный набор инструментов до тех пределов, когда он превзойдет наши показатели, и мы будем рады, если вы это сделаете. Теперь давайте посмотрим на тесты.

Для тестирования мы использовали доступные Xiaomi Redmi Note 5 и iPhone 6s.

Репозиторий с исходным кодом находится тут.

Пример 1: бенчмарк списка

Мы реализовали один и тот же интерфейс для Android и iOS с использованием Native, React Native и Flutter. Мы также автоматизировали скорость прокрутки с помощью RecyclerView.SmoothScroller на Android. На iOS и React Native мы использовали подход с таймером и программной прокруткой до позиции. На Flutter мы использовали ScrollController для плавной прокрутки списка. В каждом случае у нас было 1000 элементов в списке и одинаковое время прокрутки для достижения последнего элемента списка. В каждом из этих случаев мы использовали кэширование изображений с разными библиотеками для каждой платформы.

Библиотеки загрузка и кеширования изображений:

Android

iOS

Пример 2: тяжелые анимации

В настоящее время большинство телефонов, работающих на Android и iOS, имеют мощную аппаратную начинку. В большинстве случаев, используя обычные бизнес-приложения, вы не заметите никакого падения FPS. Вот почему мы решили провести несколько тестов с тяжелой анимацией. Достаточно тяжелой, чтобы получить снижение FPS. Мы использовали векторные анимации Lottie для нативного кода в Android, iOS и React Native, и использовали те же анимации с Flare во Flutter.

Тестирование анимации с помощью Lottie для нативного кода  Android, iOS, React Native и Flare для Flutter:

Android

iOS

Пример 3: еще более тяжелые анимации с поворотами, масштабированием и затуханием

В этом тесте мы сравнили производительность анимации 200 изображений. Анимации вращения и мерцания выполняются одновременно.

Android

iOS

Выводы

Для обычных бизнес-приложений с незначительной анимацией и хорошим внешним видом технологии не имеют никакого значения. Но если вы делаете некоторые тяжелые анимации, имейте в виду, что нативный кода дает наибольшую производительность. Далее идут Flutter и React Native. Мы бы определенно не рекомендовали бы использовать React Native в операциях, очень нагружающих CPU, в то время как Flutter отлично подходит для таких задач, как с точки зрения процессора, так и с точки зрения памяти.

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

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

Источник

Exit mobile version