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 | Навигация по каналу

Memory Ownership Models

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

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

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

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

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

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

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

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

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

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

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

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

New DevTools

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

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

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

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

36x faster Metro transforms

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

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

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

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

React Native Tailwind

Для использования Tailwind в приложениях RN нужны дополнительные библиотеки например NativeWind или Uniwind.

Каждая из них добавляет свой оверхед на рантайм, что может отразиться на производительности сложных UI.

React Native Tailwind предлагает подход при котором компиляция стилей происходит на билдтайм с помощью babel плагина, без каких либо зависимостей от самой библиотеки Tailwind

Классы компилируются в стили StyleSheet с поддержкой динамических стилей.

· Почти нулевой footprint на размер бандла
· Более быстрый старт приложения за счет отсутствие парсинга на runtime
· StyleSheet only - нативная производительность для стилей

Есть поддержка анимаций (но пока только с помощью RN Animations)

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

пояснительная бригада от создателя Unistyles

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

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

https://www.reddit.com/r/reactnative/comments/1qcv62b/we_build_lightspeed_ota_for_react_native_without/

не знаю как насчет агентских скилов, но почитав эти доки свои вы точно подтяните

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

Очень много интересных инсайтов можно почерпнуть из отчёта Artsy о работе, которую они проделали над своим приложением за прошедший год.

Большую ценность ему придаёт то, что вся разработка и принимаемые решения в виде RFC находятся в их GitHub репозитории, что позволяет буквально воспроизвести реализацию той или иной фичи.

А если вы разработчик и хотите расти в сторону руководителя разработки или CTO, то в этом отчёте можно увидеть широкий спектр задач, решаемых помимо написания кода: DX, Performance, Observability, Testability и т.д.

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

Open Source альтернатива Sentry

Rejourney проект с полностью открытой кодовой базой как серверной так и SDK

Помимо Crash/ANR SDK поддерживает:

• реплей сессий
• аналитику навигации
• мониторинг производительности API
• heatmap нажатий и глубины прокрутки

Размер SDK всего лишь 1.6 мегабайт. В блоге подробно описаны инженерные решения для записи сессий, почему они отличаются от Posthog и Logrocket и показывают лучшую производительность

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

React Native NumberFlow

Реализация web-версии библиотеки NumberFlow для RN.

Одной из наиболее интересных для меня функций является реализация рендеринга на Skia, так как Reanimated 4 пока содержит много проблем, особенно при работе со списками.

Подробная документация и примеры доступны по ссылке.

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