Home » Visual Studio Cordova Tools – The adventure begins

Visual Studio Cordova Tools – The adventure begins

Recently we have shifted focus towards multi-device hybrid app support. Primarily this means using Apache Cordova to package Javascript/HTML5 apps for native platforms Android/IOS/Windows Phone. The easiest way to get that up and running is Visual Studio 2013 or the Visual Studio 2015 preview. Did I mention that the Community Edition of Visual Studio 2013 (essentially the VS Professional) is now FREE? Download it here. In any event the Visual Studio Tools for Apache Cordova is a CTP (Customer Technology Preview) at the moment – CTP 3.1 to be exact. As a result some features are missing and it has some quirks, but it sets up painlessly, so it is worth the inconveniences for now. You can build first class apps with it right now.

Before I could start getting my customers excited about hybrid app development I needed some templates to get them started. There are some templates out there now. The problem is that they seem to be quasi templates – missing something from the rock solid ideal kind I want in the hands of my customers. Some are simply projects zipped up and available for reuse and others are seemingly proper project templates and collections of templates compiled into .vsix extensions, but there are some problems. The ones I found simply include aging versions of libraries and frameworks like Ionic and AngularJS requiring manual updating or they include CDN linked files that require, at minimum, an Internet connection to function at all. The CDN linked js/css do not necessarily play well with all emulators either. As a result of these encounters I undertook to develop a company specification for mobile app templates. That is where this journey begins.

In order to establish a quality standard I had to begin with product lifecycle. Ideally a template must provide value to the user by not only transparently handling the mundane and boilerplate aspects of the product lifecycle, but also giving direction and vision. At the same time there is little value in creating complexity and roadblocks. In fact this business is based on providing our customers with a rock solid development environment free from fighting the tools. We get paid to experience frustration so you don’t have to. In the case of hybrid apps we find a lot of square pegs for our round holes. The paradigm shift to web files hosted locally on a mobile device working with the device’s native API is entirely different from either server based web applications and compiled native applications. The frustration factor comes from how close yet how far the existing technology and tools come to bolt on use in hybrid apps. Having made the decisions on which frameworks, libraries and tools to use, and which I will explain in another post, the journey through the jungle of interoperability  begins in an environment of almosts. It is here that quality vendors and developers become the key to success.

One of those square peg round hole adventures popped up in Visual Studio. Delighted that I had worked out some of the software issues making my template specification closer to reality I began looking at some production metrics and what I found is the subject of this post – package size. For discussion I will refer exclusively to the Android APK app package. For those that don’t know the APK is a zip file for deploying apps to Android devices. For my benchmarking I was using a Typescript based template with a few screens, database and camera functionality that is a prototype of a data collection app template with no splash screen, icon or images. I look at the APK and the thing is almost 5MB! As a result I opened it in 7-zip and much to my surprise everything in the project is in there including my Typescript files and the Typescript declaration files. After finding out that Copy to Output Directory and Package Action in Properties had no effect on this I began web searching for an answer. The result was sparse and consisted mainly of hacking node.js files in the Microsoft Cordova build system. Of course that is a bad idea, can’t be integrated into a template library and creates complexity for the end user. This is where the quality vendor thing comes into play.

I contacted Kirupa Chinnathambi at Microsoft who told me right where to post my specific question for a quick answer. Sure enough a few hours later Chuck Lantz from Microsoft had written a Cordova plugin with enough of an answer for me to solve the entire problem. The plugin I wrote – creatively named vs-cordova-3-1-ignore-files removes the typescript files, removes un-minified js/css when a minified version exists and provides a way to exclude files globally throughout the project and exclude specific directories and files and is available for FREE! on Github. Now that APK is <1MB. My only regret is Chuck hints that it will be obsolete when Visual Studio 2015 goes RTM.

I look forward to sharing the rest of this journey.


Name of author

Name: Mike Morris