Под какие платформы можно разрабатывать на 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 | Навигация по каналу

Улучшенные нативные BottomSheet завезли в RNScreens 4

Настрока максимально простая в options настройки экрана задайте свойство

presentation: “formSheet”

алтернатив для RNBS все больше - порадуйте своих пользователей, подарите им настоящий нативный опыт

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

Virtualization vs Recycling

Давайте разберемся, какие бывают подходы к оптимизации списков на React Native.

Начнем с базы. ScrollView рендерит все child-элементы сразу.
Как только ваш список станет длиннее экрана, это может стать проблемой.

Для решения этой проблемы React Native предоставляет VirtualizedList и реализованные на его базе FlatList и SectionList.

Вместо того чтобы рендерить все элементы списка, мы как бы создаем окно, которое "идет" вместе со скроллом по списку и рендерит только то, что попадает в это окно.

Настраивать параметры виртуализации можно следующими свойствами:

windowSize — число, задающее размер вашего окна. Значение по умолчанию — 21, что означает, что окно равно 10 экранам сверху, 10 экранам снизу и одному текущему. Уменьшение этого числа позволит сократить количество элементов, которые будут рендериться одновременно.

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

Итак, давайте представим, что у вас есть список из 100 элементов, и на экран умещается 10 из них.
При открытии этого списка с дефолтными настройками FlatList произойдет рендеринг 10 экранов вниз (то есть всего вашего списка).

Единственное отличие от ScrollView будет в том, что рендеринг этот будет происходить не сразу, а батчами по 10 элементов, что сделает UI более отзывчивым.

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

Ответ — использовать ♻️ Recycling.

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

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

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

Именно этот принцип реализует RecyclerListView и построенный на его базе FlashList, который предоставляет API, максимально похожий на FlatList.

Используя FlashList, вы значительно сократите потребление памяти и увеличите производительность списков. Однако стоит помнить о следующих принципах:

1️⃣ Старайтесь избегать использования useState внутри элементов списка или продумайте логику его сброса (например, через useRef).

2️⃣Если ваш список состоит из нескольких типов компонентов, реализуйте метод getItemType.

3️⃣Посчитайте примерный размер элемента списка для параметра estimatedItemSize — это позволит лучше определить размер окна для списка.

4️⃣Если вам нужен аналог SectionList, посмотрите пример реализации через getItemType.

Если придерживаться этих правил, практически во всех случаях замена FlatList на FlashList принесет значительное увеличение производительности ваших списков.

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

🦄 Вышел Unistyles 3.0 и это новое слово в стилизации для React Native

Используя преимущества новой архитектуры, такие как интеграция с Fabric и взаимодействие с Shadow Tree, разработчики смогли перенести большую часть работы со стилями на сторону C++ и избежать ре-рендеров, а также дополнительных обёрток компонентов на стороне JS.

Как это работает?

Вместо того чтобы вычислять стили в рантайме и применять их через ре-рендер компонента с новым объектом стиля, Unistyles использует совершенно иной подход:

1️⃣ Babel-плагин анализирует стили на этапе сборки и конвертирует код в формат, подходящий для работы с ShadowNode. Примеры трансформаций можно найти в документации.

2️⃣ На основе анализа генерируются:

— C++ представление стилей (StyleSheetRegistry),
— биндинги для View (ShadowRegistry), к которым эти стили применяются.

Внутри приложения вы всё так же работаете с объектом StyleSheet как с обычным JS-объектом. Но магия начинается, когда стили нужно изменить!

Что происходит при изменении стилей?

Например, при:
— нажатии на кнопку которая вызывает изменения стиля,
— переключении в dark mode,
— обновлении настроек Accessibility.

Unistyles поддерживает 14 различных событий, которые вызывают обновление стилей. После получения события библиотека вычисляет новое состояние стилей и, благодаря ShadowRegistry, применяет их напрямую на нативной стороне, без ре-рендеров.

Полный список всех новых функций можно посмотреть на официальном сайте.

* важно новый unistyles работает только на RN 0.76+ и только с новой архитектурой

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

Декабрь — время адвент-календарей.

Собрал для вас три адвент-календаря, которые помогут отвлечься от рутины и порешать задачки и пазлы на JS и TS.
А ещё это отличное комьюнити, где каждый день люди делятся своими решениями и обсуждают интересные, а порой даже экзотические подходы к решению задач.

🎅🏻Самый популярный, собравший огромное комьюнити — Advent of Code.
Особенность в том, что вам не нужно выбирать конкретный язык программирования или использовать редактор, как на LeetCode. Для проверки достаточно предоставить результат работы вашей программы. Поэтому в сети можно найти множество экзотических вариантов решений, например, решение задач этого календаря на GameBoy. Используйте хэштег #AdventOfCode для поиска интересных обсуждений и решений.

🎄Advent of TS — календарь от создателей Typehero.
Это более классическая версия, где нужно решать TypeScript-пазлы в онлайн-редакторе. Отличный способ прокачать свои навыки и узнать что-то новое.

⛄️AdventJS — календарь, задачки которого ближе к формату LeetCode.
У него приятное оформление и удобная разбивка задач по сложности. Поддерживает JavaScript, TypeScript и Python.

Присоединяйтесь решайте задачки и заряжайтесь рождественским и новогодним настроением!

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