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 Slide

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

    View Slide

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

    View Slide

  4. View Slide

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

    View Slide

  6. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. View Slide

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

    )}

    );
    4. Facebook in 2013 (ReactJS)

    View Slide

  12. UI = f (data)

    View Slide

  13. 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 Slide

  14. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    );
    }
    }


    2. ReactJS (Declarative)

    View Slide

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


    3. ReactJS (Declarative)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. react-native

    (UIKit)
    react
    smartive App

    View Slide

  24. 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 Slide

  25. 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 Slide

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

    View Slide

  27. 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 Slide

  28. 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 Slide

  29. JS
    Runtime
    React Native

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

    View Slide

  30. 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 Slide

  31. View Slide

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

    View Slide

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

    View Slide

  34. .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 Slide

  35. View Slide

  36. Cheers
    Cheers
    @_deniaz

    View Slide