Оглавление

Flutter

Flutter vs. React Native: что выбрать для вашего мобильного приложения

Вы решили создать кроссплатформенное мобильное приложение и выбираете между Flutter и React Native. Конечно, вас интересует, какой инструмент обеспечит лучшую производительность приложения? А какой позволит быстрее его разработать? Что проще – найти разработчика на Flutter или React Native?

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

Сферы применения и популярность

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

Кейсы: когда вам пригодится Flutter или React Native

Чтобы выбрать фреймворк, для начала вам нужно ответить на несколько несложных вопросов:

Какие функции должно иметь ваше приложение?
Для каких устройств будет доступно приложение?
Сколько экранов в нём должно быть?

В таблице мы собрали наиболее частые варианты использования и отметили, подходят ли для их реализации Flutter и React Native.

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

Вы можете использовать и Flutter, и React Native для разработки приложений для следующих направлений деятельности:

мобильный банкинг (например, мы разработали приложение на Flutter для Росбанка);
социальные сети (Insight Timer – социальная сеть по тематике mindfulness);
мессенджеры;
программы лояльности (например, мы реализовали программу лояльности в приложении для сети аптек «Ригла»);
электронная коммерция (Xianyu – приложение для ecommerce, разработанное компанией Alibaba);
стриминговые сервисы (пример – приложение, которое мы сделали на Flutter для платформы видеостриминга The Hole);
лайфстайл-приложения (Reflectly – приложение по тематике mindfulness);
образовательные сервисы (приложение AITeacher от китайской корпорации Tencent).

Flutter vs React Native в части сфер применения: ничья.

Производительность

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

Основной характеристикой производительности приложения является FPS – количество кадров, отображаемых в секунду. Золотой стандарт – 60 кадров в секунду: если этот показатель достигнут, анимация и переходы между экранами будут плавными. Когда FPS упадет, скажем, до 30 – это будет заметно для пользователя.

Измерения, проведенные на разных устройствах, показали, что Flutter и React Native демонстрируют производительность, аналогичную нативным приложениям, когда речь идёт о простой прокрутке: нативные приложения на iOS и Android показывают 60 FPS, Flutter – 60 FPS, React Native – 58-59 FPS. Но React Native требует больше памяти устройства и заряда аккумулятора по сравнению с Flutter и нативными приложениями.

Но когда дело дошло до тяжелой анимации с ротацией, масштабированием и затуханием, производительность React Native упала до 7 кадров в секунду для Android, а Flutter продемонстрировал 19 FPS.

Есть и другие данные, которые говорят в пользу Flutter. Например, представители компании InVerita провели сравнительные тесты производительности приложений на iPhone 6 и Xiaomi Redmi Note 5. И вот какие результаты получили.

iOS: По результатам теста Гаусса приложение на Flutter работает в 20 раз быстрее приложения на React Native.

Android: приложение на Flutter работает в 15 раз быстрее, чем на React Native, и даже опережает нативное приложение на Swift.

Производительность React Native vs. Flutter: Flutter побеждает и предлагает возможности для улучшения производительности..

Дизайн и UI

Основная идея Flutter заключается в том, что вы можете создать свой пользовательский интерфейс из виджетов. Виджеты – это не только кнопки, тексты и карточки; анимация, опции, сенсорное взаимодействие – тоже виджеты. Виджеты описывают, каким будет их вид в зависимости от конфигурации и состояния. Когда состояние виджета изменяется (например, пользователь нажимает кнопку), он перестраивает своё описание, и его внешний вид изменяется.

У Flutter есть два набора виджетов: Material Design и Cupertino. Первая группа имитирует нативный дизайн Android (поскольку Material Design – это язык дизайна, ориентированный на Android, разработан Google), вторая группа – iOS. Благодаря этому приложения Flutter выглядят естественно и работают на обеих платформах.

Что еще более важно, Flutter обеспечивает единообразный UI на всех устройствах, даже с устаревшими версиями ОС.

Что касается React Native, в основе приложений лежит код JavaScript. Flex и компоненты описывают UI. JavaScript отвечает за логику. Всё это упаковывается в сериализированые JSON и отправляется через мост.

Благодаря этому приложения, созданные с помощью React Native, выглядят точно так же, как нативные приложения. Кроме того, этот механизм обеспечивает плавную анимацию.

