Сравнение средств мобильной разработки Xamarin и React Native

React Native (RN) является платформой с открытым исходным кодом для разработки кроссплатформенных приложений, в частности для мобильных операционных систем Android и iOS. Преимущественно используются языки JavaScript и TypeScript, 

React Native был впервые выпущен в качестве проекта с открытым исходным кодом в 2015 году. Всего за пару лет он стал одним из лучших решений, используемых для мобильной разработки.  
На данный момент React Native используется в сотнях компаний по всему миру, включая Uber, Microsoft, Pinterest и многих других.  

Xamarin является платформой с открытым исходным кодом для разработки кроссплатформенных приложений с использованием языка C#, в частности для мобильных операционных систем Android и iOS. На данный момент платформа принадлежит Microsoft. 

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

Общая архитектура платформы React Native 

Основной отличительной чертой RN является то, что код приложения выполняется в JavaScript среде (ES6, Fetch API, XMLHttpRequest API, WebSockets API). Исходный код приложения представляет собой структурированный набор JSX/TSX файлов (модулей), что даёт возможность для всех целевых систем использовать единую кодовую базу. Вести разработку приложения для React Native можно на любой платформе с поддержкой многих IDE (Visual Studio Code, WebStorm, Rider). 

При сборке приложения из набора JSX/TSX модулей создаётся пакет, который затем выполняется в JS среде (JavaScriptCore, Hermes). JS среда взаимодействует с движком отрисовки Fabric, который в свою очередь взаимодействует с API целевой системы. 

Fabric принимает древовидную структуру React элементов для отрисовки и модифицирует визуальное представление дерева, используя нативные элементы целевой системы. В обратную сторону передаются события, возникающие в движке и целевой системе (onLayout, onKeyPress, touch и т.д.). Процесс состоит из нескольких фаз: 

1) Отрисовка (Render): JS среда выполняет код приложения и формирует дерево React элементов. Из этого дерева в движке формируется древовидная структура узлов React Shadow Tree. 

2) Коммит (Commit):После создания React Shadow Tree происходит оптимизация и вычисление плана размещения (layout).  

3) Mount: Структура React Shadow Tree преобразуется в дерево визуальных элементов целевой системы. 

Базовый состав и возможности React Native  

Базовый набор визуальных компонентов 

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

Базовый набор вспомогательных компонентов 

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

Дополнительные возможности 

Разработка React Native приложений тесно связана с инфраструктурой NPM, поэтому для дополнительного функционала есть широкий выбор пакетов из этого репозитария. 

Наборы компонентов 

Каталоги компонентов: 
https://reactnative.directory 
https://www.awesome-react-native.com  

Библиотеки визуальных компонентов: 
https://reactnativepaper.com  
https://nativebase.io  
https://reactnativeelements.com  
https://akveo.github.io/react-native-ui-kitten  

Управление состоянием и валидация компонентов: 
https://mobx.js.org  
https://github.com/jquense/yup  
https://react-hook-form.com  
https://react-redux.js.org  

Нативные модули 

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

Для этого в корневых Android/iOS директориях проекта создаётся реализация логики модулей на языках Java/Kotlin для Android или Objective-C/Swift для iOS. После чего к ним можно будет обращаться из JS среды. 

Сборка, развёртывание, отладка 

Для основных целевых систем существует NPM утилиты для генерации структуры проекта, содержащий минимальный набор базовых атрибутов, ресурсов и манифест приложения для формирования выходного пакета. В папках iOS и Android шаблонного проекта также определяются точки входа в приложение (MainActivity для Android и AppDelegate для iOS). 

JavaScript упаковщик Metro 

В состав RN входит JavaScript упаковщик — Metro, который выполняет следующие задачи: 

1) Строит граф зависимостей модулей начиная с входной точки приложения. 

2) Преобразует (транспилирует) все модули. 

3) После преобразования происходит сериализация модулей. Сериализатор объединяет модули в один или несколько пакетов. 

Механизм «Fast Refresh» 

Стоит отметить особенную возможность React Native — «Fast Refresh». Данный механизм позволяет значительно ускорить разработку, не требуя перезапуска/переустановки приложения при изменении исходного кода. При изменении исходного кода модуля происходит его перезагрузка и всех от него зависящих. 

Приложения для Android 

Для сборки приложений для Android необходимо и достаточно Android SDK, NodeJS, JDK 8+. Все действия выполняются скриптами из командной строки, с небольшой модификацией конфигурационных файлов для debug/release конфигураций. Многие IDE (Visual Studio Code, WebStorm, Rider) поддерживают полную автоматизацию всех процессов. 

