React Native — Webnesday #9

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

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