Designing a hybrid mobile application with Ionic Framework

We all are past the nuances of mobile-web applications and their types namely

1. Web Native (m-site/RWD site)

2. Web Hybrid (cordova/phonegap/titanium etc)

In this particular post I will be talking about Ionic in particular as it has become my personal favorite recently

When it comes to Mobile Hybrid Application the initial brainstorming for deciding tools and frameworks itself is a challenging job.

The design/architecture idea behind an application is deemed successful after months of quality development and one wrong framework or tool can turn the tables.

 What comprises of the client side is shown below:

Why Ionic ?

Most of contemporary hybrid mobile applications are build using a combination of Awesome Frameworks like Knockout, Backbone, Bootstrap, JQM etc. Theses are independent frameworks which are hooked together to create a Mobile experience.

These frameworks are strong in those particular areas of App development for which they have been created, they offer various features to developers eg:

Knockout: great in UI bindings

Backbone: great in app skeleton and collection views

Angular: great in app skeleton, UI bindings and custom controls, dependency injection

Bootstrap: Great in RWD and UI widgets

JQM: Good in mobile UI widgets with jQuery(Awesomeness in Dom manipulation)

Ionic is also a new powerful framework built upon the awesomeness of AngularJS, This framework has UI widgets that leverage the directive feature of Angular thus things like scope inheritance etc are directly taken care of.

Ionic is wrapped around Angular-UI and hence state maintenance and navigation patterns are not a thing to bother about.

Ionic bundles around cordova hence the initial seed project itself will give cordova library and files. Commands like Ionic build ios are present

Last but not the least Ionic CSS is based on SASS tech and hence customizing themes and styles is not much of an overhead.

An ionic project provides to the developer all the bare minimum tools and framework to start building a mobile app.

Underlying technology stack:

1. AngularJS

2. Angular-UI

3. SASS

4. Cordova

5. Bower (repo management for above libraries)

6. NodeJS (For downloading Ionic project along with other tools and libraries)

7. Gulp (Awesome alternate to build systems like Grunt and Ant). Based on Javascript hence platform Agnostic

Lets dig deeper:

What does the Ionic project offer?

I am not going to explain the files and directory structure as it is available via a Youtube video mentioned on Ionic website. However I am going to discuss about some pretty decent features that I explored.

1. CSS components: Ionic has carefully designed UI components like form controls, lists, cards etc matching the current web standards keeping in mind iOS flat design and Android material design.

The closely mapped UI controls(directives) give attributes that helps in leveraging Ionic styles with ease and options like choosing CSS overflow scroll over Ionic javascripty scroll are easy to use.

A flexible usage of 

and

 gives same look and feel with different functionality one being a pure HTML element with ionic styles applied other having directive functionality like swipe to reveal buttons.

This feature of Ionic where CSS components serve a basis for Javascript components is the best part I like about Ionic

2. Javascript components: A mature framework leverages the advantages of parent child view relationships in order to bring modularity between View objects. The view controller aspect of Ionic inspired from Cocoa Touch when brought in conjunction with Angular UI gives a Native feel of switching between views without any Lag. The best example of it being Ionic tabs

• These components extend Angular directives and services to easily inject into the view controller and manipulate the UI view. Delegates in order to select correct component rather than traditionally accessing a component via Dom Util is a plus point.
• Some services provide promises to initialize UI components without freezing the UI unlike the traditional way used by jQuery UI.
• It provides abstract services for detecting hardware interactions like keyboard and back buttons in case of Android thus providing flexibility to custom functionality.
• It provides out of the box features like Lazy loading and Scroll Use cases.
• It wraps device ready so that when Cordova and Ionic plugins have been initialized it will fire at appropriate moment.
• It handles the famous 300ms delay thus pushing out use of libraries like fastclick etc. It also gives in a backdoor to disable fastclick for touch sensitive libraries like Google Maps
• It gives DOM util functions along with gesture support also.

Sweet are the uses of AngularUI/Resources:

• An ionic seed project will show App states that are basically the angular-ui states, these in turn can be used to build nested views independent of each other having corresponding Model objects leveraging the resources factory which returns data promises.
• Ionic leverages abstract sates in its components like Tabs which in turn provides flexibility in controlling display of tabs at runtime at the parent controller level.
• Data promises that can be resolved in app states is another aspect that gives seamless UI navigation experience rather than hiding behind the curtains of spinner to load and update the UI
• State change events can leverage rootscope and provide deep linking into the application in case of conditional launch like push notifications.

 Thus a powerful framework that is good in performance without any UI lags with an integrated modern build system is definitely the need of the hour.