React Native имеет набор основных компонентов, таких как Button, Image, ScrollView и другие; у него есть также некоторые специфичные для Android и iOS компоненты. Ещё вы можете использовать сторонние библиотеки.

React Native, по сути, предоставляет каркас — платформу, на которой можно строить приложение, но понадобится применять сторонние библиотеки или добавлять нужные части вручную. При этом поведение платформы может стать узким местом, так как она предполагает, что будут использоваться OEM виджеты.

Flutter — полноценный SDK, предлагающий виджеты и возможности для кастомизации без применения сторонних библиотек. Так как Flutter сам отрисовывает виджеты, он не зависит от конкретной ОС, и это даёт разработчику больший контроль над UI.

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

Скорость разработки

Оба фреймворка имеют механизмы, которые позволяют увеличивать скорость разработки приложения.

Одна из ключевых функций Flutter – Hot Reload, которая позволяет разработчикам быстро просматривать эффект от изменений в коде. Эта функция очень удобна и для совместной работы разработчиков и дизайнеров, а такая параллельная работа очень увеличивает скорость разработки.

Более того, Flutter-приложения состоят из виджетов: разработчик может просто поместить одно в другое и так далее. Этот принцип ускоряет и упрощает работу. Есть много готовых виджетов, но разработчик также может написать свои собственные. Также Flutter довольно легко обновить: достаточно написать в консоли “flutter upgrade” – все проекты и компоненты обновятся автоматически.

Что касается React Native, у него есть функция Fast Refresh: она позволяет разработчикам вставлять новый код непосредственно в работающее приложение. Но при работе с React Native бывают некоторые проблемы. Например, попытки обновить версию React Native часто приводят к поломке библиотек. Инструменты автоматического обновления версии иногда не работают, поэтому разработчикам приходится обновлять некоторые компоненты вручную.

React Native не так хорош и с точки зрения безопасности. Например, любой может получить доступ к коду JavaScript в сборке релиза, а это серьёзная угроза для всего приложения.

Скорость разработки Flutter vs React Native: Flutter выигрывает.

Тестирование

У Flutter есть три типа тестов:

юнит-тест для отдельной функции, метода или класса;
тест виджета для одного виджета (аналогичен тесту компонентов в других фреймворках);
интеграционный тест для всего приложения или его части.

Тестирование происходит очень быстро: например, тесты виджетов во Flutter быстрее, чем тесты аналогичных компонентов в iOS. Также есть список распространенных ошибок Flutter с инструкциями по их исправлению.

Тестирование приложений, созданных на React Native, может быть довольно сложным, поскольку React Native использует разные движки JavaScript для обычного режима и режима отладки. Так что код может вести себя по-разному.
Тестирование Flutter vs. React Native: Flutter выигрывает.

Экосистема

За спиной обоих фреймворков стоят огромные корпорации. React Native был выпущен в 2015 году, Flutter – в 2017 году. Более ранний старт дал React Native преимущества перед Flutter в построении экосистемы. Но теперь Flutter стремится отыграть потерянное время.

Flutter vs. React Native: комьюнити

Flutter поддерживается командой Google и сообществом разработчиков опенсорсного ПО. Сообщество организует мероприятия, такие как Flutter Engage, где вы можете узнать последние новости, пообщаться с представителями из Dart, Flutter и Firebase и многое другое.

React Native поддерживается командой Facebook и опенсорсным сообществом. Кроме того, существует сообщество Discord под названием Reactiflux, несколько форумов и корпоративные сообщества. Одним из главных событий, посвященных React Native, является React Conf.

Библиотеки, инструменты и плагины

Хотя считается, что экосистема Flutter не слишком широка, у фреймворка есть обширный список готовых к использованию пакетов – в нем более 14 000 тысяч элементов. Благодаря им разработчики могут добавлять такие улучшения, как превращение текстовых URL-адресов и электронных писем в интерактивные встроенные ссылки или отображение кода страны (что будет полезно, например, для международных служб ecommerce).

React Native имеет большое количество библиотек. Например, есть список высококачественных дополнительных компонентов под названием awesome-react-native. Однако в некоторых случаях есть риск натолкнуться на устаревшие или некачественные пакеты.

Экосистема Flutter vs. React Native: React Native выигрывает.

Стоимость разработки

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

Flutter vs. React Native: что лучше знают разработчики

