Flutter vs React Native: что лучше для разработки приложения

Главное

• Flutter и React Native — кроссплатформенные фреймворки. Создавать приложения на их основе дешевле, чем разрабатывать нативно — можно работать с единой кодовой базой;
• Flutter — хороший выбор, если у вас есть разработчики с опытом на языке Dart;
• Мы советуем React Native: это отличный инструмент, с ним можно быстро выпустить приложение и уложиться в бюджет. 

Короткое вступление

Сразу хотим сказать — перед вами лонгрид. Если хотите найти ответ на свой конкретный запрос — например, какие плюсы у React Native — воспользуйтесь оглавлением➡️

React Native и Flutter — популярные инструменты для разработки мобильных приложений. Но почему их используют, и какой выбрать? Начнем с разницы между кроссплатформенной и нативной разработкой.

Кроссплатформенная vs нативная разработка

К разработке можно подойти с разных сторон. Есть два пути: разрабатывать нативно или с кроссплатформенными инструментами. Flutter и React Native относятся ко второму — с ними получится сэкономить.

Посмотрите плюсы и минусы кроссплатформенной и нативной разработки — так легче понять, что подойдет для создания MVP:

Характеристика	Кроссплатформенная разработка	Нативная разработка
Количество языков программирования	Один язык — не нужно нанимать две команды с разными компетенциями	Не менее двух языков. Например, для разработки iOS и Android приложений нужно знать Swift и Java
Поддержка и обновление приложений	Можно исправить баг в единой кодовой базе — он исчезнет и на iOS, и на Android	Неудобно — нужно отслеживать код на разных языках в двух базах
Производительность	Приложения работают одинаково на разных платформах	Приложения быстро загружаются, потому что заточены под конкретную платформу
Интеграции сторонних разработчиков	Можно добавить функции из общих библиотек в приложение	Можно добавить функции из общих библиотек в приложение

Кроссплатформенная разработка

По сути кроссплатформенная разработка идет так: разработчик пишет код один раз и переиспользует его для другого приложения. И это ее главная фишка — благодаря единой кодовой базе не нужно писать два разных приложения с нуля.

Но это не все. Вот еще несколько характеристик:

Один язык программирования. Достаточно владеть JavaScript или Dart + языками разметки HTML/CSS. Для обычного приложения этого хватит.

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

Легко поддерживать и обновлять приложения. Каждая платформа выпускает обновления: добавляет функции и исправляет баги. Новая версия ОС может повлиять на работу вашего приложения — это невозможно предотвратить, можно только исправлять баги.

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

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

В случае с нативной разработкой нужно искать интеграции для двух платформ одновременно. Это дольше — можно потратить больше ресурсов и денег на поиск.

Нативная разработка

Нативные разработчики пишут приложения на языке, созданном для платформы. Например, Swift для iOS и Java для Android.

Вот особенности нативной разработки:

Два языка программирования. Придется создавать два приложения с разным кодом. Это дольше и дороже. К тому же нужно нанимать разные команды разработчиков — платить каждой зарплату.

Приложения быстро работают. Из-за особенностей кода нативные приложения загружаются и реагируют на жесты пользователей без задержки.

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

Можно включить интеграции сторонних разработчиков. У Swift и Java есть свои библиотеки с готовым кодом и функциями. Их легко адаптировать под свои нужды.

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

Плюсы и минусы кроссплатформенных приложений

Давайте поближе рассмотрим кроссплатформенную разработку — почему ее выбирают стартапы и малый бизнес. 

Кроссплатформенные приложения
Плюсы	Минусы
✅ Быстрый релиз — можно сразу работать над двумя версиями приложения	❌ Ненативные — чтобы приложение работало везде, придется адаптировать некоторые части кодовой базы
✅ Низкая стоимость — писать в единой кодовой базе дешевле, чем в двух	❌ Производительность чуть хуже нативных — но обычный юзер не почувствует разницу
✅ Широкий охват аудитории — не нужно выбирать платформу для релиза, можно запуститься везде и собрать юзеров iOS и Android

