Ionic – Mobile UI Framework for PhoneGap/Cordova Developers

January 20, 2014By 11 Comments

Over the holidays I came across this nifty new open source framework called Ionic that I was intrigued by and wanted to share with others. Ionic is currently in alpha state, but it’s definitely worth checking out. It was created by the guys who are responsible for some other successful projects including Jetstrap and Codiqa over at Drifty. The best way to tell you what it’s about is with a sentence pulled from their documentation that sums it up well.

Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like “Bootstrap for Native,” with support for a broad range of common native mobile components, slick animations, and beautiful design. Ionic also gives you some opinionated but powerful ways to build mobile applications that eclipse existing HTML5 development frameworks.

Ionic is both a CSS framework as well as a JavaScript UI library. If you’re an AngularJS developer you will be right at home as Ionic uses AngularJS Extensions via directives to provide user interactions, gestures, animations and more. It follows a View Controller pattern where their built-in Controllers handle the UI interaction with the view.

You don’t have to use the AngularJS extensions to take advantage of Ionic, you can also use the CSS alone which includes a bunch of UI components including tabs, buttons, headers, footers, lists and and others as well.

What Does it Include?

  • A comprehensive set of UI Components – tabs, headers, navigation, modal, toggle, checkbox, radio, action sheet, loading, slide boxes, cards, range etc.
  • Icon Pack – Ionic has a large set of icons to be used with your mobile apps easily, including some animated ones.
  • View Stacks / State Management – Ionic has built-in state management for your views to keep track of navigation history. It gives you the ability to push more than one template into a page at one time as well as push data to a view.
  • Automatic Transitions based on History – Ionic will transition views to slide left and right automatically based on history.
  • Gestures – Ionic incorporates the popular Hammer.js to provide gesture support for things like tap, swipe, drag etc.
  • UI Interaction Handling – via AngularJS extensions (ie: handling when a tab is clicked, shown or hidden).
  • Side Menus (Slide out) – built-in support for side menus to be toggled when the menu icon is clicked and slide into view.
  • Pull to Refresh – you can easily add pull to refresh capabilities to your scroll area that includes a default icon and animation.
  • Infinite Scroll – an example of how to use it is included in the starters.
  • Full Screen Apps – via the use of the cordova status bar plugin to remove the status bar.
  • Customizable Theme – since the Ionic base theme was built with Sass for the resulting CSS, you can easily go in and customize it to create your own theme. The base look is more of an iOS7 flat look but can be changed as desired.
  • Advanced Routing – using the AngularUI Router module.
  • Grid System via theCSS Flexible Box Layout Module (aka flexbox) standard.

What Does it Look Like?

Below are a couple of screenshots running samples on the iPad and iPhone Simulator via XCode. The first is using the Ionic CSS only and the 2nd using the AngularJS extensions for tabs and navigation. You should also definitely try out the starter samples from github.

Using CSS only

Ionic Sample Components

Here is the snippet of code for the above screenshot:

<div class="platform-ios7">
    <div class="bar bar-header bar-positive">
        <button class="button icon ion-navicon button-clear"></button>
        <h1 class="title">My Application </h1>
        <button class="button icon ion-edit button-clear"></button>
    </div>
    <content>
       <div class="list card" style="margin-top:70px">
            <a href="#" class="item item-icon-left">
                <i class="icon ion-home"></i>
                Enter home address
            </a>
            <a href="#" class="item item-icon-left">
                <i class="icon ion-ios7-telephone"></i>
                Enter phone number
            </a>
        </div>
        <ul class="list card">
            <li class="item item-checkbox">
                <label class="checkbox">
                    <input type="checkbox">
                </label>
                Save Password
            </li>
           <li class="item item-checkbox">
                <label class="checkbox">
                    <input type="checkbox">
                </label>
                Auto-Sync
            </li>
        </ul>
        <ul class="card list">
            <li class="item item-toggle">
                <label class="toggle">
                    <input type="checkbox">
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
                Airplane Mode
            </li>
        </ul>
        <div class="card range">
            <i class="icon ion-volume-low"></i>
            <input type="range" name="volume">
            <i class="icon ion-volume-high"></i>
        </div>
        <div class="card list">
            <label class="item item-radio">
                <input type="radio" name="group">
                <div class="item-content">
                    JavaScript
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
            <label class="item item-radio">
                <input type="radio" name="group">
                <div class="item-content">
                    HTML5
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
        </div>        
        <button class="button button-royal" style="margin-left: 3px">
            Royal Button
        </button>
        <button class="button button-calm">
            Calm Button
        </button>
        <button class="button button-balanced">
            Balanced Button
        </button>
        <button class="button button-energized">
            Energized Button
        </button>
        <button class="button button-clear">
            Clear Button
        </button>
        <button class="button button-dark">
            Dark Button
        </button>
        <button class="button button-positive">
            Positive Button
        </button>
        <button class="button button-full button-balanced">
            Full Width Button
        </button>
    </content>
</div>
<div class="tabs tabs-icon-top tabs-positive">
        <a class="tab-item">
            <i class="icon ion-home"></i>
            Home
        </a>
        <a class="tab-item">
            <i class="icon ion-star"></i>
            Favorites
        </a>
        <a class="tab-item">
            <i class="icon ion-gear-a"></i>
            Settings
        </a>
</div>   
The above sample code is simply to provide the UI using the Ionic CSS classes available. For adding behavior, interaction handling etc, you would either implement that yourself or you can use the AngularJS extensions provided by Ionic. Find out more on that in the next example below.

