React Native: плюсы и минусы фреймворка с точки зрения бизнеса

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

На рынке React Native появился в 2015 году. Компания Facebook выпустила его в качестве проекта с открытым исходным кодом. Всего за пару лет фреймворку удалось стать одним из самых популярных решений для мобильной разработки. Сегодня React Native используют для поддержки некоторых ведущих приложений, в том числе Instagram, Facebook и Skype.

Разберёмся, почему React Native так полюбился разработчикам и бизнесу.

React Native позволяет создавать приложения одновременно для нескольких устройств, используя единую кодовую базу. По словам представителей Meta*, если разработка ведётся для Android и iOS, около 90% кода можно переиспользовать без оптимизации — это ускоряет процесс выпуска сервиса на рынок и экономит средства. Компания получает две версии продукта для разных систем практически за одно и то же время и с тем же бюджетом. При нативной разработке вторую версию пришлось бы создавать с нуля.

Рассмотрим механику работы фреймворка.

Структура React Native приложения формируется из таких компонентов, как View, Text, Button, Alert, Image и ScrollView. Они позволяют добавлять блоки, надписи, кнопки, всплывающие окна, отображать фотографии и осуществлять прокрутку страниц. Существуют и другие элементы, которые разработчики могут использовать в зависимости от задач сервиса. Например, FlatList предназначен для создания списков, а ActivityIndicator отображает круговой индикатор загрузки.

Компоненты помогают разделить интерфейс на отдельные части и настроить каждую из них индивидуально. Для этого к ним добавляют атрибуты, определяющие цвет, размер, расположение элемента на странице и прочие параметры. При необходимости к объектам присоединяют обработчики событий. Они активируются в различные моменты взаимодействия пользователя с сервисом.

Когда пользователь открывает приложение, система подгружает JavaScript-код, который описывает внешний вид интерфейса, и нативные модули — они предоставляют доступ к специфическим функциям устройств. Раньше взаимодействие между ними и отрисовку компонентов на экране обеспечивал специальный мост. Он работал асинхронно и выполнят задачи не постоянно, а только тогда, когда к нему обращался процесс.

Архитектура оказалась недостаточно эффективной. В крупных приложениях мосту приходилось обрабатывать огромное количество процессов, что приводило к замедлению работы сервисов. Поэтому от данной концепции отказались.

В 2022 году на смену ей пришла технология JSI (JavaScript Statically Integrated). Она компилирует код в бинарный формат, обеспечивает прямое взаимодействие с нативными модулями и позволяет избегать дополнительных расходов на сериализацию — перевод данных в битовую последовательность. Благодаря изменениям в архитектуре разработчики смогли внедрить во фреймворк новый рендер Fabric: он повысил скорость отрисовки элементов интерфейса. Теперь приложения на React Native запускаются и работают быстрее.

Создание кроссплатформенных приложений на React Native включает в себя те же этапы, что и нативная разработка. Рассмотрим каждый из них более подробно.

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

React Native придумала компания Meta*, чтобы повысить производительность и отзывчивость собственных приложений. В Instagram* фреймворк использовали для интеграции новых функций. Например, с его помощью реализовали push-уведомления. Продуктовые команды поделились, что инструмент помог им повысить скорость разработки на 85-99%.

В работе старой версии приложения был ряд проблем, в том числе — долгая загрузка. Поэтому разработчики полностью переработали дизайн и функционал и пересобрали сервис на React Native. Команда использовала фреймворк и для мобильной, и для десктопной версий продукта.

Приложение связывает рестораны, курьер-партнёров и пользователей с помощью специальной панели. Её оригинальная версия ограничивала функционал платформы. Она не позволяла передавать информацию о заказах ресторанам и не поддерживала встроенные опции мобильных устройств, например, звуковые уведомления. Чтобы усовершенствовать панель, разработчики переписали все компоненты на React Native. А инженер-программист Крис Льюис поделился, что апгрейд помог расширить клиентскую базу и сделал UberEats одним из топовых сервисов по доставке еды в США.

Когда разработчики придумали платформу, которая помогает бороться со стрессом, они сделали ставку на iOS, так как планировали продвигать продукт на американском рынке. Однако со временем они хотели масштабировать сервис и сделать его доступным для пользователей Android. Чтобы не писать приложение для второй платформы с нуля, команда выбрала для разработки React Native.

Разработчики платформы следили за React Native с момента появления фреймворка и думали, как задействовать его в работе. Чтобы протестировать возможности инструмента, они разработали прототип одной из главных функций приложения — средства выбора тем. Инженеры рассказали, что на реализацию задумки в iOS ушло 10 дней, ещё 2 дня потребовалось на её адаптацию под Android. Они подсчитали, что сэкономили больше недели стандартного времени внедрения новой функции.

Создатели сервиса для музыкантов планировали написать два нативных приложения для популярных мобильных операционных систем. Однако они столкнулись с трудностями во время поисков инженеров iOS. Тогда команда решила протестировать React Native. Через неделю прототипы экранов платформы были готовы.

У каждой платформы есть особенности и ограничения, которые влияют на процесс разработки, внешний вид и работу приложений на разных устройствах. Разберём основные нюансы.

React Native использует нативные элементы платформ: иконки, кнопки, ползунки, слайдеры и шрифты, характерные для каждой операционной системы. Они выглядят по-разному. Android-компоненты имеют края, стыки и тени, которые придают им реалистичный вид. Оформление iOS-элементов более минималистичное. Чтобы добиться единообразия интерфейса на разных устройствах, придется приложить дополнительные усилия. Например, разработать и применить к элементам кастомные стили, которые будут смотреться одинаково на обеих платформах.

С запуском тестов приложений для Android нет проблем — их можно проверить в Android Studio. А вот с тестированием сервисов для iOS есть трудности: существующие симуляторы этой платформы не признаны Apple официально и считаются ненадёжными. Воспользоваться ими можно, но не факт, что результаты проверки окажутся точными.

Мы в MobileUp не работаем на React Native. Перечислим причины, которые повлияли на наш выбор.

React Native предоставляет возможность создавать эффективные и быстрые приложения, охватывать широкую аудиторию пользователей. Однако необходимо учитывать и его ограничения, чтобы принять обоснованное решения при выборе технологии для реализации проекта.