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

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

Почему их сравнивают?

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

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

Почему стоит выбрать React Native

Не смотря на то что React Native по-прежнему не имеет LTS (Long Term Support) версии (на момент написания данной статьи актуальной является предварительная версия 0.71), он успел обрести популярность благодаря зарекомендовавшему себя в сфере web-разработки фреймворку ReactJS, разработанному компанией Meta (бывший Facebook).

Сам React Native является инструментом для создания приложений, написанных на ReactJS, который предоставляет возможность взаимодействовать через JavaScript код с различными платформами: Android, iOS и т.д.

Благодаря данному решению переход на React Native не составит труда для web-разработчика. Кроме того, полюбившийся многим frontend-разработчикам компонентный подход (разделение кода на компоненты позволяет разбить логику на отдельные части, что обеспечивает лучшую структуру и переиспользоваемость кода, что считается хорошей практикой в программировании) и привычная работа с состоянием также актуальны для создания мобильных приложений.

На React Native написано много популярных мобильных приложений: Skype, Instagram, Discord, Facebook, Walmart, Pinterest, Bloomberg, Uber Eats, Wix.

Таким образом, разработка на React Native имеет следующие плюсы:

Единая кодовая база, которая компилируется в Java и Swift посредством создания “мостов” между компонентами React и родными аналогами платформы.
React Fiber - асинхронный реконсайлер (алгоритм, позволяющий отслеживать изменения интерактивного UI и выявлять оптимальный способ их отрисовки), встроенный в ReactJS, обеспечивает скорость и плавность работы приложения.
Активно разрабатывается и будет поддерживаться компанией Meta.
Широко используется разработчиками.
Односторонняя привязка данных: функция связывает аспект пользовательского интерфейса с конкретным фрагментом данных. Процесс идет в одном направлении, обеспечивая лучший контроль над приложениями.
JavaScript имеет низкий порог входа.
JSX (JavaScript XML) - расширение синтаксиса JavaScript, позволяющее совместить логику и разметку UI элементов, что облегчает и ускоряет разработку.
JavaScript имеет большое комьюнити контрибьюторов, разрабатывающих библиотеки для расширения функционала как самого языка, так и фреймворков, написанных на нём. Однако использование сторонних библиотек может привести к проблемам обратной совместимости, а также не гарантирует качество их поддержки.

Минусы React Native

Использование JavaScript само по себе является решением, которое влечёт за собой недостатки. Разрабатывать на нём легко благодаря динамической типизации (одна переменная может иметь разный тип значения в нескольких частях программы), однако это может и привести к серьезным ошибкам в коде.

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

Кроме того, в JavaScript отсутствует null safety (проверка на наличие значения переменной) что может привести к еще большему количеству ошибок. И если некоторые проблемы можно избежать используя TypeScript (язык программирования со строгой типизацией компилируется в JavaScript и имеющий схожий с ним синтаксис), это всё равно не спасёт вас от других недостатков: “молчаливая” обработка ошибок (при возникновении ошибки в коде выполнение программы либо продолжится, что может привести к существенным последствиям, либо прекратиться полностью); однопоточность и т.д.

Помимо этого, результаты бенчмарков показывают, что React Native требует значительное количество памяти, работы CPU и заряда аккумулятора, что ощутимо влияет на UX (User Experience) на не флагманских устройствах.

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

Почему стоит выбрать Flutter

Flutter - это набор инструментов пользовательского интерфейса и SDK, разработанный в компании Google, которые вы можете использовать для создания высокопроизводительных мобильных и настольных приложений. Имеет открытый исходный код. Таким образом, вам не нужно нанимать разработчиков для каждой платформы. Из-за этого стоимость разработки приложения будет дешевле.

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

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

В настоящее время есть библиотеки, которые позволяют ему подключаться к аппаратным средствам устройств, таким как чипы GPS, камеры и микрофоны. До недавнего времени у этого фреймворка не было доступа к возможностям AR устройства, но появилась библиотека и для этого.

Flutter использует язык программирования Dart, который поставляется с компиляторами Ahead-Of-Time (метод компиляции перед использованием) и JIT (точно в срок). Flutter доступен для каждой операционной системы. Таким образом, вам не нужно будет переносить или использовать определенную операционную систему для создания приложений с помощью Flutter, как в случае с приложениями iOS (где вам нужен компьютер Apple).

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

Обеспечивает адаптивный стиль без использования JavaScript Bridge, тем самым достигая уровня производительности, который конкурирует с его двоюродным братом и прямым конкурентом React Native. Он легко интегрируется с различными платформами, такими как Android, iOS и Linux, MAC, Windows и приложениями Google Fuchsia.

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

На данный момент с использованием Flutter созданы: BMW, GooglePay, Nubank, Alibaba Group, eBay, Toyota.

Таким образом плюсами использования Flutter являются:

