Евгений Ртищев "Мобильная платформа на reactnative"
TRANSCRIPT
Ртищев Евгений
Мобильная платформа на ReactNative
Сбербанк
1) ВСП
2) Банкоматы
3) Сайт
4) Мобильный банк
5) Колл-центр
6) Мобильные приложения
1) Вклады
2) Карты
3) Активные операции
4) Страхование
5) CIB
6) Пенсионный фонд
2
Какие задачи нужно решить?
1) Web и mobile приложения2) Единый интерфейс3) Унификация стека4) Минимизация затрат5) Быстрый перенос 6) Быстрый time-to-market
3
Содержание
1) ReactNative
2) Наше решение
3) Архитектура
4) Производительность
5) Оптимизации
6) Результаты
4
ReactNative 0.38
5
500+ приложений в Store
6
React
1) Декларативный2) Компонентный3) VirtualDOM
7
ReactNative
1) Нативное приложение2) Flexbox3) Hot + Live Reloading4) Code Push
8
ReactNative
"Code once run everywhere"But"Learn one code write everywhere"
9
Унификация стека разработчика
10
1) JavaScript2) React3) Redux (Flux)4) Relay
Переиспользуемость
11
85% переиспользования кода при переносе с iOs на Android (c) Facebook
12
1) UI thread2) Shadow thread (Flexbox layout)3) JS thread
Runtime
Runtime
13
VirtualDOM
14
React: VirtualDOM -> DOMReactNative: VirtualDOM -> UIView
React: CSS, CSS-Module, React-StylesReactNative: React-Styles
Flexbox
15
сlass FlexExample extends Component { render() { return ( <View style={{flex: 1, flexDirection: 'row'}}> <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} /> <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} /> <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} /> </View> ); }};
Flexbox
16
CSSLayout
17
CSSLayout -> CSSNodeReactNative -> ShadowView
1) CSS
2) Синтаксис свойств
3) Значения по умолчанию
4) Размеры в px
5) Абсолютные значения
Наше решение
18
1) Web и mobile приложения2) Унификация стека3) Единый интерфейс4) Минимизация затрат5) Быстрый перенос 6) Быстрый time-to-market
Предпосылки
1) Legacy-системы для web
2) Отсутсвие iOs-разработчиков
3) Большое количество JS-разработчиков
Cordova / PhoneGap?
1) Не нативный интерфейс
2) Ограниченность нативного API
3) Сильная зависимость от технологии
ReactNative
1) React
2) Компонентный
3) React + Redux
Компонентный подход
22
mobile
web
Проект N
.
.
.
ПроектыБиблиотека компонентов
1) Единая точка входа2) Навигация3) Кнопки4) Текстовые поля5) Видео-плеер6) Элементы выбора7) Системный АПИ8) Работа с сетью…
Кросс-платформенная библиотека
23
mobile
web
Проект N
.
.
.
JavaScriptJavaScript
API компонентов
iOs
Web
Objc-C + ReactNative
JavaScript + React
Типы компонентов
Визуальный Не визуальный / Сервис
Компонент
<View><TextInput><Button><Video>
fetch()get()post()log()
24
Создаем визуальный компонент
TextInput.m
TextInput.h
Obj-C
TextInputViewManager.h
TextInputViewManager.m
Obj-C
TextInput.js
JavaScript
+ +
25
Создаем TextInput
Normal
Active
Disabled
26
Создаем TextInput
1) placeholder
2) text
3) onChange
4) disabled
27
TextInput.h
28
TextInput.m
29
1) Xib + init
2) UITextField
3) UILabel
4) setText -> UITextField.text
5) setPlaceholder -> UILabel.text
6) UITextFieldTextDidChangeNotification -> onChange
TextInputViewManager.m
30
TextInput.js
31
Используем TextInput
32
1) SOLID?
2) где Controller?
3) какая архитектура?
Что плохо?
33
3-уровневая архитектура
34
35
AssemblyViewInteractorPresenter
3-уровневая архитектура
VIP
ConnectionServiceFileServiceCacheService
SOA
ViewManagerUIView+ReactShadowView.js
Bridge
36
Уровень прикладной архитектуры
React Redux
+
JavaScript
+
ufs-library
+
37
Немного магии
38
Производительность
MessageQueue.js
1) Управление View
2) Обработка действий пользователя
3) Сетевое взаимодействие
4) Запись в файл
5) Анимации
39
MessageQueue + Spy
40
ListView
41
Не UITableView. Почему?
MessageQueue Obj-cJSupdate update
MessageQueue Obj-cJScell?cell?
MessageQueue Obj-cJSJSX cell
ListView
Как быть?
1) Грузить в память2) Парсить JSX самостоятельно
Советы по оптимизации
1) Не нагружать MessageQueue
2) Нативные анимации
3) Native modules / Web workers
4) Lazy require, laze native modules
5) Лишние render()
6) ASCII в JavaScriptCore, не UTF-8
7) Убираем JS _DEV_
8) No batches
43
Подводим итоги
44
1) Web и mobile приложения2) Унификация стека3) Единый интерфейс4) Минимизация затрат5) Быстрый перенос 6) Быстрый time-to-market
Задача выполнена
45
Что хорошего в ReactNative?
1) Это работает :)
2) Flexbox
3) Hot+Live Reloading
4) Time travel
5) Code Push
6) Sandbox
46
Что плохого в ReactNative?
1) Beta
2) Производительность
3) Heap size
4) Debugging
5) Архитектура
6) Тестирование
47
Use or not to use?
48
Полезные ссылки
1) Официальная страница ReactNative:https://facebook.github.io/react-native/
2) Список проектов, использующий ReactNative: https://facebook.github.io/react-native/showcase.html
3) Поддерживаемые спецификации JS https://facebook.github.io/react-native/docs/javascript-environment.html4) CSSLayout https://github.com/facebook/css-layout5) Создание F8 http://makeitopen.com/tutorials/building-the-f8-app/planning/
5050
Полезные ссылки
51
6) MessageQueue.jshttps://medium.com/@rotemmiz/react-native-internals-a-wider-picture-
part-1-messagequeue-js-thread-7894a7cba868#.a8ujgnqc77) Тесты производительности
https://code.facebook.com/posts/895897210527114/dive-into-react- native-performance/
8) Удалённый симуляторhttps://appetize.io/