"Евгений поделится и расскажет о необычной гибридной технологии ReactNative, рожденной в компании Facebook. Доклад рассказывает о реальной разработке гибридной мобильной платформы в крупнейшем российском банке. В ходе выступления мы узнаем следующие аспекты: * Магия технологии ReactNative. * Когда нужно прибегать к гибридной разработке. * Возможно ли создать полностью кросс-платформенное решение на ReactNative? * Как выстроить архитектуру продукта? * Преимущества и недостатки, что нужно знать. * Развеиваем основные мифы ReactNative."

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

2. Сбербанк
1) ВСП
2) Банкоматы
3) Сайт
4) Мобильный банк
5) Колл-центр
6) Мобильные приложения
1) Вклады
2) Карты
3) Активные операции
4) Страхование
5) CIB
6) Пенсионный фонд
2

3. Какие задачи нужно решить?
1) Web и mobile приложения
2) Единый интерфейс
3) Унификация стека
4) Минимизация затрат
5) Быстрый перенос
6) Быстрый time-to-market
3

4. Содержание
1) ReactNative
2) Наше решение
3) Архитектура
4) Производительность
5) Оптимизации
6) Результаты
4

5. ReactNative 0.38
5

6. 500+ приложений в Store
6

7. React
1) Декларативный
2) Компонентный
3) VirtualDOM
7

8. ReactNative
1) Нативное приложение
2) Flexbox
3) Hot + Live Reloading
4) Code Push
8

9. ReactNative
"Code once run everywhere"
But
"Learn one code write everywhere"
9

10. Унификация стека разработчика
10
1) JavaScript
2) React
3) Redux (Flux)
4) Relay

11. Переиспользуемость
11
85% переиспользования кода при переносе
с iOs на Android
(c) Facebook

12. 12
1) UI thread
2) Shadow thread (Flexbox layout)
3) JS thread
Runtime

13. Runtime
13

14. VirtualDOM
14
React: VirtualDOM -> DOM
ReactNative: VirtualDOM -> UIView
React: CSS, CSS-Module, React-Styles
ReactNative: React-Styles

15. 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>
);
}
};

16. Flexbox
16

17. CSSLayout
17
CSSLayout -> CSSNode
ReactNative -> ShadowView
1) CSS
2) Синтаксис свойств
3) Значения по умолчанию
4) Размеры в px
5) Абсолютные значения

18. Наше решение
18
1) Web и mobile приложения
2) Унификация стека
3) Единый интерфейс
4) Минимизация затрат
5) Быстрый перенос
6) Быстрый time-to-market

19. Предпосылки
1) Legacy-системы для web
2) Отсутсвие iOs-разработчиков
3) Большое количество JS-разработчиков

20. Cordova / PhoneGap?
1) Не нативный интерфейс
2) Ограниченность нативного API
3) Сильная зависимость от технологии

21. ReactNative
1) React
2) Компонентный
3) React + Redux

22. Компонентный подход
22
mobile
web
Проект N
.
.
.
ПроектыБиблиотека компонентов
1) Единая точка входа
2) Навигация
3) Кнопки
4) Текстовые поля
5) Видео-плеер
6) Элементы выбора
7) Системный АПИ
8) Работа с сетью
…

23. Кросс-платформенная библиотека
23
mobile
web
Проект N
.
.
.
JavaScriptJavaScript
APIкомпонентов
iOs
Web
Objc-C + ReactNative
JavaScript + React

24. Типы компонентов
Визуальный Не визуальный / Сервис
Компонент
<View>
<TextInput>
<Button>
<Video>
fetch()
get()
post()
log()
24

25. Создаем визуальный компонент
TextInput.m
TextInput.h
Obj-C
TextInputViewManager.h
TextInputViewManager.m
Obj-C
TextInput.js
JavaScript
+ +
25

26. Создаем TextInput
Normal
Active
Disabled
26

27. Создаем TextInput
1) placeholder
2) text
3) onChange
4) disabled
27

28. TextInput.h
28

29. TextInput.m
29
1) Xib + init
2) UITextField
3) UILabel
4) setText -> UITextField.text
5) setPlaceholder -> UILabel.text
6) UITextFieldTextDidChangeNotification -> onChange

30. TextInputViewManager.m
30

31. TextInput.js
31

32. Используем TextInput
32

33. 1) SOLID?
2) где Controller?
3) какая архитектура?
Что плохо?
33

34. 3-уровневая архитектура
34

35. 35
Assembly
View
Interactor
Presenter
3-уровневая архитектура
VIP
ConnectionService
FileService
CacheService
SOA
ViewManager
UIView+React
ShadowView
.js
Bridge

36. 36
Уровень прикладной архитектуры
React Redux
+
JavaScript
+
ufs-library
+

37. 37
Немного магии

38. 38
Производительность

39. MessageQueue.js
1) Управление View
2) Обработка действий пользователя
3) Сетевое взаимодействие
4) Запись в файл
5) Анимации
39

40. MessageQueue + Spy
40

41. ListView
41
Не UITableView. Почему?
MessageQueue Obj-cJS
update update
MessageQueue Obj-cJS
cell?cell?
MessageQueue Obj-cJS
JSX cell

42. ListView
Как быть?
1) Грузить в память
2) Парсить JSX самостоятельно

43. Советы по оптимизации
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. Подводим итоги
44
1) Web и mobile приложения
2) Унификация стека
3) Единый интерфейс
4) Минимизация затрат
5) Быстрый перенос
6) Быстрый time-to-market

45. Задача выполнена
45

46. Что хорошего в ReactNative?
1) Это работает :)
2) Flexbox
3) Hot+Live Reloading
4) Time travel
5) Code Push
6) Sandbox
46

47. Что плохого в ReactNative?
1) Beta
2) Производительность
3) Heap size
4) Debugging
5) Архитектура
6) Тестирование
47

48. Use or not to use?
48

49. СПАСИБО ЗА ВНИМАНИЕ!
email: e.rtishchev@gmail.com
phone: + 7 964 797 15 40

50. Полезные ссылки
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.html
4) CSSLayout
https://github.com/facebook/css-layout
5) Создание F8
http://makeitopen.com/tutorials/building-the-f8-app/planning/
5050

51. Полезные ссылки
51
6) MessageQueue.js
https://medium.com/@rotemmiz/react-native-internals-a-wider-picture-
part-1-messagequeue-js-thread-7894a7cba868#.a8ujgnqc7
7) Тесты производительности
https://code.facebook.com/posts/895897210527114/dive-into-react-
native-performance/
8) Удалённый симулятор
https://appetize.io/