React Native

React Native — это открытая программная платформа (фреймворк) для создания мобильных и настольных приложений с использованием языка JavaScript и библиотеки React. Разработана компанией Meta (организация признана экстремистской и запрещена в РФ) и впервые выпущена в 2015 году. Позволяет разрабатывать приложения для iOS, Android, а также для веба и настольных операционных систем (через дополнительные решения), используя единую кодовую базу, при этом рендеринг интерфейса осуществляется с помощью нативных компонентов платформы.

История

React Native был представлен компанией Meta (организация признана экстремистской, деятельность запрещена в РФ) (тогда — Facebook) в январе 2015 года на конференции React.js Conf. Первая версия для iOS стала общедоступной в марте 2015 года, для Android — в сентябре 2015 года. Идея фреймворка заключалась в том, чтобы объединить декларативный подход React с возможностью создавать настоящие нативные приложения, а не обёртки веб-страниц (как, например, в Cordova или PhoneGap). В 2018 году Meta объявила о масштабной «перестройке» React Native, известной как «React Native: Architecture Evolution», которая привела к появлению новой архитектуры (JSI, новый мост, Fabric, TurboModules) в версии 0.68 (2022 год). В 2024 году вышла версия 0.74, включающая стабилизацию новой архитектуры по умолчанию.

Помимо Meta, значительный вклад в развитие вносят сообщество разработчиков, компании Microsoft, Expo (для упрощения разработки) и Callstack.

Архитектура

Традиционная архитектура (до версии 0.68)

• Мост (Bridge): асинхронный, сериализованный канал связи между JavaScript-кодом и нативным (Java/Kotlin для Android, Objective-C/Swift для iOS). Каждый вызов на нативную сторону проходит через JSON-сериализацию, что может вызывать задержки.
• Shadow Tree: JavaScript-поток создаёт виртуальное представление (виртуальное дерево), которое затем передаётся через мост на нативную сторону для рендеринга.
• UI Manager: нативный модуль, отвечающий за обновление интерфейса.

Новая архитектура (с версии 0.68)

• JSI (JavaScript Interface): вместо моста используется прямой вызов нативных функций через JSI, что позволяет избежать сериализации и работает синхронно в некоторых случаях.
• Fabric: новый механизм рендеринга, который использует C++ для работы с деревом представлений как на JS-стороне, так и на нативной.
• TurboModules: динамическая загрузка нативных модулей по требованию, что уменьшает время запуска приложения.

Эти изменения значительно повысили производительность, особенно при большом количестве обновлений интерфейса.

Ключевые характеристики

• Кроссплатформенность: одна кодовая база для iOS, Android, а также веба (React Native for Web) и настольных платформ (через проекты вроде React Native Windows, React Native macOS).
• Горячая перезагрузка (Fast Refresh): возможность мгновенно видеть изменения кода без перекомпиляции приложения.
• Нативные модули: доступ к API устройства (камера, GPS, датчики) через пакеты из сообщества или собственные реализации.
• Экосистема: включает множество сторонних библиотек, таких как React Navigation (навигация), Redux/MobX (управление состоянием), NativeBase, React Native Paper (UI-киты).
• Языки программирования: основным языком является JavaScript, но возможно использование TypeScript; для написания нативных модулей используются Java/Kotlin (Android) или Objective-C/Swift (iOS).

Сравнение с альтернативами

React Native не является единственным решением для кроссплатформенной мобильной разработки. Основные конкуренты:

• Flutter (Google): использует язык Dart и собственный движок Skia. Отличается высокой производительностью и возможностью создавать пиксельно-идеальный UI, но требует изучения Dart. React Native использует JavaScript, что привычнее для веб-разработчиков.
• Native Script: также использует JavaScript, но для рендеринга применяет нативные API напрямую. Уступает React Native по популярности.
• Cordova/PhoneGap: создают веб-приложения внутри нативного контейнера (WebView), что приводит к более низкой производительности по сравнению с React Native.
• Xamarin (.NET): использует C#, входит в экосистему Microsoft. Менее популярен среди инди-разработчиков.
• Compose Multiplatform (JetBrains): новый игрок, позволяющий разделять бизнес-логику на Kotlin, пока имеет ограниченную поддержку.

