Build mobile app with React Nativejohn@mingle
Agenda
What is React NativeChallenges when build niche appsDemo: Market AppQ&A
React Native
React Native
Challenges when build niche apps
● Dynamic UI without lose performances ● App size● Complicated code-base
TRIED OUT A LOT (Navtive vs Hybrid)
React Native
Android2012
iOS2013
IONIC 12015
IONIC 22016
React Native2016
React Native
IONIC 1 (2015–2016)
● Missing piece of Cordova ● Super fast for prototyping ● UI elements are not native ● Problems with native components● Performance on Android ● Angula
React Native
IONIC 2 (2016)
● Component oriented (like RN) ● Add Electron support, Android Material,
Windows UI ● Improved structure and Navigation● Long waiting for stable version, breaking
changes ● Painful debugging ● Performance limitations
React Native
REACT NATIVE (2016 and later)
● Native experience● Multi-platform
○ iOS, Android (WUP, Desktop, web) ● Used by AirBNB, Facebook, Instagram, Vogue● Functional programming ● Easy to debug ● Huge community (+/-)
https://goo.gl/QMh3jK
React Native
LIVE RELOAD
React Native
CODE PUSH
● OTA updates● Hot fixes ● Experimentation● Continuous Deployment
React Native
MISCONCEPTIONS
React Native
DOES THE JS COMPILE TO NATIVE CODE?
NO
React Native
DOES THE JS RUNS IN A WEB VIEW?
NO
React Native
What if i want to use the platform’s latest API’s?
Just do it
React Native
How does it work
React Native
How does it work
Main
JSC
Shadow
Gesture/ Interaction
React Render Diff
Layout
Render
16 ms
React Native
REACT JS
● Just is View (Library)● Declarative● Component-Based● Learn Once, Write Anywhere
A Simple Component
React Native
Redux
● Evolves the ideas of Flux● Redux is a predictable state container
for JavaScript apps.● It is tiny (2kB, including dependencies).● Reactjs, AngularJS, Swift
React Native
HUGE COMMUNITY
● You have to choose components wisely● Find components on JS.coach● Choose by stars, issues, docs, demos, PR● No complete UI framework like Ionic:
○ Native Base ○ Material Kit
● Lot of interesting libraries:○ Lottie, Airbnb Maps
React Native
EXAMPLES:
AirBnB Map Lottie
React Native
MORE SOURCES TO SEE
● Articles:○ ReactJS x React Native http://bit.ly/2oywqGg○ RN @ Instagram (http://bit.ly/2oVmkf4) ○ iOS dev toolset (http://bit.ly/2oEOc86)
● Newsletter: React Native Newsletter (http://reactnative.cc) ● Platform: Expo (https://expo.io) ● Stack: Ignite (https://github.com/infinitered/ignite) ● Presentation: RN @ Airbnb (http://bit.ly/2oxEzek)
Demo
React Native
React Native
Market RN
● Marketplace● Stack: ES6,Redux, Native-base, Eslint Reactotron● CI/CD: Fastlane, Bitrise, Hockeyapp
React Native
PROPBLEM:
● First time explores● 20* screens● Redux is hard● Android build● Performance
Thanks for listeningQ&A