React Native vs Cordova comparison

React Native is a front end framework to create native views in mobile applications, while logic is written in JS. It is a very promising tool for building hybrid mobile applications, but one must be fully aware of its shortcomings and maturity status as opposed to other available options. Below is an overview based on our experience with React Native. We use Cordova as a reference point for comparison, as this is the most popular platform for cross-platform mobile development at the moment.

React Native as a development framework:

The framework itself is production ready. Features like remote JS debugging, auto reload on device, ES6 + ES7 support, Android & IOS support, many components that make building intricate views possible and support for native styling with the use of web tech (flexbox) make React Native a great framework for rapid development.

Hybrid vs Native approach

Mobile development is mostly practiced in two ways: Hybrid, Native.

For the purposes of this doc I will determine that:

1. Natively developed apps use only native code available for the platform for development, one app per platform, one code base per platform.
2. Hybrid apps are developed using web technology to achieve one code base for multiple platforms. The web part of the application usually runs within a browser component provided by the platform (or SDK) that also serves as an intermediate for requesting services from the OS.

Both React Native and Cordova are take hybrid development approach, but they profoundly differ in how they implement it..

How Cordova works:

It wraps the entire application in a web view (native browser) and lets the developer create a UI using actual web technologies in a browser that is wrapped within an application.

When using a technology like Cordova the developer will create HTML, style with CSS, and write all the logic with JavaScript (AKA web application).

How React Native works:

Unlike Cordova, React Native has no webview. Instead, it embeds a Javascript interpreter (based on embedded V8 engine) that runs the logic of the application, that can be developed in JavaScript, using a Javascript interpreter per platform. So, basically, instead of showing full webview, it uses just the JavaScript part of it.

Visual components (reusable UI elements) are rendered as a native UI. This means that when a developer uses a <textinput> component, the application will render a native Input, for each platform. This means that UI layer is compiled from cross-platform html-like markup for each platform into the native code. This results in higher performance of UI and much easier integration with native device features (for example, drawing overlay over video stream from camera, etc).</textinput>

High performance for UI’s is important enough that the React Native team has added a performance feature in the development wrapper, that measures UI performance (with FPS).

The “look” and “feel” of the mobile application will be more native like, when compared against a large hybrid application, just because the UI is native.

Cordova bridge VS React Native’s RCTBridgeModule:

Another important part of a hybrid mobile application development framework is its ability to support native libraries.

In both frameworks there is a JavaScript API that accesses a Native API, thus giving the developer the ability to use native features within the JavaScript environment.

The framework usually allows the developer to:

1. Write his own native plugins for every platform he wants to support, link them into the application, and use them through the framework’s native-JS bridge.
2. Reuse plugins that other developers created, through the framework’s native-JS bridge.

Both frameworks support this “bridging” technique.

From a developer’s perspective, the documentation for React Native’s bridging is better.

From a user’s perspective, React Native’s bridging is somewhat more performant leading to the overall better responsibity of UI.

Cordova VS React Native in Debugging / Building:

Both platforms support debugging in Chrome’s developer console.

In Cordova the UI and JS are debugged in the console.

In React Native the UI is debugged in the application itself (apps are wrapped with debugging features that are removed when building for production) and JS is debugged in the developer console.

Moreover when debugging a Cordova app on a device, the device needs to be connected via USB to a development machine. While in React Native, only deploying the initial build of an app requires the device to be connected by USB, after you can debug and modify code remotely over local network connection..

Styling in React Native:

Styling is a big feature in React Native, it allows the developer to style native views using common web technologies, avoiding native styling.

Something needs to be pointed out when using styling in React Native, styling allows the developer to use web technologies, but React Native implements these features.

As an example, styling in CSS would look like this:

.column {

Background-color: “green”;

}

This code snippet will add a background color to all elements on the web page that have attribute “class” which one of the values is “column”, also known as implicit styling. I don’t style every element, I will tell the browser to look for the element and style them based on their attributes.

In contrast React Natives styling looks like this:

const styles = StyleSheet.create({

container: {

backgroundColor: ‘#F5FCFF’

}

});

Style

(Imports, extending component, and other important things were left out to show just the basics)

Here we see explicit styling, this is just something that a developer needs to get used to.

Explicit styling pros:

1. Lets you trace where design “bugs” originate.
2. Don’t need to make CSS override classes to fix base stylings.
3. Programmatic styling without using a CSS extension language (e.g. SASS)

Cons:

1. Makes larger code base.
2. Code reuse becomes tricky for many components that share base styling (code reuse for styling is still possible by using methods to extend javascript objects).

Bottom line:

React Native is far superior in terms of UI performance and rendering. In terms of logics, it enforces certain development paradigm (based on React) which can be upside or downside, depending on developer’s background and preferences. Cordoba leaves the choice of framework to the developer: it can be based on React, Angular or older frameworks / libraries, such as Backbone, JQuery Mobile.

React Native is also much more convenient in terms of debugging and building.

But Cordova is currently still holds multiple advantages for cross platform hybrid mobile application development:

1. More mature ecosystem (2010 vs 2014), in terms of available plugins and public knowledge.
2. More documentation.
3. Easier to use for developers with no native platform skills.
4. Better support for old platforms (React Native doesn’t support iOS 7).
5. Wider support of new platforms.
6. Less volatile (React Native has a new version release every 2 weeks, with no promise for backwards compatibility)

Any questions?

Need assistance or consulting with your hybrid application?

Contact us at contact@initech.co.il, we are here to help!