React Native @ Airbnb

This presentation was originally given by Leland Richardson and myself at the Bay Area Android Developer Meetup group at August 23rd, 2016 @ the LinkedIn SF office.

Meetup original link:
http://www.meetup.com/bayareaandroid/events/233316337/

Talk video:
https://www.youtube.com/watch?v=S6GdvVQB39Y&feature=youtu.be&t=24m

Transcript

1. React Native @ Airbnb
   FELIPE LIMA & LELAND RICHARDSON
   

   View Slide

2. Why React Native?
   

   View Slide

3. We build Airbnb 3 times
   

   View Slide

4. We build Airbnb 3 times
   

   View Slide

5. JavaScript Core
   VM
   Native UI
   Platform
   

   View Slide

6. View Slide

7. Developer
   Experience
   

   View Slide

8. User
   Experience
   Developer
   Experience
   

   View Slide

9. User
   Experience
   Developer
   Experience
   Web
   Native Mobile
   React Native
   Developer
   Experience
   User
   Experience
   Web
   Native
   RN
   

   View Slide

10. Live Reload
    

    View Slide

11. View Slide

12. Code Push
    

    View Slide

13. Code Push
    - OTA updates
    - Hot Fixes
    - Experimentation
    - Continuous Deployment
    

    View Slide

14. View Slide

15. Type Safety
    

    View Slide

16. Performance
    

    View Slide

17. Misconceptions
    

    View Slide

18. Does the JS compile to native code?
    No.
    

    View Slide

19. Does the JS runs in a web view?
    No.
    

    View Slide

20. What if I want to use the platform’s
    latest API’s?
    Use them!
    

    View Slide

21. How does it work?
    

    View Slide

22. Bridge
    JavaScript Core
    VM
    Native UI
    Platform
    Layout
    Rendering
    Gestures
    Application Logic
    UI Description
    

    View Slide

23. Shadow
    JSC
    Main
    Gesture / Interaction
    

    View Slide

24. Shadow
    JSC
    Main
    Gesture / Interaction
    React Render
    

    View Slide

25. Shadow
    JSC
    Main
    Gesture / Interaction
    React Render Diff
    

    View Slide

26. Shadow
    JSC
    Main
    Gesture / Interaction
    React Render
    Layout
    Diff
    

    View Slide

27. Shadow
    JSC
    Main
    Gesture / Interaction
    React Render
    Layout
    Render
    Diff
    

    View Slide

28. Shadow
    JSC
    Main
    Gesture / Interaction
    React Render
    Layout
    Render
    Diff
    16 ms
    

    View Slide

29. React
    

    View Slide

30. UI = f(state)
    

    View Slide

31. import React from 'react';
    class HelloWorld extends React.Component {
    render() {
    return (
    
    
    Hello World
    
    
    );
    }
    }
    

    View Slide

32. import React from 'react';
    import { View, Text } from 'react-native';
    class HelloWorld extends React.Component {
    render() {
    return (
    
    
    Hello World
    
    
    );
    }
    }
    

    View Slide

33. import {
    View,
    Text,
    Image,
    ScrollView,
    TextInput,
    ListView,
    MapView,
    ...
    } from 'react-native';
    

    View Slide

34. import React from 'react';
    import { View, Text } from 'react-native';
    class HelloWorld extends React.Component {
    render() {
    return (
    
    
    Hello World
    
    
    );
    }
    }
    

    View Slide

35. import React from 'react';
    import { View, Text } from 'react-native';
    class HelloWorld extends React.Component {
    render() {
    return {
    type: View,
    props: null,
    children: [{
    type: Text,
    props: null,
    children: ['Hello World'],
    }],
    };
    }
    }
    

    View Slide

36. import React from 'react';
    import { View, Text } from 'react-native';
    class HelloWorld extends React.Component {
    render() {
    return (
    
    
    Hello World
    
    
    );
    }
    }
    

    View Slide

37. import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    class HelloWorld extends React.Component {
    render() {
    return (
    
    
    Hello World
    
    
    );
    }
    }
    const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    },
    message: {
    fontSize: 28,
    fontColor: '#222222',
    },
    });
    

    View Slide

38. const styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    },
    message: {
    fontSize: 28,
    fontColor: '#222222',
    },
    });
    {
    container: {
    top: 0,
    left: 0,
    width: 370,
    height: 600,
    },
    message: {
    top: 280,
    left: 125,
    width: 120,
    height: 40,
    },
    }
    

    View Slide

39. import React from 'react';
    import { View, Text } from 'react-native';
    class HelloWorld extends React.Component {
    render() {
    return (
    
    
    Hello World
    
    
    );
    }
    }
    

    View Slide

40. import React from 'react';
    import { View, Text } from 'react-native';
    class HelloUser extends React.Component {
    render() {
    return (
    
    
    Hello, {this.props.name}
    
    
    );
    }
    }
    

    View Slide

41. import React from 'react';
    import { View } from 'react-native';
    import HelloUser from './HelloUser';
    class HelloApp extends React.Component {
    render() {
    const { user } = this.props;
    return (
    
    
    
    );
    }
    }
    

    View Slide

42. Native Modules
    

    View Slide

43. class AccountModule extends ReactContextBaseJavaModule {

    AccountModule(ReactApplicationContext reactContext) {

    super(reactContext);

    }

    

    @Override

    public String getName() {

    return "AccountBridge";

    }

    

    @Override

    public Map getConstants() {

    return Collections.emptyMap();

    }
    @ReactMethod

    public void setUserLocation(String location) {

    currentUser.setLocation(location);

    }

    

    @Subscribe

    public void loginStatusChanged(AuthStateEvent lse) {

    ReactApplicationContext context = getReactApplicationContext();

    context.getJSModule(RCTDeviceEventEmitter.class)

    .emit("airbnb.accountUpdated", toWritableMap(getData()));

    }

    }
    

    View Slide

44. class ReactAirImageManager extends SimpleViewManager {

    @Override

    public String getName() {

    return "RCTImageView";

    }

    

    @Override

    protected ReactAirImageView createViewInstance(ThemedReactContext context) {

    return new ReactAirImageView(context, null);

    }

    

    @ReactProp(name = "src")

    public void setSource(ReactAirImageView view, @Nullable ReadableArray sources) {

    view.setSource(sources);

    }

    

    @ReactProp(name = "borderColor", defaultInt = Color.TRANSPARENT, customType = "Color")

    public void setBorderColor(ReactAirImageView view, int borderColor) {

    view.setBorderColor(Color.RED);

    }
    }
    

    View Slide

45. I’ll believe it
    when I see it…
    

    View Slide

46. Thank You
    Leland Richardson
    @intelligibabble
    Felipe Lima
    @felipecsl
    

    View Slide

47. View Slide