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

React Native - cross-platform mobile app development

AppFoundry
February 16, 2018

React Native - cross-platform mobile app development

AppFoundry

February 16, 2018
Tweet

More Decks by AppFoundry

Other Decks in Technology

Transcript

  1. React Native:
    cross-platform mobile
    app development

    View full-size slide

  2. Your host
    Senne Van Cauwenberge
    Android & React Native Consultant
    [email protected]
    @appfoundry

    View full-size slide

  3. What to expect:
    ◦ The origins of React Native
    ◦ The 0s and 1s of React Native
    ◦ Hands-on lab
    ◦ ?
    ◦ Profit!
    React Native

    View full-size slide

  4. The origins of React Native
    ◦ Hackathon in 2013 @
    ◦ React JS
    ◦ Van closed naar open-source
    ◦ v0.0.1 – maart 2015
    ◦ v.0.11 – september 2015

    View full-size slide

  5. The origins of React Native
    ◦ Februari 2016: # commits extern > intern
    2015 - 2016

    View full-size slide

  6. The origins of React Native
    https://octoverse.github.com

    View full-size slide

  7. The origins of React Native

    View full-size slide

  8. The 0s and 1s of React Native

    View full-size slide

  9. The 0s and 1s of React Native
    0: Write Once, Run Anywhere
    1: Learn Once, Write Anywhere

    View full-size slide

  10. The 0s and 1s of React Native
    0: gemakkelijk en snel voor meerdere
    platformen tegelijkertijd ontwikkelen
    1: gemakkelijk en snel voor een specifiek
    platform ontwikkelen
    “Different platforms have different looks, feels, and capabilities, and as
    such, we should still be developing discrete apps for each platform, but
    the same set of engineers should be able to build applications for
    whatever platform they choose, without needing to learn a
    fundamentally different set of technologies for each.”
    - Tom Occhino

    View full-size slide

  11. The 0s and 1s of React Native
    0: WebViews – using React
    1: Native counterparts, platform specific
    components
    React JavaScriptCore
    Higher-level
    platform-specific
    components
    “The bridge”
    10/10 would not
    recommend

    View full-size slide

  12. The 0s and 1s of React Native
    0: , , ,
    1: , , ,

    View full-size slide

  13. Coding Example
    The 0s and 1s of React Native
    import React, { Component } from 'react'
    import { Text, View } from 'react-native'
    class UIComponentsSample extends Component {
    render() {
    return (

    If you like React on the web, you'll like React Native.

    You just use native components like 'View' and 'Text', instead of web
    components like 'div' and 'span'.


    );
    }
    }
    ...
    render() {
    return (





    );
    }

    render() {
    return (




    );
    }

    View full-size slide

  14. The 0s and 1s of React Native
    0: classNames & pure CSS
    1: style objecten in JavaScript

    View full-size slide

  15. Coding Example
    The 0s and 1s of React Native
    import React, { Component } from 'react';
    import { Text, View, StyleSheet } from 'react-native'
    class WhatsYourStyle extends Component {
    render() {
    return (

    Some red text.
    Some big text in blue.

    Some big bold blue text overwritten to red.


    Some text styled inline to be huge and green.


    )
    }
    }
    const styles = StyleSheet.create({
    bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30
    },
    red: {
    color: 'red'
    }
    })

    View full-size slide

  16. The 0s and 1s of React Native
    0: JavaScript + Native code
    1: JavaScript + Native Code

    View full-size slide

  17. The 0s and 1s of React Native
    0: Windows supported
    1: Windows not supported

    View full-size slide

  18. Hands-on lab

    View full-size slide

  19. Hands-on lab
    ◦ Setup
    ◦ Routing/Navigation
    ◦ Containers
    ◦ Components
    ◦ Native modules
    ◦ Testing
    ◦ Deployment
    ◦ Follow-up

    View full-size slide

  20. Hands-on: Setup
    ◦ $ node –v (min. v6)
    ◦ $ npm install -g create-react-native-app
    of
    $ yarn global add create-react-native-app
    ◦ $ create-react-native-app rn-intro
    ◦ Emulator / Simulator / Device
    ◦ $ npm install -g react-native-cli (niet verplicht)
    ◦ OS X: $ brew install watchman (mss nodig)

    View full-size slide

  21. $ node –v
    $ npm install -g create-react-native-app
    of
    $ yarn global add create-react-native-app
    $ create-react-native-app rn-intro
    Hands-on: Setup
    Create React Native App
    ◦ Minimal ‘Time to Hello World”
    ◦ Test anywhere (emu/sim/device)
    ◦ 1 build tool (no xcode/android studio/..)
    ◦ No lock-in (“eject”-able om zelf controle te nemen)
    ◦ Expo

    View full-size slide

  22. $ node –v
    $ npm install -g create-react-native-app
    of
    $ yarn global add create-react-native-app
    $ create-react-native-app rn-intro
    Hands-on: Setup
    Expo
    ◦ Injecteert eigen SDK met native modules
    ◦ Audio, Bluetooth, Contacts, Location, MapView, …
    ◦ Klein nadeel: delayed releases
    ◦ Build tool (via Expo of stand-alone)
    ◦ Via Expo app overal testbaar
    ◦ Guides/documentatie

    View full-size slide

  23. Hands-on: Setup
    ◦ $ create-react-native-app rn-intro
    ◦ $ cd /rn-intro

    View full-size slide

  24. Create React Native App
    ◦ $ npm start
    ◦ $ npm test
    ◦ $ npm run ios
    ◦ $ npm run android
    ◦ $ npm run eject (onomkeerbaar!)
    Hands-on: Setup

    View full-size slide

  25. ◦ $ npm start
    ◦ Developer menu
    ◦ Reload: refresh JavaScript
    shortcut RR / ⌘ R
    ◦ Debug JS Remotely: Chrome -
    React Developer Tools
    ◦ Live Reload: ipv manueel
    ◦ Hot Reload: ipv full reload
    ◦ Inspector: overlay om UI
    elementen te inspecteren
    ◦ Perf Monitor: fps
    Hands-on: Setup

    View full-size slide

  26. Hands-on: Routing
    ◦ Setup
    Routing/Navigation
    ◦ Containers
    ◦ Components
    ◦ Native modules
    ◦ Testing
    ◦ Deployment
    ◦ Follow-up

    View full-size slide

  27. Hands-on: Routing
    React Native Navigation
    ◦ 100% Native
    ◦ Wix engineering
    ◦ ~setup
    React Navigation
    ◦ Native/JavaScript mix
    ◦ Expo
    React Native Router Flux
    ◦ React Navigation + Flux Patroon

    View full-size slide

  28. React Navigation
    ◦ StackNavigator – TabNavigator – DrawerNavigator
    ◦ Redux
    ◦ Deep linking (rnapp://return/item)
    ◦ Screen tracking (analytics)
    ◦ Configurable
    ◦ Customizable
    ◦ Documentatie soms wat vaag
    Hands-on: Routing

    View full-size slide

  29. Hands-on: Routing
    StackNavigator
    ◦ npm install react-navigation –save
    ◦ https://reactnavigation.org

    View full-size slide

  30. Hands-on lab
    ◦ Setup
    ◦ Routing/Navigation
    Containers
    Components
    ◦ Native modules
    ◦ Testing
    ◦ Deployment
    ◦ Follow-up

    View full-size slide

  31. Hands-on lab
    Containers
    ◦ Logica (smart)
    ◦ Stateful
    ◦ Data handling
    ◦ Higher-order Components
    ◦ Redux, Relay, Flux, MobX
    ◦ Vb: SideBarContainer,
    HeaderContainer, UserList, …
    Components
    ◦ Geen logica (dumb)
    ◦ Stateless
    ◦ Data receiving
    ◦ Vb: SideBarItem, HeaderTitle,
    HeaderIcon, UserListItem, …

    View full-size slide

  32. Hands-on lab
    Top-down data flow
    HomeScreen
    Form
    Name field
    Header
    Greeting
    message

    View full-size slide

  33. Hands-on lab
    ◦ Setup
    ◦ Routing/Navigation
    ◦ Containers
    ◦ Components
    Native modules
    ◦ Testing
    ◦ Deployment
    ◦ Follow-up

    View full-size slide

  34. Hands-on lab
    ◦ Setup
    ◦ Routing/Navigation
    ◦ Containers
    ◦ Components
    ◦ Native modules
    Testing
    ◦ Deployment
    ◦ Follow-up

    View full-size slide

  35. Hands-on: Testing
    Jest
    ◦ React Native OG
    ◦ Eenvoudige setup
    ◦ Snapshots
    ◦ Auto-migrate
    ◦ Ook voor Web frameworks
    Redux, Angular, Vue,
    MobX

    View full-size slide

  36. Hands-on: Testing
    Detox
    ◦ end-to-end testing
    ◦ Emulator
    ◦ iOS, Android soon™
    ◦ Werkt niet op sommige versies van React Native

    View full-size slide

  37. Hands-on lab
    ◦ Setup
    ◦ Routing/Navigation
    ◦ Containers
    ◦ Components
    ◦ Native modules
    ◦ Testing
    Deployment
    ◦ Follow-up

    View full-size slide

  38. Hands-on: Deployment
    Deployment
    ◦ Expo account nodig
    ◦ app.json: naam, splash, icon, scheme, keys, …
    ◦ App / Play store: stand-alone builds (beta)
    ◦ $ exp start
    ◦ $ exp build:
    ◦ Expo:
    ◦ $ exp publish
    ◦ Silent remote updates

    View full-size slide

  39. Hands-on lab
    ◦ Setup
    ◦ Routing/Navigation
    ◦ Containers
    ◦ Components
    ◦ Native modules
    ◦ Testing
    ◦ Deployment
    Follow-up

    View full-size slide

  40. Hands-on: Follow-up
    Follow-up
    ◦ Analytics
    ◦ Firebase Analytics
    ◦ Fabric.io
    ◦ Error-tracking
    ◦ Sentry
    ◦ Crashlytics (Fabric.io)
    ◦ Firebase Crash Reporting

    View full-size slide

  41. Hands-on: Follow-up
    Follow-up
    ◦ Updates
    ◦ Expo
    ◦ CodePush
    ◦ New builds

    View full-size slide

  42. The magical world of NPM
    JS.coach

    View full-size slide

  43. Questions?
    Senne Van Cauwenberge
    Android & React Native Consultant
    [email protected]
    @appfoundry

    View full-size slide