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

Хотите кнопку в стиле Apple Intelligence? С помощью react-native-animated-glow можно воплотить самые смелые идеи анимаций с эффектом Glow ✨ Самое удобное, есть визуальный билдер, можно сразу посмотреть результат в web и скопировать готовый код Библиотека использует Animation API, поэтому производительность сильно зависит от версии React Native React Native World | Навигация по каналу

Извлекаем локализацию из JS-бандла Большинство приложений хранят локализации внутри JSON-файлов, которые в свою очередь включаются в JS-бандл. Это может вызвать несколько проблем, например: замедление холодного старта приложения и повышенное потребление памяти. Чтобы избежать этого, вынесите ресурсы в нативную часть приложения и читайте их внутри бандла. В статье подробно рассказывается, как это сделать для Android. А чтобы проанализировать JS-бандл, попробуйте инструмент от того же автора: react-native-bundle-discovery React Native World | Навигация по каналу

Во многих приложениях с LLM под капотом полезно передавать модели некоторый контекст. Обычно это происходит на бэкенде: пользователи загружают свои документы и данные, которые затем извлекаются во время запроса и подставляются в качестве контекста (RAG). Современные мобильные устройства позволяют хранить и извлекать данные для контекста прямо на устройстве, используя компактные LLM-модели. Библиотека React Native RAG предоставляет удобные API для векторизации, хранения и извлечения данных на девайсе. С помощью библиотеки Executorch можно выбрать локальную модель и токенайзер, которые будут использоваться для векторизации документов. Далее полученные векторы сохраняются в op-sqlite с использованием плагина sqliteVec, который позволяет хранить эмбеддинги. Библиотека хорошо кастомизируется и позволяет реализовывать каждый из этапов RAG как на устройстве, так и на сервере. Например, можно хранить эмбеддинги на устройстве и отправлять на бэкенд уже обогащённый контекстом запрос к более крупной модели. Или наоборот, получать контекст с бэкенда, а ответ генерировать локальной моделью. А можно вообще всё выполнять офлайн. React Native World | Навигация по каналу

React Native Date Picker Библотека закрывает вопрос по Date / Time picker компонетам для вашего приложения · Полностью нативная реализация под все платформы · Поддержка TurboModules · Modal и Inline режимы · Широкий набор кастомизаций React Native World | Навигация по каналу

Ждете новый HermesJS? Я жду! Последние бенчмарки показывают x2-x4 увеличение производительности по сравнению со стабильной текущей версией. Обещают скорый стабильный релиз. Попробовать эту версию можно собрав из ветки static_h Название ветки обманчиво - это не Static Hermes о котором я писал а версия v2 с поддержкой jit компиляции и кучей оптимизации движка React Native World | Навигация по каналу

React Native Wallet Хотите выпускать свои карты и добавлять их в Apple Wallet / Google Wallet как модные необанки? Команда Software Mansion в партнёрстве с Expensify выпустила решение react-native-wallet Эта библиотека уже поддерживает карты Visa, MasterCard, Amex и Discover cards Помимо API для работы с кошельками, есть подробнейшая инструкция по интеграции для обеих платформ. React Native World | Навигация по каналу

Как экономить на промтах? Инфоцигане будут продавать эти приёмы на курсах, а у нас - пока бесплатно. Подробная статья на примере демонстрирует разницу в цене и времени генерации одного и того же продукта с помощью одной и той же LLM. Мне понравился трюк с описанием структуры проекта и его архитектуры с помощью ASCII, поэтому от себя добавлю 2 инструмента, с помощью которых можно удобно это делать: 🔹 Генератор структуры папок ascii-tree-generator 🔹 Крутейший генератор ASCII-диаграмм cascii.app

💸 Экономим на Expo билдах Нашёл классный инструмент, который помогает генерировать GitHub Actions workflows и собирать Expo-приложения на бесплатном тарифе GitHub Базовый тариф Expo за $19 в месяц даёт максимум: · 30 билдов Android или · 15 билдов iOS С помощью expobuilder можно использовать 2000 бесплатных минут GitHub Actions, чего хватит примерно на: · 200 Android билдов или · 20 iOS билдов в месяц (macos использует бесплатные минуты x10) 🔧 Как это работает? · с помощью expobuilder генерирует workflow, который использует expo-cli --local для сборки на раннерах GitHub · нужен аккаунт в Expo и сгенерированный Expo Token · даже если ты не знаком с GitHub Actions, следуя инструкции, можно с нуля настроить CI/CD пайплайн 🔐 Настройка секретов: · базово нужен только EXPO_TOKEN · для уведомлений и публикации в сторах - добавьте остальные ключи ☁️ Хранение билдов: · артефакты сохраняются в GitHub Releases по умолчанию, но можно подключить своё хранилище React Native World | Навигация по каналу

Оптимизация старта iOS приложений Команда Sentry и Emerge Tools (создают топовые инструменты для оптимизации перфоманса мобильных приложений) выпустили open source пакет FaultOrdering Этот продукт позволяет автоматизировать технику Order Files Когда приложение запускается на iOS, система загружает его код из binary-файла в оперативную память постранично, блоками по 16 КБ. Даже если используется небольшая часть страницы, вся страница целиком подгружается в память (это называется page fault). Если при запуске важные символы (методы и классы) разбросаны по binary-файлу, возникает большое число page faults, что замедляет запуск. Техника Order Files решает эту проблему, группируя вместе символы, необходимые на старте, чтобы минимизировать число страниц памяти, которые нужно загрузить. Технически для использования Order Files нужно создать текстовый файл, в котором будет описан порядок загрузки символов. Но здесь и кроется сложность - как сделать это оптимально. FaultOrdering автоматически отслеживает вызовы функций и классов, необходимых для запуска приложения. Для этого: 1️⃣ В приложение динамически добавляются breakpoints на каждую функцию. 2️⃣ Приложение запускается в тестовом режиме (обычно через XCUITest). 3️⃣ Минималистичный встроенный дебаггер (SimpleDebugger) фиксирует срабатывание этих breakpoints. Это позволяет собрать точные данные о том, какие функции вызываются при старте, без необходимости изменения кода или сборки приложения. В результате приложения запускаются быстрее без изменений кода. Airbnb, Snapchat и Spotify уже используют Order Files и ускоряют запуск своих приложений на 20% и больше. 📈 В React Native приложениях Order Files даст заметную пользу, если приложение содержит много нативного кода или кастомных модулей, активно задействованных при старте React Native World | Навигация по каналу