React Cordova vs React Native ? Why not both? UTF8Map
Usually when we talk about JavaScript frameworks we talk about AngularJS, EmberJS, MeteorJS,.. but in this post I’ll write about React and ReactNative.
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
Facebook open sourced very interesting libraries React and React Native, however some undefined spots remains: if I structure my app in React components can I use them also in React Native? And here there is a big question mark. It depends how you build this components because if you rely on CSS, Mediaqueries, or other DOM stuff you need to implement them also in React Native, because some common JavaScript utilities window.*, document.* aren’t available in a native Android or iOS environment.
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
Space taken
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)
Conclusion
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..
In brief:
PRO
- 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)
- Incremental refinement, you can build platform agnostic generic components and eventually take advantage of the platform specific features in the future. `.js` is for common JavaScript, but you can also override components with .android.js, .web.js o .ios.js.
CONTRO
- 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,..).
