Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Ionic HTML5 Mobile Framework Alpha Preview

Ionic HTML5 Mobile Framework Alpha Preview


Ionic is a new user interface framework for building hybrid mobile applications with HTML5 that bills itself as the "bond between native and HTML5". It provides many of the essential mobile user interface paradigms, such as simple items like lists, tab bars and toggle switches. It also provides more complex visual layout examples such as menus that slide out to reveal content underneath.

Ionic says that it has a heavy emphasis on performance and looks to maximize its speed through limiting DOM interaction, eliminating jQuery altogether and using specific hardware accelerated CSS transitions like `translate(z)` to trigger the GPU on mobile devices, which provides hardware accelerated interactions as opposed to those provided by the underpowered mobile browser.

The focus on performance means that Ionic only supports iOS6 and above and Android 4.1 and above. "Devices have gotten much faster in the last year or so, but HTML5 Frameworks are still pretty conservative", said Max Lynch, CTO at Drifty, the company behind Ionic . "With Ionic, we are being aggressive about only supporting newer devices, and adding lots of support for touch gestures, animations, and native-style UI elements."

AngularJS Foundation

Built on top of the popular AngularJS framework from Google, Ionic utilizes AngularJS to provide the application structure, while Ionic itself focuses on the user interface. This means that all views, application routing and controllers are handled by AngularJS. Ionic does provide a set of directives for it's components so the developer can define Ionic UI components using Angular's ability to create custom HTML elements. For instance, an Ionic mobile list with inertia scrolling can be created using the `list` directive.

<item ng-repeat="item in items" item="item"></item>

Ionic also depends on Angular for touch support, animations between views, sanitizing HTML for safe input, and XHR calls.

Ionic does mention that in the future they plan to support other frameworks like EmberJS and Knockout.


The response to the release included the usual debate about trying to build native applications with HTML5, along with some concern about lack of support for versions of Android prior to 4.1. User ValentineC wrote:

"While I agree with the decision to support iOS 6 and up, I believe Android upgrade paths aren't as clear cut. I'm working on a project with China-designed phones and many of them are using older versions of Android as a point of product differentiation.

Hope it's something you guys will reconsider."


The current version of Ionic is an Alpha release. It's installable via the command line as an NPM library, which will generate your project for you using the Ionic seed, and includes everything you need to build an application with Ionic and AngularJS:

  • sudo npm install –g ionic
  • ionic start myproject

Ionic is open source and offered under the MIT license.

Rate this Article


Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Android version

    by José Abrantes,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    In the text "Android 4.1 and above", but in the site documentation "Android 4.2+".
    Which the exact information?

  • Re: Android version

    by Burke Holland,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    I got that version number from their GitHub repo home page.

    However, I've seen 4.2 mentioned in some places as well, so I'm not sure what the final word on that is.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p