Using Extensions (via AngularJS Directives)

Navigation via a tab bar is a common mobile paradigm, and a good example to show how you might use Ionic to handle it with their Angular-Ionic extensions. Their Angular-Ionic seed project includes a simple example of how to implement it and a screenshot is shown below, but I uploaded a hosted version to try it out here.
Screen Shot 2014-01-13 at 12.15.29 PM

Below are a couple snippets of sample code from the example app that shows how you could use easily implement tab navigation with the Tab Bar Controller (Angular-Ionic extension).

Sample Markup (showing one tab)

...
<tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="fade-in-out"
      tabs-type="tabs-icon-only">

<!-- Pets tab -->
    <tab title="Pets" icon="icon ion-home" ng-controller="PetsTabCtrl">
      <content has-header="true" has-tabs="true">
        <list>
          <item ng-repeat="pet in pets" type="item-text-wrap" href="#/pet/{{pet.id}}">
              <h3>{{pet.title}}</h3>
              <p>{{pet.description}}</p>
            </item>
          </item>
        </list>
      </content>
    </tab>
...
//Rest of the tabs here
...
</tabs>

Tab handler code
Here’s some example code showing how you would implement handling that tab being shown or hidden in your code:

// A simple controller that fetches a list of data
.controller('PetsTabCtrl', function($scope, Pets) {
  // "Pets" is a service returning mock data (services.js)
  $scope.pets = Pets.all();

  $scope.$on('tab.shown', function() {
    // Might do a load here
  });
  $scope.$on('tab.hidden', function() {
    // Might recycle content here
  });
})

More details on the Ionic Tab Bar Controller handling can be found here.

Getting Started

You can download or clone the latest release of the Ionic project from Github here. It includes a set of example apps (under /examples/starters) that you can refer to and you can get the Sass source files (under /scss) to customize your theme if desired.

When you’re ready to create your own app, the easiest way I found was to install and use their Node.js tool to create a seed project that contains all of the dependencies for Ionic as well as some sample code.

$ sudo npm install -g ionic
$ ionic start myproject

Once the seed project is created, it will look just like a base cordova/phonegap app with platforms, plugins, merges, www etc folders, so at that point you can add the platforms you want via the cordova/phonegap CLI commands. To run the examples shown above, I simply built for iOS using the $ phonegap local build iOS command (or if you’re using cordova CLI $ cordova platform add ios etc) and opened the resulting .xcodeproject (from the platforms/iOS folder) in Xcode and ran it. For a more comprehensive guide on getting started, see their docs here.

My initial experience with Ionic was very positive and I found it well-documented with many code samples, tutorials and a seed project to get up and running quickly, particularly considering it’s alpha state (came out late November 2013), so check it out. I plan to continue to try out their features in my own development and more extensively in the near future as well and will blog features or samples I think might be useful to the rest of you :).

Filed in: AngularJSCordovaMobile DevelopmentPhoneGapPhoneGap 3.0 Tags:

About the Author ()

Comments (11)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. Quickly start an app using Yeoman, Ionic, AngularJS and PhoneGap | Blog MNCC | February 10, 2014
  1. Max says:

    Hi Holly, just wanted to thank you for the great Ionic write up (I’m one of the creators). We are big fans of your blog over here (taught us more than a few things about PhoneGap/Cordova). Take care!

  2. dsimard says:

    I was discussing it with on of the user of my grunt-angular-phonegap project ( https://github.com/dsimard/grunt-angular-phonegap ). Even with bootstrap 3, it doesn’t feel native enough. We were looking for a better solution and I think we might have found it!

  3. Maxime Robert says:

    Ionic is definitely a promising tool, but keep in mind the (very) restricted compatibility (http://ionicframework.com/docs/#browser-support): iOS 6 and 7 (nearly 100% of iOS devices) and Android 4.1+ (only 60% of Android devices).
    And even though it is PhoneGap based, there is no sign of any other OS support (WP8 ? BB 10 ? …)

  4. seba says:

    Also been following ionic recently.
    I was thinking of what a HTML5 mobile framework would need and I find Ionic to be really close to what I had in mind, only piece missing is good data management like breezejs provides

  5. Greg says:

    Ionic is really good. The community is really helpful and the ability to produce some really nice looking, performant apps is super easy thanks to the way they have utilised AngularJS and the hardware accelerated aspects of web development. Then you remember its an alpha build and you can’t wait for the beta!

    I highly recommend it.

    Ps. Holly your quote mark images are the wrong way around! They should be 66 99, not 99 66…picky I know but I’m a developer at the end of the day and we’re an odd bunch!

  6. Reza says:

    I have Topcoat.io and Ionic in my radar for awhile.
    Both of them are promising projects. Although I develop with Angular, IMO, the Topcoat has better modular development model, plus the performance as one of the main targets of that project.

  7. mashtheweb says:

    Sounds very promising! I for one believed Phonegap had a future in web development and there was always going to be that question of native vs web app, this looks like bridging that gap a lot closer.

  8. Ionic looks good in android and ios but when i checked it in win7 emulator it wasnt that smooth.But still worth to look at.I dint find
    way for data sturucturing too

  9. Alain says:

    Ionic is great, we started a project with it, because of the integration with Angular.
    The cordova integration is smooth even if not easy to find in the documentation (Platform ready).
    Right now I find that Side menu and Tabs do not work well together, but that’s not a big deal.

    Among many UI frameworks, we choose this one for the great list of components, almost matching a jQuery Mobile I’d say.

    Easy to configure with sass too.

Leave a Reply