React Native? A developer's perspective
- 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
- 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
- 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
- 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.