Visual Studio 2015 and Apache Cordova

Visual Studio 2015 and Apache Cordova



Before starting, ask yourself these questions:

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

The proportion corresponding to this last question is, due to learning time and professional profiles, more than reduced. Indeed, the job market rarely recruits profiles that are extremely multipurpose just because they are more expensive, but cannot do more than one task at a time. The expertise of a consultant grows depending on this hypothesis. Cross-platform tools like Apache Cordova tend to sensibly increase this last number.

Overview of cross-platform solutions

Between the web browser and native mobile operating systems, we can quote 3 major tools. Unity, thought to be a development tool usually for video games is the closest to native. It has the feature of good performance, but of course it requires a specific and relatively sharp learning curve. Xamarin, the development tool based on the Mono Project, is much more affordable, especially with .NET developers. It helps bring the benefit of Microsoft's framework to foreign platforms. Finally Cordova, thanks to a nearly zero learning curve, is for realizing mobile and multiplatform applications using the same techniques as mobile-oriented web development.



Some history

The Cordova project was for 3 years a PhoneGap project launched by the Adobe corporation, worldwide known 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 has graduated to the top level project in October 2012.



Back in May 2014, Microsoft release the Update 2 of Visual Studio 2013. On this occasion, a brand new extension named "Multi-Device Hybrid App" appeared. It allows a better integration of Apache Cordova into Visual Studio using a new project type and a dependencies installer. After this first release that has received a nice echo from the Microsoft community, a second version has appeared and with it is new functionalities and 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 using the Visual Studio installer from an option. If it is chosen, it triggers a second installer that allows choice of precisely the dependencies you want to install: Ant, Android, Java, NodeJS and many more.

What Cordova brings

It is impossible for a classic website to solicit a customer using its SmartPhone bying 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 that runs the application. Notifications, Geolocalisation, vibrator, camera, storage, all of these functionalities, out of range of oriented mobile development and are yet essential, allowing access to the target of a product in a very efficient manner.

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

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

Very little code is necessary to integrate Cordova's API into an existing web page. Simply add a fictitious JavaScript file only available after compilation:

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

Finally, it is possible to attach a specific event trigger to detect that the API is available and ready for use:

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

What's new in Visual Studio

To promote cross-platform development using Cordova, Visual Studio added 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 emulator is brand new and is the new concurrent of its little brother, it is 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 faster 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 opening 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 might 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 the 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 a web developer's work and allows them to put their first feet in the mobile development environment without loosing their bearings. It is by the way possible to keep most of his work habits, especially everything about responsive design that allows benefiting from the very flexible technique of "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 insure prerequisites that we cannot do on a client station potentially using IE 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 animation (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 to avoid a "reflow" phenomenon. We can observe it when an element dimensions are changing, that can temporarily 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. Finally, if the DOM is optimized 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 provide much better performance, 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 with specialized front-end frameworks like Iconic. It is interesting to notice one of their mantra:

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: 

• Visual Studio Tools for Apache Cordova
• Cross-Platform Mobile Development with Visual Studio
• Apache Cordova gains Windows 8.1 and Windows Phone 8.1 support
• Apache Cordova integrated in Visual Studio for Multi-Device Hybrid App development
• About Apache Cordova
• Tools for Apache Cordova Update: iOS Debugging & Windows 8.1 Support
• Performance & UX Considerations For Successful PhoneGap Apps
• Apache Ripple