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

React Native — Webnesday #9

Robert Vogt
November 09, 2016

React Native — Webnesday #9

Slides for my talk about React Native at Webnesday #9 in St. Gallen.

Robert Vogt

November 09, 2016
Tweet

More Decks by Robert Vogt

Other Decks in Programming

Transcript

  1. React Native
    React Native
    #webnesday — November 2016

    View full-size slide

  2. Robert Vogt
    Robert Vogt
    Software Engineer at smartive.ch
    @_deniaz

    View full-size slide

  3. 1. History
    2. React
    3. React Native
    4. Live Example

    View full-size slide

  4. $str = '';
    foreach ($talks as $talk) {
    $str += '' . $talk->name . '
    li>';
    }
    $str += '';
    1. Facebook in 2004 (PHP)

    View full-size slide

  5. $content = ;
    foreach ($talks as $talk) {
    $content->appendChild({$talk-
    >name} />);
    }
    2. Facebook in 2010 (XHP)

    View full-size slide

  6. $talkList = ;
    foreach ($talks as $talk) {
    $talkList->appendChild(/>);
    }
    3. Facebook in 2010 (XHP)

    View full-size slide

  7. «Welp, I’m going to take
    XHP to the browser within
    six months.»
    — Jordan Walke, Facebook /
    ReactJS

    View full-size slide

  8. var content = (
    {talks.map(talk =>

    )}

    );
    4. Facebook in 2013 (ReactJS)

    View full-size slide

  9. UI = f (data)

    View full-size slide

  10. function f(name) {
    var div = document.createElement('div');
    var p = document.createElement('p');
    p.textContent = 'Hello ' + name ? name :
    'World';
    div.appendChild(p);
    return div;
    }

    var node = f('Webnesday');
    document.getElementById('my-
    app').replaceWith(node);

    View full-size slide

  11. $(document).on('message.new', (e, data) => {
    let $msg = $('.messages');
    $msg.prepend(`New: ${data.message}`);
    });
    1. jQuery (Imperative)

    View full-size slide

  12. $(document).on('message.new', () => {
    let $count = $('.notifications__count');
    let currentCount = parseInt($count.text(),
    10);
    $count.text(++currentCount);
    });
    2. jQuery (Imperative)

    View full-size slide

  13. const state = {
    unread: 1,
    messages: [{
    id: 43,
    body: 'Hallo!',
    sender: 'Alice'
    }, {
    id: 42,
    body: 'Hoi :)',
    sender: 'Bob'
    }]
    };
    1. ReactJS (Declarative)

    View full-size slide

  14. class TalkList extends React.Component {
    render () {
    return (

    {props.messages.map((message) => (
    {message.sender} says: {message.body}
    )}

    );
    }
    }


    2. ReactJS (Declarative)

    View full-size slide

  15. class Counter extends React.Component {
    render () {
    const { count } = this.props;
    return (
    {count}
    );
    }
    }


    3. ReactJS (Declarative)

    View full-size slide

  16. const state = {
    unread: 2,
    messages: [{
    id: 44,
    body: 'Wie
    gehts!',
    sender: 'Alice'
    }, {
    id: 43,
    body: 'Hallo!',
    sender: Alice'
    }]
    };
    4. ReactJS (Declarative)

    View full-size slide

  17. «It turns out, ‘good
    enough’ wasn’t good
    enough.»
    — Mark Zuckerberg, 2012

    View full-size slide

  18. react-dom
    (DOM)
    react
    www.smartive.ch

    View full-size slide

  19. react-native

    (UIKit)
    react
    smartive App

    View full-size slide

  20. class Hello extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    name: 'World'
    };
    }
    render() {
    return (

    ref={(c) => this._input = c}
    type="text"
    placeholder="Your Name"
    onChange={() => this.setState({ name:
    this._input.value })}
    />
    Hello {this.state.name}!

    );
    }
    }

    View full-size slide

  21. class Hello extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
    name: 'World'
    };
    }
    render() {
    return (

    ref={(c) => this._input = c}
    placeholder="Your Name"
    onChange={() => this.setState({ name:
    this._input.value })}
    />

    Hello {this.state.name}!

    );
    }
    }

    View full-size slide

  22. title="My Button"
    onPress={onButtonPressed}
    />

    View full-size slide

  23. Components
    ActivityIndicator
    Button
    DatePickerIOS
    DrawerLayoutAndroid
    Image
    ListView
    MapView
    Modal
    Navigator
    Picker
    ProgressBarAndroid
    ProgressViewIOS
    RefreshControl
    ScrollView
    Slider
    SnapshotViewIOS
    StatusBar
    Switch
    TabBarIOS
    Text
    TextInput
    TouchableHighlight
    TouchableNativeFeedback
    TouchableOpacity
    TouchableWithoutFeedback
    View
    WebView
    APIS
    Alert
    Animated
    AppState
    AsyncStorage
    BackAndroid
    CameraRoll
    Clipboard
    Dimensions
    Geolocation
    ImageEditor
    ImageStore
    Keyboard
    Linking
    NetInfo
    PanResponder
    PushNotificationIOS
    Settings
    StyleSheet
    ToastAndroid
    Vibration

    View full-size slide

  24. React Native Community
    Quality code from the React Native Community
    github.com/react-native-community
    react-native-svg
    react-native-elements
    react-native-blur
    react-native-tab-view
    react-native-video
    react-native-navbar
    react-native-side-menu

    View full-size slide

  25. JS
    Runtime
    React Native

    JS API
    Custom App Code
    Android SDK
    Custom View
    Manager
    iOS SDK
    RN Bridge

    View full-size slide

  26. Native
    Bridge
    JavaScript
    1
    2
    3
    4 5
    6
    8
    7
    Event
    (touch, timer, networks, …)
    Collect data and notify JS
    Serialized payload
    Process event Call native methods
    Update UI
    if needed
    Process commands
    Serialized response

    View full-size slide

  27. $ brew install node
    $ brew install watchman
    $ npm install -g react-native
    Xcode AND/OR Gradle + Android Emulator

    View full-size slide

  28. ! A Word Of Warning
    Fun on OS X macOS, not so much on Linux / Windows.

    View full-size slide

  29. .babelrc
    android
    index.android.j
    s
    index.ios.js
    ios
    node_modules
    package.json
    src
    !"" app.js
    $ react-native init
    WebnesdayApp
    $ cd WebnesdayApp
    $ react-native run-ios

    View full-size slide

  30. Cheers
    Cheers
    @_deniaz

    View full-size slide