React Native

Slides on React Native presented at charmCityJS

Transcript

1. HOW TO GET RICH IN 2 MONTHS BY BUILDING A MOBILE APP / / / Eric Sauter github.com/esauter5 @theEricSauter Peach Labs
2. YOU HAVE A GREAT APP IDEA...
3. TINDER FOR PAIR PROGRAMMING
4. This idea is going to make you billions. Now you just have to implement it real quick and cash in...
6. After 2 months of heads down learning about Objective-C and doing tutorials and reading books about iOS development...
7. And after a whole lot of these...
8. TINDER FOR PAIR PROGRAMMING
10. You're a web developer, stupid! Time to go back to your strengths! We'll just build some type of hybrid app with a WebView wrapper...
11. This is going to be great! It's only been a month and I'm ready to release my app. I'm even releasing an Android version!
12. 2 WEEKS AFTER RELEASE...
13. EVERYONE HATES MY APP Everyone knows it's not really native and questions my abilities as a developer
14. ALL HOPE IS LOST
17. REACT NATIVE MOBILE DEVELOPMENT DOESN'T HAVE TO SUCK / / Eric Sauter github.com/esauter5 @theEricSauter Peach Labs
18. Let's take a step back for a second What's the problem here?
19. We're Web/JavaScript developers, but we aren't going to replicate native experiences with only web technologies
20. NATIVE APPS On the ground floor Better experience Better performance Intimidating new language Tons of APIs and nuances specific to the platform Slow development process HYBRID/WEB APPS Comfortable and experienced Easily replicate on multiple platforms Fast development process Difficult to replicate native experience APIs may be limited Performance ↑ React Native
21. WHAT IS REACT NATIVE? Facebook’s open source solution to building NATIVE applications with JavaScript and React Currently supports iOS with an Android version coming soon A familiar way to build native apps
22. HOW DOES IT WORK? Built on React.js Uses JavaScriptCore (on a separate thread) Write UI in JavaScript with React components Virtual DOM targets native iOS components rather than the browser DOM Native views instantiated over an asynchronous bridge
23. WHAT DOES IT LOOK LIKE?
24. FEATURES
25. BUILT ON REACT Declarative Component-based Virtual DOM Backed by native iOS components
26. STYLING & LAYOUT Inline styles Layouts with Flexbox ( ) flexboxin5.com
27. COMPONENTS & APIS
28. EXTENSIBILITY Export native modules and views for use in JavaScript
29. TOUCH HANDLING
30. ANIMATIONS
31. A BETTER DEVELOPER EXPERIENCE Fast reloading Live reload option Chrome debugger ES6/7 support with Babel FPS Monitor
32. THE FUTURE More pre-built components React Native for Android React drives views and rendering on more platforms Bypass app store approval process ???
33. IN THE WILD DropBot DiscoveryVR facebook.github.io/react-native/showcase.html
34. QUESTIONS?