Разберем каждый плюс по отдельности.

✅ Быстрый релиз

Разработчики смогут работать над двумя версиями приложения одновременно. Не нужно прыгать с одной версии на другую, чтобы исправить ошибки — приложение раньше выйдет на рынок.

✅ Низкая стоимость

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

✅ Широкий охват аудитории

Обычно стартапы, которые вот-вот собираются релизнуться, запускают свой MVP только на одной платформе. Если их целевая аудитория в основном пользуется iPhone, они нанимают Swift-разработчиков и не думают про Android.

С кроссплатформенной разработкой не надо жертвовать сегментами аудитории. Можно сделать одно приложение для Android и iOS — привлечь новых клиентов и сэкономить деньги.

Кроссплатформенные приложения не без минусов — но они не критичны:

❌ Ненативные

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

❌ Производительность чуть хуже нативных

Нативные приложения работают чуть лучше кроссплатформенных. Но для большинства юзеров эта разница незаметна — их практически невозможно отличить.

Flutter и React Native: история

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

Flutter

Google представили Flutter в 2015 году. В его основе лежит Dart — язык программирования, который создали в Google. Первую демо-версию фреймворка показали в Шанхае в 2017 году, и релиз полноценной версии 1.0 состоялся в 2018 году.

С того момента Google несколько раз обновила Flutter и Dart — компания поддерживает их до сих пор. Они добавили поддержку новых API — это инструменты, с помощью которых приложение может пользоваться функциями iOS и Android. Например, картами или камерой.

React Native

В 2012 году разработчики приложения Facebook* пользовались HTML5, чтобы проектировать новые экраны и функции. С ним было тяжело работать — все зависало. Альтернативой стал JavaScript — он быстрее прогружал интерфейсы приложения. 

В 2015 году компания Meta* сделала свой фреймворк на основе JavaScript — React Native. Она выпустила первую версию инструмента в 2017 году. С тех пор появилось множество стартапов и команд, которые не могут без него работать. А сама Meta* обновляет этот фреймворк до сих пор.

Давайте подробнее рассмотрим каждый из этих фреймворков — начнем с Flutter.

Flutter — это что?

Flutter — фреймворк с открытым исходным кодом. С ним легко создавать приложения, которые работают без сбоев, и экономить деньги. 

Характеристики Flutter

Мы подготовили таблицу с кратким описанием каждой характеристики фреймворка. Чуть ниже раскрываем каждый пункт:

Длительность разработки	4-5 месяцев
Производительность	Приложения похожи на нативные, но анимации подвисают
Документация	Все темы и вопросы структурированы
Проектирование интерфейса	В Flutter есть виджеты — «кирпичики», из которых можно сделать интерфейс
Сообщество	138 000 звезд на GitHub — сообщество есть

А теперь подробно про каждый пункт.

Длительность разработки

Весь процесс может занять 4-5 месяцев. Некоторое время уйдет на организацию файлов с кодом — если этого не сделать, приложения на iOS и Android начнут виснуть.

С Flutter можно сильно сократить время на разработку. Одна из причин — UX-библиотеки с готовыми компонентами. Разработчики могут взять платежи и другие функции и добавить их в приложение, при этом не создавать их с нуля.

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

Приложения на Flutter работают чуть хуже нативных. 

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

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

Документация

Во время работы программисты почти всегда сталкиваются с вопросами, которые тяжело решить самим. В документации можно быстро найти на них ответы — например, как добавить какой-нибудь API. С документацией не нужно тратить время и изобретать велосипед.

В документации Flutter все темы разложены «по полочкам». Можно почитать раздел «Физика» — и затем добавить анимацию, как баннер двигается при скролле в приложении. Или посмотреть «Cupertino» — и интегрировать уведомления в стиле iOS в свой продукт. Разработчики могут найти функции и техники и не придумывать их из головы — можно сэкономить время и деньги.

