Apps for Android and iOS with React Native

Apps for Android and iOS with React Native

Slides for a talk given at code.talks 2017 in Hamburg, one of the largest developer conferences in Germany.

https://www.codetalks.de

In this talk, three main challenges with native app development are presented: vast differences between platforms (Android and iOS), slow feedback cycles during development and difficulties to get started with building apps.

React Native solves these issues and you'll learn how to build apps in the browser with Expo Snack and on your dev machine with create-react-native-app.

8977eabcedbade28ba0ebe0062e41c68?s=128

Erik Behrends

September 29, 2017
Tweet

Transcript

  1. APPS FOR ANDROID AND IOS WITH REACT NATIVE Erik Behrends

    www.behrends.io @behrends
  2. 51.000.000 2.100.000.000 Sources: Statista, Bitkom
 https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/ 
 https://www.bitkom.org/Presse/Anhaenge-an-PIs/2016/Bitkom-Pressekonferenz-Smartphone-Markt-Konjunktur-und-Trends-16-02-2016-Praesentation-final.pdf 
 Image

    Credit: Jordan McQueen (https://unsplash.com/photos/kt_s46DVgJA) Number of smartphone users (2016)
  3. TWO RELEVANT PLATFORMS TO TARGET 17% 34% D USA Source:

    Kantar Worldpanel http://www.kantarworldpanel.com/global/smartphone-os-market-share/ 82% 65%
  4. WEB (BROWSER) OR HYBRID (WEBVIEW)? Build one app to target

    both platforms - good enough? limited capabilities and possibly subpar experience (touch, sensors, look&feel, animations at 60 FPS) PWAs are promising but not quite there yet
  5. Java (Kotlin, …) Android SDK Layout mit XML … Swift

    (Objective-C, …) iOS SDK AutoLayout, InterfaceBuilder … SO LET'S BUILD A NATIVE APP…
  6. SO LET'S BUILD A NATIVE APP… Significant differences between both

    platforms ➔ most likely two teams to coordinate …and how can I get started anyway?
  7. https://www.xkcd.com/303

  8. REACT NATIVE TO THE RESCUE ! cross platform native apps

    with JavaScript " fast feedback cycle during development # very easy to get started (soon enough it get's harder)
  9. REACT NATIVE PLAYGROUND IN THE BROWSER

  10. https://repl.it/site/react_native

  11. https://snack.expo.io Expo Snack

  12. None
  13. None
  14. Format with Prettier.js

  15. import from third party modules change version number in comment

  16. http://native.directory Filter for projects available for Expo (Snack)

  17. EXPO SNACK – NOT JUST FOR NEWBS Learn and teach

    React Native
 no setup needed, great for workshops/classes Prototyping
 let's have a quick look how a feature looks (on Android/iOS) Isolated experiments
 I want to know how a certain component works Demos, presentations, show & tell
 discuss a feature with team/customer https://snack.expo.io
  18. EXPO SNACK – NOT JUST FOR NEWBS Bug reports
 show

    how a defect can be reproduced Embed into web page
 enhance documentation with interactive example Build your own snack
 see https://repl.it/site/react_native 
 (sdk for snack: https://github.com/expo/snack-sdk) More cool stuff coming soon
 user profiles, multiple files/folders, import/export https://snack.expo.io
  19. GET STARTED WITH REACT NATIVE ON YOUR DEV MACHINE –

    IN MINUTES
  20. NEXT STEP – CREATE REACT NATIVE APP CRNA – create

    new projects for React Native on your dev machine works without native development tools 
 (Android Studio/SDK and XCode) you can develop iPhone apps on Linux/Windows! 
 (just need an iPhone with Expo App installed to test your app) inspired by Create React App
  21. CRNA – SETUP Dev machine with Node.js and git, then

    install CRNA with npm: npm install -g create-react-native-app Android/iOS device with Expo App (free in AppStore, open source) that's it.
  22. CREATE AND TEST A NEW APP PROJECT create-react-native-app MyNewProject cd

    MyNewProject npm start 
 #(this launches the React Native Packager) open Expo App on smartphone and scan QR code to open app in Expo on simulator (iOS) or emulator (Android): npm run ios npm run android
  23. Dev machine JavaScript-Code in Editor React Native Packager (based on

    Node.js) Change
 code Save file JavaScript code is delivered to Expo app Our app Other app Other app 2 Smartphone and dev machine need to be in the same network. Expo connects to dev machine via QR code or URL. ... Expo App provides native components
  24. REACT NATIVE – BEYOND MOBILE not limited to Android/iOS: $

    Apple TV, Windows (UWP), React VR, … % React Native Web, … & ➞ universal components and react primitives https://github.com/airbnb/react-sketchapp
  25. iOS UIView SCNetworkReachability UIImageView Layout in iOS JavaScript Android Bridge

    android.widget.View Universal Windows Platform … additional platforms possible … View android.net.NetworkInfo android.widget.ImageView Layout in Android … cross-platform abstractions Image NetInfo StyleSheet
  26. REACT NATIVE – MAIN BENEFITS ! native Android and iOS

    apps and more " fast feedback with Live Reload and Hot Reloading # get started quickly with Expo Snack and CRNA
  27. GET STARTED browser based tutorial at https://repl.it/site/react_native tutorial at http://facebook.github.io/react-native/docs/tutorial.html

    next steps with CRNA and Expo: tutorials, blogs, video courses,…???
  28. GET STARTED or you can get my book ' you'll

    learn the relevant basics 
 ES6/ES.next essentials, React concepts, React Native components you'll build a non trivial app for Android and iOS with 
 camera, location, local storage, navigation, touch and animation need help with React Native? get in touch!
  29. MANY THANKS ( www.behrends.io ) erik@behrends.io * @behrends early 2018