Где кончается react native? / Павел Кондратенко (Rambler&Co)

Где к ончается r eact nat i ve?
05. 06. 2017Кондратенко Павел
i am@kondratenko.me t wi t t er : @mrgustarus
RAMBLER&Co

RAMBLER&Co
- Познак омлю с r eact nat i ve тех, к то не
знак ом.

RAMBLER&Co
знак ом.
- Поделюсь своим опытом разработк и на r eact
nat i ve.

RAMBLER&Co
знак ом.
- Поделюсь своим опытом разработк и на r eact
nat i ve.
- Пока жу, г де конча ют с я воз можнос т и r e a c t
na t i ve .

1
5
Стеллажей
2331
Книг а

IГлава
!П ра оптимизировать
12

Цикл жизни книги
13

Архитектура экосистемы
14

Архитектура экосистемы
15

IIГлава
Начинаем делать
мобильное приложение
17

Что должно уметь мобильное приложение?
18
• Авторизация через l dap.
• Профиль и связанные данные ( к ниг и) .
• Манипуляции с к ниг ами.
• Поиск к ниг по библиотек е.
• Распознавание qr и bar code через к амеру.

Как можно сделать мобильное приложение?
19

20
• Са мому на пис а т ь на яз ыке
• Andr oi d: J a va , C/ C++, Kot l i n, LUA;
• i OS: Obj e c t i ve - C, C/ C++ ( C++ - Xc ode 4+) , Swi f t ;
• Мультиплатформенные: Haxe.

21
• Ис польз уя библиот е ки и фре ймворки
• Web vi ew: Cor dova/ PhoneGAP ( I oni c, Monaca) .
• С использованием нативных к омпонентов: React Nat i ve,
Xamar i n.
• Платформы: Met eor , Expo.

22
• Ис польз уя библиот е ки и фре ймворки
• Web vi ew: Cor dova/ PhoneGAP ( I oni c, Monaca) .
• С использованием нативных к омпонентов: React Nat i ve,
Xamar i n.
• Платформы: Met eor , Expo.
• Собра т ь из блоков
• Иг ровые движк и: Uni t y, Unr eal Engi ne, Mar mal ade.
• Редак торы: I oni c Cr eat or , Xcode.

23
Если бы вы выбирали инструмент для мобильног о
приложения, к ак ую версию r e a c t na t i ve вы бы выбрали?

Если бы вы выбирали инструмент для мобильног о
приложения, к ак ую версию r eact nat i ve вы бы выбрали?
24

→
Что такое react native?
28
// . . .
class SplashScene extends Component {
// . . .
componentWillMount() {/* fe tch */данных }
render() {
return (
<View style={style.loader}>
<ActivityIndicator color="#222222"/>
</View>
);
}
onLocked(e) { /* . . . */ }
onAllowed(e) { /* . . . */ }
}
const style = styles({/* . . . */});
export default SplashScene;

→
29
// . . .
class SplashScene extends Component {/* . . .
*/}
const style = styles({
loader: {
width,
height,
flex: 1,
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
top: 0,
left: 0,
backgroundColor:
'rgba(255,255,255,0.5)'
}
});

IIIГлава
Погружение в архитектуру
30

31
→
// . . .
class SplashScene extends Component {
// . . .
componentWillMount() {/* fe tch */данных }
render() {
return (
<View style={style.loader}>
<ActivityIndicator color="#222222"/>
</View>
);
}
onLocked(e) { /* . . . */ }
onAllowed() { /* . . . */ }
}
const style = styles({/* . . . */});

32
// . . .
// re act-native /Librarie s/Co m po ne nts/ActivityIndicato r/ActivityIndicato r. js
const ActivityIndicator = React.createClass({
// . . .
render() {
// . . .
return (
<View /* . . . */>
<RCTActivityIndicator /* . . . *//>
</View>
);
}
});
// . . .
if (Platform.OS === 'ios') {
var RCTActivityIndicator = requireNativeComponent(‘RCTActivityIndicatorView',
ActivityIndicator, {nativeOnly: {/* . . . */}});
} else if (Platform.OS === 'android') {
var RCTActivityIndicator = requireNativeComponent(‘AndroidProgressBar',
ActivityIndicator, {nativeOnly: {/* . . . */}});
}