Приложения для iOS 

Для сборки и отладки приложений для iOS необходим хост с установленной macOS (физический или облачный), с установленной IDE Xcode и iOS SDK. Изначально предполагается всю разработку вести на Mac хосте. 

Использование Hermes 

До версии 0.70 по умолчанию в RN использовалась JS среда JavaScriptCore (JSC), которая в некоторых сценариях показывала невысокую производительность и недостаточно эффективное управление памятью. С версии RN 0.60 (0.64 для iOS) появилась возможность использовать другую среду, называемую Hermes. 

Её особенность в том, что она выполняет не JаvaScript код, а заранее сгенерированный байткод. По сравнению с JSC она показывает более высокую эффективность (скорость работы, управление памятью), что в первую очередь значительно уменьшает время «холодного» старта приложения. 

Преимущества React Native

• • огромное число разработчиков (проще собрать команду)
  • большое community, много доступных статей, материалов в сети
  • нативный внешний вид

Общая архитектура платформы Xamarin 

Общая архитектура платформы 

Основной отличительной чертой Xamarin является то, что на всех целевых системах предоставляется управляемое окружение Mono и полный набор API .NET Standard 2.1, что даёт возможность использовать единую кодовую базу на языке разработки С#. При этом разработка может вестись на Windows или Mac, с использованием современных IDE: Visual Studio, Rider.  

Платформа Xamarin состоит из набора библиотек (.NET сборок) для взаимодействия с SDK различных целевых систем, при этом обеспечивая практически полное покрытие всех API: визуальные компоненты OC, контакты, SMS, вибродатчик, настройки и т.д. 

Для различных целевых систем существует специализированный набор библиотек для организации двухстороннего взаимодействия среды Mono и окружения ОС. 

Xamarin.Android  

Для системы Android код приложения компилируется в .NET сборки, которые при запуске выполняются в управляемой среде Mono, одновременно с виртуальной машиной Android ART. Для всех классов Android SDK существуют .NET сборки — обёртки с классами привязки MCW (Managed Callable Wrappers) для взаимодействия с API системы Android. В свою очередь также существуют классы привязки (ACW) — для вызовов кода в среде Mono из среды ART, таким образом обеспечивается двухстороннее взаимодействие. 

Кроме того, среда Mono для низкоуровневого доступа позволяет взаимодействовать с Android Linux напрямую, используя .NET Standard API (System, System.IO, System.Net и т.д). 

Xamarin.iOS  

Для системы iOS используется полная AOT компиляция для получения бинарных файлов для ARM архитектуры. Работа приложения происходит в среде Mono, совместно со средой Objective-C. Для двухсторонней связи сред исполнения используется механизм привязок Objective-C. 

Используется полная AOT компиляция, поскольку политика Apple запрещает выполнение динамически сгенерированного кода. Поэтому Xamarin.iOS использует AOT компиляцию управляемого кода для получения нативного исполняемого файла iOS. 

Это приводит к ряду ограничений среды Mono: 
— Не доступна функциональность System.Reflection.Emit и его использование (DLR); 
— Не доступна функциональность System.Runtime.Remoting; 
— Не доступны некоторые .NET API.  

Базовый состав и возможности платформы 

Подсистема Xamarin.Forms 

Xamarin.Forms представляет собой платформу пользовательского интерфейса для разработки приложений для Xamarin.Android и Xamarin.iOS с единой кодовой базой и предоставляет единый кроссплатформенный API для всех целевых систем. В API подсистемы представлена иерархия визуальных компонентов, схожая с WPF, с интегрированной поддержкой паттерна MVVM. 

При работе приложения Xamarin.Forms использует специализированные библиотеки для отрисовки кроссплатформенных XAML элементов интерфейса, используя нативные элементы целевой системы. Это позволяет для разных систем разрабатывать приложения с одинаковым внешним видом, поведением, уровнем производительности, и главное — с единой кодовой базой. 

 
Xamarin Essentials 

Xamarin.Essentials — это .NET библиотека, предоставляющая единый кроссплатформенный API для работы с множеством функций целевых систем (контакты, SMS, геолокация, батарея, настройки и т.д). 

Xamarin Community Toolkit 

Xamarin Community Toolkit доступен в виде Nuget пакета и представляет собой библиотеку с набором различных вспомогательных классов, визуальных компонентов, и поддерживается сообществом разработчиков. Располагается в GitHub репозитарии по адресу: 
https://github.com/xamarin/XamarinCommunityToolkit 

