What is Apache Cordova Framework and What is the Difference from PhoneGap?

What is Apache Cordova Framework?

How does Cordova work? Apache Cordova is a hybrid 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 Apache Cordova 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.

Get our free guide

Grab our free Hybrid vs. Native guide 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 on what the difference is 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 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 between Apache Cordova and PhoneGap 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 vs. Cordova App Development

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.

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.

Capacitor: An Alternative to Cordova

Now, Cordova is not the only solution for this. Ionic recently released a successor to Cordova, under an open source project called Capacitor. It aims to improve upon the foundations of Cordova, which you can read about in our Capacitor vs. Cordova comparison. In short, Capacitor is a more modern take on the concept of a cross-platform native runtime for the web, taking advantage of the latest Web APIs, and providing much deeper integration with the native platform SDKs, allowing greater customization, easier troubleshooting, and fewer issues at the native layer.

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. Hopefully, you have an understanding of what Apache Cordova is and how it plays within the Ionic development ecosystem.

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.