Одна кодовая база для всех платформ. Flutter позволяет вам написать всего одну кодовую базу и использовать ее не только для мобильных устройств Android и iOS, но даже для Интернета, настольных компьютеров и многого другого.
Принцип “Это все виджеты” открывает бесчисленные возможности. Пользовательские виджеты Flutter - это абсолютное наслаждение, когда дело доходит до создания великолепных визуальных эффектов для вашего приложения, не создавая при этом лишних беспокойств об отображении пользовательского интерфейса на разных устройствах.
Богатые библиотеки. Flutter использует библиотеку Skia, которая является быстрым и зрелым графическим движком с открытым исходным кодом. Он перерисовывает пользовательский интерфейс каждый раз, когда меняется представление. Результат? Быстрая загрузка и плавный запуск приложения.
Быстрое тестирование с горячей перезагрузкой. Функция горячей перезагрузки значительно ускоряет разработку приложения. С Flutter нет необходимости перезагружать приложение, чтобы увидеть каждое изменение, которое вы вносите в код. Вы можете легко вносить изменения в свое приложение в режиме реального времени, так что у вас будет больше возможностей экспериментировать с кодом и исправлять ошибки на ходу.
Производительность близка к производительности собственного приложения.
Отсутствие зависимости от компонентов пользовательского интерфейса, зависящих от платформы.
Подробная и понятная документация.

Минусы Flutter

Недостатки Flutter в основном связаны с его молодостью.

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

Конечный размер загружаемого приложения больше, чем у собственных приложений. Согласно исследованию, приложение Flutter Basic является вторым по величине после React Native: Java - 539 КБ, Kotlin - 550 КБ, Flutter - 4,7 МБ, React Native - 7 МБ. Это показывает, что по сравнению с другими кроссплатформенными подходами к разработке приложений, Flutter - лучший выбор.

Выпущенный в 2018 году Flutter является относительно молодым фреймворком. Следовательно, разработчиков с реальным глубоким опытом не так много, и может быть довольно сложно найти команду, которая могла бы создать высококачественное мобильное приложение Flutter.

<table style="height:225px;width:100%;border-collapse:collapse;border-color:#000;border-style:solid;float:left" border="1" cellspacing="10" cellpadding="10"><tbody><tr style="height:14px;"><td style="width:292.5px;height:14px;text-align:center;padding-bottom:20px;">Свойство</td><td style="width:292.5px;height:14px;text-align:center">Flutter</td><td style="width:292.5px;height:14px;text-align:center">React Native</td></tr><tr style="height:61px"><td style="width:292.5px;height:61px">Быстрый прототип приложения (скорость разработки быстрее, чем нативная)</td><td style="width:292.5px;height:61px;text-align:center">Да</td><td style="width:292.5px;height:61px;text-align:center">Да</td></tr><tr style="height:61px"><td style="width:292.5px;height:61px">MVP мобильного приложения</td><td style="width:292.5px;height:61px;text-align:center">Да</td><td style="width:292.5px;height:61px;text-align:center">Да</td></tr><tr style="height:61px"><td style="width:292.5px;height:61px">Приложение с множеством экранов и сложной логикой</td><td style="width:292.5px;height:61px;text-align:center">Да</td><td style="width:292.5px;height:61px;text-align:center">Нет</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Пользовательский интерфейс (UI): приложение, которое будет хорошо выглядеть даже на старых устройствах</td><td style="width:292.5px;height:14px;text-align:center">Да</td><td style="width:292.5px;height:14px;text-align:center">Нет</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Не только мобильное приложение, но и веб-интерфейс</td><td style="width:292.5px;height:14px;text-align:center">Да</td><td style="width:292.5px;height:14px;text-align:center">Да</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Одна кодовая база для всех платформ</td><td style="width:292.5px;height:14px;text-align:center">Да</td><td style="width:292.5px;height:14px;text-align:center">Да</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Богатые библиотеки</td><td style="width:292.5px;height:14px;text-align:center">Да</td><td style="width:292.5px;height:14px;text-align:center">Да</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Быстрое тестирование</td><td style="width:292.5px;height:14px;text-align:center">Да</td><td style="width:292.5px;height:14px;text-align:center">Нет</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Маленький бюджет и ограничение по времени</td><td style="width:292.5px;height:14px;text-align:center">Да</td><td style="width:292.5px;height:14px;text-align:center">Нет</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Производительность по скорости проигрывает нативным приложениям (до 60 fps)</td><td style="width:292.5px;height:14px;text-align:center">Да</td><td style="width:292.5px;height:14px;text-align:center">Да</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Размер приложений больше чем у нативных</td><td style="width:292.5px;height:14px;text-align:center">Да</td><td style="width:292.5px;height:14px;text-align:center">Да</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Экосистема: Большое комьюнити</td><td style="width:292.5px;height:14px;text-align:center">Нет</td><td style="width:292.5px;height:14px;text-align:center">Да</td></tr><tr style="height:14px"><td style="width:292.5px;height:14px">Порог вхождения, легкий переход</td><td style="width:292.5px;height:14px;text-align:center">Нет</td><td style="width:292.5px;height:14px;text-align:center">Да</td></tr></tbody></table>

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