Flutter Vs React-Native: подробное сравнение | Журнал "Вольт"
Пт. Окт 30th, 2020


Перевод статьи Владимира Иванова, архитектора решений EPAM, “Flutter vs React-Native: подробное сравнение”, опубликованной tproger.ru.

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

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

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

Обычно у вас есть 3 варианта мобильных приложений: полностью родное приложение Kotlin / Swift, полностью веб-приложение (PWA или контейнер WebView) и что-то среднее между ними. Мы называем этот вариант Cross Platform Native, потому что это не веб-приложения, а Native Apps, которые, тем не менее, используют кроссплатформенный подход.

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

Критерии оценки

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

  • Сборка и развертывание.
  • Наличие библиотек и виджетов.
  • Инструменты и тестирование.
  • Спектакль.
  • Опыт разработчиков.
  • Сетевые возможности.
  • Возможности СМИ.
  • Безопасность.

Сборка и развертывание

Обе технологии являются кроссплатформенными и используют один и тот же подход: у них есть собственные части для Android и iOS, и они включают кроссплатформенные среды выполнения, будь то JavaScript или Dart. Это можно представить следующим образом:

Сборка

Обе платформы используют инструменты мобильной операционной системы для сборки: Gradle и Xcode build для Android и iOS соответственно. В этом плане разницы между ними и нативными приложениями нет.

Однако есть разница в скорости сборки. Это не очень важно для разработки, но критично во время сборки CI и архивирования приложений в Xcode. У меня нет точных цифр, но мое приложение «Hello, World» во Flutter строится примерно в 3 раза быстрее, чем в React Native. Причина в том, что Flutter поставляется в виде iOS Framework, а React Native перекомпилирован из исходников.

Управление зависимостями

React Native использует пакеты NPM для включения зависимостей приложений, включая сам React Native. Помимо NPM, вы можете использовать Yarn для установки и управления своими зависимостями. Зависимости, для которых требуется код Kotlin / Java / Swift / Objective-C, объединяются с использованием модулей gradle и пакетов CocoaPods. React Native включает функцию автоматического связывания, которая позволяет не изменять вручную gradle и Podfile.

Flutter, в свою очередь, использует диспетчер пакетов dart, также известный как инструмент pub. Пакеты поставляются в виде исходного кода и скомпилированы с основным приложением. Как и в RN, эти пакеты могут иметь свои собственные зависимости, но в этом случае вам может потребоваться вручную добавить эти зависимости в файлы gradle и Podspec, хотя на практике я лично с этим не сталкивался. Вы также можете использовать неопубликованные пакеты, вытащив их из папки или репозитория git.

Публикация

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

Однако между RN и Flutter все еще есть различия.

React Native поддерживает технологию Code Push, позволяющую отправлять обновления кода JS без повторной публикации apk / ipa из-за того, что React Native запускает пакет кода JS во время выполнения и может заменить его.

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

Наличие библиотек и виджетов

Сторонние библиотеки и компоненты

React Native существует на рынке более 5 лет и имеет множество библиотек для различных случаев использования, от push-уведомлений, воспроизведения видео и компонентов контента до камеры (включая Firebase ML Kit) и интеграции с Apple HealthKit и Google Fit. Существует тщательно подобранный список высококачественных сторонних компонентов, которые вы можете использовать в своем приложении, под названием awesome-react-native.

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

Flutter существует всего 2 года, тем не менее, с каждым днем ​​он становится все более популярным, что, безусловно, мотивирует энтузиастов разрабатывать библиотеки для него. Уже есть некоторые решения для навигации, слайдеры, компоненты пользовательского интерфейса, интеграции Firebase и так далее. Однако многие возможности все еще находятся на начальной стадии. Существует также тщательно подобранный список библиотек флаттера, который называется awesome-flutter. Видно, что этот список в 3 раза меньше, чем у RN. Конечно, это не показатель, но дает представление о будущем развитии технологии.

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

Виджеты

React-Native имеет большую библиотеку компонентов пользовательского интерфейса: календари, средства выбора даты, кнопки, компоненты материалов, поддержку SVG и многое другое.

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

Инструменты и тестирование

Мне кажется, что в этом обе технологии примерно равны. Оба стека включают:

  • Инструменты стиля и качества кода (eslint, tslint, prettier vs dartanalyzer).
  • Модульные тесты (с тестом Jest и тестом Flutter).
  • Компонентные тесты (снимки, ферментные тесты и тесты виджетов, «золотые тесты»).
  • e2e тестирование (Detox vs e2e).

Спектакль

Производительность следует рассматривать с нескольких точек зрения:

  • Производительность рендеринга
  • Собственное взаимодействие
  • Начальное время

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

React Native использует виджеты собственной платформы (Native Views) и отправляет события через JavaScript. Это влияет на производительность уровня представления, однако 60 кадров в секунду по-прежнему достижимы, хотя производительность зависит от версии ОС и самого устройства.

