React Native World

36x faster Metro transforms

Facetpack проект на основе Oxidation Compiler (набор инструментов написаных на Rust для работы с JS и TS) ускоряющий сборку JS бандла

У меня на проекте пока не завелось, но на Reddit отзывы позитивные

Интеграция в пару строк поэтому рекомендую попробовать

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

New DevTools

В RN 0.83 завезли новые инструменты разработчика которые помогут разобраться почему тормозит сгенерированный курсором ваш код

Подробнее об этом читайте в документации о React Performance tracks или посмотрите выступление Руслана на React Conf

DevTools можно попробовать и в более ранних версиях RN, но стабильность и работоспособность не гарантируется. Инструкция тут

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

Worklets мощный движок для многопоточности

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

Чтобы обойти эту особенность, команда Software Mansion в рамках библиотеки Reanimated придумала концепцию Worklets.

Помечая функции директивой worklet, специальный Babel-plugin трансформирует их так, чтобы эти же функции можно было запускать в отдельном JS-рантайме.

Это позволяет выполнять тяжелые вычисления в отдельном потоке, не блокируя основной JS-поток.

Сейчас библиотека Worklets становится самостоятельной, и обновленный API позволяет использовать её напрямую в ваших проектах.

Подробнее об эволюции библиотеки и будущих планах - в докладе с React Universe или в более техническом выступлении с митапа SWM.

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

Memory Ownership Models

С переходом на новую архитектуру JSI становится основным транспортным уровнем между нативным и JS-слоем.

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

Эта статья краткое введение в то, как работает управление памятью между JavaScript и Native, и введение в RFC по поддержке ArrayBuffer в TurboModules.

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

Craby - Type-safe Rust for React Native

React Native даёт удобный мост между JS и нативом в виде TurboModules, но ObjCTurboModule/JavaTurboModule обёртки добавляют накладные расходы.

Craby решает эту проблему, убирая промежуточные слои и подключая Rust напрямую к C++ TurboModule.

Craby автоматически генерирует Rust/C++ биндинги из TypeScript схем, минуя ObjCTurboModule и JavaTurboModule.

Результат почти нулевые накладные расходы, типобезопасность на этапе компиляции и C++ уровень производительности.

✅ Когда стоит применять:

· Критические к производительности нативные модули (large-scale data processing, cryptographic operations, real-time parsing)

· Высокопроизводительно I/O с большим набором данных

❌ Когда не стоит:

· Модули со специфичными для платформы зависимостями

· Модули которым нужны функции TurboModule такие как event emitters (их заменяют signals), platform context access

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

‼️Критическая уязвимость в React Native CLI

В CLI есть пакет @react-native-community/cli-server-api, который используется для того, чтобы поднять локальный сервер Metro.

Проблема в том, что он слушает не только localhost, но и 0.0.0.0 и IPv6 [::], что делает его доступным в сети.

Вторая проблема, это open-url роут, который принимает JSON с полем url и передаёт его пакету open, который на Windows даёт полноценное выполнение команд, а на macOS/Linux запускает команды, но с более ограниченным контролем.

Комбинация этих двух уязвимостей даёт возможность удалённого запуска вредоносного кода.

Подробное описание уязвимости и способы пофиксить в статье.

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

AI-стартап Born, создающий приложения с виртуальными питомцами, выложил библиотеку для интеграции React Native с игровым движком Godot.

Библиотека react-native-godot позволяет запускать инстанс игрового движка с нужными параметрами и поддерживает вызовы API Godot из TypeScript/JavaScript.

Godot работает в отдельном потоке и не влияет на JavaScript-тред.

В репозитории есть папка с примером приложения и подробная инструкция по сборке и запуску.

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

🚀 Ускоряем локальные билды React Native на 75%

В официальной документации React Native есть отличная страница с инструкциями, как ускорить локальные сборки.

Например, флаг --active-arch-only позволяет собирать Android-приложение только для одной архитектуры той, на которой вы тестируете, вместо всех четырёх.

На iOS, начиная с версии 0.80, можно включить Precompiled React Native for iOS, чтобы пропустить фазу сборки C++ исходников RN.

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

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

Render → Commit → Mount

Чтобы отрисовать JavaScript на нативной платформе, современный React Native проходит несколько фаз рендеринга от вычисления виртуального дерева до отображения UI-компонентов на экране.

В официальной документации этот процесс описан подробно,
но куда интереснее разобраться, как это работает под капотом.

В этом видео пошагово показано, как JS превращается в UI компоненты,
и на примерах из исходников React Native вы сможете увидеть,
где именно происходят фазы Render, Commit и Mount.

