An Introduction to Cordova: Basics

In this article, I’ll introduce you to Cordova, a framework used for developing mobile applications. If you’re new to Cordova or you want to know whether it’s the right tool for your next project, then you’re in the right place. In this article, I’ll be aiming to answer the following questions:

• What is Cordova?
• How does it work under the hood?
• What can I build with Cordova?
• How do I get started with Cordova and what do I need?

Let’s go ahead and dive in.

1. What Is Cordova?

Cordova is a mobile application development framework that is primarily intended for web developers. It allows web developers to use web technologies, such as HTML, CSS, and JavaScript, to create mobile applications. Like any other technology, Cordova has its pros and cons.

Pros

• Easy to Learn If you’re a web developer, then Cordova has a gentle learning curve. You can easily apply your skills as a web developer to build an app with Cordova. All you really need is to familiarize yourself with the command line in order to get up and running with Cordova.
• Access to Native Functionality With Cordova, you have access to native device capabilities, such as the camera, contacts, geolocation, media, SMS, and many others.
• Free You don’t have to pay anything to use Cordova.
• Open Source Anyone can contribute to Cordova’s source code to make it better. Plugins are also open source and anyone can build custom plugins. This means that developers like yourself can easily install and use these plugins. Or you can build your own plugin and share it with the community.
• Big Community Lots of developers are using Cordova. On Stack Overflow, for example, there are close to 40,000 questions tagged with cordova. This means that you’ll never be left alone solving weird bugs (if you ever encounter them). People in the community are always willing to help, all you have to do is ask.
• Write Once, Deploy Everywhere Cordova compiles your app into a package file, which is required by most app stores. This means that apps created with Cordova can easily be deployed to the app store of your choosing. If you’re deploying to Android, Cordova creates an APK (Android Application Package) file. If you’re deploying to iOS, Cordova compiles to IPA. For Windows, it’s APPX.

Cons

• Poor Documentation It’s hard to find information about really specific things, such as what packages you need to install with the Android SDK Manager. And when you look something up, the results point to information specific to different versions of Cordova. This is sometimes confusing for beginners as they might have a different version of Cordova installed and they’re looking at documentation for another version of Cordova.
• Slower Than Native Since apps built with Cordova are basically web apps that are contained in a web view, they don’t perform as well as their native counterparts. This means that there is a limit to what kind of apps you can build. For example, a video editing application is better built natively since it will heavily rely on the CPU and GPU to do its work.
• Frameworks Because Cordova is just a wrapper for a web application, it doesn’t come with the user interface components, animations, and other goodies that you find in most native applications. This means that you have to implement all of these on your own. That’s why many developer rely on frameworks like Ionic or Onsen UI for building the user interface of their applications.
• Bugs in Plugins Not every plugin is created equal. There are those that have bugs or don’t work as expected.
• Not Every Device Is the Same Native device functionality is accessed through the use of plugins. Cordova exposes an API so that these plugins can be used in the web view, but not every device is the same. There are quirks on every device. To put it simply, not every option that you can set on a plugin will work on every device. For example, on Android, the cameraDirection value always results in a photo taken with the rear-facing camera.

2. Cordova and PhoneGap

When working with Cordova, you often come across the term PhoneGap. PhoneGap is the name of the original project created by a startup called Nitobi around 2009. In 2011, the company was acquired by Adobe.

Note that Adobe didn’t buy the actual codebase, just the name and the people who worked at Nitobi. The open source core was donated to the Apache Software Foundation, which is now known as Cordova.

A common analogy used by developers is that Cordova is to PhoneGap what WebKit is to Safari. Put differently, PhoneGap is a distribution of Cordova that is maintained by Adobe. If you want to read more about the history, you can check out this article on the PhoneGap blog by Brian LeRoux.

In practice, PhoneGap and Cordova are basically the same. You can choose either PhoneGap or Cordova when starting a project. The only difference is the CLI (Command Line Interface). PhoneGap’s CLI integrates with Adobe PhoneGap Build. This service allows developers to compile their apps to the platform of their choice by uploading it to the PhoneGap Build website.

3. How Does Cordova Work Under the Hood?

Cordova’s user interface is a web view. You can think of the web view as a tab in a browser. When you compile a Cordova application, it doesn’t actually take your HTML, CSS, and JavaScript code and automagically converts it into native code, specific to each platform.

Cordova acts as a container for the app that you write using web technologies. When the app is compiled, your code actually stays intact. The compiler just takes your code and makes it available to the web view for rendering.

