Apple on-device LLM

На последнем WWDC Apple представила обновление для своих on-device AI-моделей, которые начиная iOS26 теперь можно использовать напрямую в приложениях.

Хотя Apple пока отстает в гонке больших языковых моделей, их on-device модель по бенчмаркам сопоставима с конкурентами. Главное - она уже встроена в систему, оптимизирована под железо, и вам не нужно встраивать в приложение отдельную модель весом 800+ МБ.

Для работы с LLM используется новый Foundation Models Framework. Модель заточена для генерации текста, поддержки диалога (например в играх), классификации и сумаризации. Более подробно в видео с демонстрацией возможностей

Есть ранний wrapper для React Native (очень сырая бета, но код простой и при желании функциональность можно расширить).

Для разработки потребуется Mac с процессором M1 и установленная beta macOS 26.0

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

Одно из преимуществ React Native - это система рендеринга, построенная вокруг нативных платформенных компонентов.

Если платформа вносит какие-то кардинальные изменения, например выкатывает обновление уровня Liquid Glass, в RN мы получаем максимально плавную миграцию.

Чего не скажешь о коллегах из Flutter - официально Liquid Glass поддерживаться не будет, хотите - идите и рисуйте сами 😅

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

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

Как экономить на промтах?

Инфоцигане будут продавать эти приёмы на курсах, а у нас - пока бесплатно.

Подробная статья на примере демонстрирует разницу в цене и времени генерации одного и того же проекта (в статье делают генератор кроссвордов) с помощью одной и той же LLM.

Мне понравился трюк с описанием структуры проекта и его архитектуры с помощью ASCII, поэтому от себя добавлю 2 инструмента, с помощью которых можно удобно это делать:

🔹 Генератор структуры папок ascii-tree-generator
🔹 Крутейший генератор ASCII-диаграмм cascii.app

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

Ждете новый HermesJS? Я жду!

Последние бенчмарки показывают x2-x4 увеличение производительности по сравнению со стабильной текущей версией. Обещают скорый стабильный релиз.

Попробовать эту версию можно собрав из ветки static_h

Название ветки обманчиво - это не Static Hermes о котором я писал а версия v2 с поддержкой jit компиляции и кучей оптимизации движка

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

React Native Date Picker

Библотека закрывает вопрос по Date / Time picker компонетам для вашего приложения

· Полностью нативная реализация под все платформы
· Поддержка TurboModules
· Modal и Inline режимы
· Широкий набор кастомизаций

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

Извлекаем локализацию из JS-бандла

Большинство приложений хранят локализации внутри JSON-файлов, которые в свою очередь включаются в JS-бандл.

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

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

В статье подробно рассказывается, как это сделать для Android.

А чтобы проанализировать JS-бандл, попробуйте инструмент от того же автора: react-native-bundle-discovery

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

Хотите кнопку в стиле Apple Intelligence?

С помощью react-native-animated-glow можно воплотить самые смелые идеи анимаций с эффектом Glow ✨

Есть визуальный билдер, можно сразу посмотреть результат в web и скопировать готовый код

Библиотека использует Animation API, поэтому производительность сильно зависит от версии React Native

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

🔐 React Native Security

Наверное, лучшее, что я видел по безопасности React Native приложений:

- Обфускация кода
- Jailbreak protection
- RASP
- Device Binding
- SSL Pinning

И многое другое, собранно в одном gist

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

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

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

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

⚡️FlashList v2

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

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

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

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

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

🚀 Новые фичи:

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

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

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

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

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

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

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

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

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

React Native Enriched

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

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

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

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

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

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

The Past, Present & Future of Nitro

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

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

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

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

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

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