Под какие платформы можно разрабатывать на React Native?

На прошедшей конференции Connect Марк Цукерберг упомянул что приложения Instagram и Whatsapp были полностью переписаны под VR платформу, а главный котрибьютор в движок HermesJS уточнил в 🐦 что эти приложения сделаны на React Native.

Оригинальная версия React Native поддерживает создание мобильных приложений для iOS и Android.

Однако существуют реализации и под другие платформы.

💻 Microsoft активно развивает десктоп версии React Native под Windows и MacOS.

🥽 Callstack создали реализацию React Native для недавно вышедшей VisionOS.

Еще для VR cуществует React Vision с поддержкой основных AR/VR движков на iOS и Android

📺 Для телевизоров на основе Android или Apple TV можно использовать React Native TVOS

Ну и не забываем про web.

React Native World | Навигация по каналу

MiniSim утилита для запуска Android 🤖 и iOS  симуляторов

Эта небольшая нативная утлита для Mac, живущая в menu bar, сэкономит вам кучу времени.

Она позволяет удобно просматривать список доступных эмуляторов и работать с ними.

Вот что вы сможете делать с помощью MiniSim:

 Запускать iOS симуляторы

- Копировать UDID устройства
- Копировать название устройства
- Удалять симуляторы

🤖 Запускать Android эмуляторы

- Выполнять холодный запуск Android эмуляторов
- Запускать Android эмуляторы без аудио
- Включать и выключать поддержку специальных возможностей (a11y) на выбранном эмуляторе
- Копировать название устройства
- Копировать ADB ID устройства
- Наводить фокус на устройства с помощью API специальных возможностей
- Устанавливать флаги по умолчанию для запуска эмуляторов
- Видеть индикацию запущенных устройств

Скачать можно тут

React Native World | Навигация по каналу

Топ докладов с REACT UNIVERSE CONF 24

В сентябере прошла очередная конференция REACT UNIVERSE CONF на которой было более 20 интересных спикеров. Я выделил 5 наиболее запомнившихся докладов которые обязательно стоит посмотреть чтобы быть в курсе последних трендов в индустрии React Native.

THE NEW REACT NATIVE DEBUGGER by Alex Hunt

Разбор проблем существующих инструментов для отладки в RN и презентация нового набора инструментов под названием React Native Debugger, призванного их решить. Дебаггер появится в версии 0.76, а подробный Roadmap и обсуждения уже доступны на GitHub

DRAWING ONTO THE CAMERA by Marc Rousavy

Актуально для тех, кто работает с камерой. Доклад посвящен новой архитектуре Frame Processors и практическому решению по использованию Skia для отрисовки поверх Camera View. (Если вы до сих пор не перешли на Vision Camera — обязательно посмотрите!)

WEB ONCE, NATIVE EVERYWHERE: INTRODUCING EXPO DOM COMPONENTS by Evan Bacon

Презентация нового API от Expo, которое должно помочь в переходе от веб-приложений к нативным. Актуально для тех, кто хочет мигрировать с решений на базе WebView или сделать своё веб-приложение более нативным с минимальными усилиями. Уже доступно в качестве экспериментальной версии в Expo SDK 52.

HOW YOU CAN SERVER-RENDER WITHOUT RENDERING ON THE SERVER by Mike Grabowski

Презентация Rise Tools — фреймворка для построения Server-Driven UI (SDUI) приложений на React Native. Это первое open-source решение для SDUI на RN. Отлично подойдет для тех, кто строит Super App или приложения с большим количеством динамического контента.

HERMES: BETTER PERFORMANCE WITH RUNTIME BYTECODE TRANSLATION by Tzvetan Mikov

Один из моих любимых спикеров с хардкорным докладом о текущем состоянии и проблемах Static Hermes (подробнее о том, что это такое, в этом докладе). Если вы любите эксперименты, можете попробовать Static Hermes и узнать больше о нем.

Ну и полный список и видео докладов на по ссылке

React Native World | Навигация по каналу

Собрал для вас крутые приложения на React Native, разработка которых ведется в Open Source.

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

В мире React Native это становится особенно актуально из-за обилия несовместимых библиотек и нативных модулей. Ну и, конечно, разработка — это не только код, но еще и сборки, тесты, релизы, CI/CD пайплайны.

И тут на помощь нам приходит Open Source и компании, которые выбрали эту модель как подход к разработке своих B2C продуктов. В репозиториях, которые я привел ниже, можно найти не только интересные и свежие решения в UI, но и посмотреть, как строится структура проекта, как организуются тесты и релизы. Самое главное — все эти приложения актуальны, имеют десятки, а иногда и сотни тысяч пользователей, и доступны в App Store и Google Play.

🤑 Крипта

