Click here to Skip to main content
15,867,568 members
Articles / Hosted Services / Cordova

Visual Studio 2015 and Apache Cordova

Rate me:
Please Sign up or sign in to vote.
4.87/5 (60 votes)
14 May 2015CPOL7 min read 169.8K   17   89   21
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

Image 1 Image 2

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.

Image 3 Image 4 Image 5 Image 6 Image 7

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.

Image 8

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...

Image 9 Image 10

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
Image 11

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:

HTML
<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:

JavaScript
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.

Image 12

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

Image 13

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.

Image 14

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.

Image 15

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:

CSS
.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:

CSS
.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.

Image 16

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

Sources

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
France France
.NET Consultant hugocarnicelli.com, Microsoft MVP 2016.

Comments and Discussions

 
Questionms sql and Cordova Pin
meriodoc8-Feb-17 19:36
meriodoc8-Feb-17 19:36 
Questionweb Service in Apache Cordova or how can we communicate with database? Pin
Member 1258104817-Dec-16 19:24
Member 1258104817-Dec-16 19:24 
QuestionWhat is the Natif? Pin
DongJin Kim27-Oct-15 20:14
DongJin Kim27-Oct-15 20:14 
AnswerRe: What is the Natif? Pin
Hugo Carnicelli3-Nov-15 4:05
professionalHugo Carnicelli3-Nov-15 4:05 
QuestionGood article. Thanks. Pin
After20506-Aug-15 7:56
After20506-Aug-15 7:56 
GeneralGood post for beginner Pin
vermavirender5-Aug-15 18:50
professionalvermavirender5-Aug-15 18:50 
Questionpetty nice post , could you give me a good sample apps you have developed ones? Pin
Mansoor Alikhan K12-Jun-15 20:49
Mansoor Alikhan K12-Jun-15 20:49 
AnswerRe: petty nice post , could you give me a good sample apps you have developed ones? Pin
Hugo Carnicelli13-Jun-15 0:40
professionalHugo Carnicelli13-Jun-15 0:40 
GeneralRe: petty nice post , could you give me a good sample apps you have developed ones? Pin
Mansoor Alikhan K17-Jun-15 0:37
Mansoor Alikhan K17-Jun-15 0:37 
Questionplease check spellings before posting it! Pin
AlexWang201013-May-15 8:26
AlexWang201013-May-15 8:26 
AnswerRe: please check spellings before posting it! Pin
Hugo Carnicelli13-May-15 8:37
professionalHugo Carnicelli13-May-15 8:37 
GeneralRe: please check spellings before posting it! Pin
AlexWang201013-May-15 8:42
AlexWang201013-May-15 8:42 
GeneralRe: please check spellings before posting it! Pin
Hugo Carnicelli13-May-15 21:50
professionalHugo Carnicelli13-May-15 21:50 
GeneralMy vote of 5 Pin
Renju Vinod15-Feb-15 17:21
professionalRenju Vinod15-Feb-15 17:21 
Generalinteresting overview - My +5 Pin
Liju Sankar9-Feb-15 0:54
professionalLiju Sankar9-Feb-15 0:54 
General5 Pin
Oshtri Deka7-Jan-15 22:24
professionalOshtri Deka7-Jan-15 22:24 
GeneralMy vote of 5 Pin
Humayun Kabir Mamun6-Jan-15 19:58
Humayun Kabir Mamun6-Jan-15 19:58 
QuestionVisual Studio 2015 Express and Apache Cordova Pin
Antoine Diekmann5-Jan-15 3:52
Antoine Diekmann5-Jan-15 3:52 
AnswerRe: Visual Studio 2015 Express and Apache Cordova Pin
Hugo Carnicelli5-Jan-15 8:44
professionalHugo Carnicelli5-Jan-15 8:44 
GeneralMy vote of 5 Pin
Antoine Diekmann5-Jan-15 3:50
Antoine Diekmann5-Jan-15 3:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.