Flutter, с другой стороны, отображает все, используя собственный 2D-движок Skia, избегая какой-либо особой связи между представлениями и другим кодом. Это делает рендеринг невероятно быстрым. У него могут быть проблемы с iOS, но эту проблему следует решить с помощью недавней поддержки Metal.

Взаимодействие с платформой

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

Начальное время

У React Native с этим проблема. В общем, время запуска – распространенная проблема при стремлении улучшить мобильное приложение. RN должен загрузить JS виртуальной машины, а затем код JS. На Android это становится проблемой. React-Native версия 0.60 обеспечивает поддержку Hermes: новой экспериментальной виртуальной машины JS для Android, которая предназначена для быстрой загрузки.

👍 Кажется, Flutter уже решил эту проблему.

Опыт разработчика (DX, опыт разработчика)

React Native имеет функцию быстрого обновления, которая позволяет вам мгновенно видеть изменения на симуляторе / эмуляторе или реальном устройстве, это сокращает цикл обратной связи почти до нуля, в отличие от собственной разработки. Обычно разработка ведется с помощью VSCode или WebStorm (это самые популярные инструменты). Оба включают возможности для запуска и отладки кода, запуска тестов, просмотра покрытия и обеспечения автозаполнения. На мой взгляд, RN имеет ограниченное автозаполнение (я думаю, из-за JavaScript), поэтому я вернулся к запуску сборки с помощью npx react-native run-ios или через Xcode, потому что запуск через WebStorm был очень нестабильным. Также время от времени падал сам упаковщик. Типичный способ отладки – запустить Google Chrome и использовать его консоль, что неоптимально.

У Flutter отличный DX. Поскольку это продукт Google, он позволяет интегрировать IDE (Android Studio, но я предпочитаю IntelliJ Idea как более стабильную) сразу с набором инструментов. Быстрая загрузка – это почти то же самое, что быстрое обновление, и даже лучше. Автозаполнение отлично работает, поскольку Dart строго статичен и типизирован, что обеспечивает стабильную поддержку IDE. Здесь следует отметить, что Dart из коробки предоставляет большую свободу с точки зрения типов, вы можете вообще не писать их, поэтому рекомендуется настроить его в своем проекте.

Flutter также показывает причины ошибок, поэтому их легко исправить. Отладчик в IDE тоже работает очень хорошо. VSCode также поддерживает Flutter, но не имеет функций отладки и VCS.

Сетевые возможности

React Native работает с базовым протоколом http (s) с полифилом fetch, собственной поддержкой WebSockets и богатыми клиентами с axios (еще один пример чистой библиотеки js!) И rn-fetch-blob. React Native также анализирует json из коробки, потому что это тоже JavaScript. Это также означает, что вы можете создавать свои собственные типы с помощью Open Api.

У Flutter есть только встроенные клиенты http (s) и WebSockets. Клиент Axios находится в стадии разработки (я даже думаю о создании своего, скажем, «fluxios»)). Разбор JSON (конечно, если вы не используете генерацию кода) нужно производить вручную. Поддержка Open API существует, но не обновлялась уже 15 месяцев. Существуют пакеты Dio и Chopper, упрощающие работу с http, и, вероятно, их будет больше.

К сожалению, как оказалось, использование генерации кода для openapi для Dart вызывает определенные проблемы, о которых вы можете прочитать здесь.

Возможности СМИ

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

React Native поддерживает воспроизведение и запись аудио и видео. Вы можете, например, показывать видео в разных форматах (в основном все они поддерживаются ExoPlayer (Android) и AVPlayer (iOS)), отображать элементы управления для поиска, зацикливания и т. Д. Также можно отображать субтитры SRT и VTT для видео из коробки. Эта функциональность поставляется с такими компонентами, как react-native-video, react-native-video-controls и другие.

Обычно у Flutter есть только пакет video_player для воспроизведения видео. Его версия 1.0 все еще находится на рассмотрении и может отображать все видеоформаты, предоставляемые мобильной ОС, но субтитры – это только SRT, субтитры VTT не включены в дорожную карту. Однако субтитры VTT поддерживаются в отдельном пакете. Для базовых элементов управления вы должны использовать пакет Chewie.

Безопасность

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

С Flutter намного сложнее изменить приложение, поскольку код Dart предварительно скомпилирован в двоичный код для целевой архитектуры.

Выход

Как всегда, выбор зависит от нефункциональных требований, но я бы рекомендовал при этом учитывать:

  • Отсутствие библиотек для Flutter.
  • Тренинг по дартсу для новых разработчиков, так как таких разработчиков на рынке нет / мало.
  • Неполные медиа-возможности для Flutter.
  • Более длительное время запуска React-Native.
  • Более низкая безопасность для React-Native.



Source link

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *