Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native: Under the Hood

React Native: Under the Hood

Alexander Kotliarskyi

June 09, 2015
Tweet

More Decks by Alexander Kotliarskyi

Other Decks in Programming

Transcript

  1. Plan 1. Why native apps matter? 2. How ReactJS works

    3. Running ReactJS on native platforms
  2. Building native apps is hard • Different stacks of technologies

    • No knowledge and code sharing • Slow iteration speed • Hard to scale
  3. 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!
  4. Web apps on the phone are not great • Very

    hard to provide smooth experiences • Not designed for complex interactions • Impossible to embed native components
  5. render()  {      return  (        

     div(              span(                  'Count:  '  +  b(this.state.count)              ),              button(                  'Add  +1'              )          )      )   }
  6. render()  {      return  (        

     <div>              <span>                  Count:  <b>{this.state.count}</b>              </span>              <button>                  Add  +1              </button>          </div>      )   } HTML VirtualDOM
  7. render()  {      return  (        

     <div>              <span>                  Count:  <b>{this.state.count}</b>              </span>              <button  onClick={()  =>  ???  }>                  Add  +1              </button>          </div>      )   }
  8. 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');
  9. render()  {      var  count  =  this.state.count;    

     return  (          <div>              <span>                  Count:  <b>{count}</b>              </span>              <button  onClick={()  =>  ???  }>                  Add  +1              </button>          </div>      )   }
  10. 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
  11.      <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';
  12. <div>   <span>   <img> <View>   <Text>   <Image>

    <ScrollView>   <MapView>   <TabBar>   <DatePicker>   ... Base components
  13. 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
  14.    render()  {          return  (  

               <View  style={styles.container}>                  <Text  style={styles.value}>                      {this.state.count}                  </Text>                  <Button                      title="Add  +1"                      onPress={()  =>  this.inc()}                  />              </View>          );      }
  15.    inc()  {          var  newCount  =

     this.state.count  +  1;          this.setState({count:  newCount});          fetch(              'https://api.conunter.io/',              {                  method:  'post',                  body:  'value='  +  newCount              }          );      }
  16. 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:  ...}])
  17. function  call(moduleName,  methodName,  args)  {      MessageQueue.init();    

           var  module  =  require(moduleName);      module[methodName].apply(module,  args);            return  MessageQueue.flush();   } //  EventEmitter //  receiveTouches Message
 queue
  18.    inc()  {          var  newCount  =

     this.state.count  +  1;          this.setState({count:  newCount});          fetch(              'https://api.conunter.io/',              {                  method:  'post',                  body:  'value='  +  newCount              }          );      }
  19.          <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
  20. NativeModules.UIManager  =  {      ...      update:  function(viewID,

     attributes)  {          MessageQueue.push(              ['UIManager',  'update',  [viewID,  attributes]]          );      }      ...   }; Message
 queue UIManager
 update  ..
  21.    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    ....
  22. 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    ....
  23. 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    ....
  24. Native [UIManager updateView:18 props:@{@"text": @"43"}] addUIBlock:^() { UILabel *label =

    viewRegistry[18]; label.text = @"43"; [label markAsDirty]; }
  25. { margin: 20, borderBottomWidth: 2, flex: 1, alignContent: 'center', }

    { left: 120, top: 220, width: 60, height: 60, } Flexbox Coordinates
  26. 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
  27. 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