Sunday, October 4, 2015

Ionic Framework: What's coming next?

Image Reference:
In this blog I'm attempting to write about some of Ionic's upcoming features and services. These are mostly in Alpha/Beta stages of development. I believe these features are going to make Hybrid Mobile App development sophisticated, easier and fun.
If you are new to Ionic Framework, checkout docs on it's Website or One of my old blog.

Following are some of Ionic Framework's upcoming features and services.

Ionic IO: 

Ionic IO provides bunch of services for Ionic developers and customers. Features include 
  • Analytics on your app.
  • Ionic Push for push notifications to mobile devices.
  • Deploy, an interesting feature to update apps from the framework directly, skipping app store and Playstore approval processes.
  • User management for your mobile app.

Ionic View - Mobile App

As you develop with Ionic Framework, you could use emulators to test your app. How about continuously testing your app on device? Well, it's a time taking process to deploy to devices. In case of Android, I experienced wait time is much longer.

Ionic.IO Services solve this problem. During development phase, the Ionic View mobile app and cloud service allow you to update app on your device just on tap of a button.

Download Ionic View mobile app and login with your id. Similarly on your machine signup/login to

On your machine, open command prompt (or terminal) and navigate to the folder with your ionic app.

(If you are creating the app only now use ionic start MyAppName blank. Once the project is created CD into the new folder created.)

Use following command,
ionic io init
It might prompt you to login with your ionic io credentials (if you are not logged in already)

Upload your project by using 
ionic upload

On your mobile phone download and open Ionic View mobile app. You will see list of all your apps. Sync the app you want to play with and open it. You can test your app's functionality, screens etc. 


Cordova and plug-ins allow hybrid mobile app developers (PhoneGap) to access many native mobile phone features. ngCordova is a layer on top for AngularJS framework to take advantage of these plug-ins' APIs.

ngCordova exposes most of the plugin's functionality as AngularJS Services. Hence app developers can use it out-of-box.

Here is the list of services available.

ngCordova library is available as a bower component. Install by bower install ngCordova. As it's downloaded reference the ng-cordova.js in your project.

Cordova plug-ins are available soon after Cordova/Phone Gap initialization is complete. Use $ionicPlatform's .ready function callback to check if device is ready.

$ionicPlatform.ready(function() { 
 console.log("Device ready! "); 

Note: Individual cordova plug-ins need to be installed by cordova plugin add plug-in-refrence

Ionic Lab

It provides graphical user interface for developing your app.

Functions include

Serve: for browser emulation of the app. It starts a simple web server that hosts your app's HTML and JavaScript. Open the app in a browser window with an emulator. Chrome has in built emulators in dev-tools. It live reloads as you make changes to the code.

Emulate: for device emulation of the app. These are the real emulators that mimic real phones' hardware

Run: Deploy the app to a device through USB cable and run the app.

Build: Ionic App could be built to deploy to Android or iOS. It builds the app for given platform.

Upload: Upload the app to Ionic.Io services, which can be viewed through Ionic View app on your phone.

Share: Once uploaded app could be tested by multiple members using their own Ionic.Io account. This function allows sharing your app to other members. They could sync it on Ionic View app on their phones.

Plugins: It lists all ngCordova plug-ins (Cordova plugins encapsulated as Angular Services). You can add/remove references to your project.

Ionic Deploy

The app on Ionic IO could not only be deployed to devices for testing, but could be deployed to Production. It could be a powerful feature that eliminates need to go through Playstore or App Store for updates.

I'm curious and will watch this space to see if certain types of updates need us to still go through Playstore or App Store or is it going to be anything and everything in the scope of PhoneGap or Ionic doesn't require us to do so.

Apps could check for updates using the following JavaScript API (new Ionic.Deploy()).check()

var promise = new Ionic.Deploy().update() // returns a promise

   // success
}, function(error){
   // error

In conclusion, Ionic Framework is exciting, it's bringing sophistication to Phone Gap. I keep hearing people say Hybrid is not as effective as Native. Ionic framework has already has made a dent to that perception. With what's coming next in this framework, I believe Hybrid using Ionic is the way to go.