33
// ...
class LoginScene extends Component {
// ...
render() {
if (this.state.waiting) {
return (
<View style={style.button}>
<ActivityIndicator color={style.indicatorColor}/>
</View>
);
}
return (
<TouchableHighlight onPress={e => this.onPress(e)} /* ...
*/>
<Text style={{color: this.state.color}}>
{this.state.text}
</Text>
</TouchableHighlight>
);
}
onPress(e) {
this.setState({waiting: true});
}
}
// ...
→

// ...
// ...
render() {
return (
</View>
);
}
return (
*/>
{this.state.text}
</Text>
);
}
onPress(e) {
}
}
// ...
→
34

41
// ...
// ...
render() {
return (
</View>
);
}
return (
*/>
{this.state.text}
</Text>
);
}
onPress(e) {
}
}
// ...
→

// ...
// ...
renderContent() {
return (
</View>
);
}
return (
*/>
{this.state.text}
</Text>
);
}
onPress(e) {
}
}
// ...
42
'use strict';
import {AppRegistry} from 'react-native';
const Library = require('./library');
import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue';
MessageQueue.spy(info => console.log(info));
AppRegistry.registerComponent('library', () => Library);

4
Консоль react-native log-ios

{ type: 0,
module: 'RCTEventEmitter',
method: 'receiveTouches',
args: [
'topTouchEnd',
[{ target: 8, pageY: 289.5, locationX: 227, locationY: 23.5,
identifier: 1, pageX: 247, timestamp: 41049808.447223 }]
]
}
44
{ type: 0,
args: [
'topTouchStart',
]
}
...
...

45
{ type: 0,
args: [
'topTouchEnd',
]
}
{ type: 0,
args: [
'topTouchStart',
]
}
...
...

{ type: 0,
args: [
'topTouchEnd',
]
}
{ type: 0,
args: [
'topTouchStart',
]
}
...
46
...
{ type: 1,
module: 'UIManager',
method: 'createView',
args:
[ [Getter/Setter],
[Getter/Setter],
[Getter/Setter],
[Getter/Setter] ] }
--- last message repeated 2 times ---
...
...

Stack trace обработки события touch
47
1. Перехват события платформой.
2. Создание обертк и для события t ouch: RCTTouchEvent ,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 91be5bf c861f 96175b73f e956b580a550f a0f 31a/ React / Base/ RCTTouchHandl er . m#L221 .
3. Отправк а события дальше через event Di spat cher ,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 91be5bf c861f 96175b73f e956b580a550f a0f 31a/ React / Base/ RCTTouchHandl er . m#L231 .
4. Коллек ция события и последующая отправк а события в блок е событий через br i dge в очередь поток а j s t hr ead ( RCTJSThr ead) . Ког да очередь освободится,
будет вызван f l ushEvent sQueue,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 8016d838beddc59f 698b2004b573115f e82c1408/ React / Base/ RCTEvent Di spat cher . m#L180 .
1. Ставим выполнение к ода внутри _j avaScr i pt Execut or в очередь в j s t hr ead или вызываем сразу,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 9dc7654a6c6a32649f f 57e2c8845c1cf 02434672/ React / Base/ RCTBat chedBr i dge. mm#L654 .
5. Ког да доходит очередь, вызывается cal l back f l ushEvent sQueue,
6. Все события в блок е диспатчатся через di spat chEvent ,
7. Вызывается метод RCTBr i dge br i dge. enqueuJSCal l , в к оторый передается название cal l back, к оторый будет вызван в j s t hr ead и ег о арг ументы,
8. Получение метода для cal l back, ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ c68a70862168cd3df 751c5110a0062493397dc9d/ React / Base/ RCTTouchEvent . m#L75 .
1. Вызывается метод с друг ой сиг натурой, но тем же именем. В к ачестве арг ументов этот метод принимает имя модуля и метода в j s t hr ead к оторый нужно
вызвать. Эти данные получаются разбивая на две части имя метода из предыдущег о шаг а: RCTEvent Emi t t er . r ecei veTouches => modul e: RCTEvent Emi t t er ,
met hod: r ecei veTouches, ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ b2f 3a65eab1b6cad5d287c4546bc1cc6b741ea9f / React / Base/ RCTBr i dge. m#L361.
9. Вызывается метод bat chedBr i dge. enqueueJSCal l ,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ b2f 3a65eab1b6cad5d287c4546bc1cc6b741ea9f / React / Base/ RCTBr i dge. m#L366.
10. Вызыввается метод r eact I nst ance- >cal l JSFunct i on к уда передается имя модуля RCTEvent Emi t t er , название метода r ecei veTouches и арг ументы метода,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ f 46eaa30cf e987cf a61d4580335bd4364d5b5707/ React / CxxBr i dge/ RCTCxxBr i dge. mm#L1002 .
11. Вызывается метод nat i veToJsBr i dge_- >cal l Funct i on( ) к уда передаются параметры cal l back,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ f 46eaa30cf e987cf a61d4580335bd4364d5b5707/ React Common/ cxxr eact / I nst ance. cpp#L123 .
12. Запрос встает в очередь и вызывается метод execut or >cal l Funct i on( ) . Здесь уже execut or напрямую зависит от платформы и используется необходимый раннер
j s, ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 62210531792f d3f 07ebc0aeef a19d37ebc7da707/ React Common/ cxxr eact / Nat i veToJsBr i dge. cpp#L145 . Интерфейс
execut or имеет базовое описание этог о метода,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 34bc6bd2aec77f 730c43403c0625c74cec945e57/ React Common/ cxxr eact / Execut or . h#L75 .
13. Потом через br i dge событие попадает в RCTEvent Emi t t er . r ecei veTouches,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 6be550d85c29a6ded32dcf e1330577c202da9073/ Li br ar i es/ Render er / React Nat i veSt ack- pr od. j s#L699 .

