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 Slide

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

    View Slide

  3. AppFoundry

    View Slide

  4. View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  9. The origins of React Native

    View Slide

  10. The 0s and 1s of React Native

    View Slide

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

    View Slide

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

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

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

  20. Hands-on lab

    View Slide

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

    View Slide

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

  23. $ 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 Slide

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

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

    View Slide

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

    View Slide

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

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  44. The magical world of NPM
    JS.coach

    View Slide

  45. ..?
    Profit!

    View Slide

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

    View Slide

  47. View Slide

  48. Thank you!

    View Slide