June 29, 2015


Ionic Framework for Hybrid Mobile Applications

Before starting with the introduction of the Ionic framework, I would like to discuss the powers of HTML, CSS and JavaScript. Using these technologies, a UI Developer can create UI for cloud based applications, web applications, parallax websites, and much more.

The technology has now come so far that you can create mobile applications using HTML, CSS, and JavaScript. You must be thinking, how? Yes, this blog is all about creating a mobile application using HTML, CSS and JavaScript. After reading this blog, you will be able to start creating mobile application UI using HTML5 web technology.

Figure 1: The process of creating a hybrid mobile app using web technology

These are the 3 steps that a UI Developer must know:

  1. Creating pages in HTML/HTML5, CSS/CSS3/SASS and JavaScript/JQuery for mobile.
  2. Converting code into Native Installer using Phonegap
  3. Installing the built-in APK in android and IPA for IPhone

We know about Bootstrap; it is a HTML, CSS, and JavaScript framework that creates responsive mobile-first designs and beautiful UI structures for web sites or web applications. Similarly, there are other frameworks available to create hybrid mobile applications using HTML, CSS, and JavaScript.

The Top Hybrid Mobile App Development Frameworks include:

An Introduction to the Ionic Framework

Ionic is one of the most promising HTML 5 mobile application frameworks. Built using SASS, it provides many UI components to help develop rich and interactive apps. It uses the JavaScript MVVM framework, and Angular JS to power apps.

Ionic Installation Steps

Step 1: Install Ionic

In this step, you install the Ionic Framework and Cordova using npm (the Node Package Manager).

npm install -g cordova ionic

 npm install -g cordova ionic 
 npm install -g cordova ionic
 npm install -g cordova ionic
 npm install -g cordova ionic
 npm install -g cordova ionic
 npm install -g cordova ionic
 npm install -g cordova ionic

Step 2: Creating an Ionic Application

In this step, you can use the Ionic CLI to create a new application based on the side menu starter app.

ionic start MYAPP sidemenu
ionic serve

 ionic start MYAPP sidemenu
 ionic serve

Ionic with ngCordova

ngCordova is an Angular JS extension for easily accessing the full native functionality of the device. In order to support some native functionality of devices in your Ionic application, you need to use Cordova plugins, but ngCordova plugins are more useful with Ionic, as it gives you simple AngularJS wrappers for the most popular Cordova and PhoneGap plugins available. This way, you can take a picture, scan a barcode, upload a file, turn on your flashlight, get your current location, and much more, with just a few lines of code.

Why is the Ionic Framework useful?

  1. It is open source and has a large community. There are also a lot of blogs on the Internet to support you with smart troubleshooting tips.
  2. It provides lots of built-in components to build beautiful UI Design and Ionicons, which are also known as font based icons.
  3. It is built to perform and is compatible with the latest mobile devices. To add more to its value, it has minimal DOM manipulation, zero jQuery, and hardware accelerated transitions.
  4. It is modeled on popular native mobile development SDKs, making it easy to understand for anyone that has built a native app for iOS or Android.
  5. Most importantly, it provides a powerful CLI (command line interface); this means that one can use single commands to create, build, test, and deploy one’s Ionic apps on any platform.

Limitations of the Ionic Framework

  1. It is based on web technologies. So to achieve the native mobile functionality like camera and push notifications, there needs to be dependency on the ngCordova plugins.
  2. If a browser does not support CSS transition (like Android 2.3), you won't be able to use this feature in your project.
  3. Older versions of Android devices have performance issues when used with hybrid apps.
  4. Testing in a browser does not give you a good sense of the actual phone environment, and emulators limit your access to error logs.


The Ionic Framework is a web-based technology used for mobile app development - a crucial missing piece for UI developers until now. This framework is designed to quickly get up to speed in developing native applications for multiple devices using HTML5, CSS and JavaScript.Based on my experience, I believe that it is one of the best options for hybrid app development among other frameworks available on the web. Finally, it’s the developer’s choice concerning which framework he/she wants to use for their APP development.