post image

React Native и Flutter: что выбрать?

Время на чтение: 5 минут
author avatr Валерий Жур,
CTO ITprofit

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

Разработчики выделяют несколько видов:

  • нативные. Язык программирования используется только под одну ОС. Результат — необходимость создания отдельного продукта для Android и IOS.
  • кроссплатформенные. Имеют универсальный код, который позволяет развернуть приложения на разных устройства, не опасаясь проблем с совместимостью.

При выборе кроссплатформенных решений разработчики сталкиваются с выбором  React Native  или Flutter. Разберемся в этом вопросе подробнее.

Мобильные приложения

 

Что такое Flutter?

Это  инструмент от компании Google для разработки кроссплатформенных решений.  Благодаря ему можно запускать качественный и функциональный продукт с одним массивом кода, то есть при создании IOS-приложения или Android используют одну базу кода и один язык —  Dart. Он компилируется в бинарный код благодаря этому и достигается большая скорость выполнения операций. По сути, Flutter — полноценный SDK, который имеет все необходимое для разработки ПО. 

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

Что такое React Native?

RN  — платформа для разработки mobile-приложений  на JavaScript. Выпустил его Facebook. Фреймворк использует единую кодовую базу для iOS и Android,  благодаря чему экономит время и ресурсы. Построен он на базе React. 

В чем отличие React от React Native?  Первый — библиотека для создания web-приложений. RN — платформа для разработки надежных, готовых к работе mobile-приложений.  Принцип  их работы практически идентичен. Исключение —  управление платформенными интерфейсными компонентами. Написанный JavaScript-код взаимодействует с API через Bridge (асинхронная система обмена данными). 

Разработка мобильных приложений

Flutter vs React Native

Сферы применения

Используются они для реализации проектов любой сложности:

  • М -банкинг
  • Социальные сети
  • Программы лояльности
  • E-commerce
  • Образовательные проекты
  • Стриминговые сервисы
  • Lifestyle- приложения и прочее.

На Flutter можно создавать для Android, iOS -приложения. Подходит он для веб-версий существующих приложений, прогрессивных и одностраничных проектов. Используя этот инструмент, на выходе получают качественный продукт с красивым интерфейсом и плавной анимацией. Например,  Google Ads – сервис для управления рекламными кампаниями, KFC DSR – для оптимизации документооборота, Stadia – игровой сервис. 

React Native позволяет создавать производительный кроссплатформенные приложения для Windows,  iOS, Android, macOS.  Готовые продукты соответствуют поведению и внешнему виду нативных, но при этом фреймворк не подходит для сложных продуктов с большими объемами данных, масштабной анимацией.  Примеры RN- приложений:  Skype  —   для видеосвязи, Facebook, Instagram.

Сказать, какой инструмент популярнее сложно, но Google Trends указывает на то, что больше интересуются Flutter.

Flutter vs React Native

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

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

Вместе с тем ключевой характеристикой производительности является FPS. Проще говоря, количество кадров, которые отображаются в секунду. Стандартный показатель – 60. Если он достигнут, то переходы между экранами будут плавными.  Исследования продуктов  на  iOS и Android  показали следующие результаты — Flutter – 60 FPS, React Native – 58 FPS. При этом, если дело доходит до сложной анимации, производительность на RN падает до 7 кадров, а у “конкурента” – до 19.  Результаты Гаусса также показали, что Flutter -приложения  практически в 20 раз быстрее. Поэтому в производительности он существенно выигрывает.  

Дизайн и UI

Пользовательский интерфейс на   Flutter  создается при использовании виджетов. Существует  2 набора виджетов:

  • Material Design ориентирован на Android
  • Cupertino — на IOS.

Важное преимуществом  фреймворка — обеспечение единого UI  на всех устройствах.

Если же говорить о RN, то за логику отвечает здесь JavaScript, упаковывается все в JSON, а после отправляется через мост. Приложение на нем выглядят, как и нативные.  Минус  — требуется добавлять необходимые части вручную,  использовать сторонние библиотеки. 

Flutter же является полноценным комплектом для разработки ПО, самостоятельно  отрисовывает виджеты, благодаря чему разработчик может  контролировать UI.   Можно с уверенностью сказать, что по данному критерию он выигрывает. 

создание mobile-языка

Бизнес-логика

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

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

Сказать какой из подходов лучше однозначно невозможно. 

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

Flutter-приложения тестируются  следующими способами:

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

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

Тестирование же RN-приложений является довольно сложным,  так как используются разные движки JavaScript  и код может вести себя непредсказуемо. В связи с этим Flutter выглядит более выигрышно. 

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

Фреймворки   имеют механизмы, благодаря которым увеличивается скорость разработки mobile-приложений.

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

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

Что выбрать?

При выборе  важно понимать, каким должен быть результат, какие функции должны быть у mobile-приложения и для какой ОС оно создается. Это основа для тех, кто хочет получить качественный продукт. Что касается  платформ, то каждая из них имеет свои преимущества и недостатки.  В таблице ниже представлено сравнение Flutter и React Native. 

                                                

Flutter 

React Native

Сфера использования

Подойдет как для сложных, так и для проектов.

Реализация простых проектов, прототипов. 

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

FPS- 60 кадров в секунду

FPS – до 60 кадров. Могут возникать проблемы при работе со сложной анимацией. 

Дизайн

Одинаковый UI для всех устройств 

Не обеспечивает UI для старого формата ОС.

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

Не вызывает сложностей. Осуществляется быстро

Довольно непростая процедура. Могут возникнуть проблемы. 

Сроки запуска

Разработка происходит быстрее за счет функции Hot Reload.

Времени требуется больше. Кроме того,  часто при обновлении происходит поломка библиотек. 

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

Стоит немного дороже из-за сложности найти опытного специалиста. 

Обойдется дешевле

Заключение

Анализ платформ указывает на то, что Flutter  существенно выигрывает у RN. Он позволяет создавать приложения с множеством экранов, сложной логикой, совместимые с любыми операционными системами.  Этот фреймворк имеет высокую производительность, является более современным. 

Он обладает рядом преимуществ:

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

В связи с этим чаще всего разработчики отдают предпочтение ему.