Что значит react native

React Native и React.js — что и как, в чем разница, где применять

При поддержке Facebook, Instagram и авторитетного сообщества разработчиков, React является одной из наиболее используемых библиотек JavaScript в настоящее время. Согласно Libscore, сейчас React используется во многих известных проектах, таких как Netflix, Airbnb, Walmart, HelloSign и Imgur – и это далеко не полный список.

Разработка React.js никоим образом не похожа на разработку мобильных приложений с помощью React native , и они преследуют разные цели. Попробуем объяснить все основные различия между этими двумя PL и предоставить подход к выбору правильного варианта для конкретного проекта.

Разница между React.js и React Native

React.js — это библиотека JavaScript, в то время как React Native — это платформа для разработки мобильных приложений

React.js — это библиотека JavaScript, которая помогает компаниям создавать красивые UI. Одной из основных особенностей React является то, что он может выполняться на стороне клиента и, при этом, рендериться на стороне сервера, и эти части могут взаимодействовать друг с другом. Поэтому он широко используется для создания высокопроизводительных веб-приложений и пользовательских интерфейсов.

В то время как React Native — это платформа разработки мобильных приложений, которая создает мобильные приложения с помощью React.js. Она позволяет создавать богатый мобильный пользовательский интерфейс из декларативных компонентов. React Native предлагает такие функции, как Hot Reloading, для разработки приложений быстрее и с меньшими усилиями. React Native библиотеки были выпущены Facebook в 2015 году, что дало архитектуру React приложениям для Android, iOS и Windows.

И то, и другое повышает эффективность разработки, но в разных направлениях

React.js специализируется на своей способности обеспечить отличную производительность и полностью управляемый цикл рендеринга для своих компонентов. С помощью простой настройки распределения, создания и использования многоразовых компонентов он позволяет разработчикам иметь больше возможностей для использования и создания основных абстракций. Это оказывается полезным для low-level компонентов, таких как кнопки, а также для элементов более высокого уровня, таких как выпадающие списки.

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

React.js использует Virtual DOM, в то время как React Native использует собственные API

React.js использует виртуальную DOM для создания лучшего UX. Построение DOM требует времени, поскольку страницы сегодня большие. Но, React.js быстрее выполняет эту работу, используя виртуальную DOM. Таким образом, React.js использует абстрактную копию объектной модели документа и выставляет изменения для одного компонента, не влияя на остальную часть пользовательского интерфейса. Это то, что и делает React.js одним из лучших решений для быстрого обновления и создания динамических UI.

React Native делает это шагом раньше. Он использует собственные API-интерфейсы для отображения частей пользовательского интерфейса, которые могут быть повторно использованы как на платформах iOS, так и на Android. А также Java API для визуализации компонентов Android и API Objective-C для написания компонентов iOS. Кроме этого, используется JavaScript для остального кода и индивидуализации приложения для каждой платформы. Это дает возможность React Native возможность повторного использования компонентов и кодов.

React.js улучшает SEO для вашего сайта, в то время как React Native — это только UI

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

С другой стороны, поскольку React Native не используется для веб-сайтов, это не имеет никакого отношения к SEO. Он сосредоточен исключительно на создании мобильного интерфейса. По сравнению с другими платформами разработки мобильных приложений, React Native полностью ориентирован на пользовательский интерфейс, что делает его больше похожим на библиотеку JavaScript, а не на фреймворк. В результате пользовательский интерфейс получается очень отзывчивым. Это значит, что приложение будет иметь более быстрое время загрузки, чем обычное гибридное приложение, и более плавное ощущение при взаимодействии с UI.

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

React использует HTML и JS, следуя правилу, что все время они идут рука об руку. Эта идея расширилась за счет CSS, который исключает множество проблем, связанных с worldwide scope и изоляцией переменных / областей.

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

Кроме того, React.js использует HTML и CSS, а React Native — нет. React.js использует

и соответственно. Вот пример, чтобы показать это:

Для React.js:

function tick() <
const element = (

Для React Native:

import React, < Component >from ‘react’;
import < Text, View >from ‘react-native’;
export default class HelloWorldApp extends Component <
render() <
return (

Источник

Первый взгляд на react-native

Если вы фронтенд разработчик, да еще и с опытом работы react + redux, то вам определенно стоит обратить внимание на такой интересный инструмент как react-native. Он позволяет разрабатывать кроссплатформенные приложения под ios и android. React-native находится в стадии активного развития и выпускает обновления каждый месяц.

Год назад у меня появилось желание попробовать эту технологию и я начал писать приложение-словарь, которое позволяет сохранять категорию английских слов с их переводом. Версия react-native на тот момент была 0.37, теперь версия 0.52. Несколько недель назад я решил возобновить разработку и столкнулся со стандартной проблемой быстрорастущих проектов, а именно довольно частая и кардинальная смена функциональности. Мне пришлось переписать некоторые вещи для того чтобы приложение запустилось. Вначале мне это сильно не понравилось, однако дальше я понял что эти изменения увеличивают скорость и качество разработки приложения. Дальше я бы хотел вкратце рассмотреть основные моменты разработки на react-native, c которыми я столкнулся в процессе.

На данный момент вы можете создать приложение 2 способами: с помощью create-react-native-app и react-native init. Create-react-native-app — это npm пакет, который позволяет вам создать начальную структуру приложения и запустить его на смартфоне без установки окружения для каждой из платформ. Однако если вам понадобится добавить в приложение нативный код или подключить библиотеку, которая это делает, то вам все равно придется устанавливать окружение.

И вот у вас уже есть готовый проект, а что же делать дальше? Ведь у нас нет ни CSS, ни HTML. Зато у нас есть jsx синтаксис, а также синтаксис для стилизации, очень похожий на inline стили в html. Для верстки макета используется flexbox такой же, как и на веб. В react-native нет привычных для фронтенд разработчика HTML элементов, вместо этого есть react-native компоненты для верстки, описание которых можно найти на официальном сайте. Есть кроссплатформенные компоненты(View, Button, TextInput), а также платформозависимые (DatePickerIOS, ProgressBarAndroid и другие). Давайте рассмотрим разработку компонента на примере создания карточки для отображения категории слов.

Ниже представлена jsx разметка для данного компонента.

View компонент похож на div в вебе и является одним из основных при создании компонента. TouchableNativeFeedback это компонент который позволяет обрабатывать нажатие на вложенный в него элемент. ColoredFlatButton и Icon компоненты из библиотеки react-native-material-kit. Как видим из примера выше верстка в react-native ничем не отличается от верстки в react, за исключением того, что используются компоненты из react-native вместо HTML элементов.

Дальше мы рассмотрим стилизацию этого компонента.

Для того чтобы создать стили нужно импортировать класс StyleSheet из react-native и передать ему объект стилей. Для применения стиля к элементу нужно указать его в атрибуте style.

Я думаю что в стилях мы не будем разбираться, человеку знакомому с css и так вcе понятно. Единственное отличие, так это то что размеры указываются не в CSS единицах измерения, а в Density-independent Pixels. Это единицы измерения которые позволяют приложению выглядеть одинаково на различных экранах и разрешениях в IOS и Android.
После того как в приложении появляется больше чем одна страница стоит задуматься как сделать переход между ними. До недавних пор добавить навигацию в приложение было достаточно сложно.

Приведу пример как это делалось раньше.

Согласитесь, выглядит не очень? Теперь ситуация изменилась, появилось несколько пакетов, которые рекомендуются в документации(native-navigation, react-native-navigation, react-navigation). Я использовал react-navigation. Все оказалось просто, достаточно импортировать navigator и указать настройки.

Первым параметром передаются маршруты приложения, а также можно указать настройки для header каждой страницы. Вторым параметром передаются настройки для компонента Drawer — это меню которое открывается слева по нажатию на бургер иконку. Есть возможность интеграции с redux.

После того как в приложении появилась навигация и несколько экранов, стоит задумать о сохранении данных. Если приложение не использует соединение с интернетом, тогда нужно хранить данные на устройстве. Для этого у нас есть SQLite. Для работы с бд я использовал пакет react-native-sqlite-storage. Немного повозился с установкой, а проблема оказалось очевидной, после добавления в проект этой библиотеки нужно было переустановить приложение на устройстве. Я использовал метод при котором в проекте уже есть база данных, которая используется при установке приложения на устройство, как это сделать описано на странице модуля в github. Для установки соединения нужна всего лишь одна строка.

А также простой пример запроса к базе данных.

В заключение могу сказать что после использования react-native я остался доволен данной технологией. Удобная отладка в браузере, никакого отличия от отладки веб приложений. Если какого-то функционала нет, всегда можно найти библиотеку в сообществе react-native специалистов.

Источник

React Native — одного JS мало

Итак, пришла пора быстро погрузиться в тему. Для усиления эффекта, использую разные техники преобразования информации в знания. В частности, представляю конспект доклада Алексея Андросова (старшего разработчика интерфейсов, Yandex).

React Native — это фреймворк для разработки кроссплатформенных приложений для iOS и Android:

Первый ли он? Нет!

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

React Native: взгляд сверху

React Native: взгляд изнутри

Write once, run everywhere? Нет! Вместо ожидаемых предположений, что один и тот же код будем использовать многократно на разных платформах. Learn once, write everywhere. Одинаковая архитектура приложения (React для построения интерфейса, Redux для круговорота данных).

Немного философии

Все нативно, поэтому забудьте про полную кроссплатформенность. Платформы разные, поэтому и компоненты разные. У них разная логика и механика взаимодействия. Можно писать все на JS и выкинуть понятие native, но вы этого не хотите. Native — это ваше преимущество!

На примере приложения Vine в iOS. Что принято делать в iOS? Внизу TabBar, в нем принято переключать экраны: главная, профиль, поиск. Сверху NavigationBar, и в нем принято писать название и кнопки слева-справа (слева обычно back стоит, а справа — какое-нибудь действие). А в Android все не так. Есть тоже NavigationBar, но он другой, в нем не принято кнопки делать. Для этого есть отдельный компонент, называется ToolBar-ом. В Android-е принято делать SegmentedActivity — она сверху, очень похожа на iOS TabBar, но механика работы у него абсолютно другая. Если в TabBar-е мы не можем свайпом переключать экраны, то в Android-е это можно делать, и это принято делать, и именно так оно и работает.

Кроссплатформенность

Из чего состоит приложение?

Компоненты

Приложение строится из компонент платформы — это нативные модули, завернутые в React-компоненты

• есть кроссплатформенные: View, Text, Image, Picker, .
• есть специфичные для iOS: TabBarIOS, ActionSheetIOS, .
• есть специфичные для Android: BackAndroid, ToolbarAndroid, .

[Вот так это выглядит, реальный код]

Интересно, что кнопок нет! Для вас любая кнопка — это просто стилизованная область, у которой есть обработчик нажатия. Никакой механики кнопки нет. И поэтому в React-е есть вот эти touchable-элементы, вы оборачиваете всё, что угодно и у вас всё что угодно становится кнопкой по сути (есть обработчик onPress). Scroll-ы — отдельный компонент. Это сегментированный вид. Он рендерит только то, что находится на экране, и с ним нужно работать чуть по другому. Потому ScrollView тут тоже отдельный. Отдельная механика, если используется клавиатура. Потому отдельное свойство есть — чего с ним делать. Отдельно свойство refreshControl. Если кто-то знает, как разрабатывать на iOS, то это очень похоже.

[Вот как выглядит текстовое поле]

Какие-то свойства совпадают с привычным HTML-input-ом, а другие — нет.

CSS не настоящий — это полифил

Компонент PixelRatio преобразует значения из density points в настоящие пиксели для разных экранов (Retina и прочее).

Вот это пример с flex-ом. Хватает минимального набора, чтобы верстать.

Болванка приложения

[Пример кода приложения]

Navigator

Имеет ряд проблем:

• императивное API (методы) для управления
• надо сразу продумать взаимодействие с Navigator
• анимации и жесты сложно управляемы
• NavigatorBar совсем отвязан от общей жизни
• после разработки нескольких экранов вы начнете испытывать боль

Во многом, проблемы решаются с помощью redux.

[Почему это плохо?]

Чтобы запушить какой-нибудь роут, или сделать back (перемотать на другой экран) — надо сделать ссылку на Navigator, а потом эту ссылку получить. Причем изначально её не будет, т.к. Navigator-а еще нету.

[Интерфейс выглядит, как связанные компоненты]

[А на самом деле всё выглядит вот так]

NavigationBar или зачем нужен redux

В декабре 2015 Eric Vicenti организовал проект navigation-rfc, с помощью сообщества, попытался решить проблемы Navigator. В феврале 2016 проект переехал в мастер React Native под название NavigationExperimental и теперь развивается силами Facebook. А старый Navigation больше не будет поддерживаться.

NavigationExperimental — что сделано

[Пример кода навигации]

Анимации

[Пример кода анимации]

Работает очень плавно, можно комбинировать последовательно/параллельно, и делать довольно безумные штуки.

Нативные модули

React Native реализует основные, но не все. Если модуля нет:

• поискать компонент в UIExplorer (демо-приложение React Native)
• найти правильное название модуля в терминах OS
• поискать в исходных текстах, возможно он недокументирован (как фотку сделать, SVG)
• js.coach/react-native — плагины для React Native
• отдавайте предпочтение нативной реализации, а не JS

Как подключить нативные модули

Используйте rnpm — React Native package manager:

Кроссплатформенность компонент

Неправильный путь — разложить все по папкам:

• common/components
• android/components
• ios/components

и подключать их в зависимости от платформы

Правильный путь — разложить все по папкам:

• MyComponent/Component.ios.js, MyComponent/Component.android.js
• ComponentIOS, ComponentAndroid

Для платформо-зависимых компонент (ComponentIOS, ComponentAndroid) удобно класть рядом пустышку, и не испытывать проблем, что какой-то компонент не найден на платформе.

Как написать нативный компонент

PS

Коллега скинул ссылочку на Weex — две недели назад Alibaba передал проект Apache.

И опять внутри Vue. Что-то оно все время путается у меня под ногами.

Только проникся идеями React+Redux, бегаю с ними, как сумасшедший с бензопилой, в попытках везде применить. А тут что получается — разворачивай дебаркадер?!

Будет очень интересно почитать сравнение, может кто возьмется — тема на Хабре новая.

Источник