Это отличный способ глубже понять архитектуру RN и увидеть, как работают React Fiber, Fabric и JSI на практике.

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

React Native Harness

Unit-тесты в React Native выполняются в среде Node.js, что ограничивает их возможности. Они не видят нативную часть приложения и не могут протестировать поведение модулей, зависящих от iOS/Android.

Можно, использовать E2E-тесты (Detox, Maestro), но их написание и поддержка обходятся дорого.

Например, если нужно протестировать работу нативного модуля, требуется пройти длинный путь в UI и процесс становится медленным и неудобным.

Команда Callstack предложила элегантное решение

React Native Harness - фреймворк, который позволяет запускать unit-тесты поверх реального приложения, прямо на симуляторе или устройстве.

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

1️⃣ С помощью Babel-плагина собирается специальный JS-bundle, который вместо обычного UI запускает Harness Test Runner
2️⃣ Runner выполняет тесты с расширением harness
3️⃣ Результаты выполнения передаются в CLI в формате, совместимом с Jest reporter

Синтаксис написания тестов повторяет Jest, поэтому самое написание тестов не вызовет никаких проблем.

PS: 2-х часовое видео с live coding примерами написания и запуска тестов с помощью Harness

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

Если вам вдруг не зашел Liquid Glass то вот подробная инструкция как минимизировать его влияние на всех платформах от macOS и iOS до tvOS

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

Best Practices of using WebSockets

Планируете или уже используете WebSockets в своих приложения?

Эта статья поможет вам оптимизировать работу на стороне RN

Внутри вы найдете пример реализации Singleton WebSocket Service

Способы работы с reconnection

Offline Support и много других полезных приемов

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

С новым релизным циклом React Native старая архитектура скоро лишится поддержки

Подробнее о пути к RN 1.0, новой системе релизов и тестирования смотрите в видео

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

Nitro Fetch

В продолжение темы Nitro Modules пример на видео показывает, как даже с использованием новой архитектуры Nitro Modules позволяют сократить расходы на сериализацию уже на уровне JSI.

Nitro Fetch реализует fetch-совместимый интерфейс. Для нативной реализации используется Cronet для Android и URLSession для iOS.

Поддерживает HTTP/2, QUIC, Brotli (но не поддерживает стриминг и WebSockets).

Функции Prefetching и возможность запуска парсинга результата ответа на Worklets позволяют не блокировать JS-поток во время работы с сетью.

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

The Past, Present & Future of Nitro

Если вы еще не знакомы с NitroModules, то выступление её создателя на конференции CallStack, отличный шанс начать знакомство и, возможно, попробовать реализовать что-то у себя.

Из видео вы узнаете причины создания ещё одного фреймворка для нативных модулей,
технические детали реализации, почему используется jsi::NativeState и зачем нужен Nitrogen.

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

React Native Enriched

EnrichedTextInput - rich text editor компонет построенный на базе uncontrolled input.

Благодоря этому компонент напрямую взаимодействует с платформенной реализацией и обеспечивает нативную производительность.

Поддерживает:

· стилизацию
· html парсинг
· инлайн изображения

Работает только с new architecture.

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

⚡️FlashList v2

Вторая версия FlashList в продакшне и это отличная иллюстрация бонусов которые мы получаем при переходе на новую архитектуру

Благодаря полностью синхронной работе с UI стало возможным реализовать всю функциональность на стороне JS

Новый алгоритм расчета размера элемента избавляет от estimatedItemSize. Теперь размеры предсказываются точнее, а вероятность появления белого экрана снизилась на 50%

🛠 Что изменилось:

· более точная работа scrollToIndex
· улучшен горизонтальный скроллинг
· минимизированы ререндеры при изменении данных
· улучшена работа в Web благодаря удалению нативного кода

🚀 Новые фичи:

Расширеная работа с индикатором прокрутки:

· новое свойство maintainVisibleContentPosition позволяет лучше контролировать позицию скрола при изменении контента (например при смене ориентации)

Улучшенная работа с Masonry

· с помощью overrideItemLayout можно строить более сложные мультиколоночные списки

Контроль над recycle pool

· теперь можно задать максимальное кол-во типов элементов находящихся в recycle pool, полезно когда у вас много разных типов элементов списка

📖 Полный список изменений на обновлённом сайте с документацией

На видео бенчмарк сравнение FlashList vs LegendList на 10K елементов

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

99$ за годовую подписку на оптимизированные биндинги Tailwind в Unistyles

Скоро за css селекторы начнем платить...

Хотя вайбкодеры уже платят 🤔