Мобильные приложения на чистом JS

Илья Лесик, Redis CA

Hands on the orange typewriter in a park

React Native

Платформа для разработки приложений (
iOS,
Android) на JS и React
Использует нативные UI-блоки, также как и обычные приложения
RN это не WebView, не HTML, завернутный в приложение

JSX

Hello, tver.io!

Архитектура

JavaScript

Bridge

Native

JavaScript JSCore (VM) Single Thread

ObjC + Swift / Java Main UI Thread Other BG Threads

Стандартные компоненты

Компонент	Web	iOS	Android
View	div	UIView	android.view.View
Text	span	UITextView	android.widget.TextView
FlatList	ul	UIStackView	android.widget.ListView
Image	img	UIImageView	android.widget.ImageView
TouchableHighlight	button	UIControl	android.view.TouchDelegate

Компоненты

ActivityIndicator

InputAccessoryView

KeyboardAvoidingView

RefreshControl

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

Команда React Native в два раза больше команды React

API

AccessibilityInfo

InteractionManager

ListViewDataSource

Привычные фронтенд-решения

Модули из npm (lodash, moment и др.)
Стейт-контейнеры (redux, mobx)
react-router
styled-components
fetch + другие способы интеграции с бэкендом (GraphQL, WebSocket)
eslint, prettier
babel

Стилизация

Кнопка

Флекбокс

Библиотека Yoga

1

2

3

Здесь вам не web

Не во все элементы можно вставить другие элементы
Стандартый View скрывает все элементы, которые в него не влазят. Для добавления скролла необходимо использовать ScrollView.
:first-child, :hover и другие псевдоселекторы не работают
Наложение клавиатуры поверх страницы. KeyboardAvoidingView.
SVG не поддерживается из коробки
Не поддерживается @font-face. Шрифты необходимо "линковать".

Специфика платформы

Расширения файлов .ios.js, .android.js

Пример: BigButton.ios.js, BigButton.android.js

В зависимости от платформы будет импортирован соответствующий файл.

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

XCode

Hot Module Replacement

WebStorm (или что-нибудь другое)

Отладка

React Native Debugger

Известные проблемы

Нельзя собрать под Android 64bit
JSC на Android версии от ноября 2014 года
- {order && order.count} может крашнуть приложение
- Symbol не поддерживается
Под iOS нельзя использовать JIT для JS
Может тормозить из-за bridge
NavigatorIOS (полоска навигации) нарушает соглашения React

Когда вы решите начать мобильную разработку:

Дизайнеры, проектировщики могут оказаться к этому не готовы.
Для полноценной разработки под iOS могут потребоваться дополнительные вложения:
- Компьютер с Mac OS (XCode, Device Emulator)
- Apple Developer Program - $99/год (iTunes Connect, TestFlight)
- iPhone/iPad

React-like библиотеки

Android

Litho: A declarative UI framework for Android

Anvil: A micro library for building fast reactive views on Android

iOS

ComponentKit: A React-Inspired View Framework for iOS

Render is a declarative library for building efficient UIs on iOS inspired by React.

Заказ еды в офисе

Логин

Меню на неделю

Меню повара

Дальнейшее развитие

PUSH Notifications
Дизайн в соотвествии с гайдлайнами
Анимации
Попробовать написать нативный компонент

Вместо выводов

Наш опыт использования React Native положителен:
- Разработчики на React могут легко начать использовать React Native
- Для несложных приложений можно обойтись без
  iOS,
  Android разработчиков в команде
- Быстрый feature delivery
- Кроссплатформенность
Критичных проблем мы не встретили

Вместо выводов

Где можно применить React Native:
- "Мобильная" версия сайта
- Сервисы
Где не стоит использовать:
- Игры
- Высокопроизводительные приложения (особенно в которых требуется быстрый запуск приложения)
- Если вы хейтите JavaScript или React