Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Native Internals

3,095 views

Published on

"What happens when you run a React Native app?"

Traversing the representation graph of the React Native runtime.

Talk given at React Amsterdam 2016

Published in: Software
  • Be the first to comment

React Native Internals

  1. 1. REACT NATIVE Internals @tadeuzagallo #reactamsterdam
  2. 2. ABOUT Me @tadeuzagallo #reactamsterdam
  3. 3. @tadeuzagallo #reactamsterdam
  4. 4. WHAT HAPPENS WHEN YOU TYPE A URL INTO YOUR BROWSER AND PRESS ENTER? @tadeuzagallo #reactamsterdam
  5. 5. @tadeuzagallo #reactamsterdam
  6. 6. @tadeuzagallo #reactamsterdam
  7. 7. What HAPPENS WHEN YOU RUN A React Native APP? @tadeuzagallo #reactamsterdam
  8. 8. @tadeuzagallo #reactamsterdam
  9. 9. ▸ No WebView ▸ No HTML ▸ No CSS @tadeuzagallo #reactamsterdam
  10. 10. @tadeuzagallo #reactamsterdam
  11. 11. @tadeuzagallo #reactamsterdam
  12. 12. @tadeuzagallo #reactamsterdam
  13. 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. 14. @tadeuzagallo #reactamsterdam
  15. 15. @tadeuzagallo #reactamsterdam
  16. 16. @tadeuzagallo #reactamsterdam
  17. 17. @implementation MyNativeModule RCT_EXPORT_MODULE() @end @tadeuzagallo #reactamsterdam
  18. 18. @implementation MyNativeModule + (NSString *)moduleName { return @""; } + (void)load { RCTRegisterModule(self); } @end @tadeuzagallo #reactamsterdam
  19. 19. @tadeuzagallo #reactamsterdam
  20. 20. @tadeuzagallo #reactamsterdam
  21. 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. 22. @tadeuzagallo #reactamsterdam
  23. 23. VM Basics @tadeuzagallo #reactamsterdam
  24. 24. @tadeuzagallo #reactamsterdam
  25. 25. @tadeuzagallo #reactamsterdam
  26. 26. @tadeuzagallo #reactamsterdam
  27. 27. @tadeuzagallo #reactamsterdam
  28. 28. @tadeuzagallo #reactamsterdam
  29. 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. 30. @tadeuzagallo #reactamsterdam
  31. 31. @tadeuzagallo #reactamsterdam
  32. 32. @tadeuzagallo #reactamsterdam
  33. 33. @tadeuzagallo #reactamsterdam
  34. 34. @tadeuzagallo #reactamsterdam
  35. 35. class SampleApp extends Component { onPress() { -> alert('Hello, World!'); } ... } @tadeuzagallo #reactamsterdam
  36. 36. if (Platform.OS === 'ios') { AlertIOS.alert(title, message, buttons); } else if (Platform.OS === 'android') { AlertAndroid.alert(title, message, buttons); } @tadeuzagallo #reactamsterdam
  37. 37. @tadeuzagallo #reactamsterdam
  38. 38. @tadeuzagallo #reactamsterdam
  39. 39. @tadeuzagallo #reactamsterdam
  40. 40. @tadeuzagallo #reactamsterdam
  41. 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. 42. @tadeuzagallo #reactamsterdam
  43. 43. @tadeuzagallo #reactamsterdam
  44. 44. @tadeuzagallo #reactamsterdam
  45. 45. Thank you @tadeuzagallo #reactamsterdam

×