Ionic Framework vs React Native
Background
The Bus In Time app is first born at a hackathon of an open data summit and challenge in Bandung (BOSCHA). We want to make a simple app that use IoT to solve the transportation problem. So, we choose Bluetooth Low Energy (BLE) because that time it’s one of the hottest (Internet of Things) IoT devices.
Bluetooth Low Energy (BLE) or iBeacon gives some advantages compared to GPS for public bus tracking. If we use GPS for public bus tracking we should pay for monthly internet access and setting up the GPS devices while BLE is only a small devices that need low energy (most of its battery can last for 2 years) and we don’t need internet access since the location is actually shared by the users. This BLE will give notification for the user in the bus to share the location.
In the app development, we got some issues in performance problem using Ionic Framework. We use Firebase (https://www.firebase.com/) and Google Maps. The initial loading takes some seconds to start. We then compare native app for good user experience or hybrid app to deploy faster. Time goes by, Facebook has released React Native for iOS and Android. When we look at React Native for iOS and watch the react native introduction video we are amazed and we think it is awesome https://www.youtube.com/watch?v=KVZ-P-ZI6W4. But, we can’t do much because Bus In Time is Android based app. The Android was not released that time. After waiting for couple of months, the React Native Android has released. Then we try to move to React Native we compare and do benchmark to our app. Here is the comparison and benchmark between Hybrid app (Cordova, Ionic) and React Native.
Comparison & Benchmark
Below is the comparison of Ionic app and React Native app. There are four parts of comparison. They are plugin, file size, memory usage, demo video.
Plugin
The first comparison of Ionic and React Native is the plugin. On React Native, we can add 3rd party plugin using React Native Modules. In this release we use https://github.com/teamrota/react-native-gmaps for native google maps view. Before using this, on our Ionic app, we use http://angular-ui.github.io/angular-google-maps/ that still uses webview to render the map. The drawback of using web-based map view is it loads longer and the memory is higher. On native map view we can use 3d map features on map view, like rotating, zooming, and compass.
Beside map view, we can also change the status bar color. You can see in the picture above, the status bar color is in red (we can actually change the status bar color from webview https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).We also use the native drawer for the main menu.
File Size
The second comparison is the file size. Ionic is a cordova based app that wrap current web app into a mobile application. It uses the android existing web view to render the app so the file size is quite small. Meanwhile react native create bridge between javascript and native component. The main framework size is quite big. So here is the comparison. Bus In Time in Ionic Framework has the size of 2.88 MB, while in React Native is 8.22 MB. The difference is quite big, but I think 8.22 MB is acceptable for an app. An actually we can still do compression to react native app using ProGuard. In this release we haven’t used ProGuard so the file size is quite big.
Memory Usage
The third comparison is memory usage. This is quite important especially for low end android devices. We must keep the memory usage low so that the app run smoothly on the devices. To do memory usage comparison, we use the following command.
adb shell dumpsys meminfoAfter running the command above, we got the result. Bus In Time app in Ionic Framework uses ~ 84,714 kB memory. While react native app uses ~ 58,585 kB memory. So the app run smoother on react native app.
Demo Video
The last comparison is demo video of the app. You can see and compare the performance and user experience of both apps. The Ionic app is slower at loading map tiles because it needs to download from the Google Map server, while in react native gmap, it caches the tiles so it loads faster. The drawer and the transition runs smoothly on react native app. You can get the true native feels in react native app.
Integration
The great features of react native is that we can use every client based javascript modules from npm (node package manager). And the good news is we can also use the existing cordova plugin to our React Native app. Pretty cool, huh? Yes, we can reuse the previous Cordova-based code from our ionic framework app to our brand new React Native app using the following bridge https://github.com/axemclion/react-native-cordova-plugin. This is really cool when we can reuse our previous component. So we use this to detect beacon https://github.com/don/cordova-plugin-ble-central We are going to implement some features like social login with cordova plugin too.
Result
The result of our react native app now can be downloaded on google play store. You can download it here https://play.google.com/store/apps/details?id=com.busintime
