Exploring mobile application development

Recently I’ve taken interest in mobile app development so I can break out of the standard workflow which I’ve become accustom to over the years. My bread and butter set up is centred around Visual Studio, SQL Server, ASP.NET WebForms, ASP.NET MVC, jQuery, and more recently AngularJS. Those technologies actually put fish, steak and all sorts of other foods on my dinner table. As I enjoy playing with different technology stacks outside of work, I thought I would take on some mobile development so I can write small apps for myself and perhaps bring some of my learning’s in to the workplace.

In order to build mobile apps there are many new skills to be learned and practices which are still unfamiliar to me. I think it’s worth writing down my journey here for the simple fact of solidifying what I’ve learned and perhaps give someone some else a head start who’s in the same position.

My requirements

There are various products on the market to develop mobile apps and each of them serve a specific purpose and market segment. As someone who spends around 10 hours a month (sometimes less) working on personal projects, I’m looking for a free solution which has high code reuse for both the UI and app code and have decent tooling available.

Although I would prefer to stay in Visual Studio, I am more than comfortable with Vim and the command line so it’s not a hard requirement. I’d also like to use my existing skill set so I will not be considering any Objective-C or Java based solutions.

As I spend a little time each month developing, I can’t justify a monthly subscription model until things get more serious. Still, it’s worth mentioning paid solutions as I did some research and played around with them anyway.

Xamarin

Xamarin is a great product. It allows you to write in your favourite .NET language and then “converts” it to a native implementation. It uses AOT (ahead of time) compilation to output native binaries for iOS and uses the mono runtime on Android.

There’s lots of support from the community, excellent documentation, integration with Visual Studio and a UI abstraction called Xamarin forms which allows you to reuse your XAML based UI code and all with the benefit of native performance. Of course there is a subset of the .NET framework that it’s restricted to but Portable libraries found on NuGet do fill in the gap.

If I were writing an app for the enterprise I’d definitely choose Xamarin. As a developer who writes apps in his spare time the cost is too high.

At the time of this writing the cheapest plan is $25 per month (not expensive if it’s being used). The perpetual plans are no longer available and it’s a real shame that most companies are now adopting this model. I get it, more money. It’s hard to justify paying a regular fee knowing that it won’t be used that often. The old perpetual license meant you pay once and only pay again if you care about the next major version and I would have much preferred this pricing model.

There is also one other downside which I consider important and that is code reuse in the browser. Some apps have supporting websites with similar functionalities and sharing code is high on my priority list. I could architect my business logic in such a way that allows me output JavaScript using a tool such as ScriptSharp and that’s certainly one way I could do it. The other would be to use HTML/CSS/JavaScript across the board and I’ll get to that shortly.

