Home » Cordova Architecture

Cordova Architecture

Apache Cordova provides a set of APIs that can be used to access and stimulate the native mobile OS features like Camera, Storage, Accelerometer, Geolocation, etc. To access the device’s native feature, JavaScript application objects are used via calling the Apache Cordova APIs. The following diagram shows high level design of the Cordova Architecture:

Cordova Architecture

Basically, Apache Cordova creates single screen in the native application and this screen consists a single WebView that holds available space on the device screen. Cordova uses the native application WebView for loading the application and its related JavaScript and CSS files.

Basic Components

The Cordova Application rely on the common config.xml file. This file provides the information about the app and also specify the parameters that affect its working. It follows the W3C’s Packaged Web App.

By default, this application is implemented like a web page that named as index.html that references the resources (images, media files) necessary for running the application. The application executes as a Web View with the native application wrapper which can be distributed to the app stores.

WebView:

A WebView provides user interface of a Cordova application and it can also be a component for some platforms within a larger, hybrid applications. These applications mix the WebView with the native application components.

Web App:

A Web App is defined as a core part where the application code resides. It is simply a webpage that is created using HTML, CSS and JavaScript. By default, a local file i.e., index.html is used to refer to CSS, JavaScript, media files and other resources that are required to run the application. The app is mainly executed in a WebView within the native application wrapper that are distributed to the app stores.

This container consists a key file i.e., config.xml that are responsible for providing the information about the app.

Cordova creates an app, in which the web app is initialized in a WebView i.e., HTML Rendering Engine.

Plugins:

Plugins are defined as an integral part of the Cordova ecosystem that provides an interface for the Cordova and the native components for communicating with each other. It also provides an interface for bindings standard device APIs. It allows you to invoke the native code from JavaScript.

Basically, the Apache Cordova project defines a set of core plugins called Core Plugins. These plugins provide access to device capabilities in the application such as camera, battery, contacts etc.

By using these plug-ins, the developers can easily link the JavaScript code to native code that is running in the backend. In addition of these core plugins, there are several third-party plugins are available that provide additional bindings to the features that are not necessarily available on all platforms.

How does it actually work?

When the application launches, firstly, Apache Cordova loads the application’s default startup page (usually index.html) in the application’s WebView and passes its control to the WebView. The WebView, allows the user to interact with the application by entering data in input fields, clicking on the action buttons, and viewing results in the application’s WebView.

To access the mobile’s native functionalities such as audio or camera, Cordova provides a package of JavaScript APIs that can be used by the developers from their JavaScript code. The calls to the Cordova JavaScript APIs will translate into native device API calls by using a special bridge layer. The native APIs can be accessed from the Apache Cordova plugins.

Cordova Development Workflows:

You can follow two basic paths when developing the Cordova:

  • Cross-platform workflow is used for deploying your application to different platforms with little or no platform-specific development. Cordova Command-Line Interface is defined as a tool that support this workflow and acts as a higher-level abstraction used for building your application compatible for different platforms.
  • Platform-centered workflow is used for developing your application for a specific platform and helps to modify code at a lower level by mixing the native components with Cordova components.

Command Line Interface:

The Command Line Interface (CLI) is responsible for creating a new Cordova application and deploy it into various native mobile platforms. It is a text-based interface that mainly operates on various software and operating systems. We can also use CLI to initialize the project code for which you can use various platform’s SDKs to develop the app further.

If you want to add any support or rebuild your project for any platform, you must require to run the command line interface from the same machine which supports the platform’s SDK.

Basically, it is available on the Command Prompt under Accessories on the PC. It also maintains a remote source code repository through which you can run CLI from different machines.

The Command Line Interface consists some specific commands that are used to accelerate the mobile app development, testing, and deploying the app to various mobile platforms. It can also execute the commands for testing the hybrid mobile app with both real devices and emulators.

Before using the CLI tools, you must have to install the SDKs for each targeted mobile platform. These tools can quickly be used by installing it as a npm package.

What role does CLI play in Cordova?

The Apache Cordova is fully dependent on CLI. It can’t execute a single process without CLI. Basically, it is used in following cases:

  • To create a Cordova project.
  • To generate the APK.
  • To add the plugins.
  • To provide a platform where we can develop an app.

Next TopicCordova PhoneGap

You may also like