IVГлава
framesПредел
49

Кирпичная стена #1
54
Ск орость и плавность работы приложения мог ут зависеть
от ск орости выполнения к ода в j s t hr ead

55
Решение #1
r e que s t Ani ma t i onFr a me

→
5
// ...
class LockedScene extends Component {
// render() {}, ...
componentDidMount() {
const {colors} = this.props;
setInterval(() => {
const index = this.state.index + 1 >= colors.length
? 0 : this.state.index + 1;
this.setState({index, color: colors[index]});
}, 100);
}
onPress(e) {
let sum = 0;
for (let i = 0; i < 1000000000; i++) {
sum += 1;
}
this.setState({text: ' !'Спасибо });
}
}
// ...

5
→
// ...
class LockedScene extends Component {
// render() {}, componentDidMount(){}, ...
onPress(e) {
const limit = 1000000000;
this.process(limit, limit / 100, 0, 0, () => {
this.setState({text: ' !'Спасибо });
});
}
process(limit, batch, step, sum, callback) {
for (let i = 0; i < batch; i++) {
sum += 1;
}
if (limit - batch * (step + 1) > 0) {
return requestAnimationFrame(() =>
this.process(limit, batch, step + 1, sum, callback));
}
return callback();
}
}
// ...

58
Решение #2
Конце пция We b Wor ke r

60
// . . .
import { Worker } from 'rn-workers';
class LockedScene extends
Component {
// re nde r() {}, . . .
componentDidMount() {
this.worker = new Worker();
this.worker.onmessage = (text) => {
this.setState({text});
};
// 1 0 0смена цвета каждые мс
// se tInte rval(() = > {. . . }, 1 0 0 );
}
onPress(e) {
this.worker.po stMe ssag e ('execute');
}
}
// . . .
import { WorkerService } from 'rn-workers'
const message = ' web worker!'Спасибо от ;
const worker = new WorkerService();
worker.onmessage = message => {
if (message === 'execute') {
let sum = 0;
for (let i = 0; i < 1000000000; i++) {
sum += 1;
}
worker.po stMe ssag e (message);
}
};
i ndex. wor ker . j sndex. i os. j s

VГлава
bridgeПредел
63

66
Недостаточная ск орость общения поток ов через br i dge

67
import React, { Component } from 'react';
import { requireNativeComponent } from 'react-native';
const RNSwipeable = requireNativeComponent('RNSwipeable', null);
export default class Swipeable extends Component {
render() {
return (
<RNSwipeable>
{this.props.children}
</RNSwipeable>
);
}
}

VIГлава
Предел реализации
68

70
Отсутсвие необходимых к омпонентов

71
Решение
На йт и или с де ла т ь опт има льное для ва с ре ше ние

