BT

Ionic HTML5 Mobile Framework Alpha Preview

by Burke Holland on Dec 27, 2013 |

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.

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

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.

Response

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."

Availability

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.

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.

Tell us what you think

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

Email me replies to any of my messages in this thread

Android version by José Abrantes

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

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

github.com/driftyco/ionic

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

Email me replies to any of my messages in this thread

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

Email me replies to any of my messages in this thread

2 Discuss

Educational Content

General Feedback
Bugs
Advertising
Editorial
InfoQ.com and all content copyright © 2006-2014 C4Media Inc. InfoQ.com hosted at Contegix, the best ISP we've ever worked with.
Privacy policy
BT