First look at Visual Studio Tools for Apache Cordova

If you are a web developer and you want to develop applications for mobile devices, Single Page Applications (SPA) are the Holy Grail. It allows you to use cross-platform capabilities of HTML5/CSS/JavaScript technologies in combination of web development and design experience in order to create fully functional mobile applications.

Microsoft has recently launched Visual Studio Tools for Apache Cordova. It’s embedded within Visual Studio and allows you to create, debug and test cross-platform mobile applications written as SPA. Apache Cordova is an open-source platform which contains of set of command-line tools and plugins for creating mobile apps for different platforms. Visual Studio brings set of tools, emulators and debugger which allows you to have better experience developing such applications.

You can create new project by selecting appropriate template from New Project window:

Take a look at empty project structure in Visual Studio:

As we need to support multiple platforms, and those platforms have some specifics, we need mechanism to put different stuff for different platforms in final package. Merges folder is a place where Cordova is looking for folder for specific platform and merges all its contents with the rest of the app when built. For example, if you have something specific for Android, you can put it in merges/android and it will be included when Android package is built.

Next folder is res. This folder contains resources specific to each platform, such as splash screens, icons, etc.

Next folder, and the most important one, is www folder. It is basically root of your application. It is always deployed completely to each platform and it should contain css, javascript, images, html pages and all other things required by the app.

Beside www folder, whole Cordova magic is placed in config.xml file. It is xml file that contains instructions for Cordova on how to create and deploy application package, which device and platform specific stuff will it use, etc.

You can edit it in any text editor, but Visual Studio allows you to have user interface for most important ones.

Most important section under config is Plugins section. That is the place where our application gets extra value in comparison to normal web application. For example, we can use things such as location services, vibration, gyroscope and similar phone services. There are a lot of plugins that are available out of the box, but you can download and install any other you need, or even develop your own.

Of course, those services have different implementation for different platforms. Plugins are exposing unique interface through JavaScript library, but keeps specific implementation for every type of OS. If you install any plugin, you can see fallowing changes:

  • New folder (plugins) appears in root of the project
  • That folder contains plugin
  • src folder within plugin contains native implementation for each supported platform
  • www folder contains js library used to access plugin functionality

OK, so where is the entry point of the application? Let’s examine www folder:

As it’s defaulted in config.xml, index.html is root of the app. Once it’s loaded, it loads some scripts:

[crayon lang=js”]

Hello, your application is ready!

Cordova.js is automatically injected by Cordova tools and it is where Cordova lives. It is responsible for a lot of stuff, but most important is application lifecycle.

Index.js in a file where we can find those lifecycle events handled:

[crayon lang=”js”]
document.addEventListener( ‘deviceready’, onDeviceReady.bind( this ), false );

function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener( ‘pause’, onPause.bind( this ), false );
document.addEventListener( ‘resume’, onResume.bind( this ), false );

Once you have all cordova stuff configured, the rest is regular SPA development.

Now, you want to test your application on different platforms and see how it looks or behave. Visual Studio makes it really easy. Take a look on toolbar:

Pick a platform, pick an emulator or real device, and run!

More info about Apache Cordova:



Leave a Reply