В 2020 году Stack Overflow провела опрос разработчиков: исследователи спрашивали разработчиков о технологиях, средах разработки и инструментах, которые они используют. 11,8% респондентов заявили, что используют React Native, 6,6% – Flutter.

Цифры небольшие, и вам может показаться, что искать разработчиков React Native и Flutter будет сложно. На самом деле, это не сложнее, чем найти кого-нибудь для создания нативного приложения: тот же опрос показывает, что только 8% разработчиков используют Kotlin, который является основным языком программирования для разработки Android.

По состоянию на апрель 2020 года более 2 миллионов человек попробовали Flutter; количество его ежемесячных пользователей достигло 500 000. Что еще более важно – 92% разработчиков, использующих Flutter, заявили, что этот фреймворк им нравится. Собственно, опрос Stack Overflow показал, что Flutter любят больше, чем React Native: 68,8% против 57,9%.

Популярность среди разработчиков Flutter vs. React Native: React Native пока выигрывает, но это вопрос времени.

Зарплаты разработчиков

Большую часть расходов на разработку мобильных приложений составляет заработная плата персонала.

LinkedIn и Indeed провели исследования и вывели примерные диапазоны оплаты труда разработчиков Flutter и React Native. Например, вот зарплаты для рынка США на февраль 2021 года.

А Upwork приводит данные по почасовой оплате разработчикам на Flutter и React Native на февраль 2021 года по трём географически распределённым группам: США, Азия (Индия, Пакистан и т. д.) и Восточная Европа (Россия, Украина, Беларусь, Польша и др.).

Кажется, если мы будем подводить итог раунда здесь, то вывод очевиден.

Экономия на оплате труда Flutter vs. React Native: React Native выигрывает.

Но для окончательного итога давайте посмотрим на ситуацию на российском рынке. Для этого обратимся к hh.ru.

Как видите, на российском рынке разработчики Flutter пока обходятся работодателю дешевле. Но и востребованность их гораздо ниже, чем разработчиков React Native. Логично предположить, что с ростом востребованности разработчиков Flutter начнётся и рост зарплат.

Ну, а пока для российского рынка. Экономия на оплате труда Flutter vs. React Native: Flutter выигрывает.

Что проще выучить?

Лёгкость изучения фреймворка в основном зависит от языка программирования, который лежит в его основе.

Flutter основан на Dart. Этот язык программирования не очень распространен, поэтому Flutter имеет относительно высокий порог входа. Но при этом разработчики признают, что Dart очень прост в освоении и удобен для работы, подробно рассказываем об этом в этой статье.

Недавно мы запустили свой курс по Flutter. По результатам студентов мы видим, что Flutter особенно просто даётся ребятам с опытом фронтенд-разработки на любом языке.

React Native основан на JavaScript – одном из самых распространенных языков программирования. JavaScript широко используется разработчиками фронтенда. Он также считается одним из самых простых языков и, следовательно, лучшим вариантом для старта.

Простота изучения Flutter vs. React Native: React Native выигрывает.

За чем будущее

Есть мнение, что Flutter – это просто временный хайп, который скоро угаснет. Но, как показывает опрос Stack Overflow, разработчикам он нравится – и все большему числу компаний тоже.

Если обратиться к статистике, мы увидим, что популярность Flutter выросла на 9% за 2019–2020 годы, в то время как популярность React Native осталась на прежнем уровне.

Судя по динамике, в рейтинге популярности Flutter vs. React Native 2021, скорее всего, будет доминировать Flutter.

Я уверен, что React Native ещё долго будет на рынке. Он основан на JavaScript. Если вы знакомы с JavaScript, вам будет проще начать работу с React Native. С другой стороны, если вы знаете JavaScript, также несложно выучить Dart и начать писать на Flutter. Поскольку Flutter более производительный, стабильный и гибкий, он заслуженно становится всё более популярным. Я уверен, что скоро Flutter займёт значительную долю рынка.
Дмитрий Андриянов, разработчик мобильных приложений Surf

Flutter vs. React Native будущее: Flutter выигрывает.

Итог: что выбрать?

Итак, как мы убедились, у обеих платформ есть свои плюсы и минусы. Для наглядности собрали все наши пункты в одной таблице.

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

Больше узнать о Flutter и его преимуществах для бизнеса можно в этой статье. Если вы уже готовы обсудить проект, напишите нам и мы ответим вам в течение дня.