Евгений Ртищев "Мобильная платформа на ReactNative"

Ртищев Евгений

Мобильная платформа на 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

СПАСИБО ЗА ВНИМАНИЕ!

email: [email protected]: + 7 964 797 15 40

Полезные ссылки

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-reactnative-performance/

8) Удалённый симуляторhttps://appetize.io/

Education

Евгений Ртищев "Мобильная платформа на ReactNative"