Мобильная разработка
React Native
2015 год. Facebook показывает React Native: пишешь JavaScript, получаешь нативный UI. Но через три года Airbnb публикует разгромный пост 'Суронет React Native'. Проблема - Bridge. 2023 год: New Architecture решает её. История RN - это история переосмысления архитектуры.
- Meta Ads Manager, Facebook, Instagram используют React Native для shared business logic с нативным UI через New Architecture
- Shopify мобильное приложение полностью на React Native - New Architecture дала 40% улучшение frame rate при scroll
- Microsoft Teams Mobile: React Native для cross-platform модулей, нативный Swift/Kotlin для критичных UI компонентов
Старая архитектура: Bridge и её ограничения
React Native 2015-2022: JavaScript поток и Native поток общаются через асинхронный Bridge. Каждое взаимодействие - сериализация в JSON, передача через Bridge, десериализация. Проблема: Bridge - bottleneck. Scrolling с 60fps требует синхронной коммуникации, Bridge даёт только асинхронную.
Главные ограничения Bridge архитектуры: только асинхронная связь (janky анимации), JSON сериализация overhead при частых вызовах, синхронизация между тремя потоками (JS, Native, Shadow). Instagram и Airbnb отказались от RN именно из-за этих проблем в 2018-2020.
Почему Animated с useNativeDriver: true работает плавнее без него?
Native Modules: доступ к платформенному API
Native Module - мост между JavaScript и платформенным кодом (Swift/Obj-C на iOS, Kotlin/Java на Android). Нужен когда React Native не предоставляет доступ к нативному API: Bluetooth, биометрия, ARKit, background processing.
Когда необходимо создавать Native Module вместо использования готовых RN компонентов?
Hermes: JavaScript engine для мобильных приложений
Hermes - JavaScript engine от Meta, оптимизированный для React Native. В отличие от V8 (Chrome) и JavaScriptCore (Safari), Hermes компилирует JavaScript в байткод при сборке приложения (AOT), а не при запуске (JIT). Результат: быстрый Time-to-Interactive (TTI), меньше памяти.
- AOT байткод компиляция: JS парсинг переносится с runtime на build time
- TTI улучшение: на low-end Android -40% по сравнению с JavaScriptCore
- Размер памяти: меньше heap из-за отсутствия JIT compiler в runtime
- Hermes debugger: отдельный протокол, интегрирован в React Native DevTools
Почему Hermes компилирует JS в байткод при сборке, а не при запуске?
New Architecture: JSI, TurboModules, Fabric
React Native New Architecture (стабильна с RN 0.73): JSI (JavaScript Interface) заменяет Bridge. JSI - C++ слой, дающий JS прямой доступ к нативным объектам без JSON сериализации. TurboModules - ленивая загрузка нативных модулей. Fabric - новый UI рендерер с синхронными вызовами.
Fabric рендерер позволяет синхронный layout, что открывает возможности для worklets (Reanimated 3) - анимации, выполняемые в JS на UI thread без Bridge. Shopify, Expo и Microsoft Teams первыми перешли на New Architecture в production.
Главное отличие JSI от Bridge в React Native:
Ключевые идеи
- Bridge архитектура: асинхронная, JSON сериализация - bottleneck для 60fps анимаций и частых вызовов.
- Hermes: AOT байткод компиляция переносит JS парсинг с cold start на build time, -40% TTI на Android.
- New Architecture (JSI/TurboModules/Fabric): прямые C++ ссылки вместо Bridge - синхронные вызовы, нет сериализации.
Связанные темы
React Native связан с экосистемой мобильной разработки:
- Flutter — Альтернативный cross-platform подход: Dart + собственный рендерер вместо нативных компонентов
- Mobile CI/CD и Release — Fastlane и App Store Connect - типичный pipeline для RN приложений: сборка JS bundle + нативная сборка
Вопросы для размышления
- В каких сценариях React Native хуже нативного Swift/Kotlin, несмотря на New Architecture?
- Как JSI изменяет подход к написанию Native Modules по сравнению со старым Bridge API?
- Почему Airbnb отказался от React Native, а Shopify наоборот удвоил инвестиции?