Разработка корпоративных приложений на React Native

Технические особенности React Native

React Native — кроссплатформенный фреймворк с открытым исходным кодом для разработки нативных мобильных приложений на JavaScript/TypeScript. Он позволяет создавать приложение для Android и iOS, используя одну и ту же кодовую базу. Важно отметить, что React Native работает с платформенными компонентами iOS/Android.

Стоит начать с того, что мы пишем на TypeScript с использованием JSX, что не является валидным JavaScript. Поэтому код нужно подготовить - для этого используется сборщик Metro, специально разработанный для React Native. Помимо генерации конечного js bundle он позволяет использовать для локальной разработки дев сервер с функциями hot-reload и fast refresh.

Эволюция архитектуры

Старая архитектура с Bridge:

• Нативный код и JavaScript работали в отдельных потоках.
• Общение между ними происходило через Bridge, который передавал сообщения в формате JSON.

Какие минусы есть у этого подхода:

1. Сериализация/десериализация каждого сообщения, создающее накладные расходы,
2. Асинхронная очередь сообщений, которая может вызывать задержки в отклике UI. Например, при быстром скролле очередь забивается сообщениями, которые еще и отменить нельзя, потому что отмена тоже будет стоять в очереди,
3. Дублирование layout-деревьев - у каждого потока было свое дерево компонентов, потому что создание происходило на одной стороне, а расчет и отрисовка - на другой. Еще их приходилось синхронизовать, опять же асинхронно,
4. Все нативные модули загружались при старте приложения, даже если не использовались, что ухудшало startup time.

Новая архитектура:

• JavaScript Interface: легковесный C++ слой, который позволяет делать синхронные вызовы и использовать общую память. Это устраняет задержки Bridge.
• Fabric: новый синхронный рендер, который интегрирует React с нативными компонентами. Например, это позволяет использовать useLayoutEffect для применения изменений до отрисовки экрана.
• Hermes: собственный JS-движок, оптимизированный для React Native. Он ускоряет запуск приложения и уменьшает его размер.

Новая архитектура React Native не просто решает старые проблемы, но и закладывает фундамент для ключевых преимуществ платформы, которые особенно важны в корпоративной разработке. Давайте рассмотрим их системно, не забывая и о возможных подводных камнях.

Основные компоненты и стилизация

Если погружаться в детали React Native, то можно сразу увидеть отличия от фреймворка веб-разработки React и от стандартной мобильной разработки для iOS/Android. В React Native используется свой набор компонентов, например,

• View - аналог div с flex-свойствами,
• Text – для любого текста,
• Image, ImageBackground – для изображений,
• Button, Pressable, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback – для кликабельных элементов и кнопок,
• FlatList, ScrollView, VirtualizedList, SectionList – для списков или прокручивающихся элементов,
• TextInput – поле ввода для текста,
• и другие.

Стили в React Native — это не CSS, а отдельные объекты. Для удобства используется абстракция StyleSheet, похожая на CSS.

(Сравнение для React и React Native)

(Пример стилей для React Native)

Пример реализации стилей показывает, что разметку можно описывать в терминах Flexbox, все декларативно, привычно и классно. Но ведь FlexBox — это модель CSS, и нативное приложение о нем ничего не знает, значит расположением компонентов занимается кто-то другой.

Здесь хочется рассказать о Yoga Layout Engine — это кроссплатформенный layout-движок на C++, который реализует алгоритм Flexbox.

Сам по себе он ничего не рисует, он вычисляет координаты и размеры элементов по Flexbox описанию, как в примере:

Процесс разработки

Bare React Native

Процесс требует настройки окружения (Xcode для iOS, Android Studio для Android). В упрощенном виде процесс запуска приложения для разработки выглядит следующим образом:

1. Установка зависимостей,
2. Запуск Metro bundler,
3. Запуск приложения на эмуляторе или устройстве iOS/Android.

Процесс сборки приложения для продуктовой среды очень похож на традиционную мобильную разработку:

