Ionic JavaScript thoughts

Published February 21, 2016

First, Ionic is a JavaScript framework for building mobile apps. It's built on Cordova (the free version of Phonegap) and AngularJS and gives you a set of tools for compiling your code into a native app with a webview. It comes with some AngularJS services and directives for emulating mobile functionality as well as handling effects like screen sliding transitions.

In general I was surprised by just how native the running product feels. You have to do some work to keep it that way, of course, but for a simple forms based app it's very achievable to end up with something that looks and feels native. Savvy users will spot the difference, but most probably won't. The CSS graphics performance on a modern iOS device (say iPhone 5+) is very good and the animation effects are smooth. On Android (5) things are a bit choppier, but still acceptable.

The other major positive is that it's much more convenient to develop things locally in a browser, and use all the debugging tools that come with it, than to go through the much longer debug cycle of deploying native code and trying to use an unfriendly debugger that frequently just dumps you to a page of assembly code. I definitely find HTML, CSS and JS to be a faster and more pleasant development environment than Objective C and Xcode's UI designer (I can't speak for native Android development).

There are also downsides to Ionic:

Native functionality is provided through plugins. These are community made and the quality is wildly variable. It is easy to end up digging through the source of these yourself. On iOS, these will occasionally conflict with each other due to bad namespacing by the author. Most plugins will support iOS and Android, but support for other mobile OSes gets patchy quickly.

Although it's write-once-run-anywhere, you do end up spending a lot of time fiddling with OS specific CSS bugs. iOS's HTML renderer is far from perfect, but Android's is pretty good!

The build process is a bit annoying and we've found it hard to lock everything into our version control system due to some things about the way ionic is structured, especially in regard to mixing Linux (which can't build for iOS) and Mac machines in our project. We've also had numerous things break unexpectedly which later turn out to be due to some detail of the build process.

Ionic's JavaScript libraries are of variable quality. I recommend simply not using $ionicPopup at all and instead writing your own popup library (or finding another one), because the one built into Ionic has some catastrophic bugs like the fact that displaying two popups at once will render the first unresponsive, which means the user has to restart the app. There's also a timing issue with rendering a popup during a screen transition which will cause the popup to not have any buttons (so again, the user has to restart the app because they can't close it). The developers do not appear responsive in fixing these issues. Other services have smaller bugs which are less problematic, but still don't inspire a huge amount of confidence.

Overall: pretty good, but not without problems.

Filed under: javascript, programming, technology, ionic

Talk is cheap

Leave a comment:

HTML is not valid. Use:
[url=http://www.google.com]Google[/url] [b]bold[/b] [i]italics[/i] [u]underline[/u] [code]code[/code]
'