Mobile Apps, PhoneGap, Apache Cordova and Ionic

Have you ever had a terminology brain freeze – so much terminology all for what is basically the same thing that you just get confused?

Let me explain the problem. I’ve just taken on a new position – one that has me playing with mobile services in the cloud and I’m super excited about it. But it has me thinking about mobile frameworks. Let’s say I want to write a mobile app in HTML5, JavaScript and CSS – my tools of the trade for web apps in general. This should be totally doable.

What do I need?

Searching on the Internet gives me a bunch of things:

There are others, but these are the main ones. So, what’s in jargon? What are optional versions of each other and what are the dependencies. I got confused – quickly.

They All rely on HTML5 and JavaScript

That’s the first thing. All of this software are methodologies for running an HTML5 application on a mobile device natively. Mostly, that’s Apple iOS and Google Android. Microsoft Windows Phone has something else up its sleeve (see Project Westminster).

PhoneGap == Apache Cordova

More appropriately, PhoneGap is a product by Adobe that includes a distribution of Apache Cordova. Adobe donated PhoneGap to the Apache Software Foundation and part of that acceptance included getting rid of any complicating patent and trade mark issues. As a result, when it was accepted into Apache, it was renamed. Cordova wasn’t the first name, but the first name was terrible, so we won’t go there.

The major problem with Apache Cordova seems to be performance. There are a lot of posts around the Internet about poor performance of Apache Cordova apps. However, there are also a lot of posts on how you can make your Cordova apps “perform like native”. A lot of the blame is placed on the libraries – like Angular and jQuery Mobile – that you use. jQuery Mobile, in particular, gets a lot of bad reviews for the amount of DOM manipulations it does.

Other Base Systems

Aside from PhoneGap or Apache Cordova, there is Appcelerator, AppMobi, Rho Mobile (which adds Ruby to the mix) and Corona (which adds OpenGL to the mix, mostly for gaming, I’m sure). All of these provide the ability to write HTML5/CSS/JavaScript applications to leverage an internal web engine to render an application natively.

All of these other base systems seem to be commercial. If you are developing on your own dime (as I am), then these are probably less desirable.

Frameworks on top of Apache Cordova

The Ionic Framework is a framework on top of Apache Cordova. You can think of Angular as a framework on top of the browser. Ionic is basically Angular on top of Apache Cordova.

Sencha Touch is a commercial MVC framework built on top of Apache Cordova. It has it’s own native packaging as well if you don’t feel like using Apache Cordova. The key word here is Commercial.

Of course, you don’t have to use a mobile-specific framework on top of Apache Cordova – you could use any framework. Want to use Aurelia or Polymer or React on top of Apache Cordova – it’s doable. That’s because Apache Cordova uses the built-in capabilities of the mobile device to produce the render of the page. It’s like running a little web application inside of your device. React is known for its performance so perhaps that would fare better?

React Native is, well, different

Given Apache Cordova is such a bad performer because of the libraries, it makes sense to use a library that has performance at its core. That would be React – a framework by Facebook that handles the V in MVC. The rest of their suggested framework is Flux, which isn’t MVC. Flux/React implements a new paradigm – Reactive Programming – and is probably the first “big thing” in frameworks since MVC and MVVM were suggested.

If you code in React, then you will likely love React Native. It’s React, but in a mobile form factor. You wrap the code in a mobile project that’s already been written for you. Your business logic is written in JavaScript but your application UI is native. The result is that your application looks like a native app and feels (performance-wise) like a native app, but your code is in JavaScript.

So what’s the catch? Well, no Android support as yet. It’s promised, but it isn’t there. Until it is, I think React Native is not worth the effort. Despite Apples best efforts, Android is still the dominant mobile device out there.

Other Options

Of course, you don’t have to write HTML5/JavaScript for your mobile app. However, your options for cross-platform development are more limited. Xamarin is one of the leading contenders – you can develop a C# application (complete with UI designer) right from within Visual Studio.

Another good contender is MoSync. This does HTML5/CSS/JavaScript as well. However, it also does C and C++. So if you program in those languages, then perhaps take a look at MoSync. MoSync is open source if your project is also open source. (It’s GPL, not LGPL – and that is a major problem for most people). If it isn’t, then they sell a commercial license as well.

Wrap Up

If you want to develop mobile apps, then you need to support two or three platforms (depending on your requirements) – iOS and Android are slam dunks for support. That means you are going to be worried about cross-platform development.

If you choose HTML5/CSS/JavaScript, then you need to investigate PhoneGap (the Adobe product) and its underlying open source project, Apache Cordova. If you choose C#, then you need to investigate Xamarin. Both of these can be developed with or without Visual Studio.