React Native allows developers to build native mobile apps using JavaScript and React. It uses the same basic codebase to build apps for iOS and Android. While React Native simplifies development and allows sharing of code between platforms, it still lacks many features required for large, complex apps. Additional libraries and tools are needed to add capabilities like state management, debugging, and deployment. Choosing React Native involves tradeoffs between cross-platform needs and native app capabilities that developers must consider for their specific projects and timelines.

1. React Native?
A developer's perspective
GenevaWeb, November 19, 2018 - Boris Conforty

2. I have an idea
My boss has an idea
I want to explore and find an idea
I want to learn and find a job
I need and app for my multi-billion people user base

3. I am a developer*
I want to become a developer*
I want to hire a developer*
I'm just curious about technology*
I'm Facebook
* mobile

5. The Google Joongle
Hundreds of opinions and stories
Tens of tools
Numerous languages

6. Go native ⟶ Xcode, Android Studio
Go cross-platform ⟶ hybrid (HTML 5)

7. Richest Man in the Jungle
"The biggest mistake we made as a company was betting
too much on HTML5 as opposed to native"
M. Zuckerberg, 2012

8. Out of the Jungle
Facebook decides to go "close-to-native"
Cross-platform of course

9. React Native
iOS and Android apps built on a Mac, Windows or Linux
Facebook, 2013
Public and open source since 2015
Currently being ported to macOS, Windows, Ubuntu, the
web, and others

10. React
JavaScript library to build user interfaces
Facebook, 2011
Open source since 2013
Widely used in the web

11. React
Web
JSX* ⟶ DOM elements
React Native
Mobile
JSX* ⟶ Native views
* JavaScript eXtension

12. JavaScript
One of the most accessible and popular programming
languages
Dates back to Netscape, 1995
Initially used by web browsers only
Now widely used on servers and in mobile apps

13. What can I do with React Native?
Everything a native app can do

14. Hello World
Download and install Xcode and Xcode
command line tools
Download and install JDK and
Android Studio

15. $ brew install node
$ brew install watchman
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject

16. $ react-native run-ios

17. $ react-native run-android

18. JavaScript ⟶ App.js, index.js
JavaScript Tools ⟶ Babel, Flow
Libraries ⟶ Node, yarn
Packager/Build ⟶ Buck, Watchman
Native ⟶ Android, iOS
Other ⟶ Git

19. Hello World
Tutorial by Facebook
https://facebook.github.io/react-native/docs/getting-started.html

20. Hello Real World
Read
Documentation
Tutorials
Blog posts, articles
Experiment
Hello Planet
Hello Universe
Hello My App At Last

21. Your JavaScript Third-Party JavaScript
React Library
Bridge
Bridge
React Library
Your Native Code Third-Party Native Code
Native SDK

22. Your JavaScript Third-Party JavaScript
React Library
Bridge
Bridge
React Library
Your Native Code Third-Party Native Code
Native SDK

23. Your JavaScript Third-Party JavaScript
React Library
Bridge
Bridge
React Library
Your Native Code Third-Party Native Code
Native SDK

24. "JavaScript lacks plenty of important features required to
adequately write and maintain massive applications"

25. Analyze source code to
flag programming errors,
bugs, stylistic errors,
and suspicious
constructs

26. Plugins
Flow
ESLint
Others
Editors
Atom
Visual Studio Code
Others

27. Flow? TypeScript?
None? Other?
Atom? Visual Studio Code?
Other?
ESLint? JSLint? JSHint?
None? Other?
Boilerplate configuration?
Personalized?
My App React Native

28. React Native lacks plenty of important features required to
adequately write and maintain real applications

29. Redux
"Redux is a predictable state container for JavaScript apps"
Saga
"An alternative side effect model for Redux apps"

30. Other Third-Party Packages
Navigation
Proper table view
Vector icons
Support for iPhone X series
Many others

31. React Native lacks plenty of important features required to
adequately debug applications

32. Hello Real World
Debug Native Code
Xcode
Android Studio
Debug JavaScript
Chrome
Editor with plugins
Reactotron

33. Gold Standards
JavaScript "patches" ⟶ No
File organization ⟶ No
Debugging tools ⟶ No
Third-party libraries (a lot!) ⟶ No

34. Hello Good World
JavaScript is "easy"
Very straightforward and satisfactory first tries
Hot reloading
Documentation is not bad
Large community (issues rather than StackOverflow)

35. Difficulty
Time

36. Difficulty
Time

37. Difficulty
Time

38. Difficulty
Time

39. React Native
Updates, Issues
and Package Rebuilds
Tools
Updates and Issues
JavaScript Typing and Linting
Understand, Configure, Update
Third-Party Libraries
Search, Updates, Debug, Fixes
My Code React Native

40. Debugging JavaScript
Relatively easy
Several options
Our choice:
• Visual Studio Code
• Reactotron

41. Debugging Native Code
Relatively easy*
Xcode & Android Studio
* You're a native developer

42. Debugging JavaScript-Native Bridge
Less straightforward
Use both JavaScript and native tools

43. Deployment
To testers
To public (App Store and Play Store)

44. Deployment
To testers
To public (App Store and Play Store)
Of JavaScript code!
Our choice:
• Microsoft App Center

45. Tools - Summary

46. So what
Most of JavaScript code shared between platforms
JavaScript proficiency easy to find
JavaScript proficiency easy to recycle
Native skills* might still be required
* Quite advanced maybe

47. Need for mobile development ⟶ Native SDKs and tools
Need for cross-platform ⟶ Hybrid
Need for close-to-native ⟶ React Native
Need for integrated toolkit ⟶ Flutter

48. 2013 20182017201620152014
React Native
Ionic
Xamarin
Flutter

49. The End
...or The Beginning*
* Good luck!

50. Question
After my presentation, I was asked whether I'd choose
React Native again if I could go a year an a half back in time.
The answer is "yes". If I'd choose React Native now? The
answer is "yes, probably". If I'd choose React Native in a
year? I'll leave that open.