React Native — что это за фреймворк и как работает

Немного истории

Во времена, когда еще не было технологий для кроссплатформенной разработки (таких как Apache Cordova и React Native) приходилось изучать язык программирования Java, чтобы написать приложение для Android, и Objective C, чтобы написать приложение для iPhone. Согласитесь, что уйдет много времени на то, чтобы изучить два языка и написать одно и то же приложение два раза: для Android и iPhone.

Тогда великие умы стали думать: «как же сделать так, чтобы мы написали код всего один раз и он работал и на Android, и на iPhone?»

Так была придумана Apache Cordova. Мы пишем приложение на HTML, CSS, JavaScript (прямо как сайт), а Cordova запускает его в браузере на телефоне. Такой подход значительно ускорил процесс разработки приложений. Но он имеет некоторые недостатки:

1. существующие плагины для Cordova быстро устаревают и нужно писать свои;
2. так как приложение запускается в браузере, то возникают сложности в получении обратной связи с нативным приложением;
3. нужно постараться над оптимизацией приложения, чтобы оно работало быстро и стабильно.
4. все равно приложения на Apache Cordova выглядят и в использовании не такие приятные, как нативные приложения.

Поэтому ребята из Facebook решили сделать штуку, которая позволит писать код один раз и он будет работать везде. И эта штука должна быть лишена недостатков Cordova. Так появился React Native.

Так что же такое React Native

React Native приложения написаны на языке JavaScript. НО! Итоговое приложение, то, которое мы запускаем на телефоне, использует нативный код (Java для Android, Objective C для iOS). В итоге мы получаем такое же приложения, как если бы писали его на нативном языке: элементы управления, внешний вид и жесты работают так же, как в нативном приложении. Магия! Но как это происходит?

Каждое React Native приложение имеет два важных потока:

1. Основной поток — он запускается абсолютно в каждом нативном приложении. Он обрабатывает отображение элементов пользовательского интерфейса и жесты пользователя.
2. JavaScript поток — он выполняет код JavaScript в отдельном движке. JavaScript имеет дело с бизнес-логикой приложения. Он определяет КАК работает приложение.

А как эти потоки общаются между собой? Как JavaScript узнает, какую кнопку нажал пользователь? Или как основной поток узнает, какое окно отобразить?

За общение между двумя потоками отвечает так называемый мост (bridge) — это ядро React Native. Мост позволяет потокам общаться наилучшим, оптимизированным способом. Он служит посредником, который разруливает запросы и входящие данные от двух потоков. Такой подход позволяет им общаться асинхронно, что приводит к стабильной работе, потому что потоки никогда не смогут заблокировать друг-друга.

Чтобы стало более понятно, представьте себе мост, посередине которого пограничный контроль. Он решает кто поедет через мост, а кто нет.

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

Общая кодовая база. Фактически вы разрабатываете 2 отдельные версии приложения (под iOS и Android). Да, две версии приложения, но код в них на 65-70% одинаковый.

Общий код минимизирует количество багов по ходу разработки (объем кода будет почти в 2 раза меньше) и значительно упрощает поддержку продукта в будущем. Для стартапов это выливается в дополнительные дни и недели, которые можно потратить на активности со «звездочкой» — например, на проработку маркетинговой стратегии, анализ способов монетизации и планирование будущих итераций развития продукта.

READ MORE  SCRUM, щеночки и 5 000+ скачиваний в Google Play: как мы делали немецкое приложение для владельцев домашних животных

Максимально похож на нативный. В отличие от других кроссплатформенных решений, вроде Cordova, Ionic или Titanium, которые имитируют среду браузера (все равно, что сайт, который притворяется мобильным приложением), React Native использует нативные API.

Потрясающая производительность

Это может быть не так быстро, как настоящие нативные приложения, созданные на родных языках, таких как Java, Objective-C и C #. Но вы получите почти нативную производительность, так как она предоставляет вам собственные компоненты, такие как Image, View и Text.

Мобильное приложение на основе React Native не является HTML5, гибридным или мобильным веб-приложением. Скорее, это настоящее мобильное приложение.

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

Быстрая разработка приложений

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

Библиотеки React Native, такие как Redux (для обработки состояния вашего приложения) и Awesome React Native (список компонентов и демонстраций), также помогут вам быстрее завершить разработку мобильного приложения.

Инструменты разработки, такие как Nuclide для написания кода, Yoga для построения макетов, Sentry для мониторинга ошибок и сбоев и React Developer Tools для отладки, делают процесс разработки React Native намного проще и быстрее. Другие замечательные инструменты React Native включают VS Code, Ignite, Expo и Bugsnag.

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

Молодой фреймворк. Это (пока) не версия 1.0.0, поэтому некоторые компоненты все еще отсутствуют и сама технология довольно часто обновляется.

Для разработчика «незрелость» React Native означает, что ему нужно следить за версией как самого RN, так и библиотек зависящих от него. Продукт нельзя отложить на год, а потом начать добавлять новые фичи — потребуется время на обновление фреймворка.

Утечка памяти

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

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

Вы можете решить проблему утечки памяти в приложении для Android с помощью прокручиваемых списков, таких как SectionList, FlatList и VirtualList. Избегайте использования ListView, чтобы избавиться от утечек памяти. Чтобы решить проблему медленного запуска приложения, вам нужно уменьшить количество зависимостей в вашем приложении и использовать компоненты, которые работают очень хорошо.

Где использовать?

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

Минимально жизнеспособный продукт (MVP). Если планируете тестировать бизнес-гипотезу и нужно функциональное решение с крутой визуализацией, React Native — это отличный выбор. Возможность одновременного выхода на Android и iOS-рынки позволит быстро собрать первую обратную связь.