rainbow - Ethereum-кошелек с большим набором функционала. Внутри можно найти много кастомных UI-компонентов и интересных решений, например, нативные виджеты для iOS.

metamask - кошелек с миллионами пользователей, с очень серьезным подходом к безопасности и производительности.

BlueWallet - кошелек с меньшим функционалом, чем Rainbow или MetaMask, но с приятным минималистичным дизайном и упором на Bitcoin.

🐦 Социальные сети

Bluesky- децентрализованная микроблогинговая платформа, по UI аналогичная Твиттеру. У приложения более 10 миллионов пользователей.

Artsy - маркетплейс для продажи арта. Очень много работы с отображением контента и GraphQL. Еще у них классная инженерная документация.

💼 Утилиты

Expensify - приложение для учета расходов. Из интересных особенностей — разработка ведется полностью на GitHub, включая описание задач и багов, а также их обсуждение.

keybase- приложение для хранения открытых ключей для социальных сетей и мессенджеров. В репозитории также есть клиенты для десктопов и ключевые крипто-библиотеки.

📬 Мессенджеры

RocketChat - корпоративная платформа обмена сообщениями с глубокой кастомизацией. По UI что-то похожее на Slack.

status.app - децентрализованный мессенджер с криптокошельком и Web3.

📝 Заметки

hoarder - приложение для хранения ссылок, заметок, изображений и т.д. Активно использует Expo.

notesnook - аналог Evernote (если еще помните такой) с упором на шифрование и приватность.

joplin - приложение для заметок с поддержкой синхронизации через облака или десктоп.


React Native World | Навигация по каналу

Static Hermes можно попробовать уже сейчас

Но только для iOS и с ограниченным набором функционала.

Команда SWM сделала специальный репозиторий, который содержит исходники HermesJS с изменениями, необходимыми для запуска Static Hermes.

Новый Hermes поддерживает несколько режимов: interpreter, typed native, untyped native, typed bytecode и untyped bytecode. Лучшая производительность достигается в режиме typed bytecode, когда на вход компилятора подается не чистый JS, а типизированный Typenoscript или Flow.

На текущем этапе этот режим ещё недоступен, и можно запустить приложение в режиме untyped bytecode, который также даёт значительный прирост производительности (до 16% по измерениям SWM).

Можно использовать как уже скомпилированную версию Static Hermes, так и собрать её самому. Не забывайте, что любые замеры производительности нужно делать в режиме Release build.

А если ещё не знакомы с новым Hermes, посмотри эти два выступления Tzvetan Mikov с презентацией и обновлением Static Hermes.

React Native World | Навигация по каналу

Нативный BottomSheet для React Native

RNBS V5 — самая популярная библиотека для работы с BottomSheet. Проблема в том, что под капотом эта библиотека не использует нативную реализацию для каждой платформы, а работает с помощью Reanimated View.

Если вы хотите получить по-настоящему нативный опыт, попробуйте библиотеку True Sheet.

Еще одним вариантом может быть Expo-модуль от BlueSky. Он пока не опубликован как отдельный пакет, но его уже можно использовать, скопировав в свое Expo-приложение.

Подробнее о том, с какими проблемами столкнулись разработчики BlueSky при работе над BottomSheet, можно прочитать в их посте.

React Native World | Навигация по каналу

Принес вам свежий бенчмарк производительности самых популярных библиотек для стилизации в React Native!

Задача бенчмарка — измерить среднее время, которое требуется для рендеринга 1000 компонентов View с одинаковыми стилями. За базовый ориентир взят стандартный StyleSheet.