Дополнительные возможности 

Благодаря тому, что каждый проект на Xamarin (для любой целевой системы) может использовать библиотеки, нацеленные на .NET Standard, возможны следующие сценарии применения: 

Использование репозитария Nuget 

Если в приложении понадобится, например, DI контейнер, логгирование, или специальная реализация JSON сериализации, в Xamarin проектах можно использовать .NET Standard версии таких библиотек: Unity, NLog, Newtonsoft.Json. 

Использование кодовой базы компании 

Существующая кодовая база компании также может быть использована. К примеру, в клиент-серверном приложении, где клиенты — мобильные (Android и/или iOS), общая логика — доменные объекты, модели и контракты (классы, интерфейсы, атрибуты валидации), оформленная в виде .NET Standard сборок может быть использована напрямую и на стороне сервера, и на клиентах. 

Генерация MCW из сторонних JAR/AAR библиотек (Android) 

Для случаев, когда необходимо использовать стороннюю Android библиотеку (не хватает или не удобно использовать существующий функционал в .NET BCL или Android SDK, либо это специфическое API для работы с каким-либо оборудованием), в составе Xamarin SDK есть специальный генератор MCW сборок. Данный генератор для JAR/AAR библиотеки формирует .NET сборку — обёртку для всех его типов, которую напрямую можно использовать в Xamarin.Android проекте.  

Особенности применения таких сторонних библиотек подробнее описаны по ссылке: 
https://docs.microsoft.com/en-us/xamarin/android/platform/binding-java-library 

Готовые наборы UI компонентов 

Также существуют готовые разнообразные наборы Xamarin.Forms компонентов: 

— DevExpress: https://www.devexpress.com/xamarin-free 
— ComponentOne: https://www.grapecity.com/componentone/xamarin-ui-controls 
— Syncfusion: https://www.syncfusion.com/xamarin-ui-controls 
— Telerik: https://www.telerik.com/xamarin-ui 

Сборка, развёртывание, отладка 

Базовая структура проекта создаётся на основе шаблона Visual Studio, которая содержит минимальный набор базовых атрибутов, ресурсов, манифест приложения, а также точки входа (MainActivity для Android и AppDelegate для iOS). 

В версии Visual Studio до 16.8 был визуальный дизайнер Xamarin XAML форм. В более поздних версиях его заменил механизм «Hot Reload». Работает он следующим образом: при запуске приложения в Debug режиме после сборки и развёртывания на устройстве/эмуляторе, при редактировании и сохранении XAML файла в редакторе, соответствующий ему View обновляется «на лету». 

Приложения для Android 

Для сборки приложений для Android необходимо и достаточно Visual Studio 2019+ и Android SDK. Все действия по настройке выполняются прямо из IDE. Развёртывание и отладка также осуществляется прямо из IDE. Поддерживается и эмулятор QEMU из Android SDK и физически подключенные устройства. 

Приложения для iOS 

Для сборки и отладки приложений для iOS необходим хост с установленной macOS (физический или облачный хост), с установленными iOS SDK и Xcode. 

Некоторые облачные сервисы к примеру: 
— MacinCloud https://www.macincloud.com 
— MacStadium https://www.macstadium.com 

Для разработки непосредственно на Mac хосте, необходимо также Visual Studio для Mac.  

Для удалённой разработки в Visual Studio 2019+ необходимо выполнить сопряжение с Mac хостом, после чего Visual Studio по SSH будет управлять сборкой.  

Xamarin iOS Simulator 

Xamarin iOS Simulator — отдельное приложение для Windows, поставляемое вместе с Visual Studio.  
Для более комфортной разработки iOS приложений на Windows можно использовать данное приложение, вместе с механизмом «Fast Refresh». Схема работы следующая: 

1) На Mac хосте компилируется нативная часть приложения (загрузчик приложения и все нативные модули); 

2) Далее, на Mac хосте, отладочная версия приложения развёртывается в выбранном эмуляторе, например iPhone 13; 

3) На Windows машине разработчика запускается JS сервер Metro в папке приложения. Также на машине разработчика запускается Xamarin iOS Simulator (той же версии, на которую было развёрнуто приложение — iPhone 13). 

4) На отладочной странице приложения IP адрес JS сервера заменяется на IP адрес машины разработчика.  

После чего начинает работать механизм «Fast Refresh» и больше на Mac хост заходить не требуется (до тех пор, пока не возникнет необходимость пересобирать его нативные части). 

Преимущества Xamarin

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