Какой MVP можно получить на выходе?

Такой же крутой, как эта система приложений для мероприятий . Активация браслета гостя в три простых шага

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

Настройка среды разработки React Native

В этом разделе мы настроим среду разработки React Native для всех трех основных платформ: Windows, Linux и macOS. Мы также расскажем, как настроить симуляторы для Android и iOS. Наконец, мы расскажем, как настроить Expo. Если вы просто хотите быстро начать работу, я рекомендую вам прокрутить вниз до раздела «Настройка Экспо».

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

1. установить JDK
2. установить Android Studio или Xcode
3. установить сторож
4. обновить переменную среды
5. установить эмулятор
6. установить узел
7. установить React Native CLI

Настройка в Windows

В этом разделе показано, как установить и настроить программное обеспечение, необходимое для создания приложений React Native в Windows. Windows 10 была использована в тестировании для этого.

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

@»%SystemRoot%System32WindowsPowerShellv1.0powershell.exe» -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command «iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))»&& SET «PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin»

Теперь мы можем установить другие нужные нам инструменты, просто используя Chocolatey.

2. Python поставляется с инструментами командной строки, необходимыми для React Native:

choco install -y python 2.

3. JDK позволяет вашему компьютеру понимать и выполнять код Java. Обязательно установите JDK версии 8, поскольку это требуется для React Native:

choco install jdk8.

4. У узла есть установщик для Windows . Лучше использовать NVM для Windows, так как это позволит вам установить несколько версий Node, чтобы вы могли тестировать новые версии или использовать другую версию в зависимости от проекта, над которым вы сейчас работаете. Для этого вы можете использовать NVM для Windows. Скачайте nvm-setup.zip , распакуйте его и выполните nvm-setup.exe чтобы установить его.

5. Watchman оптимизирует время компиляции вашего приложения React Native. Это необязательная установка, если вы не работаете над большим проектом. Вы можете найти инструкции по установке на их сайте.

6. Это последний шаг в настройке React Native в Windows. Здесь мы обновляем переменные среды, чтобы операционная система знала обо всех инструментах, необходимых для React Native. Выполните следующие действия непосредственно перед установкой React Native CLI.

Перейдите в Панель управления → Система и безопасность → Система . Оказавшись там, нажмите меню расширенных настроек системы слева.

Это откроет окно свойств системы. Нажмите кнопку Переменные среды :



В разделе « Пользовательские переменные » выделите переменную Path и нажмите кнопку редактирования .

На экране редактирования нажмите кнопку « Создать» и введите путь к Android SDK и инструментам платформы. Для меня это на C:usersmyUsernameAppDataLocalAndroidSdk и C:usersmyUsernameAppDataLocalAndroidSdkplatform-tools . Обратите внимание, что здесь вы также можете добавить путь к JDK, если он еще не добавлен:

Настройка в Linux

В этом разделе показано, как установить и настроить инструменты, необходимые для разработки приложений React Native в Linux. Я специально использовал Ubuntu 18.04 для тестирования, но вы должны иметь возможность переводить команды в дистрибутив Linux, который вы используете.

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

sudoapt-getinstall build-essential libssl-dev curlsudoapt-getinstallgit autoconf automake python-dev

 2. NVM позволяет нам устанавливать и использовать несколько версий Node. Вы можете установить его с помощью следующих команд:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh |bashsource ~/.profile

Примечание. Обязательно проверьте последнюю версию на странице выпусков, чтобы убедиться, что устанавливаемая версия NVM обновлена.

3. Как было показано ранее, React Native фактически компилирует соответствующий код для каждой из платформ, на которых вы хотите развернуть. JDK позволяет вашему компьютеру понимать и выполнять код Java. Конкретной версией JDK, требуемой для React Native, является версия JDK 8 .

sudoapt-getinstall openjdk-8-jre

4. Watchman — это инструмент для отслеживания изменений в файловой системе. Он в основном используется для ускорения процесса компиляции. Если вы включили предварительный просмотр в разрабатываемом приложении, изменения, внесенные в приложение, будут быстрее отражаться в предварительном просмотре. Следующие шаги требуют, чтобы Git уже был установлен в вашей системе:

git clone https://github.com/facebook/watchman.git cd watchman git checkout v4.9.0 ./autogen.sh ./configure makesudomakeinstall

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

CXX scm/watchman-Mercurial.o scm/Mercurial.cpp: In constructor ‘watchman::Mercurial::infoCache::infoCache(std::__cxx11::string)’: scm/Mercurial.cpp:16:40: error: ‘void* memset(void*, int, size_t)’ clearing an object of non-trivial type ‘struct watchman::FileInformation’; use assignment or value-initialization instead [-Werror=class-memaccess] memset(&dirstate, 0, sizeof(dirstate)); ^ In file included from scm/Mercurial.h:10, from scm/Mercurial.cpp:3: ./FileInformation.h:18:8: note: ‘struct watchman::FileInformation’ declared here struct FileInformation { ^~~~~~~~~~~~~~~ cc1plus: all warnings being treated as errors make: *** [Makefile:4446: scm/watchman-Mercurial.o] Error 1

Попробуйте вместо этого следующую команду:

./configure —without-python —without-pcre —enable-lenient

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

Чтобы обновить переменные среды, откройте файл .bash_profile :

sudonano ~/.bash_profile

Добавьте в начале следующее, затем сохраните файл:

export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Обратите внимание, что путь выше предполагает, что Android SDK установлен в домашнем каталоге вашего пользователя:

echo$HOME