React Native - cross-platform mobile app development

Talk by Senne Van Cauwenberge.
Code: https://github.com/appfoundry/academy-react-native-intro/tree/master/februari-2018

Transcript

1. React Native:
   cross-platform mobile
   app development
   

   View Slide

2. Your host
   Senne Van Cauwenberge
   Android & React Native Consultant
   senne.vancauwenberge@appfoundry.be
   @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
    senne.vancauwenberge@appfoundry.be
    @appfoundry
    

    View Slide

47. View Slide

48. Thank you!
    

    View Slide