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
   

   View Slide

2. ABOUT Me
   @tadeuzagallo #reactamsterdam
   

   View Slide

3. @tadeuzagallo #reactamsterdam
   

   View Slide

4. WHAT HAPPENS WHEN
   YOU TYPE A URL INTO YOUR BROWSER
   AND PRESS ENTER?
   @tadeuzagallo #reactamsterdam
   

   View Slide

5. @tadeuzagallo #reactamsterdam
   

   View Slide

6. @tadeuzagallo #reactamsterdam
   

   View Slide

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

   View Slide

8. @tadeuzagallo #reactamsterdam
   

   View Slide

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

   View Slide

10. @tadeuzagallo #reactamsterdam
    

    View Slide

11. @tadeuzagallo #reactamsterdam
    

    View Slide

12. @tadeuzagallo #reactamsterdam
    

    View Slide

13. import React, {
    Component,
    } from 'react';
    import {
    AppRegistry,
    Text,
    } from 'react-native';
    class SampleApp extends Component {
    render() {
    return (
    
    Hello, World!
    
    );
    }
    }
    AppRegistry.registerComponent('SampleApp', () => SampleApp);
    @tadeuzagallo #reactamsterdam
    

    View Slide

14. @tadeuzagallo #reactamsterdam
    

    View Slide

15. @tadeuzagallo #reactamsterdam
    

    View Slide

16. @tadeuzagallo #reactamsterdam
    

    View Slide

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

    View Slide

18. @implementation MyNativeModule
    + (NSString *)moduleName { return @""; }
    + (void)load { RCTRegisterModule(self); }
    @end
    @tadeuzagallo #reactamsterdam
    

    View Slide

19. @tadeuzagallo #reactamsterdam
    

    View Slide

20. @tadeuzagallo #reactamsterdam
    

    View Slide

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
    

    View Slide

22. @tadeuzagallo #reactamsterdam
    

    View Slide

23. VM
    Basics
    @tadeuzagallo #reactamsterdam
    

    View Slide

24. @tadeuzagallo #reactamsterdam
    

    View Slide

25. @tadeuzagallo #reactamsterdam
    

    View Slide

26. @tadeuzagallo #reactamsterdam
    

    View Slide

27. @tadeuzagallo #reactamsterdam
    

    View Slide

28. @tadeuzagallo #reactamsterdam
    

    View Slide

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

    View Slide

30. @tadeuzagallo #reactamsterdam
    

    View Slide

31. @tadeuzagallo #reactamsterdam
    

    View Slide

32. @tadeuzagallo #reactamsterdam
    

    View Slide

33. @tadeuzagallo #reactamsterdam
    

    View Slide

34. @tadeuzagallo #reactamsterdam
    

    View Slide

35. class SampleApp extends Component {
    onPress() {
    -> alert('Hello, World!');
    }
    ...
    }
    @tadeuzagallo #reactamsterdam
    

    View Slide

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

    View Slide

37. @tadeuzagallo #reactamsterdam
    

    View Slide

38. @tadeuzagallo #reactamsterdam
    

    View Slide

39. @tadeuzagallo #reactamsterdam
    

    View Slide

40. @tadeuzagallo #reactamsterdam
    

    View Slide

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 (
    //
    //
    // Button
    //
    // ;
    // );
    // }
    // }
    //
    // AppRegistry.registerComponent('SampleApp', () => SampleApp);
    @tadeuzagallo #reactamsterdam
    

    View Slide

42. @tadeuzagallo #reactamsterdam
    

    View Slide

43. @tadeuzagallo #reactamsterdam
    

    View Slide

44. @tadeuzagallo #reactamsterdam
    

    View Slide

45. Thank you
    @tadeuzagallo #reactamsterdam
    

    View Slide