React Native
Gwen Faraday
- Developer at Ion Three - Mobile, Web
- Free Code Camp Indy
- Mobile Experience:
- Ionic
- Cordova
- Phonegap
- jQuery Mobile
- React Native
- Dabbled in Swift/Java
Case for Javascript in Mobile
- Mobile Development is expensive
- Swift/Java aren't optimized for dev Productivity
- Easier Support for Multiple Platforms
-
Reuse:
- Skills
- Code
- Personal
Hybrid Apps
- Webview using HTML5 and Javascript
- Wrapped in a native container
Why Do People Still Prefer Native?
LinkedIn, Facebook
Tried Hybrid Solutions, but...
- It was slow
-
Not enough good tools
- Performance monitoring
- Debugging/Diagnostics
- Memory exhaustion -> App crashes
- Animations weren't smooth
- Neither was touch tracking
- And so on...
But there are problems with NATIVE too!
So, what's the solution?
(Cost, Dev Time, Productivity...)
What is React Native?
- Javascript for Native Development
- Based on React Framework
- "Learn Once, Build Anywhere"
- Not Entirely Native,
- But Not Hybrid Either
- Almost completely native look/feel
- UI
- Touch
- Navigation
- Integrations
- *Performance
React Native
FEELS Native...
... and has a web-like dev experience
How is it native?
Runs on a background thread.
Sends minimal code to main thread.
Benefits and Problems it Solves
- Developer Productivity
- Developer Experience
- User Experience (Compared to Hybrid)
- Code Reuse Across Web and Mobile
- Async Performance
Setting Up
- Install Node, Watchman, React Native CLI Globally
- Android Studio and/or Xcode
Detailed Instructions:
Getting Started
$ react-native init amEco$ react-native run-ios$ react-native run-android
Basic Flow of a React Native App
Babel
DEMO
Code Reuse
- Logic
- Styles
- Components
- Web apps written in React
- HTML/CSS/JS
- iOS and Android
Microsoft Code Push - Instant Updates
Apple's Terms:
Can only push over the air updates through the JavascriptCore.
Companies Using React Native
- Facebook/Instagram
- Wix
- Airbnb
- Baidu
- Discord
- Soundcloud
Example - Wix
Example - Discord
"As a native iOS developer, I strongly doubted using web technologies to build mobile apps... but I am glad we made that decision."
- v 1 built in two weeks on the existing front-end infrastructure.
- Flexbox’s style code much shorter and easier to understand than the code of Auto Layout.
- iOS app and web app share 98% of the code of store and actions.
Links
- React Native Playgroud
- Codepen (look up React)
- List of Boilerplates
- Awesome List
- Component Catalogue
Libraries
Questions
?
Thanks for Coming!
React Native
By gwenf
