Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Mobile Development
Code

Инструменты для React Native разработки

by
Length:LongLanguages:

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

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

Текстовые редакторы и IDE

Visual Studio Code - это текстовый редактор, имеющий встроенное автодополнение, проверку ошибок и возможности интеграции с Git. Что делает его особо полезным для разработки React Native - это наличие расширения инструменты React Native. Оно позволяет выполнять команды React Native в командной строке, имеет автодополнения для команд API React Native, а также проверяет код на ошибки в самом редакторе.

Для более подробной информации о том, как настроить Visual Studio Code для React Native, посмотрите вот эту статью на блоге: VSCode для React Native.

Если вы пользуетесь Atom, то можно установить плагин Nuclide. Он был специально создан для работы с проектами React Native, Flow и Hack. Он имеет встроенную проверку на ошибки и инспектор элементов со всеми возможностями, к которым вы привыкли в Инструментах Разработчика Chrome. Поддержка Flow означает, что вам из коробки будут доступны автодополнение, подсказки при наборе текста и диагностика кода.

Если вы хотите узнать и о других вариантах IDE и редакторов, посмотрите вот эту статью на блоге "10 лучших редакторов для React Native".

Инструменты разработки

Инструменты разработки очень разнообразны, так что я сгруппирую их по основным задачам:

  • SDK
  • качество кода
  • тестирование
  • проверка на ошибки

SDK

В качестве SDK для React Native нет ничего лучше Expo. Expo позволяет вам быстро создать прототип приложения без необходимости использовать Android Studio или Xcode. Он включает набор компонентов и библиотек, которые помогут ускорить ваш процесс разработки.

Процесс разработки на Expo состоит из следующих шагов:

  1. Создание нового проекта, используя create-react-native-app.
  2. Написание кода в вашем любимом текстовом редакторе.
  3. Запуск приложения, используя клиентское приложение Expo.

Нет необходимости подключать ваш телефон к вашему компьютеру. Просто сканируйте QR код из вашего терминала, используя клиентское приложение Expo, и ваше приложение автоматически запустится. Если вы используете Genymotion, то Expo и его поддерживает.

Единственным недостатком использования Expo является то, что вы не можете добавлять специальные пакеты для работы с нативным функционалом устройства. Expo уже включает некоторые наиболее часто используемые пакеты, такие как Camera, Facebook и Map. Но если вам необходимо использовать пакеты, которые они еще не поддерживают, то вам придется "извлечь" ваше приложение. В таком случае ваше приложение будет выглядеть так, будто было создано с помощью react-native init, а также вы потеряете возможность запускать его через клиентское приложение Expo.

Качество кода

Важно проверять качество вашего кода, и именно для этих целей существуют инструменты вроде ESLint. По сути, отслеживание качества позволяет вам быть более последовательными в коде, который проверяется на соответствие руководству по разработке. Примером такого руководства может служить Airbnb's JavaScript Style Guide, в котором даны правила того, как должен быть написан код JavaScript. Инструмент проверки соответствия сверяет ваш код с этими правилами, чтобы убедиться, что вы им следовали. Есть также и руководство для проектов React.

Если вы используете Sublime Text, то есть хороший урок о том, как настроить его для получения в реальном времени оценки качества вашего когда: Sublime Linting для React и ES6. Если вы используете другое IDE или редактор, не забудьте найти соответствующий плагин, который использует ESLint.

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

Для начала использования Flow ознакомьтесь с уроком о том, как настроить Flow для ваших React Native проектов.

Тестирование

Enzyme является утилитой тестирования для React, которая позволяет проверять соответствие, изменять и переносить выходные данные вашего компонента. Она предоставляет такие методы как shallow() для "пустого" отображения ваших компонентов, find() для передачи выводимого компонента, и expect() для проверки соответствия параметров компонента или выводимого им содержимого.

Вы можете пройти вот этот урок о том, как использовать enzyme для тестирования компонентов в React Native для того, чтобы добавить возможности тестирования enzyme вашему React Native приложению. Если вы не знакомы с enzyme, то можете прочитать вот этот урок "Тестирование компонентов React с помощью Enzyme и Mocha".

Проверка на ошибки

