Successfully reported this slideshow.
Your SlideShare is downloading. ×

React Native: Expectations vs Reality

React Native: Expectations vs Reality

Download to read offline

I had a chance to be part of a team that started developing a decent size React Native mobile app from scratch. As a developer with a solid React background, I had some expectations at first. During my initial research, everything sounded terrific: performance stats, ease of development, learn-once-use-everywhere, debugging tools, etc. But is everything terrific really?

I'm excited to share my journey about how my expectations met the reality. I'll give my personal opinion about the matureness of the technology, for which use-cases it fits well and for which it doesn't. I'll also try to address the most popular misconceptions about React Native, which front-end developers usually have before they have the chance to actually built something.

I had a chance to be part of a team that started developing a decent size React Native mobile app from scratch. As a developer with a solid React background, I had some expectations at first. During my initial research, everything sounded terrific: performance stats, ease of development, learn-once-use-everywhere, debugging tools, etc. But is everything terrific really?

I'm excited to share my journey about how my expectations met the reality. I'll give my personal opinion about the matureness of the technology, for which use-cases it fits well and for which it doesn't. I'll also try to address the most popular misconceptions about React Native, which front-end developers usually have before they have the chance to actually built something.

More Related Content

React Native: Expectations vs Reality

  1. 1. React Native Expectations vs Reality
  2. 2. CSS-Tricks
  3. 3. How about you?
  4. 4. Why I’m excited about React Native
  5. 5. Progressive Web App Mobile App Mobile App JavaScript Swift Java
  6. 6. Agenda! Expectations vs Reality for: 1. Learning Curve 2. Limitations 3. Debugging 4. Ecosystem 5. Performance
  7. 7. Introducing… our scale! 0 . . . . 5
  8. 8. #1 Learning Curve Expectation: 5
  9. 9. A lot of React concepts do apply!
  10. 10. Flexbox
  11. 11. Piniz a way to resolve a problem, usually technical and hidden
  12. 12. React Navigation
  13. 13. Write Learn once, use anywhere
  14. 14. Time-to-learn.
  15. 15. #1 Learning Curve Expectation: 5 Reality: 2
  16. 16. #2 Limitations Expectation: 4
  17. 17. “Pure” React Native React Native with “Create React Native App” and “Expo” vs. The decision.
  18. 18. Expo: NO native modules (without detaching)
  19. 19. Which compromises are you willing to do?
  20. 20. #2 Limitations Expectation: 4 Reality: 3
  21. 21. #3 Debugging Expectation: 5
  22. 22. Inspecting elements
  23. 23. Slooooow and it crashes often :(
  24. 24. Network Tab
  25. 25. #3 Debugging Expectation: 5 Reality: 1
  26. 26. #4 Ecosystem Expectation: 3
  27. 27. Multi-slider Component
  28. 28. Gallery Component
  29. 29. #4 Ecosystem Expectation: 3 Reality: 1
  30. 30. #5 Performance Expectation: 4 Reality: 5
  31. 31. #Sum up 1. Learning Curve 2. Limitations 3. Debugging 4. Ecosystem 5. Performance
  32. 32. Thank you. You were awesome! (I hope) superkalo.com

Editor's Notes

  • How many are front-end developers?
    How many have done at least 1 project with React?
    How many have done at least 1 project with React Native?
  • #1 Different concept than Cordova or browser-based apps, which run inside a web view.

    #2 NO "mobile web app", an "HTML5 app", or a "hybrid app". A real native app.
  • Single-code base. Single team. Single tech stack. Game changer! Cost saving. Faster iterations.
  • It’s impressive what can be accomplished.

    It’s impressive how many big companies are using it.
  • The best way to evaluate a new technology is to use it. App profile: team of 2. 6 months. A bit more info about the project.
  • Measure of success. Score.
  • Design patterns. Redux! Krasi Tsonev book.
  • Works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with `flexDirection` defaulting to `column`, and the flex parameter only supporting a single number.
  • Gotchas! Piniz: a way to resolve a problem, usually technical and hidden. Not all CSS properties work to all components.



  • Gotchas!
  • Not single code base out of the box. Not designed to write once, run everywhere

    Date picker.
  • Layout Animation API (simple) and Animated API (advanced).
  • Time to Learn: 2-3 weeks.
  • CRNA - app without any build configuration Expo (toolchain): - Support for iOS and Android out of the box
    - Instant Updating
    - Asset Management
    - Modules (Push Notifications, Auth, Map)

    Choose based on the use-case you have.
  • - NO native modules without detaching - Expo limited components.
    - Expo is always at least one version back from React Native


  • No, it doesn’t fit all-mobile-app-use-cases-in-the-world.
  • Expectation: web experience. I’m used to it.
  • - jhen0409/react-native-debugger
  • Change styles on-the-fly
  • - JackDanielsAndCode/react-native-multi-slider | 130 stars, good documentation, doesn’t work on Android

    - ptomasroos/react-native-multi-slider | 150 stars, no documentation
  • - expo/react-native-image-gallery | 60 stars, no documentation - archriss/react-native-image-gallery | 250 stars
  • iOS performance is better. Based on comparison with Cordova.

    Corner cases with external libs.
  • 1. Great potential!
    2. With a good architecture could lead to amazing single-code base results
    3. Great demand for open-source libs

×