Проектирование интерфейса 

В фреймворке Flutter есть UI-kit, внутри — шаблоны приложений и фрагменты кода. Эти фрагменты — готовые виджеты, с которыми можно спроектировать интерфейс. Каждый виджет как блок: один отвечает за скролл, другой за анимацию, третий за изображения. 

Виджеты Flutter можно адаптировать под себя. Так легче сэкономить деньги — например, если вы придумали функцию для MVP, разработчик может просто изменить существующий виджет. Не нужно ничего придумывать с нуля.

Сообщество

Этот пункт важен не только разработчикам, но и бизнесу. Если фреймворком никто не пользуется, невозможно найти ответы во время разработки. Весь процесс застревает на мертвой точке.

Flutter’ом пользуются разные компании и разработчики. У фреймворка 138 000 звезд на GitHub — популярном хранилище данных. Сам Flutter — один из самых популярных кроссплатформенных инструментов в мире.

У Flutter много разработчиков, и этим фреймворком не очень сложно пользоваться. Это хорошо: у команды будет меньше проблем во время разработки — а если они будут, она сможет быстро их решить. Разработка не останавливается, и так легче получить приложение в срок.

React Native — это что?

Это библиотека с фрагментами кода основана на JavaScript — ТОП-6 среди языков программирования в мире. Сам React Native тоже набирает популярность, несмотря на то, что он вышел 10 лет назад.

Характеристики React Native

Рассмотрим особенности React Native — мы подготовили краткую сводку в таблице.

Длительность разработки	3-4 месяца
Производительность	Приложения почти не отличить от нативных
Документация	Не обширная, но структурированная
Проектирование интерфейса	Есть нативные компоненты — приложение не глючит
Сообщество	700 000 разработчиков — самый популярный кроссплатформенный фреймворк в мире

Длительность разработки

Разработка на React Native занимает около 3-4 месяцев. В основном это из-за сторонних интеграций — разработчики добавляют функции во фреймворк, с которыми легче работать.

Пример такой интеграции — «hot reload». Во время работы программист видит две вещи: окно с кодом и окно с приложением, которое этот код отражает. Без интеграции разработчик переписывает строчку → обновляет приложение, чтобы увидеть изменения. Это занимает несколько минут, но они копятся и затягивают разработку. 

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

Приложения на React Native работают чуть хуже нативных, но это незаметно. Мы в Purrweb пользуемся этим фреймворком уже 9 лет — наши заказчики и их клиенты не чувствуют эту разницу.

В React Native есть разные инструменты, с которыми можно оптимизировать работу приложения. Например, «lazy loading». В этом случае приложение не загружает весь контент сразу — оно подгружает части, которые юзер видит в конкретный момент. Если он не нажимает на карточку товара в интернет-магазине, приложение не загружает контент внутри.

Другой инструмент — «code splitting». Здесь код разбивается на фрагменты — каждый отвечает за конкретную функцию. Если юзер хочет оплатить товар в магазине, приложение запустит кусок кода, который отвечает за платежи. После покупки этот кусок кода не будет работать — до тех пор, пока он снова не понадобится пользователю.

Документация

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

Проектирование интерфейса 

В React Native есть готовые нативные компоненты. Их можно добавить в продукт — юзер будет думать, что приложение специально создали для его платформы.

Если каких-то компонентов нет, команда может позаимствовать их у других разработчиков. С этим помогут сторонние плагины с библиотеками. В этом случае разработчик берет функцию, которую создал другой человек, и включает ее в приложение почти без изменений. Например, если нужно создать фитнес-приложение, программист может добавить готовый видеоплеер, календарь и трекер — это сэкономит время и деньги.

Сообщество

