Tadeu Zagallo, Facebook, London — React Native Architecture Overview

Tadeu Zagallo, Facebook, London — React Native Architecture Overview

Tadeu Zagallo, Facebook, London — React Native Architecture Overview

Software Engineer at Facebook who works on React Native performance. He will talk about React Native architecture and best practices to get all the benefits of using the platform.

5799a3c0434b91ef7e00e730629390f0?s=128

React Amsterdam

April 21, 2016
Tweet

Transcript

  1. REACT NATIVE Internals @tadeuzagallo #reactamsterdam

  2. ABOUT Me @tadeuzagallo #reactamsterdam

  3. @tadeuzagallo #reactamsterdam

  4. WHAT HAPPENS WHEN YOU TYPE A URL INTO YOUR BROWSER

    AND PRESS ENTER? @tadeuzagallo #reactamsterdam
  5. @tadeuzagallo #reactamsterdam

  6. @tadeuzagallo #reactamsterdam

  7. What HAPPENS WHEN YOU RUN A React Native APP? @tadeuzagallo

    #reactamsterdam
  8. @tadeuzagallo #reactamsterdam

  9. ▸ No WebView ▸ No HTML ▸ No CSS @tadeuzagallo

    #reactamsterdam
  10. @tadeuzagallo #reactamsterdam

  11. @tadeuzagallo #reactamsterdam

  12. @tadeuzagallo #reactamsterdam

  13. import React, { Component, } from 'react'; import { AppRegistry,

    Text, } from 'react-native'; class SampleApp extends Component { render() { return ( <Text style={{ margin: 40 }}> Hello, World! </Text> ); } } AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam
  14. @tadeuzagallo #reactamsterdam

  15. @tadeuzagallo #reactamsterdam

  16. @tadeuzagallo #reactamsterdam

  17. @implementation MyNativeModule RCT_EXPORT_MODULE() @end @tadeuzagallo #reactamsterdam

  18. @implementation MyNativeModule + (NSString *)moduleName { return @""; } +

    (void)load { RCTRegisterModule(self); } @end @tadeuzagallo #reactamsterdam
  19. @tadeuzagallo #reactamsterdam

  20. @tadeuzagallo #reactamsterdam

  21. { "remoteModuleConfig":[ // [ $moduleName, $exportedConstants:{}? $methods:[]?, $asyncIndexes:[]? ] ["RCTStatusBarManager",["getHeight","setStyle","setHidden","setNetworkActivityIndicatorVisible"]],

    ["RCTSourceCode",{"scriptURL":"http:\/\/localhost:8081\/index.ios.bundle?platform=ios&dev=true"},["getScriptText"],[0]], ["RCTAlertManager",["alertWithArgs"]], ["RCTExceptionsManager",["reportSoftException","reportFatalException","updateExceptionMessage","reportUnhandledException"]], // ... ] } @tadeuzagallo #reactamsterdam
  22. @tadeuzagallo #reactamsterdam

  23. VM Basics @tadeuzagallo #reactamsterdam

  24. @tadeuzagallo #reactamsterdam

  25. @tadeuzagallo #reactamsterdam

  26. @tadeuzagallo #reactamsterdam

  27. @tadeuzagallo #reactamsterdam

  28. @tadeuzagallo #reactamsterdam

  29. // import React, { // Component, // } from 'react';

    // // import { // AppRegistry, // Text, TouchableHighlight, // } from 'react-native'; // // class SampleApp extends Component { onPress() { alert('Hello, World!'); } // render() { // return ( <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}> <Text> Button </Text> </TouchableHighlight>; // ); // } // } // // AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam
  30. @tadeuzagallo #reactamsterdam

  31. @tadeuzagallo #reactamsterdam

  32. @tadeuzagallo #reactamsterdam

  33. @tadeuzagallo #reactamsterdam

  34. @tadeuzagallo #reactamsterdam

  35. class SampleApp extends Component { onPress() { -> alert('Hello, World!');

    } ... } @tadeuzagallo #reactamsterdam
  36. if (Platform.OS === 'ios') { AlertIOS.alert(title, message, buttons); } else

    if (Platform.OS === 'android') { AlertAndroid.alert(title, message, buttons); } @tadeuzagallo #reactamsterdam
  37. @tadeuzagallo #reactamsterdam

  38. @tadeuzagallo #reactamsterdam

  39. @tadeuzagallo #reactamsterdam

  40. @tadeuzagallo #reactamsterdam

  41. // import React, { // Component, // } from 'react';

    // // import { // AppRegistry, // Text, // TouchableHighlight, // } from 'react-native'; // // class SampleApp extends Component { // onPress() { Alert.alert('Hello, World!', 'Press ok to alert again', [ { text: 'Ok', onPress() { alert('Ok!') } }, { text: 'Cancel', onPress() { alert('Cancel') } }, ]); // } // render() { // return ( // <TouchableHighlight style={{ margin: 40 }} onPress={this.onPress}> // <Text> // Button // </Text> // </TouchableHighlight>; // ); // } // } // // AppRegistry.registerComponent('SampleApp', () => SampleApp); @tadeuzagallo #reactamsterdam
  42. @tadeuzagallo #reactamsterdam

  43. @tadeuzagallo #reactamsterdam

  44. @tadeuzagallo #reactamsterdam

  45. Thank you @tadeuzagallo #reactamsterdam