Reactotron - это десктоп приложение, которое позволяет проверять на ошибки приложения React и React Native. Некоторыми из его основных возможностей являются инструменты инспектирования, изменения и подписки на состояние приложения, отслеживания HTTP запросов, выполняемых из приложения, оценка производительности приложения и отслеживание ошибок. Если вы используете Redux, вы даже можете отслеживать действия и сообщения прямо из Reactotron.

Заготовки и UI фреймворки

Snowflake - это заготовка для full-stack React Native разработки. В ней есть все от фронт-енда до бек-енда приложения. Так что если вам просто нужен инструмент для того, чтобы ускорить начало создания проекта, то Snowflake может вам быть полезен. Вы можете почитать заметки для того, чтобы узнать, какие пакеты и инструменты здесь используются.

Как другой вариант, вы можете использовать Ignite. Это инструмент командной строки, включающий заготовку проекта, генераторы, руководство по разработке UI компонентов, инструмент тестирования API и многое другое.

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

В этом вам поможет NativeBase. Он сделает так, что ваше приложение будет выглядеть и восприниматься как родное приложение платформы, за счет того, что добавит то же оформление, которое используется в нативных приложениях Android (Material Design) и iOS (Human Interface Guidelines). Прямо из коробки вы получите набор специальных компонентов, таких как основные кнопки действий, спиннеры, и, что самое лучшее, компоненты форм. 

Библиотеки и компоненты

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

  • навигация
  • управление состоянием
  • анимация
  • наиболее часто используемые компоненты и библиотеки

Навигация

React Navigation позволяет вам легко добавить навигацию в ваше приложение React Native, используя встроенные элементы навигации Stack Navigator, Tab Navigator и Drawer Navigator. Но это не все: в дополнение к навигации внутри приложения, здесь также есть создание глубоких ссылок, интеграция с Redux, и интеграция с веб. Это делает ее на самом деле полноценной библиотекой для добавления навигации.

Управление состоянием.

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

Для более объемных и сложных случаев все еще рекомендуется использовать Redux. Это потому, что MobX достаточно либерален, в отличие от Redux, который предъявляет строгие требования к тому, как должно происходить управление состоянием. Так что это более мудрый выбор для больших проектов, в работе над которыми участвует много людей.

Анимация

React Native включает в себя API анимации. На самом деле здесь есть не просто один, а целых два API для работы с анимацией: Animated API и LayoutAnimation. Они достаточно мощные, но могут быть слишком сложными, особенно если вам просто надо применить базовую анимацию типа перемещения объекта вверх и вниз или его подпрыгивания. В таких случаях удобно использовать компоненты вроде Animatable.

Наиболее часто используемые компоненты и библиотеки

Вот список компонентов и библиотек, которые наиболее часто используются в проектах React Native. Они совместимы как с Android так и с iOS устройствами:

  • styled-components: позволяет вам писать CSS код для оформления ваших компонентов React.
  • react-native-calendar: для отображения календаря, с которым пользователи могут взаимодействовать.
  • react-native-datepicker: для выбора дат и времени.
  • react-native-progress: для создания индикаторов прогресса загрузки и спиннеров.
  • react-native-spinkit: коллекция индикаторов загрузки.
  • Vector Icons: позволяет вам использовать иконки из ваших любимых наборов иконок, таких как Font Awesome и Material Icons.
  • react-native-swiper: преобразовывает набор изображений или блоков в пролистываемые компоненты.
  • react-native-scrollable-tab-view: навигация на основе вкладок, которые мы можете перелистывать.
  • react-native-lightbox: для просмотра изображения во всплывающем окне на весь экран. 
  • react-native-maps: позволяет добавлять в ваше приложение Google Карты. Не все возможности API Google Карт доступны здесь, но предоставляемого функционала должно быть достаточно в большинстве случаев.
  • SGListView: оптимизированная с точки зрения потребления ресурсов памяти реализация встроенного в React Native компонента ListView. Если вам нужно отображать огромные списки в вашем приложении, используйте его вместо ListView.
  • Formik: упрощает жизнь при работе с формами в React Native. Позволяет получать и передавать значения из состояния формы, проверять правильность введенных данных в формах и обрабатывать их отправку. 
  • react-native-i18n: для реализации интернационализации в ваших приложениях.
  • react-native-push-notification: реализует локальные и удаленные всплывающие уведомления.
  • InstantSearch: коллекция компонентов для реализации поиска. 
  • react-native-fs: позволяет получить доступ к собственной файловой системе устройства. 
  • react-native-camera: компонент для работы с камерой, который позволяет вам снимать фотографии и видео в вашем приложении. 
  • react-native-video: для проигрывания видео из вашей файловой системы или по адресу URL.
  • react-native-sqlite-storage: для хранения и управления данными в базе данных SQLite.
  • react-native-store: хранилище типа ключ-значение, основанное на AsyncStorage.
  • react-native-webrtc: для реализации WebRTC.

