React Native: Expectations vs Reality

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

React Native: Expectations vs Reality

You are reading a preview.

Check these out next

React Native: Expectations vs Reality

More Related Content

Slideshows for you

Featured

React Native: Expectations vs Reality

Editor's Notes