Entity view (Content)

App Development Guide: First Look Into Ionic

By jtsang
Jul. 15, 2014

What is Ionic?

Ionic is a powerful HTML5 native app development framework that helps build native-feeling mobile apps with web technologies like HTML, CSS, and Javascript.

Ionic framework was released in late November 2013, and built on top of the popular JS framework, AngularJS. Ionic uses AngularJS to provide the application structure though it focuses on the user interface. I think of it as "Twitter Bootstrap for Native" or a Drupal theme on top of your development layer.

Reasons to Use Ionic?

Want to build a mobile app in minutes with a clean, and up-to-date UI? Ionic provides you with an HTML structure and features that can make your web site look and feel like a native app.

PhoneGap, Cordova, and Trigger.io all work with Ionic (tested on Cordova 3.4) and its development team is focused on working with other technologies and their plugins.

Ionic is open-source which means you can use Ionic in your own personal or commercial projects for free.

Unlike some other frameworks, Ionic is focused on performance on the latest mobile devices. It has minimal DOM manipulations, zero jQuery, and hardware accelerated transitions. It is also matched with Google's AngularJS which is becoming more and more popular.

Why Ionic as a web designer?

  • It uses Sass.
  • It has a native application focus with more flat and modern look and feel.
  • It comes with its own free open source icon font with over 500 to choose from.
  • It uses CSS Flexible Box Layout allowing multiple responsive columns and rows.
  • It requires AngularJS, though can also support jQuery if really needed.
  • Ionic comes with native-styled mobile UI elements and layers that you get with a native SDK on iOS or Android.

Some awesome built-in features and examples:

 

Built in Side Menu

Built in Side Menu

 

 

 

Action Sheet

Action Sheet

 

 

 

Pull To Refresh

Pull to Refresh

 

 

 

Swipe Edit

Swipe Edit

 

 

 

A Sample Application

Swipe Edit     Swipe Edit
Created by Christophe Coenraets

 

References

Post Tags: