In my current project, I've been helping a client develop a native iOS app for their customers. It's
written mostly in Objective-C and talks to a REST API. I talked about how we documented our REST API
a couple days ago. We developed a prototype for this application back in December, using
AngularJS and Bootstrap. Rather than
using PhoneGap, we loaded our app in a UIWebView.
It all seemed to work well until we needed to read an activation code with the device's camera. Since
we figured a mostly-native app was the way to go. We hired an outside company to do iOS development in January and
they've been developing the app since the beginning of February. In the last couple weeks, we encountered some
screens that seemed fitting for HTML5, so we turned back to our AngularJS prototype.
The prototype used Bootstrap heavily, but we quickly learned it didn't look like an iOS 7 app, which is what our
UX Designer requested. A co-worker pointed out Ionic, developed by
Drifty. It's basically Bootstrap for Native, so the apps you develop
look and behave like a mobile application.
What is Ionic?
Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly
interactive apps. Built with Sass and optimized for AngularJS.
I started developing with Ionic a few weeks ago. Using its CSS classes and AngularJS directives,
I was able to create several new screens in a matter of days. Most of the time, I was learning new things:
override its back button behavior (to launch back into the native app), how to
configure routes with
ui-router, and how to make the
$ionicLoading service look native. Now that
I know a lot of the basics, I feel like I can really crank out some code.
I learned how subviews work with ui-router thanks to a YouTube video of Tim Kindberg on Angular UI-Router. However, subviews
never fully made sense until I saw
Jared Bell's diagram.
To demonstrate how easy it is to use Ionic, I whipped up a quick example application. You can get the source
on GitHub at https://github.com/mraible/boot-ionic. The app is a
refactored version of Josh Long's x-auth-security that uses Ionic instead
of raw AngularJS and Bootstrap. To keep things simple, I did not develop the native app that wraps the HTML.