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.