React Native — самый популярный кроссплатформенный фреймворк в мире. Им пользуются почти 700 000 человек. Если вы захотите нанять разработчиков на React Native, сможете быстро их найти.

Сами разработчики постоянно обновляют React Native и создают свои интеграции. Можно выбрать из 1000+ библиотек — если нужно добавить какую-нибудь функцию, сможете ее там найти.

С React Native не нужно создавать компоненты с нуля — можно сэкономить время на разработке

Flutter или React Native: что лучше

Мы сравнили два фреймворка по 9 характеристикам. Вот что получилось:

Характеристика	Flutter	React Native
👾Инструменты для проектирования интерфейсов	Есть виджеты, похожие на нативные компоненты	Есть нативные компоненты для Android и iOS — юзер будет думать, что приложение создавали под конкретную систему
💻 Язык программирования	Dart — язык компании Google. Используется реже, чем JavaScript	JavaScript — очень популярный язык программирования. Легко найти разработчиков, которые им владеют
🏃Производительность	Чуть-чуть ниже нативных приложений — но можно оптимизировать	Чуть-чуть ниже нативных приложений — но можно оптимизировать
📄Документация	Много тем, но тяжело пользоваться	Удобно пользоваться, есть основные темы — можно решить 80% проблем во время разработки
🌐Поддержка сообщества	Один из самых популярных фреймворков	Самый популярный фреймворк — можно найти ответы на вопросы и ускорить разработку
🤔 Минимальные версии iOS и Android для работы приложения	iOS 8 и Android 5.0	iOS 8 и Android 5.0 — можно взять ниже со сторонними плагинами
🧑‍💻Сколько нативного кода можно переиспользовать	Нативный код нельзя переиспользовать	Можно переиспользовать нативный код
🛠 Исправление ошибок	Есть инструменты для тестирования и отладки кода	Есть инструменты для тестирования и отладки кода
💾 Бекэнд	Нужны AWS Amplify-разработчики. Придется искать специалиста с аналогичным опытом	Нужны Node.js-разработчики. Этот язык тоже основан на JavaScript, поэтому найти специалиста несложно

Приложения на Flutter: примеры

Рассказываем о трех приложениях на Flutter — Reflectly, Alibaba и eBay.

Reflectly

Это приложение-дневник с искусственным интеллектом. Юзер видит подсказки, которые генерирует нейросеть — на их основе записывает свои мысли и настроение. С помощью заметок приложение оценивает настроение пользователя. Если информации недостаточно, дневник задает наводящие вопросы.

Другая функция Reflectly — тесты с опорой на когнитивно-поведенческую терапию.. Приложение собирает ответы юзера и составляет статистику на их основе. Так проще понять, что нужно поменять, чтобы укрепить психическое здоровье.

Главная цель Reflectly — помочь выработать привычку. В приложении есть трекер, который основан на положительном подкреплении. Reflectly присылает уведомления по специальной схеме — со временем юзер улучшает самочувствие, вырабатывает нужные привычки и избавляется от вредных.

Приложение создали с помощью Flutter. Разработчики использовали виджеты из фреймворка: тени, анимацию и другие нативные элементы.

Alibaba

Один из самых популярных интернет-магазинов в мире. Alibaba — это B2B маркетплейс.

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

Alibaba тоже сделали на Flutter. Разработчики Xianyu выбрали этот фреймворк, чтобы перейти на единую кодовую базу и сэкономить деньги. Еще им понравились виджеты — команда быстрее спроектировала интерфейс и сэкономила время.

eBay

eBay Motors — подразделение eBay. Это магазин, где можно купить или продать редкие автомобили и автозапчасти. Найти модель, проконсультироваться с продавцом и заключить сделку можно в приложении.

Команде eBay Motors нужно было за год создать приложение для iOS и Android. На наем 10-20 разработчиков не было ресурсов и денег, поэтому они выбрали Flutter. В итоге приложение запустили в срок: команде удалось сократить время на разработку в два раза из-за единой кодовой базы.