Веб сервисы

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

  • базы данных
  • аналитика
  • всплывающие уведомления
  • обновления кода
  • непрерывная разработка

Базы данных

Realm это база данных в реальном времени, которая предназначена для мобильных приложений. Она имеет такие возможности как двух-факторная синхронизация данных, возможности для работы без подключения к сети и передача данных.  Realm Mobile Database - это ПО с открытым исходным кодом и совместимое с различными платформами, что означает, что вы можете использовать Realm Object Server на своем сервере, а также использовать библиотеку Realm JavaScript бесплатно.

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

Если для ваших нужд не требуется так много возможностей как в Realm, вы всегда можете обойтись AsyncStorage API, который доступен в React Native.

Аналитика

Fabric - это многоцелевой сервис, который позволяет вам кроме всего прочего добавлять аналитику к вашему приложению. Здесь есть "ответы" (Answers), которые сообщают вам статистику в реальном времени о том, как ваше приложение используется. Она включает количество активных пользователей, длительность сессии и рейтинг возврата пользователей. Также есть Crashlytics, который предоставляет отличные возможности по сообщениям о сбоях. Все они происходят в реальном времени, и вы можете наблюдать их в панели управления Fabric. Вы можете использовать библиотеку Fabric для того, чтобы очень просто установить Fabric в вашем приложении React Native.

Если вы предпочитаете использовать проверенное решение вроде Google Analytics, то для этого также существует соответствующая библиотека.

Всплывающие уведомления

Что касается реализации всплывающих уведомлений в приложениях, то тут есть одно средство, у которого просто нет конкурентов. Firebase Cloud Messaging (ранее известное как Google Cloud Messaging) позволяет вам отправлять всплывающие уведомления как в Android так и в iOS приложения. Для коммуникации вашего приложения с FCM вы можете использовать пакет react-native-fcm.

Обновления кода

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

Непрерывная разработка

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

Bitrise взаимодействует с несколькими сервисами на каждом шагу вашего процесса разработки. Например, когда вы отправляете изменения на ваши релиз-ветки репозитория GitHub, Bitrise узнает об этом через webhooks. После чего он начинает запуск тестов. После того, как тесты пройдены, начинается процесс сборки приложения. Если это просто "легкий релиз" (например изменения кода JavaScript), то изменения могут быть отправлены пользователям через CodePush. Но если изменения коснулись нативного кода (например вы добавили плагин для работы с камерой), то Bitrise может также собрать и APK или IPA файл и отправить его в Google Play или iTunes Connect.

Fastlane - это набор инструментов для автоматизации процесса сборки и релиза приложений для Android и iOS. Для iOS он отвечает за такие задачи как запуск ваших тестов, генерирование снимков экрана, подписывание кода и релиз приложения в магазин приложений. Он также включает такие инструменты бета-тестирования как Pilot и Boarding. Pilot позволяет вам загружать ваше приложение в iTunes Connect и управлять вашими TestFlight бета-тестировщиками прямо из командной строки. Boarding создает страницу регистрации для TestFlight бета-тестировщиков. 

Эти инструменты больше направлены на iOS разработку, но они могут быть полезны и для создания Android приложений. Пока что доступно только два инструмента для Android разработки: Supply и Screengrab. 

Supply позволяет автоматизировать загрузку ресурсов, таких как иконка приложения, рекламные изображения и снимки экрана вашего приложения. Также он позволяет вам обновлять ваше существующее приложение в магазине Google Play.

Screengrab позволяет автоматизировать генерирование снимков экрана для разных устройств. Каждый снимок экрана может также быть локализован, если ваше приложение поддерживает несколько языков.

Заключение

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.