Slide 1
Slide 1 text
React Native:
Under the hood
Alex Kotliarskyi
Facebook
Slide 2
Slide 2 text
Plan
1. Why native apps matter?
2. How ReactJS works
3. Running ReactJS on native platforms
Slide 3
Slide 3 text
Why do we
❤
native apps?
Slide 4
Slide 4 text
Native Apps
• Fast, responsive
• Complex gestures and smooth animations
• Consistent with platform
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Building native apps is hard
• Different stacks of technologies
• No knowledge and code sharing
• Slow iteration speed
• Hard to scale
Slide 7
Slide 7 text
Web got this right
Slide 8
Slide 8 text
Web
• Different stacks of technologies
• No knowledge and code sharing
• Slow iteration speed
• Hard to scale
HTML / CSS / JS
Same code and tech
F5 / ⌘R
React!
Slide 9
Slide 9 text
Web apps on the phone are not great
• Very hard to provide smooth experiences
• Not designed for complex interactions
• Impossible to embed native components
Slide 10
Slide 10 text
Development
experience
Awesome
apps
Slide 11
Slide 11 text
React Native
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
UI = ƒ*(data)
* No side effects
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
UI = ƒ(count)
Slide 16
Slide 16 text
UI = ƒ(count) =
div(
span('Count ' + count),
button('Add +1')
)
Slide 17
Slide 17 text
render()
{
return
(
div(
span(
'Count:
'
+
b(this.state.count)
),
button(
'Add
+1'
)
)
)
}
Slide 18
Slide 18 text
render()
{
return
(
Count:
{this.state.count}
Add
+1
)
}
HTML
VirtualDOM
Slide 19
Slide 19 text
render()
{
return
(
Count:
{this.state.count}
???
}>
Add
+1
)
}
Slide 20
Slide 20 text
TextView
text
=
(TextView)findViewByID(R.layout.label);
text.setText('10');
_label.text
=
@"10"; too complex
Android
Objective-C
JavaScript
document.getElementByID('count').children[1].innerHTML
=
'10';
$('#counter
b').html('10');
Slide 21
Slide 21 text
render()
{
var
count
=
this.state.count;
return
(
Count:
{count}
???
}>
Add
+1
)
}
Slide 22
Slide 22 text
render()
{
var
count
=
this.state.count;
return
(
Count:
{count}
this.setState({count:
count
+
1})}>
Add
+1
)
}
setState
Slide 23
Slide 23 text
setState
Slide 24
Slide 24 text
Count:
9
Add
+1
Count:
10
Add
+1
state
=
{count:
9} state
=
{count:
10}
9
9 10
findDOMNode(b).innerHTML
=
'10';
Slide 25
Slide 25 text
Components
Browser DOM
UIKit
Components Components Components
VirtualDOM
Slide 26
Slide 26 text
1. Runtime
2.Base components
3. Calling native functions
Slide 27
Slide 27 text
ECMAScript 5
Slide 28
Slide 28 text
JavaScript Core
• Part of WebKit project
• Open Source
• Ships with iOS
Runtime
Slide 29
Slide 29 text
Slide 30
Slide 30 text
create(view, parent, attributes)*
update(view, attributes)
delete(view)
* actually React is more complex that that
Slide 31
Slide 31 text
Just call native functions?
nope
Slide 32
Slide 32 text
Synchronous
Slide 33
Slide 33 text
Native Method
JavaScript
time
Waiting…
Slide 34
Slide 34 text
JavaScript
time
Native JavaScript Native
Slide 35
Slide 35 text
Synchronous
Asynchronous
Slide 36
Slide 36 text
Overhead of
every
native call
Slide 37
Slide 37 text
JavaScript
time
Slide 38
Slide 38 text
time
JavaScript
Slide 39
Slide 39 text
Overhead of
every
native call
Batch
native calls
Slide 40
Slide 40 text
Shared
mutable
data
Slide 41
Slide 41 text
Native Objects
JavaScript
Objects
Slide 42
Slide 42 text
Shared
mutable
data
Exchange
serializable
messages
Slide 43
Slide 43 text
Asynchronous
Batched
Serializable
Slide 44
Slide 44 text
The Bridge
Slide 45
Slide 45 text
Native
Bridge
JavaScript
Slide 46
Slide 46 text
Native
Bridge
JavaScript
Event
(touch, timer, networks, etc.)
1
Collect data and notify JS
2
Serialized payload
3
Process event
4
Call 0 – ∞
native methods
5
Update UI
(if needed)
8
Serialized response
6
Process commands
7
Slide 47
Slide 47 text
JS is event-driven
Slide 48
Slide 48 text
Events Commands
Slide 49
Slide 49 text
Example
Slide 50
Slide 50 text
• Updates counter
• Sends data to web service
Slide 51
Slide 51 text
render()
{
return
(
{this.state.count}
this.inc()}
/>
);
}
Slide 52
Slide 52 text
inc()
{
var
newCount
=
this.state.count
+
1;
this.setState({count:
newCount});
fetch(
'https://api.conunter.io/',
{
method:
'post',
body:
'value='
+
newCount
}
);
}
Slide 53
Slide 53 text
Native
UITouch
[_bridge enqueueJSCall:@"EventEmitter.receiveTouches"
args:@[@"end",
@{@"x": @42, @"y": @106}]];
x, y, view, ...
Slide 54
Slide 54 text
Native
Bridge
JavaScript
[
'EventEmitter', 'receiveTouches',
['end', {'x': 42, 'y': 106}]
]
[_bridge enqueueJSCall:@"RCTEventEmitter.receiveTouches"
args:@[@"end",
@{@"x": @42, @"y": @106}]];
call('EventEmitter',
'receiveTouches',
[{x:
42,
y:
...}])
Slide 55
Slide 55 text
function
call(moduleName,
methodName,
args)
{
MessageQueue.init();
var
module
=
require(moduleName);
module[methodName].apply(module,
args);
return
MessageQueue.flush();
}
//
EventEmitter
//
receiveTouches
Message
queue
Slide 56
Slide 56 text
Touch processing
Slide 57
Slide 57 text
What element
should respond
to a given event?
Slide 58
Slide 58 text
Button
Button pressed!
Slide 59
Slide 59 text
Button
Cancelled
Slide 60
Slide 60 text
Button
Cancelled
Scrollview
Slide 61
Slide 61 text
Button
Scrolling stops
Scrollview
Slide 62
Slide 62 text
Button
Scrollview
Horizontal Scrollview
Navigator
Slide 63
Slide 63 text
Responder System
Slide 64
Slide 64 text
onStartShouldSetResponder
onResponderTerminationRequest
onResponderGrant
onResponderMove
onResponderRelease
onResponderTerminate
…
Slide 65
Slide 65 text
onPress
Slide 66
Slide 66 text
inc()
{
var
newCount
=
this.state.count
+
1;
this.setState({count:
newCount});
fetch(
'https://api.conunter.io/',
{
method:
'post',
body:
'value='
+
newCount
}
);
}
Slide 67
Slide 67 text
42
43
42 43
Slide 68
Slide 68 text
var
UIManager
=
require('NativeModules').UIManager;
UIManager.update(18,
{text:
'43'});
Somewhere in React's internals:
Slide 69
Slide 69 text
NativeModules
Slide 70
Slide 70 text
NativeModules.UIManager
=
{
...
update:
function(viewID,
attributes)
{
MessageQueue.push(
['UIManager',
'update',
[viewID,
attributes]]
);
}
...
};
Message
queue
UIManager
update
..
Slide 71
Slide 71 text
inc()
{
var
newCount
=
this.state.count
+
1;
this.setState({count:
newCount});
fetch(
'https://api.conunter.io/',
{
method:
'post',
body:
'value='
+
newCount
}
);
}
Message
queue
UIManager
update
..
DataManager
query
....
Slide 72
Slide 72 text
function
call(moduleName,
methodName,
args)
{
MessageQueue.init();
var
module
=
require(moduleName);
module[methodName].apply(module,
args);
return
MessageQueue.flush();
}
Message
queue
UIManager
update
..
DataManager
query
....
Slide 73
Slide 73 text
Native
Bridge
JavaScript
[UIManager updateView:18 props:@{@"text": @"43"}]
[DataManager query:@"post" url:@"http://..."]
[
['UIManager', 'update', [18, {text: '43'}]],
['DataManager', 'query', ['post', 'http://...']]
]
Message
queue
UIManager
update
..
DataManager
query
....
Slide 74
Slide 74 text
Native
[UIManager updateView:18 props:@{@"text": @"43"}]
addUIBlock:^() {
UILabel *label = viewRegistry[18];
label.text = @"43";
[label markAsDirty];
}
Slide 75
Slide 75 text
Layout
Layout
github.com/facebook/css-layout
Slide 76
Slide 76 text
{
margin: 20,
borderBottomWidth: 2,
flex: 1,
alignContent: 'center',
}
{
left: 120,
top: 220,
width: 60,
height: 60,
}
Flexbox Coordinates
Slide 77
Slide 77 text
• User taps the button
• Counter is updated
Slide 78
Slide 78 text
Native
Bridge
JavaScript
Event
(touch, timer, networks, etc.)
1
Collect data and notify JS
2
Serialized payload
3
Process event
4
Call 0 – ∞
native methods
5
Serialized response
6
Process commands
7
Update UI
(if needed)
8
Slide 79
Slide 79 text
Benefits
Slide 80
Slide 80 text
Fast
Slide 81
Slide 81 text
Native
Bridge
JavaScript
Event
(touch, timer, networks, etc.)
1 Update UI
(if needed)
8
Collect data and notify JS
2
Serialized payload
3
Process event
4
Call 0 – ∞
native methods
5
Serialized response
6
Process commands
7
Slide 82
Slide 82 text
Record / Replay
Slide 83
Slide 83 text
Flexible JS runtime
Slide 84
Slide 84 text
Native
Bridge
JavaScript
Slide 85
Slide 85 text
Native
Bridge
JavaScript
Awesome App
Slide 86
Slide 86 text
Native
Bridge
JavaScript
Awesome App
WebKit process
IPC
Slide 87
Slide 87 text
Native
Bridge
JavaScript
Awesome App
Chrome Debugger
WebSockets
Slide 88
Slide 88 text
Live demo iPhone -> Chrome
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Heroku
iPhone
Slide 92
Slide 92 text
Streaming
Slide 93
Slide 93 text
No content
Slide 94
Slide 94 text
UI = ƒ(data)
Slide 95
Slide 95 text
Thank you!
github.com/frantic/tlv-2015
@alex_frantic