React Cordova vs React Native ? Why not both? UTF8Map
The same code UTF8Map rendered as Web and as Android Native. The difference became huge especially when there are many elements on the screen or you run it on a cheap Android smartphone.
Many smarphones, nowadays, are quite good to run web applications inside a WebView like Cordova / Phonegap, but the most famous apps are still native (Java, Objective-C, Swift,..). UX/UI aren’t emulated as in Ionic and the overall experience is more fluid.
If you can’t see it, probably you’ll have to make some tradeoffs to adapt to the WebView limits.
React vs React Native
UTF8Map e React Native Web
Fortunately another lib can be a bridge between React and React Native. It isn’t a Facebook project but it already usable, it is React Native Web (or the React Web). The idea behind is simple: You write in React Native and the Web is another platform, just like Android and iOS which are officially supported.
Not every React Native feature is supported, but it works. If the feature you need isn’t available as React Native Web, you can always write platform web specific code (that mimic the React Native) as you are used to.
I’ve built the UTF8Map example to test it and it is very nice to render the same code base as Web or Native Android/iOS(or Cordova wrapped WebView).
To more technical details try my repo UTF8Map on Github.
Ram Memory used
It means when the app is active and running:
- Cordova Web: 13Mb
- Android Native: 10Mb
The space required to be installed
- Cordova Web: 2,46Mb base, then you need to load the real app from the web
- Android Native: 21,89Mb (release), 33Mb (debug)
The numbers don’t rapresent the real benefit you get in real world usage, you need to try it.
The same app rendered as Android native is a “butter smooth” experience (specially built in release mode) and it doesn’t lose events like swipe/tap etc..
- Performance, specially in apps crowded of elements
- The freedom to develop a 99% iOS app without having to use Mac OS X (you need it only to test on the simulator)
- Not googlable errors. Some integration problems need a complete stack knowledge JS, ReactNative, Native.
- Forget the DOM, some popular utilities and patterns can’t work everywhere without some changes (routing, styles,..).