Ionic Framework vs React Native
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.
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.
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 meminfo
After 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.
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.
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