Когда Ionic перестаёт быть решением
Мы часто видим приложения, которые начинали с Ionic ради быстрого прототипа, а через полгода упираются в стену производительности. Пользователи жалуются на тормоза, App Store отклоняет релизы по разделу 4.2 App Store Review Guidelines, а нативные жесты работают через раз. Именно в этот момент миграция на React Native становится не капризом, а необходимостью.
Почему React Native быстрее Ionic?
Разница в рендеринге: Ionic использует WKWebView — браузер внутри приложения. React Native транслирует компоненты в настоящие UIView и CALayer. Для пользователя это означает плавные анимации при 60 FPS против дёрганых 20–30 FPS. Особенно это заметно на сложных списках с изображениями и анимациями. Мы многократно измеряли: React Native обеспечивает до 2 раз более плавную прокрутку.
| Критерий | Ionic (WebView) | React Native |
|---|---|---|
| Рендеринг | DOM через WKWebView | Нативные UIView/CALayer |
| Производительность | 20–30 FPS на сложных экранах | 60 FPS стабильно |
| Жесты | Эмуляция через JS | Нативные UIGestureRecognizer |
| Размер пакета | ~5–10 МБ + WebView | ~2–4 МБ (без Hermes) |
| Доступ к API | Через Capacitor/Cordova мосты | Прямой доступ к нативным API |
Как заменяем Capacitor-плагины?
Каждый плагин из экосистемы Capacitor требует прямого аналога в React Native. Например:
-
@capacitor/camera→react-native-image-picker -
@capacitor/filesystem→react-native-fs -
@capacitor/push-notifications→@react-native-firebase/messaging
Мы проверяем актуальность каждого модуля: дату последнего релиза, количество открытых issues, поддержку новых версий ОС. Если подходящего аналога нет — пишем нативный модуль самостоятельно. В одном проекте, например, пришлось разработать обёртку для сканера штрихкодов, так как существующие библиотеки не поддерживали нужный формат.
Процесс миграции
- Инвентаризация — собираем полный список экранов, плагинов, кастомных компонентов.
- Аудит производительности — замеряем FPS, время загрузки, утечки памяти в текущем приложении.
- Проектирование архитектуры — определяем структуру навигации, стейт-менеджмент (Redux Toolkit или Zustand), типизацию.
- Разработка — поэтапное пересоздание экранов, начиная с ключевых.
- Тестирование — на физических устройствах, автоматизированные UI-тесты (Detox).
- Деплой — публикация в App Store и Google Play, настройка CodePush для OTA-обновлений.
Что входит в работу?
- Пересоздание UI на React Native с соблюдением платформенных гайдлайнов (Human Interface Guidelines, Material Design)
- Замена всех Capacitor-плагинов
- Настройка навигации (React Navigation v6)
- Перенос бизнес-логики и API-клиентов
- Подключение push-уведомлений (APNs + FCM)
- Оптимизация анимаций и FlatList
- Документация по новой архитектуре
- Поддержка в течение 2 месяцев после релиза
Типичные проблемы и их решения
Переход с Ionic сопряжён с рядом технических сложностей. Например, на iOS KeyboardAvoidingView с behavior="padding" работает нормально, а на Android — иначе. Мы комбинируем его с KeyboardAwareScrollView из react-native-keyboard-aware-scroll-view. В Ionic эта проблема решалась автоматически браузером.
Настройка StatusBar: в Ionic цвет и полупрозрачность задаются CSS, а в React Native используем компонент StatusBar с пропсами barStyle, backgroundColor, translucent. На Android translucent требует правок в styles.xml.
Шрифты — частая причина падений. В Ionic Google Fonts подключаются через CSS @import, а в React Native шрифты — отдельные файлы в android/app/src/main/assets/fonts/ и в Info.plist. Запускаем npx react-native-asset или настраиваем react-native.config.js. Забытый шаг — приложение падает с ошибкой «Unrecognized font family». Именно здесь часто требуется бесплатный аудит текущего кода.
Реальный кейс: ускорение в 2 раза
Один из наших клиентов — сервис доставки еды с Ionic-приложением на 30 экранах. Пользователи жаловались на зависания при прокрутке меню. Мы провели аудит: на главном экране с 50 товарами FPS падал до 15. После миграции на React Native тот же экран стабильно держал 60 FPS. Дополнительно мы заменили @capacitor/camera на react-native-vision-camera, что ускорило сканирование чеков на 40%. Весь процесс занял 7 недель, а после релиза рейтинг приложения вырос с 3.2 до 4.5. Средний бюджет подобного проекта начинается от 350 000 ₽, а экономия на поддержке — до 40%.
Как сравниваются ключевые компоненты?
| Компонент/Функция | Ionic (Capacitor) | React Native |
|---|---|---|
| Камера | @capacitor/camera | react-native-vision-camera |
| Файловая система | @capacitor/filesystem | react-native-fs |
| Push-уведомления | @capacitor/push-notifications | @react-native-firebase/messaging |
| Геолокация | @capacitor/geolocation | @react-native-community/geolocation |
| Хранилище | @capacitor/storage | @react-native-async-storage/async-storage |
Сроки и бюджет
Для приложения на 15–25 экранов с типичным набором плагинов (камера, геолокация, push) срок составляет 5–9 недель. Стоимость рассчитывается после аудита текущего кода. Ориентировочный диапазон — от 300 000 до 700 000 ₽. Точная смета — после бесплатного аудита.
Свяжитесь с нами для бесплатного аудита вашего Ionic-приложения. Мы проанализируем код и предложим план миграции с прозрачными сроками. Получите консультацию по миграции — улучшите производительность вашего приложения.