This is Part 6 in multipart series on the State of Mobile Frameworks in 2014, see
- Part 1 - The State of HTML Mobile Frameworks in 2014
- Part 2 - Mobile Frameworks – JQT (Formerly jqTouch)
- Part 3 - Mobile Frameworks – jQuery Mobile
- Part 4 - Mobile Frameworks – Bootstrap
- Part 5 - Mobile Frameworks – KendoUI
Edit: I was mistakenly under the impression from an episode of JSJabber that Ionic had used TopCoat as their UI basis for their CSS, however mistook @Tyler Renelle (creator of HabitRPG) for @Max Lynch (co-creator of the Ionic framework) so when Tyler said that they came from Topcoat I was assuming that Ionic came from Topcoat. A mistake which could have been cleared up by my looking at the CSS a little more closely when I was writing the Q&D app that wrote. I guess this kind of speaks to the strengths of Ionic that until you want to customize the look and feel of the App (which was not a point that I have reached in the toy app that made) you don’t really have to look at the CSS that much. Anyhow, to be clear, Ionic uses their own CSS which they have created and does not use Topcoat. I have edited the article to clarify that, and thanks to @IonicFramework for quickly pointing that out and not making me look like a fool for too long.
Ionic is the new hotness in the hybrid app development world, picking up steam and popularity at I high rate. It uses
Angular to allow for declarative, interactive pages and
own CSS UI to create a modern looking UI. To this, Ionic adds its own special sauce: a collection of Angular directives, a CLI
tool, some libraries and proscriptive structure for creating a mobile application.
I am a huge fan of Angular and had messed around with a bit on mobile in the past with TopCoat. It
wasn’t using a framework other than Angular and I found that it worked pretty well.
Especially on newer devices, however it seemed at the time to have some issues Android 2.3 devices (Android 2.3 is becoming the new IE 6 of the browser world).
It also seemed pretty heavy to add Angular the the little App I was making at the time.
Eventually I abandoned the experiment and ended up creating my own little framework with TopcoatTouch, but had Ionic been there (and at the state it is now) I probably wouldn’t have bothered and used Ionic. That said, Angular has certain learning curve and it takes most developers a while to “get it”, and there can be a level of frustration when things like a binding just stop working (usually involving scope).
How it Works
Ionic provides you with a CLI tool that can easily create a skeleton application (and while it seems to be a little bit of wheel re-invention here rather than using Yeoman, however it leads to a much cleaner directory and now that Bower is falling out of style, it makes some sense). The Ionic CLI also assumes that you are creating a Cordova app, which is a nice. It wraps the Cordova CLI so you only need one CLI tool, which seems to mostly be so that Ionic can sell their upcoming build service (like Phonegap Build) at some point, which I have no problem with, the more competition in the Cordova Build Services the better they will all be forced to become better. When creating a project with the ionic CLI, there are also 3 plugins added (Device, Console and the Ionic Keyboard plugin which provides some useful functionality but should be noted that it currently only supports IOS and Android).
Ionic provides some very good directives, some obvious directives, and maybe some questionable directives. They also
(through [TopCoat](http://topcoat.io)) a great and modern looking UI with CSS applied through said
directives as well as through adding classes to elements. The CLI tool is nice, but mostly just a way of setting up a simple skeleton app and
wrapping the Cordova CLI. It looks like they are also creating a nice GUI builder,
but I haven’t had a chance to play with it yet.
Angular, angular, angular. Angular (or something similar to Angular) is the future of SPA (and mobile) apps. As mobile devices get more and more powerful, Angular starts becoming something of a no brainer, it just makes development so fast compared to most other methods. It is also highly testable, reliable, and has the backing of Google and many other huge companies behind it. The Ionic CLI makes it easy to start making and application, and that is nothing to sneeze at. It is built to work with hybrid applications and Cordova from the ground up. It’s documentation is excellent, and due to its popularity (when I [first looked at the Ionic framework])/programming/2014/04/22/the-state-of-html-mobile-frameworks-in-2014/) in April it had 82 questions on Stackoverflow, it now has over 1,400) it has a lot of resources for getting answers. And to top it off, it is well designed and well written.
Next up, we see if Onsen-UI (another Angular/TopCoat based framework) adds anything to Ionic or falls short in any areas…