const Native = () => {
  return (
    <View style={{ display: "flex", flexDirection: "row" }}>
      {new Array(COUNT).fill(0).map((_, i) => (
        <View key={i} style={styles.styledView} />
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  styledView: {
    borderColor: "red",
    borderWidth: 2,
    padding: 5,
  },
});

Первое место с результатом, наиболее близким к нативному, заняла библиотека Unistyles V2.

Я рекомендую присмотреться к этой библиотеке, если вы еще не используете ее или планируете начать новый проект.

React Native World | Навигация по каналу

Продолжая тему Performance

Вот набор метрик, которые нужно отслеживать для получения идеального пользовательского опыта. Метрики разделены на 3 группы:

⚛️ React Native JS
⚙️ Native
📱 Device

⚛️ JS Frame Rate
Измеряет время выполнения кода в JS потоке (в Android Navigator использует этот поток).
Базовый уровень: Идеально - 60 FPS, Разумно - 30 FPS, Меньше 30 FPS (замедленное приложение).

⚛️ Navigation Render Time
1. Таймер стартует при нажатии на Touchable на экране A.
2. Переход на экран B.
3. Таймер останавливается, когда экран B полностью отрисован.

Базовый уровень:
- Простые приложения - до 0.3 сек (300 мс)
- Средние приложения - 0.3 до 1 сек
- Сложные приложения - до 1 сек

⚛️ Screen re-render Time
1. Таймер стартует при определенном UI событии (например, pull-to-refresh).
2. В процессе происходит обновление (например, сетевые запросы).
3. Таймер останавливается, когда экран снова полностью отрисован.

Базовый уровень: Стандарт - 60 FPS, Повышенный - 90 и 120, Пониженный - 30 FPS.

⚛️ Javanoscript Bundle Size
Базовый уровень:
- Малые и средние приложения: 4-6 MB или меньше
- Большие и сложные приложения: 6-10 MB или меньше

⚛️ UI Frame Rate (Main Thread)
Измеряет время для выполнения layout/UI отрисовки (NavigatorIOS использует этот поток, поэтому работает лучше чем Navigator для Android).

Базовый уровень: Идеально - 60 FPS, Разумно - 30 FPS, Меньше 30 FPS (замедленное приложение).

⚙️ Frame Drop
Задержка в отрисовке экранов (менее 60 fps).
Базовый уровень: 0 Frame Drops

⚙️ Slow Frame
Если приложение тратит больше 16.67 мс на кадр.
Базовый уровень: 0 Slow Frames

⚙️ Frozen Frame
UI кадры, занимающие более 700 мс.
Базовый уровень: 0 Frozen Frames

⚙️ TTI (Time-to-Interactive)
Время до интерактивности экрана/компонента.
Базовый уровень: 2-3 сек или меньше

📱App Stability / Crashes
Стабильность приложения измеряется количеством сбоев на сессию или пользователя.

📱ANRs (Application Not Responding)
Ошибка ANR возникает, когда основной поток приложения не отвечает более 5 секунд.
Базовый уровень: ANR = 0

📱App startup render time (App Launch Time)
1. Таймер стартует при запуске нативной части приложения.
2. Таймер останавливается, когда первый экран полностью отрисован.

Базовый уровень:
- Холодный старт: 2–4 сек
- Теплый старт: 2-3 сек
- Горячий старт: 1–1.5 сек

📱CPU Usage
Утилизация процессора показывает нагрузку на ядра для выполнения различных программ.

Базовый уровень:
- Идеально (без взаимодействия пользователя и фоновых задач) - ниже 5%
- Во время взаимодействия - ниже 20-30%
- Без продолжительных пиков до 100% (кратковременные пики допустимы)

📱Memory Usage
Использование памяти показывает средний процент занятости доступной памяти в данный момент.

Базовый уровень:
- При первом запуске - ниже 100MB
- В процессе использования - до 200-300MB
- Минимизировать утечки памяти

⚡️В следующем посте я расскажу какие инструменты использовать для получения этих метрик.

React Native World | Навигация по каналу

⚡️Skia List - fastest react-native list renderer

Skia List - построенный на базе Skia высокопроизводительный список разработан для быстрой и эффективной работы.

Но есть нюанс. В библиотеке пока что доступны только два компонента: SkiaScrollView и построенный на его основе SkiaFlatList. Оба могут использовать внутри только рендеринг Skia и не поддерживают компоненты React Native 🤔

Демо-сравнение с FlashList, конечно, впечатляет, но пока непонятно, сколько усилий потребуется для реализации подобного функционала, как работает доступность (accessibility) и т.д.

Будем наблюдать.

React Native World | Навигация по каналу

🔦 Flashlight — измеряем производительность приложения на React Native

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

Реальность такова, что не существует единого инструмента для сбора всех метрик в одном месте.

Однако есть инструмент, который позволяет с минимальными усилиями собрать многие из них, особенно специфичные для React Native — это Flashlight.

Flashlight агрегирует различные метрики производительности (FPS, использование CPU, использование RAM) и предоставляет их оценку, на основе которой можно сделать вывод о состоянии производительности вашего приложения.

Давайте рассмотрим, как можно получить такой отчет.

После установки вам будут доступны две команды:

1. flashlight measure
2. flashlight test

*На данный момент Flashlight работает только с эмуляторами или устройствами на базе Android. Подробнее о ситуции с iOS тут

Команда flashlight measure генерирует отчет в реальном времени и показывает изменения различных метрик на графике. Удобно для быстрой оценки производительности.

С помощью flashlight test мы можем автоматизировать измерения, интегрировав их с запуском e2e теста. Вот пример запуска приложения и генерации отчета:

flashlight test --bundleId com.twitter.android \
--testCommand "maestro test twitter.yaml" \
--duration 10000 \
--resultsFilePath results.json

После генерации отчет можно посмотреть командой flashlight report results.json, или, предоставив несколько отчетов, сравнить их между собой.

Ставьте эксперименты, анализируйте отчеты и делайте свое приложение еще лучше с Flashlight

React Native World | Навигация по каналу