Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native @ Airbnb

felipecsl
September 12, 2016

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

felipecsl

September 12, 2016
Tweet

More Decks by felipecsl

Other Decks in Programming

Transcript

  1. React Native @ Airbnb
    FELIPE LIMA & LELAND RICHARDSON

    View full-size slide

  2. Why React Native?

    View full-size slide

  3. We build Airbnb 3 times

    View full-size slide

  4. We build Airbnb 3 times

    View full-size slide

  5. JavaScript Core
    VM
    Native UI
    Platform

    View full-size slide

  6. Developer
    Experience

    View full-size slide

  7. User
    Experience
    Developer
    Experience

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Misconceptions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. How does it work?

    View full-size slide

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

    View full-size slide

  16. Shadow
    JSC
    Main
    Gesture / Interaction

    View full-size slide

  17. Shadow
    JSC
    Main
    Gesture / Interaction
    React Render

    View full-size slide

  18. Shadow
    JSC
    Main
    Gesture / Interaction
    React Render Diff

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. UI = f(state)

    View full-size slide

  23. import React from 'react';
    class HelloWorld extends React.Component {
    render() {
    return (


    Hello World


    );
    }
    }

    View full-size slide

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


    Hello World


    );
    }
    }

    View full-size slide

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

    View full-size slide

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


    Hello World


    );
    }
    }

    View full-size slide

  27. 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 full-size slide

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


    Hello World


    );
    }
    }

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

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


    Hello World


    );
    }
    }

    View full-size slide

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


    Hello, {this.props.name}


    );
    }
    }

    View full-size slide

  33. 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 full-size slide

  34. Native Modules

    View full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

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

    View full-size slide

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

    View full-size slide