If you’ve ever opened an HTML file in a browser, that’s basically the same thing. You have to keep in mind that this web view is implemented differently on every device. This means that there are certain features that are not available on some platforms or they are implemented differently.

4. Native Device Functionality

With Cordova, you have access to native device functionality through the use of plugins. Plugins are add-ons that expose a JavaScript API for native components. They allow you to access native device capabilities by making use of the JavaScript API that it exposes.

As you might suspect, plugins are written in native code. This means that you need to have the SDK installed for the different platforms that you plan to deploy to, only then can you write the native code for each of those platforms. You then invoke the native code through the JavaScript API so that it can be accessed in the web view.

There are two type of plugins that you can find in the Cordova plugin ecosystem. First are the official plugins. These are maintained by the Cordova community. You’ll know that a plugin is official if it has the cordova-plugin prefix.

The other type of plugin are custom plugins. These are built by developers like you and me. Often times, they are built to solve a very specific problem, such as connecting an app to Facebook or the Ionic Keyboard Plugin to make interacting with the keyboard easier.

If you want to learn more about what kind of plugins you can use with Cordova, you can visit the Cordova Plugins website.

5. What Can You Build With Cordova?

While you can build pretty much any kind of app with Cordova, there are some limits which we’ll talk about later. For now, let’s go through some sample apps that you can build with Cordova.

• TripCase TripCase is a travel app that guides you through every stage of your trip.
• FruitSalad FruitSalad is a puzzle game similar to Bejeweled.
• Panasonic World Heritage Calendar This is a calendar app that shows you beautiful photographs of World Heritage sites. It also includes trivia about culture and nature related to the sites.
• HealthTap HealthTap is the Stack Overflow for health questions.
• Wikipedia The official Wikipedia app is built with Cordova.

Based on the apps listed above, you should now have an idea of the kind of apps you can build with Cordova. If you’re a developer, then you may have noticed that all these apps use the internet. They all communicate to a remote server to fetch data. That’s what Cordova is good at, fetching data from a server, presenting it to the user, and listening for and responding to input from the user.

But this doesn’t mean that you can’t build self-contained apps with Cordova. There are lots of client-side database solutions that you can readily use. One popular example is LokiJS, a fast, in-memory document-oriented datastore for Node.js, the browser, and Cordova. In a photo gallery app, for example, you could use this library to store the paths of photos and then grab them from the storage when needed.

With Cordova, you can use pretty much any CSS or JavaScript library that you can find on cdnjs, because the code that you write runs in the browser. You have to be careful though, not all browsers are the same. And that brings us to the next section.

6. Limitations

As with anything else in life, there are always limitations. Cordova is no exception. In this section, I’ll be talking about some of the limitations of Cordova.

Whatever you can accomplish with native code, you can also accomplish with Cordova. There are two common limitations though, performance and plugin availability.

Performance

Cordova accesses native device capabilities through plugins and this has a cost, a cost that native apps don’t have. As I mentioned earlier in this tutorial, it’s not a good idea to build apps with Cordova that rely heavily on the CPU or GPU. Such apps will not be as performant as you would want them to be, especially when compared to native counterparts.

Plugin Availability

Another limitation is plugin availability. If a specific functionality isn’t available through an existing plugin in the repository, then your only choice is to build the plugin yourself.

Web View

By default, Cordova uses the platform’s web view for rendering the user interface, which means that you’re interacting with a different web view on every platform you’re targeting.

Moreover, different versions of the platform’s operating system may have a different web view or one with a different set of features. For example, modern Android devices may be running a flavor of Android that have WebRTC enabled while older versions of Android lack this feature.

For Cordova developers, it’s a good thing that projects like Crosswalk come to the rescue. Crosswalk lets you use a custom web view in Cordova apps, normalizing the differences between platforms. Later in this tutorial, I’ll be showing you how you can use Crosswalk in a Cordova project.

Learn More in Our Cordova Course

If you like to learn more about Cordova, then check out Reggie Dawson’s course on Cordova. Reggie introduces you to the platform and helps you create a Cordova app from scratch. Take a look at the below video to get a taste of the course.

Conclusion

You should now have a good idea what Cordova is and how it does its magic. I hope this article has answered the question whether Cordova is the right tool for your next mobile project.

In the next article, we’ll get our hands dirty by creating a mobile application with Cordova. Feel free to leave any questions or comments you have in the comments below.

by Wernher-Bel Ancheta via Envato Tuts+ Code