What is Apache Cordova?

What is Apache Cordova?

Ionic’s primary role in the application development space is to provide consistent, platform-specific user interface components, but how does one take their application and transform it into something that can be submitted to the various app stores? That is where Apache Cordova steps into the development flow. Let’s explore what Apache Cordova is and how it interacts with Ionic. So what is Apache Cordova?

Apache Cordova is an open source framework that enables web developers to use their HTML, CSS, and JavaScript content to create a native application for a variety of mobile platforms.

Let’s look further at how this works. Cordova takes your web application and renders it within a native WebView. A WebView is an application component (like a button or a tab bar) that is used to display web content within a native application. You can think of a WebView as a web browser without any of the standard user interface elements, such as a URL field or status bar. The web application running inside this container is just like any other web application that would run within a mobile browser—it can open additional HTML pages, execute JavaScript code, play media files, and communicate with remote servers. This type of mobile application is often called a hybrid application.

Download our free guide to hybrid app development to see how you can build cross-platform mobile apps with the web.

Typically, web-based applications are executed within a sandbox, meaning that they do not have direct access to various hardware and software features on the device. A good example of this is the contact database on your mobile device. This database of names, phone numbers, emails, and other bits of information is not accessible to a web app. Besides providing a basic framework to run a web app within a native application, Cordova also provides JavaScript APIs to allow access to a wide variety of device features, like the contacts database. These capabilities are exposed through the use of a collection of plugins. Plugins provide a bridge between our web application and the device’s native features. The Ionic team has gone a step further and created Ionic Native, with TypeScript interfaces for over 200 of the most common plugins, and enterprise supported versions for teams who want the benefit of having Ionic manage ongoing updates, security patches, compatibility, and other aspects of native device access.

The History of Cordova (aka PhoneGap)

Developers are often confused by the difference between Apache Cordova and PhoneGap. In order to clear up this confusion, we need to understand the origins of this project. In late 2008, several engineers from Nitobi, a web development company from Canada, attended an iPhone development camp at the Adobe offices in San Francisco. They explored the idea of using the native WebView as a shell to run their web applications in a native environment. The experiment worked. Over the next few months, they expanded their efforts and were able to leverage this solution to create a framework. They named the project PhoneGap since it allowed web developers the ability to bridge the gap between their web apps and the device’s native capabilities. The project continued to mature, and more plugins were created, enabling more functionality to be accessed on the phone. Other contributors joined the effort, expanding the number of mobile platforms it supported.

In 2011, Adobe bought Nitobi, and the PhoneGap framework was donated to the Apache Foundation. The project was eventually renamed Cordova (which is actually the street name of Nitobi’s office in Vancouver, Canada).

Apache Cordova versus Adobe PhoneGap

Since there is both Apache Cordova and Adobe PhoneGap, it is quite easy to confuse the projects. This naming issue can be a source of frustration when researching an issue during development and having to search using both Cordova and PhoneGap as keywords to find the solutions, or even reading the proper documentation, as the two projects are so intertwined.

A good way to understand the difference is to think about how Apple has its Safari browser, but it is based on the open source WebKit engine. The same is true here: Cordova is the open source version of the framework, while PhoneGap is the Adobe-branded version. In the end, there is little difference between the two efforts. There are some slight differences in the command-line interfaces, but the functionality is the same. The only thing you cannot do is mix the two projects in the same application. While not as dangerous as when the Ghostbusters crossed their streams, using both Cordova and PhoneGap in the same project will produce nothing but trouble.

The main difference between the projects is that Adobe has some paid services under the PhoneGap brand, most notably the PhoneGap Build service. This is a hosted service that enables you to have your application compiled into native binaries remotely, eliminating the need to install each mobile platform’s SDKs locally. The PhoneGap command line interface tool (CLI) has the ability to utilize this service, while the Cordova CLI does not.

Ionic and Cordova

Since the beginning of Ionic, Cordova has been an integral part of the project. While Cordova provides the solutions to use native mobile functionality and to create fully native applications, it doesn't include a UI SDK. With over 100 UI components, plus navigation and platform-specific styling, Ionic allows you to develop high performing, native-like apps.

Summary

So, leveraging Cordova permits us to take our web application and have it become a native application that we can then submit to the app stores. Now, Cordova is not the only solution for this. Ionic has recently been developing what you might call the next generation of Cordova, Capacitor. Scheduled to be released in 2109, that effort looks to improve upon the foundations of Cordova, but that is left for another article. Hopefully, you have an understanding of what Cordova is and how it plays within the Ionic development ecosystem.

See all

Up Next