Ключевым преимуществом использования кроссплатформенной технологии разработки мобильных приложений является возможность использовать один язык программирования для разработки приложений как для iOS, так и для Android.
React Native - JavaScript
React Native использует JavaScript для создания кроссплатформенных приложений. В настоящее время JavaScript - очень популярный язык в веб-сообществе. Он обычно используется с React и другими популярными фреймворками JavaScript. Благодаря React Native веб-разработчики могут создавать мобильные приложения после небольшого обучения. Имея это в виду, компании без труда приняли React Native.
Flutter - Дротик
Flutter использует язык программирования Dart, который был представлен Google в 2011 году и редко используется разработчиками. Синтаксис Dart легко понять разработчикам JavaScript или Java, поскольку он поддерживает большинство объектно-ориентированных концепций. Начать работу с Dart легко, так как на официальном сайте Dart здесь имеется отличная и простая в использовании документация.
Анализ и результат
Поскольку JavaScript широко используется большинством веб-разработчиков, легко принять фреймворк React Native. У Dart также есть отличный набор функций, но он редко используется и менее известен в сообществе разработчиков. Учитывая это, становится ясно, что React Native выигрывает в категории языков программирования.
Техническая Архитектура
При выборе платформы для разработки кроссплатформенных мобильных приложений важно учитывать ее техническую архитектуру. Зная внутреннее устройство фреймворка, мы можем принять обоснованное решение и выбрать тот, который лучше всего подходит для нашего проекта.
React Native - Flux
Архитектура React Native в значительной степени зависит от архитектуры среды выполнения JS, также известной как мост JavaScript. Код JavaScript компилируется в машинный код во время выполнения. React Native использует архитектуру Flux от Facebook. Здесь есть подробная статья об основной архитектуре React Native. Короче говоря, React Native использует мост JavaScript для связи с собственными модулями.
Flutter - Skia
Flutter использует фреймворк Dart, в который встроено большинство компонентов, поэтому он больше по размеру и часто не требует моста для связи с собственными модулями. В Dart есть множество фреймворков, таких как Material Design и Cupertino, которые предоставляют все необходимые технологии, необходимые для разработки мобильных приложений. Фреймворк Dart использует движок Skia C ++, в котором есть все протоколы, композиции и каналы. Короче говоря, у Flutter есть все необходимое для разработки приложений в самом движке Flutter.
Анализ и результат
Движок Flutter имеет большинство собственных компонентов в самом фреймворке, и ему не всегда нужен мост для связи с собственными компонентами. Однако React Native использует мост JavaScript для взаимодействия с собственными модулями, что приводит к снижению производительности.
Установка
Метод установки должен быть простым и не требующим слишком большого количества сложных шагов, чтобы разработчики, только начинающие с него, могли легко его освоить.
React Native - NPM
Фреймворк React Native можно установить с помощью Диспетчера пакетов узлов (NPM). Для разработчиков, имеющих опыт работы с JavaScript, установка React Native проста, в то время как другим разработчикам потребуется изучить диспетчер пакетов узлов.
Flutter - бинарная загрузка из исходного кода
Flutter можно установить, загрузив двоичный файл для конкретной платформы с Github. В случае macOS мы должны загрузить файл flutter.zip и добавить его в качестве переменной PATH. Мы можем сделать это из командной строки:
$ curl -O https://storage.googleapis.com/flutter_infra/releases/beta/macos/flutter_macos_v0.7.3-beta.zip $ unzip flutter_macos_v0.7.3-beta.zip export PATH=[PATH_TO_FLUTTER__DIRECTORY]/flutter/bin:$PATH
Анализ и результат
И Flutter, и React Native не имеют однострочной установки с собственными менеджерами пакетов для конкретной ОС, но установка Flutter, похоже, требует дополнительных шагов для добавления двоичного файла в PATH и его загрузки из исходного кода. React Native можно установить, просто используя менеджеры пакетов и не загружая двоичный файл из исходного кода.
Установка и конфигурация проекта
Процесс настройки машины разработчика для использования нового фреймворка требует времени. Это требует большой настройки установки программного обеспечения. У технологии должна быть соответствующая документация, чтобы пользователи могли начать работу.
React Native
Руководство по началу работы проекта React Native предполагает, что у разработчика уже есть все необходимые настройки для разработки под iOS и Android. Информации об инструментах командной строки Xcode мало, но для начала ее будет недостаточно.
Флаттер
Руководство по началу работы с Flutter содержит подробную информацию о настройке IDE и настройке платформы как для iOS, так и для Android. Вы можете прочитать все необходимые сведения о настройке Flutter для macOS здесь. Вдобавок ко всему, у Flutter есть инструмент командной строки, называемый flutter doctor, который может направлять разработчиков через настройку.
Анализ и результат
Из приведенного выше сравнения видно, что Flutter предлагает лучшую документацию и поддержку CLI для установки и настройки.
Компонент пользовательского интерфейса и API разработки
При разработке кроссплатформенных мобильных приложений поддержка нативного компонента является ключевой. Без поддержки нативного компонента наше приложение не будет похоже на нативное приложение. Очень важно, чтобы во фреймворке был API для безболезненного доступа к собственным модулям.
React Native - меньше компонентов
Базовая платформа React Native предоставляет только API-интерфейсы для рендеринга пользовательского интерфейса и доступа к устройствам. Чтобы получить доступ к большинству собственных модулей, React Native должен полагаться на сторонние библиотеки. React Native слишком сильно зависит от сторонних библиотек.
Flutter - много компонентов
Фреймворк Flutter связан с компонентами рендеринга пользовательского интерфейса, доступом к API устройств, навигацией, тестированием, управлением с отслеживанием состояния и множеством библиотек. Этот богатый набор компонентов избавляет от необходимости использовать сторонние библиотеки. Если вы получите фреймворк Flutter, значит, у вас будет все необходимое для разработки мобильных приложений. У Flutter также есть виджеты для Material Design и Cupertino, которые позволяют разработчикам легко отображать пользовательский интерфейс как на платформе iOS, так и на платформе Android.
Анализ и результат
Flutter богат API-интерфейсами разработки и компонентами пользовательского интерфейса, в то время как React Native слишком сильно зависит от сторонних библиотек.
Производительность разработчика
Продуктивность разработчиков - ключ к более быстрому созданию приложений. В связи с этим очень важно иметь возможность сосредоточиться на разработке приложения без каких-либо ожиданий или отвлекающих факторов.
React Native
Если разработчик владеет JavaScript, его довольно легко использовать для разработки кроссплатформенных приложений. React Native имеет функцию горячей перезагрузки, которая экономит много времени разработчика при тестировании изменений в пользовательском интерфейсе. Что касается поддержки IDE, разработчики могут использовать любой текстовый редактор или IDE по своему выбору.
Флаттер
Flutter также имеет функцию горячей перезагрузки, и с демо-приложением очень легко начать работу. Однако по мере роста сложности приложений разработчикам необходимо будет изучить и принять новые концепции Flutter. Кроме того, Dart не является распространенным языком программирования, и его поддержка отсутствует во многих IDE и текстовых редакторах.
Анализ и результат
React Native является зрелым фреймворком и имеет отличную поддержку разработчиков с точки зрения IDE и языковых функций. На данный момент Flutter является довольно новым продуктом, но он наверстает упущенное очень скоро, когда сообщество вокруг Flutter вырастет.
Поддержка сообщества
Как только разработчики начинают проявлять интерес к технологиям и применять их в процессе разработки, они формируют сообщество для обмена знаниями. Сильное сообщество помогает разработчикам учиться друг у друга и решать проблемы, с которыми они сталкиваются.
React Native
React Native был запущен в 2015 году и с тех пор набирает популярность. На GitHub есть сообщество разработчиков React Native, а также множество встреч и конференций по всему миру.
Флаттер
Flutter существует уже некоторое время, но он привлек много внимания, когда Google продвигал его на конференции Google I / O в 2017 году. Сообщество Flutter быстро растет в наши дни, встречи и конференции проходят в Интернете.
Анализ и результат
Сообщество и ресурсы React Native выросли в размерах с момента запуска фреймворка. Flutter все еще относительно новый, хотя поддержка сообщества быстро растет.
Поддержка тестирования
Написание тестов - отличный способ быстро получить обратную связь по коду. Всегда существует среда тестирования, связанная с каждой зрелой технологией, позволяющая разработчикам создавать модульные, интеграционные и пользовательские тесты для приложений.
React Native
React Native - это фреймворк JavaScript, и в JavaScript доступно несколько фреймворков для тестирования на уровне модулей. Для тестирования снимков можно использовать такие инструменты, как Jest. Однако, когда дело доходит до интеграции или тестирования уровня пользовательского интерфейса, React Native не оказывает официальной поддержки. Существуют сторонние инструменты, такие как Appium и Detox, которые можно использовать для тестирования приложений React Native, но они официально не поддерживаются.
Флаттер
Flutter предоставляет богатый набор функций тестирования для тестирования приложений на уровне модулей, виджетов и интеграции. У Flutter есть классная функция тестирования виджетов, с помощью которой мы можем создавать тесты виджетов для тестирования пользовательского интерфейса и запускать их со скоростью модульных тестов. Обязательно ознакомьтесь с Codemagic, первым в мире CI / CD, созданным специально для Flutter, для получения дополнительной информации.
Анализ и результат
Сообщество React Native не имеет официальной поддержки интеграции и тестирования уровня пользовательского интерфейса, в то время как у Flutter есть отличная документация и богатый набор функций тестирования.
Наш конкурс подошел к интересной стадии, и теперь каждый пункт будет важен.
Поддержка автоматизации сборки и выпуска
Выпуск мобильных приложений в App Store или Play Store - болезненный процесс. Это включает в себя сложную задачу подписания кода для всех остальных настроек приложения. Когда дело доходит до разработки кроссплатформенных мобильных приложений, все становится еще сложнее.
React Native
В официальной документации React Native нет автоматических шагов по развертыванию приложений iOS в App Store. Однако он обеспечивает ручной процесс для развертывания приложения из Xcode. Здесь есть статья о том, как развернуть приложения React Native в App Store, но весь процесс выглядит вручную. Однако мы можем использовать сторонние инструменты, такие как fastlane, для развертывания приложений iOS и Android, написанных с помощью React Native.
Флаттер
Flutter имеет мощный интерфейс командной строки. Мы можем создать двоичный файл приложения, используя инструменты командной строки и следуя инструкциям в документации Flutter по созданию и выпуску приложений Android и iOS. Вдобавок ко всему, Flutter официально задокументировал процесс развертывания с помощью fastlane здесь.
Анализ и результат
Flutter имеет отличный инструмент для автоматизации сборки и может использоваться для развертывания приложений из командной строки. Приложениям React Native не хватает поддержки инструментов CLI, которые официально поддерживаются для автоматизации сборки.
У Flutter 5 баллов, что означает, что React Native должен набрать последний балл, чтобы сравняться с конкурентами.
DevOps и поддержка CI / CD
Практика непрерывной интеграции и непрерывной доставки важна для любого приложения, чтобы получать постоянную обратную связь и избегать выпуска ошибочного кода.
React Native
У React Native нет официальной документации по настройке CI / CD. Однако есть несколько статей, в которых описывается CI / CD для приложений React Native. Есть статья, в которой объясняется процесс настройки CI / CD для приложений React Native с Nevercode.
Флаттер
Во Flutter есть раздел Непрерывная интеграция и тестирование, в котором есть ссылки на внешние источники. Однако богатый интерфейс командной строки Flutter позволяет легко настроить CI / CD. Codemagic обеспечивает поддержку CI / CD для приложений Flutter.
Анализ и результат
Приложения Flutter легко и безболезненно настраиваются на сервисах CI / CD с помощью мощных инструментов интерфейса командной строки. React Native не предоставляет никаких официальных инструкций по методам CI / CD.
Это было действительно очень близко, но Flutter - победитель этого соревнования. React Native сопротивлялся до конца, но Флаттер - чемпион в сегодняшней гонке!
Заключение
У React Native и Flutter есть свои плюсы и минусы, но Flutter вышел победителем в этом матче. Некоторые отраслевые эксперты предсказывают, что Flutter - это будущее разработки мобильных приложений. Учитывая приведенное выше сравнение, становится ясно, что Flutter очень сильно вошел в гонку кроссплатформенной мобильной разработки. Давайте не будем предсказывать будущее, а подождем и смотрим!
Эта статья написана Шашикантом Джагтапом для Codemagic.
Шашикант - практик DevOps для мобильных приложений и директор XCTEQ Limited. Шашикант автоматизировал конвейеры выпуска, внедрил CI / CD и включил методы автоматизации тестирования DevOps для многих приложений. Он также ведет блоги о мобильных DevOps и CI / CD.