ndex. andr oi d. j s
72
// ...
const monthNames = [“ "Января , /* ... */ " "Декабря ];
export default class extends Component {
// render() {}
async showPicker() {
try {
const {value, minimum, onPick} = this.props;
const {action, year, month, day} =
await DatePickerAndroid.open({/* ... */});
action !== DatePickerAndroid.dismissedAction
&& onPick(new Date(year, month, day));
} catch (error) {
app.reporter.trace(error);
}
}
onButtonPress() {
this.showPicker();
}
}
// ...
export default class extends Component {
render() {
const {value, minimum, onPick}
= this.props;
return (
<DatePickerIOS
mode="date"
date={value}
minimumDate={minimum}
onDateChange={onPick}/>
);
}
}
i ndex. i os. j s

VIIГлава
Заключение
73

74
- Познак омить с r eact nat i ve тех, к то не знак ом.
- Поделиться своим опытом разработк и на r eact nat i ve.
- Дать представление, г де к ончаются возможности r eact nat i ve.

Примечания к слайдам - #1
76
#6 - Rambl er &Co, интернет- холинг , ht t ps: / / r ambl er - co. r u.
#7 - Lent a. r u, медийный портал, ht t ps: / / l ent a. r u.
#19 - 9 Top JavaScr i pt Fr amewor ks For Mobi l e App Devel opment ,
ht t ps: / / dzone. com/ ar t i cl es/ 9- t op- j avascr i pt - f r amewor ks- f or - mobi l e- app- devel op.
- 5 Most Popul ar Fr amewor ks f or MD,
ht t ps: / / medi um. com/ @eduoshaun/ 5- most - popul ar - f r amewor ks- f or - mobi l e- devel opment - 4089f f bf 536f .
#20 - Kot l i n, st at i cal l y t yped pr ogr ammi ng l anguage, ht t p: / / kot l i nl ang. or g/ .
- Haxe, t he cr oss- pl at f or m t ool ki t , ht t p: / / haxe. or g/ .
- LUA, a l i ght wei ght mul t i - par adi gm pr ogr ammi ng l anguage, ht t p: / / www. l ua. or g/ about . ht ml .
#21 - Cor dova, mobi l e devel opment f r amewor k, ht t ps: / / cor dova. apache. or g/ docs/ en/ l at est / gui de/ over vi ew/ i ndex. ht ml .
- PhoneGAP, f r amewor k based on Cor dova, ht t p: / / phonegap. com/ .
- I oni c, sdk f or devel opi ng nat i ve and pr ogr essi ve web apps, ht t p: / / i oni cf r amewor k. com/ .
- Monaca, cr oss- pl at f or m hybr i d mobi l e app devel opment pl at f or m, ht t ps: / / monaca. i o/
- React Nat i ve, mobi l e apps wi t h r eact , ht t ps: / / f acebook. gi t hub. i o/ r eact - nat i ve/ .
- Xamar i n, cr oss- pl at f or m devel opment sof t war e, ht t ps: //www. xamari n. com/.
- Met eor , devel opment pl at f or m, a col l ect i on of l i br ar i es and packages, ht t p: / / j oshowens. me/ what - i s- met eor - j s/ .
- React nat i ve + Met eor ,
ht t ps: / / medi um. com/ handl ebar - l abs/ r eact - nat i ve- met eor - r eact - nat i ve- met eor - vs- met eor - cl i ent - bundl er - f 7597442ed0.
- Expo, pl at f or m whi ch uses React Nat i ve, expo. i o.
#22 - Uni t y 3D, мног оплатформенный иг ровой движок , ht t ps: / / uni t y3d. com/ r u/ uni t y/ .
- Unr eal Engi ne, power f ul cr eat i on engi ne, ht t ps: / / www. unr eal engi ne. com/ what - i s- unr eal - engi ne- 4.
- Mar mel ade, cr oss- pl at f or m sol ut i on f or game devel oper s, ht t p: / / docs. madewi t hmar mal ade. com/ di spl ay/ MD/ Home.
- I oni c Cr eat or , a si mpl e dr ag- &- dr op t ool f or goi ng f r om i dea t o App St or e, ht t p: / / i oni c. i o/ pr oduct s/ cr eat or .
- Xcode, I nt er f ace Bui l der , ht t ps: / / devel oper . appl e. com/ xcode/ .
#28 - Act i vi t yI ndi cat or , к омпонент индик атора ак тивности,
ht t ps: / / f acebook. gi t hub. i o/ r eact - nat i ve/ docs/ act i vi t yi ndi cat or . ht ml .

Примечания к слайдам - #2
77
#32 - Act i vi t yI ndi cat or , к омпонент индик атора ак тивности,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 0. 45- st abl e/ Li br ar i es/ Component s/ Act i vi t yI ndi cat or / Act i vi t yI ndi cat or . j s .
- r equi r eNat i veComponent , возвращает обертк у для нативног о к омпонента,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 0. 45- st abl e/ Li br ar i es/ React Nat i ve/ r equi r eNat i veComponent . j s .
- cr eat eReact Nat i veComponent Cl ass, создает обертк у для нативног о к омпонента,
ht t ps: / / gi t hub. com/ f acebook/ r eact - nat i ve/ bl ob/ 0. 45- st abl e/ Li br ar i es/ Render er / sr c/ r ender er s/ nat i ve/ cr eat eReact Nat i veComponent Cl
.
#36 - Cr eat e nat i ve UI component i n React Nat i ve,
ht t ps: / / medi um. com/ i bm- wat son- devel oper - cl oud/ cr eat e- nat i ve- ui - component - i n- r eact - nat i ve- 6f 4b7f e4cc95.
- React Nat i ve: I nt o a new wor l d of r api d i OS devel opment ,
ht t ps: / / www. i bm. com/ devel oper wor ks/ l i br ar y/ mo- bl uemi x- r eact - nat i ve- i os8/ i ndex. ht ml .
#38 - JavaScr i pt Cor e, ht t ps: / / devel oper . appl e. com/ r ef er ence/ j avascr i pt cor e.
#40 - Br i dgi ng i n React Nat i ve, ht t ps: / / t adeuzagal l o. com/ bl og/ r eact - nat i ve- br i dge/ .
#57 - Br eaki ng up Heavy Pr ocessi ng i n React Nat i ve,
ht t ps: / / cor bt . com/ post s/ 2015/ 12/ 22/ br eaki ng- up- heavy- pr ocessi ng- i n- r eact - nat i ve. ht ml .
#59 - Bar bar i c basi cs: web wor ker s, ht t ps: / / www. bar bar i anmeet scodi ng. com/ bl og/ 2015/ 02/ 13/ bar bar i c- basi cs- web- wor ker s/ .
#60 - Package r eact - nat i ve- wor ker s ( r eact nat i ve > v0. 41) , ht t ps: / / gi t hub. com/ f abr i ci over gal / r eact - nat i ve- wor ker s .
#65 - Per f or mance Li mi t at i ons of React Nat i ve and How t o Over come Them,
ht t ps: / / medi um. com/ @t al kol / per f or mance- l i mi t at i ons- of - r eact - nat i ve- and- how- t o- over come- t hem- 947630d7f 440.
- React Nat i ve Per f or mance — An Updat ed Exampl e,
ht t ps: / / hacker noon. com/ r eact - nat i ve- per f or mance- an- updat ed- exampl e- 6516bf de9c5c .

Используемое media
78
#1 - Fr ame by Yu l uck, ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=f r ame&i =687953.
#12 - Ti me by Ki di l adon, ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=i t %27s%20t i me&i =1015010.
#13 - Li br ar y by Cr eat i ve St al l , ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=l i br ar y&i =132522.
- Cl oud by Fl or ent , ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=Obscur i t y&i =134694.
- Super her o by Juan Pabl o Br avo, ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=good%20man&i =23556.
#17 - St ar t up Launch by Anat ol i i Babi i , ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=begi n&i =325893.
#30 - Submar i ne by H Al ber t o Gongor a, ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=submar i ne&i =747771.
#35 - Видеопроек тор, ht t p: / / nat al ex84. l i vej our nal . com/ 352356. ht ml .
#49 - Movi e by Ant on Gaj dosi k, ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=negat i ve&i =568434.
#63 - Br i dge by Cr eat i ve Mani a, ht t ps: / / t henounpr oj ect . com/ sear ch/ ?q=br i dge&i =1033647.

79
Контак ты, ссылк и по теме
и сама презентация
Адрес для любых вопросов
и предложений
i am@kondr at enko. me
Кондратенк о Павел
http://kondratenko.me/speeches/frontendconf
react native?Где кончается

Где кончается react native? / Павел Кондратенко (Rambler&Co)

More Related Content

What's hot (20)

Similar to Где кончается react native? / Павел Кондратенко (Rambler&Co) (20)

More from Ontico (20)

Где кончается react native? / Павел Кондратенко (Rambler&Co)

Editor's Notes