How we built a Market App with React Native

1. Build mobile app with
React Native
john@mingle

2. Agenda
What is React Native
Challenges when build niche apps
Demo: Market App
Q&A

3. React Native

4. React Native
Challenges when build niche apps
● Dynamic UI without lose performances
● App size
● Complicated code-base

5. TRIED OUT A LOT (Navtive vs Hybrid)
React Native
Android
2012
iOS
2013
IONIC 1
2015
IONIC 2
2016
React Native
2016

6. 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

7. 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

8. 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

9. React Native
LIVE RELOAD

10. React Native
CODE PUSH
● OTA updates
● Hot fixes
● Experimentation
● Continuous Deployment

11. React Native
MISCONCEPTIONS

12. React Native
DOES THE JS COMPILE TO NATIVE CODE?
NO

13. React Native
DOES THE JS RUNS IN A WEB VIEW?
NO

14. React Native
What if i want to use the platform’s latest API’s?
Just do it

15. React Native
How does it work

16. React Native
How does it work
Main
JSC
Shadow
Gesture/
Interaction
React
Render
Diff
Layout
Render
16 ms

17. React Native
REACT JS
● Just is View (Library)
● Declarative
● Component-Based
● Learn Once, Write Anywhere
A Simple Component

18. 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

19. 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

20. React Native
EXAMPLES:
AirBnB Map Lottie

21. 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)

22. Demo
React Native

23. React Native
Market RN
● Marketplace
● Stack: ES6,Redux, Native-base, Eslint Reactotron
● CI/CD: Fastlane, Bitrise, Hockeyapp

24. React Native
PROPBLEM:
● First time explores
● 20* screens
● Redux is hard
● Android build
● Performance

25. Thanks for listening
Q&A