React Native: Under the Hood

Transcript

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