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.

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