My Cordova & Ionic Toolchain - Code Tools - Part 1 : Why Not Visual Studio?

I lately have been doing lots of experimentation and development using Apache Cordova and Ionic. This will be part of a series of blog posts where I will write about my experiences and thoughts about developing for the said platform(s).

Visual Studio is the most turnkey solution here. It does everything, from project creation to deployment, just not very well when it comes to the development and configuration aspect. It also has very good integration with Visual Studio Emulators for Android which, in my opinion is the best, free Android emulator if you are a M$FT Windows user.

The UI to configure Apache Cordova's config XML is somewhat lacking. It currently allows you to add platforms, configure the desired Apache Cordova version, install plugins and specify application metadata (application name, version, singleTop view mode etc). However, it does not allow you to configure plugin settings such as splash screens, icons and all that. Personally I find it weird why it can't be done since when you install a plugin, the config XML is updaated by Apache Cordova anyway. It shouldn't be out of the realm of possibility to simply add a key value pair editor for the configuration of the plugins at the very least.

Regarding the plugins installation, near as I could tell at the time of this writing, Visual Studio 2015's Apache Cordova plugin does not seem to use NPM's package.json file to specify what plugins are being used. It seems to instead use its own XML nodes located in the config.xml file. It can be seen here:

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.myapp98f823" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">
 <name>PartsScanner</name>
  <description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
  <author href="http://cordova.io" email="dev@cordova.apache.org">Apache Cordova Team </author>
  <content src="index.html" />
  <access origin="*" />
  <vs:features />
  ..
  <vs:plugin name="cordova-plugin-camera" version="1.2.0" />
  <vs:plugin name="cordova-plugin-dialogs" version="1.1.1" />
  <vs:plugin name="cordova-plugin-inappbrowser" version="1.0.1" />
  <vs:plugin name="cordova-plugin-console" version="1.0.1" />

As you can see, Visual Studio adds its own namespace and markup in the config.xml file. Not really an issue if you are using Visual Studio exclusively. It will however be a problem when you are collaborating with people who use other tools or operating systems. I personally am not too fond of this kind of additions. This will mean that there is a non-standard layer working on top of Apache Cordova's (of which Ionic is built on). I think a far better solution would be to work with how Apache Cordova's works now which is via the Cordova NPM extension which, interestingly enough is also used by Visual Studio. Yes, Visual Studio 2015's Cordova plugin management is built on Node.JS's NPM system as well from what I can tell.

I also believe these weird add-ons are whats causing Visual Studio 2015 Tools for Apachce Cordova to be a bit wonky with Apache Cordova versions that are greater than 5.3.3. The version of Visual Studio 2015 Tools for Apachce Cordova at the time of this writing is 14.0.51016.1. If you are getting errors when deploying to the emulator. Just ensure your selected Apache Cordova version is 5.3.3 and not greater than the version I mentioned.

Hopefully they will get this fixed. I am not against Visual Studio 2015. I actually think it is up there with JeBrains IntelliJIdea and I would love to use it even-though it is a resource hog. It is nice to have everything you need in one place, even-though it is quirky.

That being said, I find myself equally productive using a standard code editor like Sublime 3, Brackets and Visual Studio Code. Just that I needed to get the command line actions nailed and you're good to go. As mentioned in My 2 Months with Ionic & Cordova blog post, I can also have a very good debugging experience via Google Chrome. In case you are wondering, I can debug emulators and devices as well. It may not be as straight forward as Visual Studio but like a good driver prefers to engage his own gears rather than leave it to the car, I find myself doing that as well. The more I use this, the more I am sucked into just needing a command prompt/shell terminal, code editor, emulator and Google Chrome.

What would I recommend? Well I am still deciding to be honest but I will be sure to write about it, hopefully in not a too verbose manner.