Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Build a real app with react native

141 Aufrufe

Veröffentlicht am

How we built a Market App with React Native

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×