Ionic Framework and Cordova Debugging

To be honest, up to now I was not a big fan of Cordova / Phonegap development. The idea sounded good, but it was just too much hassle.

  • There’s a lot to configure
  • Some of these config values are far from intuitive
  • Some might even endanger the whole human species
  • My beloved AngularJS application powering my phonegap application behaved differently on different systems
  • There were glitches in the UI
  • Performance was, um, not that good
  • Hard to debug

Now. One might argue that delivering an AngularJS application as a Phonegap package might not be the best idea in terms of performance. Why? Well, what is amongst the worst thing you can do to a browser? DOM Operations and access to computed DOM Properties. Because they are slow.

And what does a clientside MV* Framework like Angular do a lot? DOM Operations.

So far, so sub-optimal. There is a path to more performance, and it basically means to optimize you AngularJS application. I don’t want to go into detail here, because now finally I want to get to the point about Ionic: This very promising framework is taking quite a lot of these troubles off of your shoulders. Particularly, I like these aspects about Ionic:

  • They are using AngularJS
  • They are taking care of Angular performance, so you can use the powerful benefits of this framework
  • They are using UI-Router for navigation
  • They provide us with a set of directives to facilitate cross-mobile-phone development
  • And of course with HTML structure and css styling to iron out the minuscule differences in browser engines

Sounds like a good deal to me. They even provide tooling on top of cordova to help scaffolding an application.

Bespoke tooling does not, at the moment, support Windows Phone. Still I wanted to find out how an Ionic application looks/behaves like on a Windows Phone – the most important reason being the absence of Android and iOS devices from my personal array of handhelds.

After setting up Ionic (read carefully) and scaffolding out an Android application (WP not supported, remember?) I dragged the contents of the www folder into my public dropbox folder, sent me a link to it and opened it in my Windows Phone browser.

As long as the application does not use phonegap specific features, we can debug it in a normal browser without changes


So far for a first glance.

Hope that helps,