React Native Pain Points

ReactJS Bangkok 1.1.0

Transcript

1. React Native Pain Points ReactJS Bangkok 1.1.0
2. Me • Manatsawin Hanmongkolchai (@awkwin) • Currently studying at Software & Knowledge Engineering, KU • Former Intern at Wongnai (Jun - Dec 2016)
3. Wongnai is launching a new product! • Restaurant management system ◦ Food delivery from your phone with LINE MAN application ◦ Restaurant accept orders via RMS application ◦ Written in React Native ◦ Available for Android and iOS
4. React Native Pros • It's native • Cross platform • Reuse your JavaScript logic ◦ Many of the code in RMS were reused in Wongnai's ReactJS project • The community is great • but...
5. Cross platform pains • React Native saves a lot of time developing cross platform application • At Wongnai, I worked alone on both Android and iOS version of RMS • … but it's not completely free
6. Cross platform pains • Many things in React Native is not available across Android and iOS ◦ MapView is not available on Android ◦ Android Alert can only have 3 buttons ◦ ActionSheet have no Android alternative ◦ DatePicker in iOS is a component ◦ DatePicker in Android is an API ◦ Elevation CSS is only available in Android ◦ Shadow CSS is only available in iOS ◦ Push notification is only available in iOS
7. Cross platform pains • Many of these things are solved in third party libraries ◦ React-native-maps ◦ React-native-push-notification ◦ rn-date-picker
8. Cross platform pains • ...but React Native third party API is sooooo unstable ◦ React Native Push Notification used to notify the application twice on Android, one when notification is received, another when notification is tapped ◦ There is no way to detect whether the user actually tapped the notification ◦ I had to fork it to disable background notification to make both platforms have the same behavior ◦ In version 2.0.1 userInteraction and background flag were added
9. Cross platform pains • …but third party widgets aren't exactly that great ◦ rn-date-picker's iOS buttons hitboxes are exactly the same size as the text. No padding at all. ◦ So I have to fork it in RMS
10. Cross platform pains • … but sometimes there aren't just any third party solution ◦ There is no ActionSheet alternative for Android ◦ There is react-native-dialogs, which is only available for Android ◦ I had to write my own wrapper to Dialogs/ActionSheet
11. Cross platform pains • ...and so now we have to test everything in both iOS and Android! • React-native-maps requires linking with Google APIs/MapKit ◦ Requires native application development knowledge
12. Breaking changes • React Native used to releases biweekly (it is now monthly) • It is not 1.0 yet • … therefore breaking changes!
13. Layout woes • The layout engine had multiple breaking changes ◦ 0.28: Flex styling property behavior now behaves slightly differently ▪ A few flex: 1 breaks in iOS ◦ 0.36: Fix unconstrained sizing in main axis ▪ This one breaks the whole app layout in iOS ▪ I have to tell our testers "Check everywhere we have a button, because it will break" ◦ 0.36: Default scrollview to flexShrink to allow views below it ◦ 0.39: Android now use C-based layout engine ▪ Now Android breaks the same way iOS do!
14. Breaking changes • And this is just React Native. Every sprint I have to read changelogs of every packages. • Semantic versioning doesn't help. Everything is not 1.0, therefore breaking changes is expected.
15. Automated testing • At Wongnai we use Appium to test • Appium is a WebDriver (Selenium) for mobile application • As React Native is a native app, you can use native testing tools!
16. Automated testing • ...but don't expect it to be cross platform • Appium is cross platform, however the underlying way of finding elements is different • React Native have testID, but Appium doesn't support that (RN #7135) • We have to use accessibilityLabel for testing
17. Automated testing • … but iOS doesn't allow accessibilityLabel within clickable stuff • Also, you have to scroll your view manually. Good luck!
18. Automated testing • In the end we use Android emulator with very large screen to test (so we don't have to scroll) • With hacks to make information available within one accessibilityLabel • And later the iOS tests were neglected • And the tests run very slowly • In the end I ignored the tests and only cares about testing Redux reducers
19. Knockoffs • React Native is native • … but it's not using the native widgets you're expecting • So, same as WebViews you're responsible for making them feel native
20. Knockoffs • React Native only offered button component in later versions • But in any case, button is a styled View
21. Knockoffs • More painful: Action bar • It looks like one, but it's not actually one • This one put tab in the bottom
22. Knockoffs
23. Android lag • React Native is really fast on iOS • … but not on Android • Android LayoutAnimation is behind an experimental flag • It is extremely noticeable in debug mode. React Native Redux Router have only a few frames moving from page to page.
24. Many elements • React is a virtual DOM implementation • We swap the DOM to native elements, and we get React Native • And so having a lot of elements slow down the application to a crawl.
25. Many elements • Take calendar, for example • We used react-native-calendar • As each date is a View, switching month takes a few seconds to complete • In the end, we have to use native date picker
26. Many elements • Sometimes it can't be avoided • Our restaurant information list is reallyyyy long • It freeze the app for a few seconds while it loads • Every time you make a change it freeze • In the end I hacked ListView together, it is now twice as fast (but still freeze) • But if you scroll really fast the ListView will not end at the end of the page
27. Conclusion • React Native is great for cross platform development • … but it's not completely free like Cordova/PhoneGap • Learn to live with its gotchas, and you'll save a lot of time • We launched RMS in 6 months
28. Thank you