React Native - cross-platform mobile app development

103e1ebcacd620770cf32a36b9aba17e?s=47 AppFoundry
February 16, 2018

React Native - cross-platform mobile app development

103e1ebcacd620770cf32a36b9aba17e?s=128

AppFoundry

February 16, 2018
Tweet

Transcript

  1. React Native: cross-platform mobile app development

  2. Your host Senne Van Cauwenberge Android & React Native Consultant

    senne.vancauwenberge@appfoundry.be @appfoundry
  3. AppFoundry

  4. None
  5. What to expect: ◦ The origins of React Native ◦

    The 0s and 1s of React Native ◦ Hands-on lab ◦ ? ◦ Profit! React Native
  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
  7. The origins of React Native ◦ Februari 2016: # commits

    extern > intern 2015 - 2016
  8. The origins of React Native https://octoverse.github.com

  9. The origins of React Native

  10. The 0s and 1s of React Native

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

    Run Anywhere 1: Learn Once, Write Anywhere
  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
  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
  14. The 0s and 1s of React Native 0: <View>, <Text>,

    <ListView>, <Image> 1: <div>, <span>, <li> <ul>, <img>
  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 ( <View> <Text>If you like React on the web, you'll like React Native.</Text> <Text> You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. </Text> </View> ); } } ... render() { return ( <View> <Switch/> <TextInput/> <Slider/> </View> ); } … render() { return ( <View> <ProgressViewIOS/> <ProgressBarAndroid/> </View> ); }
  16. The 0s and 1s of React Native 0: classNames &

    pure CSS 1: style objecten in JavaScript
  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 ( <View> <Text style={styles.red}>Some red text.</Text> <Text style={styles.bigblue}>Some big text in blue.</Text> <Text style={[styles.bigblue, styles.red]}> Some big bold blue text overwritten to red. </Text> <Text style={{color: “green”, fontSize: 30}}> Some text styled inline to be huge and green. </Text> </View> ) } } const styles = StyleSheet.create({ bigblue: { color: 'blue', fontWeight: 'bold', fontSize: 30 }, red: { color: 'red' } })
  18. The 0s and 1s of React Native 0: JavaScript +

    Native code 1: JavaScript + Native Code
  19. The 0s and 1s of React Native 0: Windows supported

    1: Windows not supported
  20. Hands-on lab

  21. Hands-on lab ◦ Setup ◦ Routing/Navigation ◦ Containers ◦ Components

    ◦ Native modules ◦ Testing ◦ Deployment ◦ Follow-up
  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)
  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
  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
  25. Hands-on: Setup ◦ $ create-react-native-app rn-intro ◦ $ cd /rn-intro

  26. Create React Native App ◦ $ npm start ◦ $

    npm test ◦ $ npm run ios ◦ $ npm run android ◦ $ npm run eject (onomkeerbaar!) Hands-on: Setup
  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
  28. Hands-on: Routing ◦ Setup Routing/Navigation ◦ Containers ◦ Components ◦

    Native modules ◦ Testing ◦ Deployment ◦ Follow-up
  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
  30. React Navigation ◦ StackNavigator – TabNavigator – DrawerNavigator ◦ Redux

    ◦ Deep linking (rnapp://return/item) ◦ Screen tracking (analytics) ◦ Configurable ◦ Customizable ◦ Documentatie soms wat vaag Hands-on: Routing
  31. Hands-on: Routing StackNavigator ◦ npm install react-navigation –save ◦ https://reactnavigation.org

  32. Hands-on lab ◦ Setup ◦ Routing/Navigation Containers Components ◦ Native

    modules ◦ Testing ◦ Deployment ◦ Follow-up
  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, …
  34. Hands-on lab Top-down data flow HomeScreen Form Name field Header

    Greeting message
  35. Hands-on lab ◦ Setup ◦ Routing/Navigation ◦ Containers ◦ Components

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

    ◦ Native modules Testing ◦ Deployment ◦ Follow-up
  37. Hands-on: Testing Jest ◦ React Native OG ◦ Eenvoudige setup

    ◦ Snapshots ◦ Auto-migrate ◦ Ook voor Web frameworks Redux, Angular, Vue, MobX
  38. Hands-on: Testing Detox ◦ end-to-end testing ◦ Emulator ◦ iOS,

    Android soon™ ◦ Werkt niet op sommige versies van React Native
  39. Hands-on lab ◦ Setup ◦ Routing/Navigation ◦ Containers ◦ Components

    ◦ Native modules ◦ Testing Deployment ◦ Follow-up
  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:<platform> ◦ Expo: ◦ $ exp publish ◦ Silent remote updates
  41. Hands-on lab ◦ Setup ◦ Routing/Navigation ◦ Containers ◦ Components

    ◦ Native modules ◦ Testing ◦ Deployment Follow-up
  42. Hands-on: Follow-up Follow-up ◦ Analytics ◦ Firebase Analytics ◦ Fabric.io

    ◦ Error-tracking ◦ Sentry ◦ Crashlytics (Fabric.io) ◦ Firebase Crash Reporting
  43. Hands-on: Follow-up Follow-up ◦ Updates ◦ Expo ◦ CodePush ◦

    New builds
  44. The magical world of NPM JS.coach

  45. ..? Profit!

  46. Questions? Senne Van Cauwenberge Android & React Native Consultant senne.vancauwenberge@appfoundry.be

    @appfoundry
  47. None
  48. Thank you!