Что такое React Native
React Native — это фреймворк для кроссплатформенной разработки мобильных приложений, созданный на основе JavaScript и React. В 2013 году разработчики компании Facebook организовали хакатон, чтобы выяснить, что можно сделать для мобильных платформ, используя JavaScript. Так появился React Native (сокращенно RN). Первоначально он был разработан только для iOS, но к 2015 году добавилась поддержка Android.
Спустя всего несколько лет фреймворк уже стал одним из самых популярных инструментов для мобильной разработки, так как он конкурирует по мощности с нативными приложениями, но позволяет внедрять решения намного быстрее благодаря единой кодовой базе.
Фреймворк может поддерживать как небольшие приложения, так и системы со сложной архитектурой и большой нагрузочной базой. Например, его используют Facebook, Instagram, Shopify, Discord, Skype, Pinterest, Bloomberg и Walmart.
Чем React отличается от React native
Инструменты используются для разных целей, хоть и имеют много общего.
React — это библиотека, предназначенная для веб-разработки. Она отвечает за отрисовку компонентов пользовательского интерфейса.
React Native представляет собой целую структуру для создания кроссплатформенных приложений. Это означает, что синтаксис у инструментов аналогичный, но компоненты будут отличаться:
- В вебе используется Virtual DOM для рендеринга кода браузера, а RN использует Native API для отображения компонентов на мобильных устройствах.
- В RN не используется HTML и CSS. Вместо этого для отображения пользовательского интерфейса используются JSX и встроенная таблица стилей.
Таким образом, технические отличия инструментов обусловлены используемой платформой. Для веба лучше подойдет React.js, а RN понадобится, если нужна кроссплатформенная разработка под iOS и Android.
Различия в разработке для Android и iOS
В React Native 90% кода используется совместно для Android и iOS. При этом отличия в этих платформах все же имеются:
- Операционная система. Скорее всего разработчику понадобится устройство на Mac OS. Это связано с необходимостью тестирования. Есть несколько инструментов, позволяющих запустить эмулятор iOS на Windows или Linux. Однако эти плагины неофициальные и могут предоставить результаты, отличные от реальных устройств Apple. Приложения для Android можно тестировать только с помощью Android Studio, это единственная официальная утилита. Android Studio совместима в том числе с Mac OS, поэтому у разработчика, использующего устройство Apple, не будет проблем с любой мобильной платформой.
- Визуальные отличия и нативные элементы. Некоторые компоненты и стили в iOS и Android отображаются по-разному. И эти отличия необходимо учитывать при разработке, так как RN преобразует компоненты в нативные компоненты платформы. Например, Android не отображает тени, из-за чего приведение компонентов к единым стилям является распространенной проблемой для разработчиков:
- Процесс выпуска. Это один из самых важных и зачастую проблемных шагов в создании мобильных приложений. Требования к выпуску в Apple Store более строгие, чем в Google Play. Поэтому нужно быть готовым к долгому процессу согласований с каждой площадкой, особенно для iOS.
Преимущества и недостатки React Native
Преимущества
Разберемся, почему фреймворк стал невероятно популярным, несмотря на молодой возраст:
- Быстрая разработка.
Платформа предоставляет множество готовых к применению компонентов, которые могут ускорить процесс выпуска приложения. Фреймворк основан на JavaScript, что дает ему доступ к крупнейшей в мире экосистеме пакетов.
Для сравнения было создано одно и то же приложение на RN и на Swift. На сборку последнего ушло на 33% больше времени, и оно работало только на iOS — без версии для Android.
- Одна структура на несколько платформ
Значительная экономия времени достигается за счет повторного использования кода на несколько операционных систем. Код, написанный на JavaScript, можно использовать не только между мобильными платформами, но и для веба.
- Быстрый выход обновлений
Команда Facebook обеспечивает активную поддержку фреймворка. Например, когда возникла проблема с функцией горячей перезагрузки, от сообщества стали поступать жалобы. В результате разработчики в краткие сроки выпустили инструмент Fast Refresh, который устраняет все проблемы и ускоряет исправление ошибок в коде и создание новых функций.
Также RN поможет быстрее выпускать обновления для опубликованного мобильного приложения. С каждым выпуском обновления обычно требуется ждать, пока App Store или Play Market одобрит его. Хотя Apple предприняла шаги по сокращению времени проверки, но все равно ожидание составляет в среднем несколько дней. С RN обновления могут полностью обходить App Store.
- Хорошая производительность
RN отображает свой пользовательский интерфейс с помощью собственных API. В результате их производительность в большинстве случаев не уступает нативным приложениям для iOS/Android.
Более того, логика JavaScript выполняется в отдельном потоке, не блокируя отрисовку пользовательского интерфейса. Долгое время сложные анимации были слабым местом фреймворка. Но эта проблема была в решена с введением библиотеки Animated.
В случае с SPA-приложениями фреймворк может быть менее эффективным, но если разработчики смогут перенести часть кода в нативные модули, то это не будет проблемой.
- Большое сообщество разработчиков
Помимо преимущества поддержки со стороны Facebook, фреймворк может похвастаться большим сообществом. Одним из самых больших преимуществ является участие разработчиков в развитии технологий.
Популярность фреймворка также сформировала увеличение спроса на аутсорсинг разработки на React Native. Чем популярнее становится технология, тем проще будет найти соответствующих и компетентных разработчиков.
- Живая и горячая перезагрузка
Функции перезагрузки помогают держать все данные в актуальном состоянии по мере написания кода. Это позволяет разработчику сразу увидеть, как изменения в коде влияют на приложение.
Разница между живой и горячей перезагрузкой заключается в том, что горячая перезагрузка используется для обновления только файла, в котором изменяется код. А живая перезагрузка (Live Reload) обновляет все приложение, независимо от того, в каком файле происходит изменение.
Недостатки
Наряду со всеми преимуществами, разработка на RN также имеет свои проблемы:
- Проблемы с совместимостью и отладкой
Несмотря на то, что фреймворк используется ведущими технологическими игроками, он все еще находится в стадии регулярных доработок. Разработчики могут столкнуться с различными проблемами совместимости пакетов или инструментов отладки.
Процесс отладки становится очень утомительным, поскольку соответствующие инструменты создаются с использованием Java, C/C++, JavaScript и т. д. Поэтому будет плюсом, если специалист хорошо разбирается в нативной разработке.
- Недостаток пользовательских модулей
Если возникает какая-либо проблема, то разработчик сможет с легкостью найти готовое решение в виде сторонней библиотеки или API для нативной разработки.
Но RN является относительно молодой платформой — это означает, что с ним работает не так много сторонних компонентов. И некоторые из них могут вести себя не совсем так, как ожидается.
Еще распространенной проблемой является то, что многие компоненты разрабатывались небольшими сообществами, и создатели не всегда могут часто обновлять свои решения под регулярные изменения платформ и фреймворка.
- По-прежнему нужны знания нативных инструментов
Для реализации некоторых нативных функций и модулей необходимы знания конкретной платформы. Например, отсутствие встроенной поддержки некоторых нативных функций (например, push-уведомлений) раньше было серьезной проблемой при кроссплатформенной разработке.
По мере роста сообщества все больше и больше библиотек с открытым исходным кодом обеспечивают доступ к собственным функциям платформы. Тем не менее, до сих пор для реализации некоторых функций может потребоваться помощь разработчиков iOS и Android. Особенно это касается функций, которые задействуют аппаратные возможности девайсов (гироскопы, лидары и пр.).
Почему следует передать разработку на React Native на аутсорсинг
Заказная разработка на React Native с каждым днем становится все востребованнее, так как язык JavaScript намного популярнее, чем, например, Dart. Это означает, что сообщество будет развиваться и создавать новые инструменты, упрощающие и облегчающие процесс написания кода.
Чтобы создать полноценное кроссплатформенное приложение, можно подключить аутсорсинг или аутстаффинг разработчиков React Native, так как это поможет в значительной степени ускорить разработку и подключить дополнительные рабочие ресурсы. Аутстаффинг будет отличным решением, если уже есть веб-версия на React и команда для его разработки, но нужен кто-то, кто сможет разработать на основе существующего кода мобильное приложение.
Фреймворк подойдет для проектов, которые в значительной степени зависят от пользовательского интерфейса, но он будет менее эффективен для приложений с большим количеством нативных функций. Поэтому выбор инструмента для разработки должен быть осознанным и подходящим под потребности бизнеса.