Ionic Framework vs React Native

Sonny Lazuardi
Dec 6, 2015 · 5 min read

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 Beacon

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.

web based map view (ionic), native map view (react native)
web based drawer menu (ionic), native drawer menu (react native)

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.

File size comparison

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 meminfo
memory usage comparison

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.

Demo video of the 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

Bus In Time on Google Play Store

React ID

ReactJS Indonesia Community

React ID

ReactJS Indonesia Community

Sonny Lazuardi

Written by

UX Engineer, Open Source Enthusiast, Tech Speaker, Traveller

React ID

ReactJS Indonesia Community