1. Для iOS сборка происходит через Xcode, где для приложения настраиваются схемы, сертификаты, создается архив и т.д.
2. Для Android в первый раз потребуется генерация keystore и настройка gradle под свои потребности. После этого происходит сборка apk/aab для публикации в стор.

У такого подхода к разработке есть свои преимущества и недостатки. В преимущества можно выделить:

• полный контроль над нативом, доступны любые модули,
• кастомизация build процесса.

К недостаткам можно отнести следующее:

• нужна настройка окружения,
• ручное управление зависимостями,
• сложнее для новичков, т.к. требуются знания мобильной разработки.

Для удобства разработки можно использовать Expo – React Native фреймворк и платформа, которая помогает делать разработку быстрее и удобнее.

Expo

Expo предлагает инструменты для удобного процесса разработки, например, такие как:

• Expo CLI - инструмент командной строки. В нем есть, например, команды для запуска приложения, сборки, установки зависимостей, обновления версий зависимостей и т.д.
• Expo Go - мобильное приложение для тестирования, скачивается из App Store/Google Play и позволяет тестировать разрабатываемое приложение на своем устройстве.
• Expo Router - позволяет работать с файловой маршрутизацией.
• Также существует EAS – облачный сервис для сборок (EAS Build), обновлений over-the-air (EAS Update) и публикаций приложений в сторы (EAS Submit).
• Expo SDK - предоставляет множество библиотек как с компонентами, так и пакеты для работы с функциональностью мобильных устройств (expo-camera, expo-location, expo-notifications, expo-secure-store и т.д.)

Преимущества Expo:

• Быстрый старт - проект готов за минуты,
• Богатый SDK - доступ к большинству нативных API,
• Облачная инфраструктура - сборка без установки Xcode/Android Studio,
• Over-the-air (OTA) обновления - мгновенные обновления без App Store,
• Отличный DX - Hot Reload, debugging, тестирование,
• Кроссплатформенность - один код для iOS/Android/Web.

Недостатки:

• Размер приложения - Expo SDK добавляет вес,
• Ограничения managed workflow - не все нативные модули доступны,
• Зависимость от Expo - привязка к их инфраструктуре при использовании EAS,
• Стоимость облачных сервисов для больших команд при использовании EAS.

Over-the-Air (OTA) обновления

OTA-обновления позволяют обновлять JavaScript-код приложения без публикации новой версии в магазинах приложений.

Как это работает: при запуске приложение проверяет сервер на наличие обновлений. Если новая версия есть, оно скачивает и применяет ее при следующем запуске.

Преимущества: мгновенные исправления багов, обход долгого процесса ревью в магазинах, возможность постепенного внедрения и отката.

Ограничения: можно обновлять только JavaScript-логику, но не нативный код. Необходимо соблюдать правила App Store и Google Play.

Платформенные особенности iOS и Android

Несмотря на то, что React Native позволяет разрабатывать приложение на одной кодовой базе для двух платформ, существуют различия между iOS и Android.

Рассмотрим некоторые платформенные особенности iOS.

• настройка окружения (нужен MacOS),
• создается папка iOS, в которой лежит конфигурация приложения, точка входа, конфигурация для Xcode, workspace с pods и т.д.
• навигация в iOS – swipe back, это стоит учитывать при создании кастомных обработчиков навигации,
• отличия в UI может проявляться в списках, так как у iOS есть эффект bouncing scroll,
• присутствуют различия и в стилях, например, для создания эффекта тени нужно использовать свойства shadowColor, shadowOffset, shadowOpacity, shadowRadius.

Можно еще отменить, что в iOS не работает такой стиль как borderStyle: «dashed» и нужно искать альтернативы.

Платформенные особенности Android:

• настройка окружения (нужна AndroidStudio),
• создается папка Android, в которой лежит конфигурация приложения, точка входа, нативный код, ресурсы и т.д.
• навигация с помощью аппаратной кнопки «Назад»,
• у Android нет эффекта bouncing scroll,
• для создания эффекта тени нужно использовать свойство elevation и borderStyle: «dashed» работает.