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

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

Нативный BottomSheet для React Native RNBS V5 — самая популярная библиотека для работы с BottomSheet. Проблема в том, что под капотом эта библиотека не использует нативную реализацию для каждой платформы, а работает с помощью Reanimated View. Если вы хотите получить по-настоящему нативный опыт, попробуйте библиотеку True Sheet. Еще одним вариантом может быть Expo-модуль от BlueSky. Он пока не опубликован как отдельный пакет, но его уже можно использовать, скопировав в свое Expo-приложение. Подробнее о том, с какими проблемами столкнулись разработчики BlueSky при работе над BottomSheet, можно прочитать в их посте. React Native World | Навигация по каналу

Static Hermes можно попробовать уже сейчас Но только для iOS и с ограниченным набором функционала. Команда SWM сделала специальный репозиторий, который содержит исходники HermesJS с изменениями, необходимыми для запуска Static Hermes. Новый Hermes поддерживает несколько режимов: interpreter, typed native, untyped native, typed bytecode и untyped bytecode. Лучшая производительность достигается в режиме typed bytecode, когда на вход компилятора подается не чистый JS, а типизированный Typescript или Flow. На текущем этапе этот режим ещё недоступен, и можно запустить приложение в режиме untyped bytecode, который также даёт значительный прирост производительности (до 16% по измерениям SWM). Можно использовать как уже скомпилированную версию Static Hermes, так и собрать её самому. Не забывайте, что любые замеры производительности нужно делать в режиме Release build. А если ещё не знакомы с новым Hermes, посмотри эти два выступления Tzvetan Mikov с презентацией и обновлением 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 | Навигация по каналу

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

MiniSim утилита для запуска Android 🤖 и iOS  симуляторов Эта небольшая нативная утлита для Mac, живущая в menu bar, сэкономит вам кучу времени. Она позволяет удобно просматривать список доступных эмуляторов и работать с ними. Вот что вы сможете делать с помощью MiniSim:  Запускать iOS симуляторы - Копировать UDID устройства - Копировать название устройства - Удалять симуляторы 🤖 Запускать Android эмуляторы - Выполнять холодный запуск Android эмуляторов - Запускать Android эмуляторы без аудио - Включать и выключать поддержку специальных возможностей (a11y) на выбранном эмуляторе - Копировать название устройства - Копировать ADB ID устройства - Наводить фокус на устройства с помощью API специальных возможностей - Устанавливать флаги по умолчанию для запуска эмуляторов - Видеть индикацию запущенных устройств Скачать можно тут React Native World | Навигация по каналу

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