Общие компоненты при кроссплатформенной разработке для web-и мобильных приложений с использованием react и react-native | Статья в журнале «Молодой ученый»

Отправьте статью сегодня! Журнал выйдет 20 марта, печатный экземпляр отправим 24 марта.

Опубликовать статью в журнале

Автор:

Рубрика: Информационные технологии

Опубликовано в Молодой учёный №36 (222) сентябрь 2018 г.

Дата публикации: 10.09.2018

Статья просмотрена: 327 раз

Библиографическое описание:

Клочков, Д. В. Общие компоненты при кроссплатформенной разработке для web-и мобильных приложений с использованием react и react-native / Д. В. Клочков. — Текст : непосредственный // Молодой ученый. — 2018. — № 36 (222). — С. 1-5. — URL: https://moluch.ru/archive/222/52521/ (дата обращения: 06.03.2021).



С появлением таких библиотек, как ReactJS и React-Native от компании Facebook изменился ландшафт разработки web и мобильных приложений. Основная идея заключается в том, что, выучив один подход (библиотеку), ее можно использовать везде как для web- так и для мобильных приложений.

В основе этих технологий, лежит такое понятие как компонента (React.Component), это функция или класс, которая имеет свой жизненный цикл и в основном используется для представления элементов интерфейса пользователя. Сами компоненты отличаются между собой в ReactJS и в React-Native, но выполняют одну и туже цель.

Цель данной статьи показать, как можно создавать общие компоненты, которые могли бы применятся как в ReactJS так и в React-Native, что существенно уменьшит время разработки приложений, поможет создать единую базу кода и выработать единый guideline design.

Ключевые слова: ReacJS, React-Native, Shared components, Components, Процесс разработки, Структура проекта, Архитектура проекта, Организация проекта, Веб-приложение, Мобильные приложения.

Процесс разработки

При начале разработки мобильного и web приложения с использованием ReactJS и React-Native (далее просто react). Всегда встает вопрос, как сделать код более общим, чтобы можно было объединить команды разработчиков мобильных приложений и команду разработчиков web приложений. Например, чтобы отобразить такой простой компонент как кнопка (Рисунок. 1) с помощью react для web и мобильного приложения, требуется 3 разных подхода.

Рис. 1. Компонент кнопка

ReactJS

ReactNative (iOS)

ReactNative (Android)

Как видно, код в разных случаях отличается. Получается нужно 3 раза писать код для разного компонента, один для web, второй раз для Android, третий для iOS. Как быть, когда, нужна универсальность и некая договоренность между командами. Когда приложение разрабатывается для мобильных платформ, можно использовать всю мощь react-native. Можно использовать условия в коде [3].

Либо разбить код компонента на файлы для каждой платформы. Например:

Затем в коде достаточно использовать такой подход, react-native сам уже подключит нужный компонент для нужной платформы [3].

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

Если сравнить архитектуру react-native приложения и react js приложения (Рисунок 2), то можно увидеть две различные реализации

Рис. 2. Архитектура react-native и reactjs приложения компонента для каждой платформы.

Здесь сразу первое, что приходит в голову это создание одного общего компонента для каждой платформы (Рисунок 3).

Рис. 3. Архитектура react-native и reactjs приложения с одним общим компонентом

Таким образом создается один общий и единый компонент для всех платформ. Это можно достичь, путем добавления еще одного слоя (Рисунок 4). Это библиотеки react-native-web и react-native-primitives.

Рис. 4. Архитектура с добавлением нового слоя

Таким образом можно писать код, только один раз который будет выполнятся на всех платформах, создается некий общий язык компонентов [1, 2].

В качестве заключения и будущих исследований, можно раскрыть такие нерешенные вопросы, как использование разных стилей и разного оформления компонентов, для каждой платформы, скажем для web используется css и свой оформление, для ios и android свои стили и свое оформление. Соответственно такой подход не будет работать в таком случае. Также в статье не раскрыта такая тема, как использование нативных компонентов при такой организации проекта. Все эти вопросы являются предметом будущих исследований в области разработки кросс-платформенных решений.

Литература:

  1. GitHub — lelandrichardson/react-primitives: Primitive React Interfaces Across Targets [Электронный ресурс]. https://github.com/lelandrichardson/react-primitives
  2. GitHub — necolas/react-native-web: React Native for Web [Электронный ресурс]. https://github.com/necolas/react-native-web
  3. Platform Specific Code — React Native [Электронный ресурс]. http://facebook.github.io/react-native/docs/platform-specific-code
Основные термины (генерируются автоматически): приложение, платформа, код, команда разработчиков, компонент, общий компонент, организация проекта, подход, процесс разработки.


Ключевые слова

веб-приложение, Мобильные приложения, ReacJS, React-Native, Shared components, Components, Процесс разработки, Структура проекта, Архитектура проекта, Организация проекта

Похожие статьи

Статический анализ исходного кода в обучении и разработке...

При создании любой системы раннее обнаружение и устранение ошибок значительно облегчает дальнейшую работу. В разработке ПО кроме модульного и функционального тестирования для повышения качества продукта могут применяться практики статического...

Похожие статьи

Статический анализ исходного кода в обучении и разработке...

При создании любой системы раннее обнаружение и устранение ошибок значительно облегчает дальнейшую работу. В разработке ПО кроме модульного и функционального тестирования для повышения качества продукта могут применяться практики статического...

Задать вопрос