Oops... your message was not sent

Your message has been successfully sent

тематические истории, основанные на опыте компании JetRuby
Мобильная разработка

Почему нам нужен React Native

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

С момента выхода React Native мы стали свидетелями множества попыток совмещения JS, HTML и CSS для разработки нативных мобильных приложений. Достаточно упомянуть такие технологии, как Apache Cordova и Ionic. Безусловно, они жизнеспособны. Однако их объединяет один существенный недостаток. И Apache Cordova, и Ionic работают внутри WebView, не использующего API нативной платформы. В двух словах, это приводит к снижению производительности приложений.

React Native — это совсем другая история. Используя собственный API, и оборачивая его в React компоненты, платформа позволяет разрабатывать приложения едва отличимые от нативных. В отличие от Apache Cordova и Ionic, React Native удалось добиться декларативного подхода к разработке интерфейсов без необходимости жертвовать производительностью.

Звучит красиво, но недостаточно убедительно. Поэтому мы решили собрать воедино все преимущества и недостатки React Native, а затем подбить баланс и сделать вывод.

react-native

Преимущества React Native

Платим меньше — получаем больше

Первый и самый главный плюс: используя технологию React Native, вы платите за два приложения по цене одного. Стоп. Даже за три. Не забываем про Windows mobile. Безусловно, вы можете столкнуться с некоторыми сложностями на этапе разработки, но в 99% случаях они с лихвой окупаются.

Моментальная обратная связь

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

При нативной же разработке приходится перестраивать все приложение. А это трата времени, усилий, ресурсов — сами понимаете.

Общий инструментарий для web и mobile

По сути, вы можете воспользоваться шаблоном для построения веб-приложений на React JS. Принципиальной разницы в разработке не существует. Останется лишь поменять путь установки и роутинг приложения с помощью навигатора React Native.

В остальном различия отсутствуют. Вам даже не потребуется webpack, так как Babel используется в React Native по умолчанию. Все это значительно сокращает временные затраты. Дайте своим JavaScript разработчикам всего пару дней, и они преподнесут готовые мобильные компоненты вам на блюдечке.

И еще. В процессе работы с React Native мы использовали Redux. И хотим заметить, что он ведет себя точно также, как и при разработке веб-приложений.

Почти одинаковая кодовая база для iOS и Android

Есть нюансы. Прежде всего, это касается iOS. Например, scrolling to the input, требующий использования низкоуровневого API. Кроме того, Native Picker похож на стандартный select input в Android, но в iOS выглядит по-другому. В остальном все идентично. И никаких проблем с разработкой интерфейсов под разные платформы.

Декларативный способ разработки UI

Один из главных плюсов React Native. Поддержка Flexbox «из коробки» делает написание UI гораздо менее болезненным по сравнению с императивным стилем нативной платформы.

Недостатки React Native

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

Протекающие абстракции

При необходимости установить пакет с нативным API под капотом (написанном на Java или Objective C), вам придется использовать специальный инструмент — rnpm. Раньше он поставлялся отдельной библиотекой, но постепенно был интегрирован в React Native. Проблема же заключается в том, что он не всегда работает. Например, когда нужно установить пакет вручную, нам лишь остается надеяться, что разработчики предоставили соответствующую документацию. В таком случае процесс установки сводится к добавлению Java или Objective C кода (в зависимости от платформы). Однако если вы не работали с нативными платформами ранее, придется прибегнуть к “черной магии”.

Необходимость использования реальных девайсов не только во время тестирования, но и при разработке

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

Вы должны знать и понимать нативные платформы

Если вы хотите быть по-настоящему эффективным — это необходимо. Не самая простая задача, особенно для начинающих разработчиков. Но с ней непременно придется столкнуться.

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

React Native packager иногда теряет соединение

Это может произойти, если вы некоторое время не перезагружали код. Отсоединять устройство и вновь запускать packager — это неудобно. И еще один нюанс. Иногда в начале работы стоит сбросить кэш через `npm start — —reset-cache`.

Приготовьтесь узнать, как разворачивают мобильные приложения

Этот момент имеет довольно опосредованное отношение к React Native. Но если вы работаете над публичными приложениями, вам придется научиться их развертывать. И если для Android эта процедура проста, как лопата, то для iOS она зачастую превращается в сущий кошмар. К счастью в нашей команде есть опытные мобильные разработчики, всегда готовые помочь с обработкой сертификатов, идентификаторов устройств и построением билдов с XCode. А если их нет?

Другое дело, что вы не ограничены в выборе инструментов для развертки React Native приложений. Среди самых интересных мы бы выделили CodePush Microsoft. Он практикует комплексный подход к React Native приложению и видит его со всеми JavaScript компонентами. Таким образом, вам не приходится проходить через весь цикл билд/релиз/ревью. Вместо этого вы просто “пушите” обновления, а CodePush Microsoft заботится об их доставке конечным пользователям. Нетрудно догадаться, что такой подход экономит массу времени.

Выводы

react-native

React Native стоит использовать, если:

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

Кроме того, React Native может стать основным инструментом разработки приложений, если:

  • Вы имеете опыт разработки мобильных приложений под iOS и/или Android;
  • Вы имеете опыт работы с современными версиями JavaScript и ReactJS.

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

department
Статью подготовил
Отдел мобильной разработки
Профессиональная разработка нативных приложений под Android и iOS, а также реализация гибридных кроссплатформенных решений и мобильных сайтов.
New Articles