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.

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
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