По данным опросов Stack Overflow (2023), React Native остаётся одним из наиболее популярных фреймворков для мобильной разработки, уступая только Flutter по некоторым метрикам.

Применение

React Native используется для создания широкого круга мобильных приложений:

• Банкинг и финансы: приложения банков (например, «ВТБ Онлайн» в России использовал React Native, хотя позже перешёл на нативную разработку).
• Социальные сети: Facebook (продукт Meta, признанной экстремистской и запрещённой в РФ), Instagram (продукт Meta, признанной экстремистской и запрещённой в РФ), Pinterest (частично), Discord.
• Образование: Khan Academy, Udemy.
• Электронная коммерция: Walmart, Shopify (частично).
• Медиа и развлечения: Discovery, BBC, SoundCloud Pulse.

В России React Native применялся в приложениях «Сбербанк Онлайн» (для iOS), «Яндекс.Музыка» (частично), а также в проектах стартапов и студий мобильной разработки.

Инструменты разработки

• Expo: надстройка над React Native, предоставляющая готовую конфигурацию, доступ к множеству нативных API через managed workflow, а также инструменты для тестирования и развёртывания (Expo Go для живой перезагрузки на устройстве). Expo сильно упрощает начало разработки.
• React Native CLI: классический способ, требующий ручной конфигурации (Android Studio, Xcode). Даёт больше контроля.
• Debugging Tools: React Native DevTools (Chrome DevTools или Flipper), RN Debugger.

Недостатки и критика

• Производительность: несмотря на новую архитектуру, анимации и сложные UI могут уступать полностью нативным приложениям. Для тяжёлой обработки (например, игры) React Native обычно не подходит.
• Зависимость от моста/моста: в старой архитектуре сериализация данных через мост могла создавать задержки.
• Фрагментация экосистемы: некоторые библиотеки не обновляются до новых версий, что может вызывать конфликты.
• Размер приложения: по сравнению с нативными приложениями, React Native добавляет около 10-30 МБ к размеру APK/IPA из-за встроенного JavaScript-движка и нативных библиотек (Hermes, часть полифиллов).
• Обучение: требуется знание React (концепции Virtual DOM, JSX), а также базовое понимание мобильных платформ для отладки нативных модулей.
• Проблемы с интеграцией: при добавлении сложных нативных функций (например, ARKit, CoreML) может потребоваться написание нативного кода, что снижает преимущество кроссплатформенности.

Интересные факты

• React Native использует движок JavaScript Hermes, разработанный Meta для уменьшения времени запуска и объёма памяти. Hermes компилирует JavaScript в байт-код перед запуском.
• Первоначально React Native был написан для iOS, версия для Android появилась позже благодаря усилиям инженеров Meta и сообщества.
• В 2023 году Meta выпустила React Native 0.72, в которой появилась поддержка метафреймворка Next.js для веб-разработки.
• React Native используется не только для мобильных приложений, но и для создания настольных приложений под Windows и macOS (например, Microsoft Office, Visual Studio Code — частично).
• В 2018 году команда React Native объявила, что Facebook Rewrite (полная переработка архитектуры) начнётся в 2019 году; фактически Fabric и TurboModules стали стабильными только в 2024 году.

Источники

• Официальная документация React Native (reactnative.dev)
• Статья «React Native: Architecture Evolution» (блог Meta Engineering)
• GitHub-репозиторий React Native (facebook/react-native)
• «React Native vs Flutter: a detailed comparison» (Dev.to, 2023)
• «State of Mobile Development 2023» (Stack Overflow Survey)
• Статья «React Native: прошлое, настоящее и будущее» (Habr, 2022)