65.9K
CodeProject is changing. Read more.
Home

Visual Studio 2015 and Apache Cordova

Hugo Carnicelli
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.87/5 (59 votes)

Jan 4, 2015

CPOL

7 min read

viewsIcon

175752

downloadIcon

17

In this article, we are going to learn what Apache Cordova is and in which way this tool is now integrated into Visual Studio 2015.

Visual Studio 2015 and Apache Cordova

Before starting, ask yourself these questions:

  • What is the proportion of developers being professionally skilled about web technologies today?
  • What is the proportion of developers having a native mobile expertise (crossplatform tools users excepted)?
  • What is the proportion of developers that can say they have the skill for both web and native mobile?
  • What is, among them, the proportion of developers also competent on multiple mobile platforms?

The proportion corresponding to this last question is, due to learning time and professional profile, more than reduced. Indeed, job market does rarely recruit profiles that are extremely multipurpose just because they are more expensive, but cannot perform more than one task at a time. The expertise of a consultant grows then in adequation with this hypothesis. Crossplatform tools like Apache Cordova tend to sensibly increase this last number.

Overview of crossplatform Solutions

Between web browser and native mobile operating system, we can quote 3 major tools. Unity, thought to be a development usually going to video game is the closest to native. It is very performant but, of course, requires a specific and relatively sharp learning. Xamarin, development tool based on the Mono Project, is much more affordable, especially with .NET developers. It helps bring the benefit of this framework on Microsoft's foreign platforms. Cordova allows at last, thanks to an almost zero learning curve, to realise mobile and multiplatform applications using the same techniques as mobile oriented web development.

Web

Cordova

Xamarin

Unity

Native

Some History

The Cordova project was during 3 years the PhoneGap project launched by the Adobe corporation, known worldwide for its software suite for multimedia processing: Photoshop, Illustrator, Premiere and After Effect to quote only a few. It was given to the Apache Software Foundation in October 2011 and was graduated top level project in October 2012.

Back in May 2014, Microsoft released Update 2 of Visual Studio 2013. On this occasion, a brand new extension named "Multi-Device Hybrid App" appeared. It allowed a better integration of Apache Cordova into Visual Studio through a new project type and a dependencies installer. After this first release which received a nice echo from in the Microsoft community, a second version appeared, and with it new functionalities, better integration...

More recently, in November 2014 on the occasion of the release of the Visual Studio 2015 Preview, the extension is revamped and renamed "Tools for Apache Cordova". It is now directly available through the Visual Studio installer from an option. If it is chosen, it triggers a second installer which allows to choose precisely the dependencies you want to install: Ant, Android, Java, NodeJS, and many more.

What Cordova Brings

Impossible for a classic website to solicit a customer through its smartphone bypassing the standard channels that are SMS and email. Cordova offers a new dimension to web developers practically inaccessible until then: the functionalities of the device which runs the application. Notifications, geolocalisation, vibrator, camera, storage, ... All of these functionalities, out of range of oriented mobile development and yet essential, allow to access the target of a product in a very much efficient manner.

To allow using web technologies in a native environment, Cordova will produce an application during the compilation process with 2 major things:

  • An application with a WebView component, integrated web browser
  • A series of resources to embed the web application files

Very little code is necessary to integrate Cordova's API to an existent web page, simply add a fictitious JavaScript file only available after compilation:

<script src="cordova.js"></script>

At last, it is possible to attach a specific event trigger to detect that the API is available and ready to be used:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() { /* INIT */ }

What's New in Visual Studio

In order to promote crossplatform development using Cordova, Visual Studio adds a new project type under the JavaScript and TypeScript categories.

In addition to initializing your development with a basic file tree, the IDE also adds two new emulators.

Android Emulator

The first one is brand new and is the new concurrent of its little brother: it is the Visual Studio's Emulator for Android. It is now possible to run and debug our application on an Android emulator directly from Visual Studio, without launching the Android SDK's emulator. Among the improvements, we notice a startup time that is extremely quicker than its counterpart. Also, it is possible to stimulate some of the APIs of the emulated device like the accelerometer or the GPS.

Ripple Emulator

The second, also a product of the Apache Foundation, is Ripple. It was originally a Chrome extension aimed to test and stimulate Cordova's APIs in a sensibly quicker environment. Visual Studio, in addition to open it in a Google Chrome window (interesting opening from Microsoft), does not stop there. It is possible, once you have launched the emulator, to edit the source code of the application and see the emulator update itself to absorb the usual reset debug time.

Visual Studio should go further soon and propose to deploy for you the application on a physical device and allow you to debug it as simply as local. Currently, there is still an issue keeping the debug mode from activating on a physical device. But the application is indeed deployed and launched. This bug is a known issue, so we shouldn't wait very long before it is resolved. Android, iOS and Windows Phone are now in the scope of web developers of any level, but not only.

It is important to notice that Cordova does not just target mobile applications. It is also possible to create Windows Store applications or Ubuntu.

Points of Interest

Cordova facilitates greatly web developers work and allows to put a first feet in the mobile development environment without losing his bearings. It is by the way possible to keep most of his work habits, especially everything about responsive design which allows to benefit of a much more flexible technique than "layout" definition for each desired resolution.

However, it is important to care more about animations, generally realized in JavaScript to be compatible on more web browsers. With a native application, this is not necessary anymore. You can target a specific OS version to ensure prerequisites, what we cannot on a client station potentially using Internet Explorer 6 or 7. On the other hand, the CPU and the available RAM are not as important as on a computer yet.

So we should replace "inline" JavaScript animated (what Foundation does, for example) by CSS transitions. Moreover, it is preferable to use new CSS3 functionalities to impact the GPU when this is relevant in order to avoid a "reflow" phenomenon. We can observe it when element dimensions are changing, which can temporary slow down the browser during the computing of what this change can do on the rest of the page. For example, it will be much more efficient to use a transition on the "transform" instruction (via "translate") rather than "top" and "left" coordinates. At last, if optimize his DOM and JavaScript can be seen as unnecessary on a computer, this is much more important on a mobile device.

For example, this CSS will work on more web browsers but will be inefficient:

.slide.inactive {   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 0;   
    left: -100%;   
}   
.slide.active {   
    position: relative;   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 1;   
    left: 0;   
}

This one, on the contrary, will be less compatible but way more performant, since it will not trigger a reflow:

.slide.inactive {   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 0;   
    transform: translateX(-100%);   
    -webkit-transform: translateX(-100%);   
}   
.slide.active {   
    position: relative;   
    transition: all 0.5s ease-out;   
    -webkit-transition: all 0.5s ease-out;   
    opacity: 1;   
    transform: translateX(0);   
    -webkit-transform: translateX(0);   
}

To go further, we should experiment specialized front-end frameworks like Iconic. It is interesting to notice one of their mantras:

Performance obsessed
Speed is important. So important that you only notice when it isn't there. Ionic is built to perform and behave great on the latest mobile devices. With minimal DOM manipulation, zero jQuery, and hardware accelerated transitions, one thing is for sure: You'll be impressed.

To finish, there is a GitHub repository where is hosted the source code of a Cordova « PowerPoint » like application.

Sources