What is Apache Cordova?

In simple terms, Cordova is the piece of software that stitches the web application and the native application together. The Apache Cordova website states that:

"Apache Cordova is a platform for building native mobile apps using HTML, CSS and JavaScript."

Apache Cordova does not just stitch the web app with the native app--but it also provides a set of APIs written in JavaScript to interact with the native features of the device. Yes, we can use JavaScript to access our camera, take a picture, and send it in an e-mail. Sounds exciting, right?

To get a better understanding of what is happening, let's take a look at the following screenshot:

As we can see, we have a WebView where the HTML/CSS/JS code gets executed. This code can be a simple standalone piece of user interface; at best we are making an AJAX request to get some data from a remote server. Or, this code can do much more, such as talk to the Bluetooth of the device and get the list of devices in the vicinity.

In the latter case, Cordova has a bunch of APIs that interface with the WebView using JavaScript and then talk to the device in its native language (for example, Java for Android), thus providing a bridge between Java and JavaScript in this scenario. For instance, if we would like to know more about the device, which is running our app, all we need to do is write the following code inside the JS file and launch the app:

var platform = device.platform;

After installing the device plugin, we can also access the UUID, model, OS version, and the Cordova version of the device from inside the WebView using JavaScript as follows:

var uuid = device.uuid; 
var model = device.model; 
var version = device.version; 
var Cordova = device.Cordova;

We will deal more with Cordova plugins in Chapter 6, Ionic Native.

The preceding explanation was to give you an idea of how Mobile Hybrid apps are structured and how we can use device features from the WebView using JavaScript.

Cordova does not convert the HTML, CSS, and JS code to an OS-specific binary code. All it does is wrap the HTML, CSS, and JS code and execute it inside a WebView.

So you must have guessed by now that Ionic is the framework with which we build the HTML/CSS/JS code that runs in the WebView and talks with Cordova to access device-specific APIs.