Pros

  • Create native apps with native performance with a single code base for Android, iOS, Windows Phone. (I imagine there will quite a number of #if preprocessor directives)
  • A comfortable development environment in Visual Studio with very little set up.
  • Good support on sites such as Stack Overflow.
  • Great documentation.
  • Features a XAML based UI abstraction for code reuse.
  • Able to use the hardware’s native features.
  • Supports most .NET compiled languages (not sure about Iron* based languages)
  • A component store

Cons

  • Price. If I want that classic Visual Studio experience ($85 per month) I’ll need to pay (what I consider to be) an unreasonable price as a hobbyist.
  • Code reuse for business logic in a browser based version of the app would be low.
  • Not that it matters to me at this point in time, but BlackBerry, Symbian or Firefox OS are not supported.

You might laugh at that last point about Firefox OS not being supported but there is increasing uptake in developing countries and it’s something which should be considered if you plan on future proofing your application. Imagine having to rewrite your application for a new device or operating system.

Cordova

Cordova allows developers to write their apps using HTML, CSS and JavaScript which are then executed in an embedded web browser inside of a native app. It grants you access to the native hardware and operating system features via plugins which are accessible with JavaScript.

An advantage about this approach is that UI and domain specific business logic can be reused on any other device which is capable of running a web browser (or JavaScript). Granted there would probably be some platform specific code, but most of your code could be reused. It’s not a UI abstraction built on a flavour of XAML (like Xamarin forms) but plain vanilla HTML. The cost to port your app could potentially be lower.

Another advantage is being able to use all of the tooling available for HTML based apps such as bower, Lodash, AngularJS, CoffeeScript etc… There’s no shortage of JavaScript libraries.

Debugging with Cordova does take some getting used to though. It’s easy enough to launch your app in a browser such as Chrome, launch the developer tools and start debugging but when you need to actually test the app in an emulator it starts to become painful.

Any change you make will require you to rebuild your app for that platform and refresh the emulator. If you want to do remote debugging using a real device or emulator then you’ll need a tool such as weinre. Weinre sets up a local web server and listens for a HTTP request to a JavaScript file. In your markup you add in a script tag.

<script src="http://127.0.0.1:8080/target/target-script-min.js"></script>

Once the request is made, you’ll be able to debug your app in a tool which looks similar to the Chrome dev tools but a cut down version which will allow you to browse the DOM, Network, some profiling and more importantly execute JavaScript. To be honest, the tool very good and I could see myself spending a lot of time using it without too much fuss. There are some limitations but nothing to be concerned about. See Supported Libraries and Platforms.

"Weinre remote debugger"

The other option is to use Chrome dev tools to “emulate” a WebKit based device browser. It won’t emulate any bugs or features for the browsers being emulated, it’s more of a tool for getting the UI going and to help you develop your app with a quicker feedback loop. This will be my approach during the prototyping stage even though it only emulates WebKit based browsers.

With Cordova there’s a good chance I’ll be using plugins which talk to the operating system and I’d want proper emulation for that. Obviously the real device would be better. If I was debugging Android v4.4 and up I could use Chrome dev tools remote debugging to connect to the emulator. Weinre would be good for debugging on almost all devices I care about including Windows Phone (as IE does not yet support remote debugging), some Android devices older than v4.4 and iOS 4 and greater. The last thing I want is to be switching debugging tools, I’d rather stick with a single tool. For this reason I’ll stick with Weinre for the entire development process.

Pros

  • High code reuse for both UI and app layers.
  • Supports all browser based libraries and frameworks.
  • Use HTML, CSS and JavaScript.
  • Great documentation.
  • Open Source with an active community
  • A good plugin ecosystem. 409 plugins at the time of this writing.
  • A solid backing from Apache
  • Free
  • Impressive device support

Cons

  • Pretty bare bones, no UI components (although there are plenty available)
  • Setting up debugging and becoming familiar with it takes a while.

AppGyver

Build on top of PhoneGap, it’s a complete end to end solution for building HTML based apps. There’s a web based “IDE” called Composer which is a UI designer with drag and drop type support and functionality to design work flows and business logic. There are services for remote testing and deployment. For someone getting started it looks like a good fit although the web based Composer and Prototyper didn’t appeal to me very much. If I was building a proof of concept app in a commercial environment then I’d choose it without a doubt.

There is not much support on Stack Overflow which is a bummer but AppGyver does offer support both for free on their forums and paid support for a reasonable $199 per year.

"AppGyver"

One feature I loved about AppGyver was the ability to preview your app on a real device by just scanning a QR code generated by your browser (in Composer) using the AppGyver Scanner App.

For my purposes I will not be using AppGyver as it’s too much of a “walled garden” development approach.

Ionic, Onsen, WinJS and Telerik UI for PhoneGap

I grouped these products together because to me they are very similar in that they offer UI components which are meant for Cordova and are meant to replicate native UI controls. The exception is WinJS which is device agnostic and focuses on it’s own set of UI components aimed at solving different problems, mainly of working across different types of devices from tablets to TV’s.

The Ionic and Onsen controls are free and made up of CSS and JavaScript. The only supported platforms so far are iOS and Android but Ionic recently announced it will start to develop for Windows Phone. Both of these products do have command line tools to set up a brand new app but underneath they are calling out to Cordova.

There are some nice features with Ionic’s CLI which are worth mentioning. There is support for “LiveReload” which will watch for changes to the file system and refresh your app automatically. The removes the need to constantly rebuild your app with every small change. A perfect solution for when you’re connected to an emulator with a browser that supports web sockets.

The other nice feature was the ability to scaffold new apps based on a CodePen demo’s. Very cool indeed. You can read more about it here.

Ionic Toggle Example

"Onsen Example"

Telerik offer native look and feel UI components for iOS, Android, Windows Phone and BlackBerry. It’s reasonably priced at $39 per month (but requires annual upfront payment). Documentation and quality of controls are good.

"Telerik UI for PhoneGap"

WinJS is framework developed by Microsoft consisting of some UI controls, data binding, promises and a few other goodies. The UI components are meant to be universal and able to work across devices such as TV’s, tablets, phones or anything else with a supported browser and different input devices.

Once thing which could be a disadvantage is that WinJS will only work on new devices and browsers as you can see from their test status page. This of course depends on the app being built. I think it’s a solid framework which is well documented with a lot of samples to get started with.

"WinJS"

One positive thing I loved about all of these offerings was their documentation. Easy to follow samples and information on the API.

Ripple and Visual Studio

One thing which I happened to discover at the end of all my research was a plugin for Visual Studio called Multi-Device Hybrid Apps. This plugin uses Cordova and an emulator called Ripple to simulate the Cordova API. It also hides some of the Cordova specific folders in the solution so you’re left with the code that matters.

It’s quite easy to set up (although it does install quite a few dependencies) and offers the Visual Studio experience. You can build, run, debug and also get a live reload experience as offered by Ionic’s command line tool. It also allows you to select a device, choose from a list of common plugins and remote DOM inspection.

"Visual Studio Ripple Emulate"

"Multi Device plugin list"

The Ripple emulator, by Apache lets you simulate the Cordova API by being able to trigger device events, geo-location, accelerometer and a whole lot more. It currently only runs in Chrome so It’s not meant for testing browser features or bugs. For that you’ll need an proper emulator.

"Ripple Android"

"Ripple BlackBerry"

This is another option to consider for the prototyping stage instead of Chrome dev tools device emulation. Simply because the Cordova API is there and there’s no need to fire up a real emulator until it’s time for some serious testing.

It’s also open source so the community can help advance the product and there’s some really good documentation. As a bonus I can use Web Essentials 🙂

Conclusion

Based on some tinkering I’ve done over the past week and a half I think I will choose a web based solution. For me that’s Cordova.

I’m not too concerned about portability to devices such as Black Berry or Chrome Book but it’s comforting to know that any app I write has some hope of working on a device which has a modern browser.

So my beginners set up will be:

  • Visual Studio / Vim for source editing
  • Multi-Device Hybrid App extension
  • The Ripple Emulator
  • Weinre
  • Ionic UI components (coupled with AngularJS)

With my choice of Ionic I know there aren’t any Windows Phone components but that’s OK. If any of the apps I make in the future are worth investing in I’ll be purchasing the Telerik components or perhaps even rethink the UI and have a custom theme. I have seen quite a few apps do this successfully and which don’t use any of the native O/S controls.

None of this is set in stone though, this is what I’ve chosen to get me started in the mobile space and over time I’ll learn about new and better ways of developing.