Аннотация
Сорока А. С., Завадская Т. В. Разработка мобильного кроссплатформенного приложения с помощь react native. Статья посвящена анализу разработки приложения c помощью библиотеки React Native. Проведено сравнение библиотек и стандартных решений, подходящих для реализации конкретных задач.
Введение
В современном обществе у каждого есть собственное мобильное устройство и различные организации понимают, что большая часть трафика тратится на работу с ними. Создаются различные приложения, которые трудно поддерживать, из-за использования различных операционных систем (ОС). В связи с этим появляются различные кроссплатформенные решения разработки, одним из таких решений является React Native.
Постановка проблемы
Существует множество сред для разработки, но самые востребованные из них – это кроссплатформенные. Большую популярность они приобрели из-за возможности использования web-элементов, нативности, поддержки нескольких операционных систем. Одними из основных конкурирующих сред являются Expo SDK (использует библиотеку React Native) и Flutter SDK (использует язык программирования Dart). В данной статье рассмотрим Expo SDK и библиотеки, с которыми он будет работать, т.к. Expo имеет большую популярность у разработчиков.
Expo SDK
Expo - набор инструментов для разработчика, построенных на библиотеке React Native. Этот набор инструментов зависит от одного ключевого момента, а именно в Expo можно создавать большинство приложений без необходимости написания собственного кода в том случае, если присутствует полный набор API, доступных для Javascript. [1]
Данное условие очень важно, потому что от React Native всегда можно перейти к нативному коду. В некоторых случаях это полезно, но есть ограничения. Появляеется необходимость в тестировании файлов сторонними специалистами, что добавляет работы разработчику.
Expo использует библиотеку React Native, которая разработана для создания нативно отображаемых iOS и Android-приложений. В ее основе лежит разработанная в Facebook JS-библиотека React, предназначенная для создания пользовательских интерфейсов. Данный фреймворк ориентирован не на браузер, а на мобильные платформы. При разработке приложения можно использовать React Native для написания чистых, быстрых мобильных приложений, используя привычную JS-библиотеку React и единую кодовую базу JavaScript.
Преимущества: настройка и установка проекта проста и не занимает много времени; во время работы командой, любой ее член может открыть проект во время работы над ним; имеется возможность открыть приложения во время разработки на своем устройстве через QR-кода или ссылки. Пропадает необходимость отправлять весь файл .apk или .ipa на свое устройство; для запуска приложения не требуется “сборка”; интегрирует некоторые базовые библиотеки в стандартный проект (Push Notifications, Asset Manage); можно создавать файлы. apk и .ipa размещая их в собственном магазине.
Недостатки: отсутствует возможность добавления собственных модулей; нет возможности использовать библиотеки, использующих собственный код в Objective-C/Java; стандартное приложение занимает большом объем памяти; если есть необходимость нужно использовать: FaceDetector, ARKit o Платежи, то нужно разместить приложение на ExpoKit; при добавлении на ExpoKit, появляется ограничение реактивной версией, поддерживаемой ExpoKit в этот момент времени; отладка в ExpoKit (с родными модулями) намного сложнее, так как она смешивает два языка и разные библиотеки.
Начало работы с Expo
Expo был выбран, т.к. у него большее количество скачиваний, имеется большая база библиотек, в отличии от Flutter можно найти намного большее количество полезной информации и документации.
Чтобы начать разработку необходимо скачать приложение Expo на свое устройство. Оно позволит компилировать приложение сразу на устройство без установки, где имеется возможность отладки на устройстве. После этого следует перейти на официальный сайт Expo, где будут написаны команды для установки на компьютер. Запустить приложение можно командой expo start в консоли, после чего будет доступен QR-код, который нужно отсканировать. После компиляции можно будет увидеть первый экран приложения. Изменить содержимое можно в файле App.js. Для лучшей настройки приложения следует установить проект без дополнительных библиотек.
Навигация в приложении
Для навигации по приложению используют React Navigation. Данная библиотека имеет возможность не привязываться к отдельному компоненту и предавать параметры на нужный экран. Установить ее можно через менеджеров пакетов npm или yarn. Этот способ установки распространяется и на другие библиотеки, перед установкой следует проверять поддержу определенной версии SDK. Для подключения навигации выполняется импорт установленной библиотеки. После импорта станут доступны: createAppContainer, createStackNavigator. createAppContainer - отвечает за управление состоянием приложения и связывает навигатор верхнего уровня со средой приложения, а createStackNavigator предоставляет способ для приложения переходить между экранами, где каждый новый экран размещается поверх стека [5].
Хранилище данных
Данные в React «текут» через компоненты. Это называется «однонаправленный поток данных» — поток данных проходит в одном направлении от родителя к дочернему компоненту. При этом не очевидно, как два компонента, несвязанные отношением родитель-ребенок, будут взаимодействовать между собой. Для этого используют хранилище данных, которое может занимать большую часть разработки, т.к. данные пользователя нужно хранить, обрабатывать, изменять, отсылать на сервер. Существует много разных библиотек для работы с данными, одни из популярных это: Redux, Modx, Apollo GraphQL. Redux — библиотека для JavaScript с открытым исходным кодом, предназначенная для управления состоянием приложения. Чаще всего используется совместно с React или Angular для разработки клиентской части. Содержит ряд инструментов, позволяющих значительно упростить передачу данных хранилища через контекст.
Ключевые моменты Redux: хранилище (store) хранит состояние приложения; действия (actions) - некоторый набор информации, который исходит от приложения к хранилищу и указывает, что именно нужно сделать, передача информации выполняется методом dispatch(); создатели действий (action creators) - функции, которые создают действия; reducer - функция (или несколько функций), которая получает действие и в соответствии с этим действием изменяет состояние хранилища.
Redux имеет следующие недостатки: большой размер библиотеки; сложная структура разработки; использование единого источника; сложный в изучении; при неправильном использовании может замедлить приложение.
Из положительных сторон можно выделить: использует подход функционального программирования, что хороша подходит для начинающих разработчиков; хорошая документация; масштабируемость; понятность и чистота хранилища.
Отправка и получение данных
Данные для приложения хранятся в базе данных и их нужно получать. Для этого используют AJAX-запросы. Технология Ajax очень популярна и используется на многих сайтах. В документации можно найти разные реализации функций для работы с Ajax на чистом нативном JavaScript. Но с такими функциями не очень удобно работать, и, зачастую, они имеют проблемы с кроссбраузерностью, поэтому, как правило, для работы с Ajax-запросами используются различные фреймворки и библиотеки [4].
Самой популярной является библиотека Axios, предназначенная для выполнения HTTP-запросов, основанная на промисах.
У библиотеки есть следующие преимущества: работает в среде Node.js и в браузерах; поддерживает промисы; позволяет выполнять и отменять запросы; позволяет задавать тайм-аут ответа; поддерживает защиту от XSRF-атак; позволяет перехватывать запросы и ответы; поддерживает индикацию прогресса выгрузки данных; широко используется в проектах, основанных на React и Vue [3]. Также присутствуют и недостатки: библиотека сложна в изучении, имеет большой размер.
Одна из особенностей, которая выделяет эту библиотеку по сравнению с fetch(), — автоматические преобразования JSON-данных. При использовании fetch() для передачи данных в JSON, необходимо выполнить процесс в два этапа. Сначала сделать фактический запрос, а затем вызвать метод json() для полученных данных с сервера.
В тех случаях, когда необходимо только получить или отправить данные, можно использовать fetch. Это XMLHttpRequest нового поколения. Он предоставляет улучшенный интерфейс для осуществления запросов к серверу: как по части возможностей и контроля над происходящим, так и по синтаксису, так как построен на промисах. Пример вызова данного метода: fetch('https://***/***/post').then(response => response.json()) .then(commits => alert(post[0].author.login));
Заключение
Технологии мобильной разработки развиваются очень быстро, следовательно, нельзя останавливается на одном способе разработки. Стоит рассматривать различные подходы для достижения поставленной задачи. Пока в мире IT индустрии нет определенных стандартов и предписаний, указывающих какую технологию использовать, поэтому следует выбирать такую, которая индивидуально подходит для конкретного проекта. Выбранная технология должно позволять выполнить поставленную перед разработчиком задачу с максимальной эффективностью.
Список использованной литературы
1. React Native [Электронный ресурс]: facebook.github — Режим доступа: https://facebook.github.io/react-native/docs/tutorial.html
2.Кроссплатформенность [Электронный ресурс]: wikipedia — Режим доступа: https://ru.wikipedia.org/wiki/ Кроссплатформенность
3.A definitive guide to Redux vs. MobX [Электронный ресурс]: LogRocket — Режим доступа: https://blog.logrocket.com/redux-vs-mobx/
4.Axios: Ajax-запросы без jQuery [Электронный ресурс]: zyubin — Режим доступа: https://zyubin.ru/saitostroenie/web-razrabotka/axios-ajax-zaprosy-bez-jquery.html
5.React Navigation [Электронный ресурс]: reactnavigation — Режим доступа: https://reactnavigation.org