Примеры приложений React Native

Среди компаний, которые используют React Native, есть амбициозные стартапы и лидеры ТОПа Fortune 500. Рассмотрим гигантов индустрии: Instagram*, Facebook* и Pinterest.

Instagram*

Одно из самых популярных приложений на React Native. Сначала у Instagram* было два нативных приложения — для Android и iOS. Чуть позже Meta* объединила их в кроссплатформенное. 

Разработчики из Meta* перешли на React Native по двум причинам:

Экономия. Проще поддерживать единую кодовую базу, а не две отдельные. 

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

С React Native разработчики смогли добавить новые функции. Например, сохранение и чекпоинты. 

Сохранение. Юзер может добавить посты в отдельную вкладку в приложении. Можно вернуться туда и снова на них посмотреть. 

Чекпоинты. Это экраны, которые запрашивают данные пользователей во время «небезопасных» сценариев. Например, смены паролей, номера телефона или почты. 

Мы уже рассказывали, как сделать приложение, похожее на Instagram*. Можете почитать в другой статье.

Facebook*

Meta* перенесла почти все свои продукты на React Native. Это неудивительно — компания взяла фреймворк под свою опеку: дорабатывала и рекламировала его.

Вся экосистема Facebook* сделана на React Native: Facebook*, Marketplace, Messenger и Ads Manager. С этим фреймворком анимации в приложениях стали плавнее, и они начали быстрее работать.

Pinterest

Это приложение для поиска идей. В нем есть пины: фотографии и посты пользователей. Юзеры могут искать рецепты, интерьеры, книги для чтения и стильные образы.

Команда Pinterest интегрировала React Native во время разработки — в итоге сэкономила на новых функциях и производительности. Прототип для iOS закончили за 2 недели — типичный Agile-спринт. А такое же приложение для Android они сделали за 2 дня. 

Наши проекты на React Native

Мы 9 лет работаем с React Native — занимаемся разработкой полного цикла: анализ проекта, UI/UX-дизайн, написание кода и QA. Так мы выпустили около 300 проектов на App Store и Google Play.

Делимся 3 примерами приложений на React Native: Broex, Energo и Petbuddy.

Broex

Это мультивалютный криптокошелек — юзеры покупают и обменивают криптовалюту. Мы сделали ставку на новичков, которые никогда не работали с криптой — спроектировали для них интуитивно-понятный интерфейс.

Разработали этот кошелек с нуля — параллельно работали над версиями для Android и iOS. Еще с React Native было легче добавлять новые функции: например, окно с выбором валют. Мы просто взяли вариант, который был доступен в библиотеке фреймворка — с нуля не придумывали.

Energo

IoT-приложение для аренды пауэрбанков. Юзеры скачивают приложение, сканируют QR-код станции с пауэрбанками и забирают устройство с собой. Для работы над проектом собрали команду: менеджера проекта, UI/UX-дизайнера и трех React-разработчиков.

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

Petbuddy

Приложение для владельцев домашних животных. Можно посчитать калории в еде питомца, проверить показатели и записаться на прием в ветеринарную клинику.

Мы создали приложение с нуля за 3 месяца. Работали на React Native — добавили существующие функции из библиотеки фреймворка. Например, регистрацию, push-уведомления и диаграммы со статистикой.

Flutter vs React Native — что выбрать стартапу

Мы думаем, что лучше выбрать React Native. Вот 3 причины почему мы так думаем:

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

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

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

Итог

В этой статье мы сравнивали Flutter и React Native. Наша команда пользуется React Native — мы думаем, он идеально подходит для MVP-разработки.

А если у вас есть идея для приложения, заполните короткую анкету ниже. Наш менеджер свяжется в течение дня — поделится стоимостью и сроками.

---

*деятельность компании Meta (Facebook, Instagram*) признана экстремистской и на территории РФ запрещена.