Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build a real app with react native

137 views

Published on

How we built a Market App with React Native

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Build a real app with react native

  1. 1. Build mobile app with React Native john@mingle
  2. 2. Agenda What is React Native Challenges when build niche apps Demo: Market App Q&A
  3. 3. React Native
  4. 4. React Native Challenges when build niche apps ● Dynamic UI without lose performances ● App size ● Complicated code-base
  5. 5. TRIED OUT A LOT (Navtive vs Hybrid) React Native Android 2012 iOS 2013 IONIC 1 2015 IONIC 2 2016 React Native 2016
  6. 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. 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. 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. 9. React Native LIVE RELOAD
  10. 10. React Native CODE PUSH ● OTA updates ● Hot fixes ● Experimentation ● Continuous Deployment
  11. 11. React Native MISCONCEPTIONS
  12. 12. React Native DOES THE JS COMPILE TO NATIVE CODE? NO
  13. 13. React Native DOES THE JS RUNS IN A WEB VIEW? NO
  14. 14. React Native What if i want to use the platform’s latest API’s? Just do it
  15. 15. React Native How does it work
  16. 16. React Native How does it work Main JSC Shadow Gesture/ Interaction React Render Diff Layout Render 16 ms
  17. 17. React Native REACT JS ● Just is View (Library) ● Declarative ● Component-Based ● Learn Once, Write Anywhere A Simple Component
  18. 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. 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. 20. React Native EXAMPLES: AirBnB Map Lottie
  21. 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. 22. Demo React Native
  23. 23. React Native Market RN ● Marketplace ● Stack: ES6,Redux, Native-base, Eslint Reactotron ● CI/CD: Fastlane, Bitrise, Hockeyapp
  24. 24. React Native PROPBLEM: ● First time explores ● 20* screens ● Redux is hard ● Android build ● Performance
  25. 25. Thanks for listening Q&A

×