Преимущества и подводные камни React Native

Для нативной разработки мобильных приложений на iOS можно использовать Swift или Objective-C, для Android – Java или Kotlin, для кроссплатформенной – Flutter или React Native (далее RN). SimbirSoft в своей практике использует разные возможности, выбирая то, что лучше подходит для конкретного проекта.

В данной статье компания рассмотрит особенности React Native – кроссплатформенного фреймворка с открытым исходным кодом, созданного компанией Facebook.

Основные языки – JavaScript и Typescript, также есть возможность внедрять модули и на нативных. Прежде чем говорить о плюсах и минусах этого фреймворка, рассмотрим, как он устроен.

Как работает React Native

По своим принципам работы RN схож с React, только управление идет через платформенные интерфейсные компоненты. Каждый Core Component из RN имеет альтернативу в нативном интерфейсе. Это говорит нам о том, что созданный в нем компонент своим поведением практически не будет отличаться от разработанного с помощью нативных языков.

С UI-частью в RN вроде бы все понятно. Теперь рассмотрим, как JavaScript превращается в нативный язык.

На представленной ниже схеме видно, что в React Native существует три потока. Metro бандлит весь код в единственный файл и отправляет его в движок JavaScriptCore. Затем, когда JavaScript скомпилирован, он может общаться с нативным потоком с помощью модуля Bridge, написанного на C++ и Java. В принципе его работы заложен асинхронный обмен JSON-сообщениями. В нативном потоке есть две составляющие:

• Native UI – отвечает за интерфейс приложения
• Native Modules – позволяет получать доступ к возможностям платформы.

Поток Shadow отвечает за перестройку макета приложения и работает на движке Yoga.

Теперь, когда мы ознакомились с принципами работы данного фреймворка, можно обсудить преимущества и подводные камни RN. Разберем их на примере популярных утверждений.

Мнение № 1. Можно создать сайт на React и получить мобильное приложение на React Native

Звучит очень заманчиво и амбициозно, разберем подробнее данное утверждение. При разработке компонента в обоих случаях будет создаваться JSX-разметка для верстки. Но в использовании тегов есть значительные отличия. Это говорит нам о том, что всю UI-часть приложения придется переписывать на React Native.

То же касается и навигации. Если на сайтах мы используем понятие “страница” (page), которой можно управлять в браузерной строке, то в  RN – термин “скрин” (screen). Соответственно, всю логику пакета react-router-dom, отвечающего за перемещение между страницами, необходимо будет заменить на логику библиотеки react-native-navigation. Она позволяет переключаться между скринами приложения.

Возникает вопрос, а в чем же мы выигрываем, если уже имеем сайт на React? Плюсом тут, конечно, будет то, что мы можем переиспользовать всю логику приложения. Например, хуки поддерживаются как в React, так и в React Native. Также сохраняется возможность переиспользования store: не нужно заново прописывать все запросы, всю эту логику можно взять с готового сайта.

Плюсы:

• Можно взять всю логику из React на сайте.

Минусы:

• Придется переписать весь UI-функционал;
• Нельзя переиспользовать логику навигации.

Мнение № 2. Можно написать приложение один раз, и оно поведет себя одинаково как на Android, так и на iOS

Поскольку технология является кроссплатформенной, мы ожидаем, что написанный код будет вести себя одинаково на всех платформах. Действительно, поскольку каждый из предоставляемых RN core компонентов имеет свою альтернативу в нативных компонентах, фреймворк справляется с этой задачей. Создав единожды date-picker, получаем привычное для платформы его представление.

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

Самый частый при разработке на React Native пример – разное поведение компонента Input. Если он находится в нижней части экрана, и пользователь нажимает на него, то на iOS его перекрывает клавиатура. В свою очередь, на Android он автоматически прокручивается и остается в видимой части экрана. В связи с этими особенностями платформ, разработчикам приходится дописывать определенные условия под каждую из них.

Ниже представлен пример того, как можно решить подобную проблему на iOS.

Android

iOS

Также проблемы могут возникнуть при загрузке документов. Например, если нам нужно добавить файл или изображение. Библиотека react-native-document-picker позволяет загружать как изображения, так и файлы на Android. Однако для совершения этих действий на iOS необходимо будет добавить отдельную библиотеку.

Плюсы:

• Компоненты, написанные на фреймворке, подстраиваются под используемую OS.
• Большая часть логики ведет себя одинаково на всех платформах.
• Есть возможность править функциональность под конкретную OS индивидуально.

Минусы:

• Не все решения, присущие одной ОС, могут работать идентично на другой.
• Иногда для работоспособности функциональность нужно подправить под каждую систему.

Мнение № 3. На React Native можно создать любое приложение

Мы уже разобрались с тем, что RN позволяет без особых проблем писать под обе OS. Но значит ли это, что приложение может выполнять любой функционал, доступный платформам?

Теоретически может. Есть большое количество пакетов, которые позволяют использовать возможности смартфона. Если их окажется недостаточно, дополнительно можно создавать нативные модули. Это потребует знания нативного языка и особенностей правильного связывания нативного кода с фреймворком. Далеко не каждый React Native-разработчик готов писать не на привычном ему JavaScript, а на строго типизированных Java/Kotlin или Swift/ Objective-C.

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

Так как общение между потоками происходит через bridge, в играх могут возникнуть проблемы с анимациями. Сюда можно отнести и требования к размеру приложения, поскольку в конечном итоге оно содержит не только нативный язык, но и JavaScript, поэтому будет весить больше, чем его нативная альтернатива.

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

Плюсы:

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

Минусы:

• Не является лучшим решением для приложения с множеством анимаций.
• Имеет больший вес, чем нативное приложение.
• Могут возникнуть проблемы с Bluetooth.
• Не подходит для игровых приложений.

Мнение № 4. Невысокий порог вхождения в технологию

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

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

Не всегда получится ограничиться только языком JavaScript, даже для базового приложения. Чтобы добавить splashscreen в Android-версию, вам придется создать класс на Java. Если решили перейти на React Native с нативного языка, привыкнуть к JavaScript может быть сложно.

Плюсы:

• Переквалификация из React-разработчика не требует много времени.
• JavaScript прост в изучении.
• Все среды разработки бесплатны.
• Большое комьюнити.

Минусы:

• Настройка окружения может вызвать трудности.
• Не всегда понятно, из-за чего упало приложение.
• Для некоторых сложных задач придется изучить нативные языки.
• Трудно перестроиться на JavaScript, если переходишь со строго типизированного языка.

Резюме

React Native подойдет для быстрой разработки приложения или его MVP. Готовые библиотеки позволяют выполнить 90% функционала OS, а если этого недостаточно, можно реализовать его нативно. Кроме того, при разработке приложений на каждую платформу не потребуются разные команды. Также фреймворк имеет низкий порог вхождения и позволяет частично использовать логику с React сайта. В целом, React Native подойдет для большинства мобильных приложений.