Using the Ionic Framework to Supercharge Your Mobile App

Written by Varun Vachhar

The Ionic Framework is an open source front-end framework for developing hybrid PhoneGap/Cordova mobile apps with HTML5. We’re big fans.

There are many reasons why we like this tool and why we’ve learned to use it to the best of its capability.

Our lead Front-End Developer and Designer Varun Vachhar spoke to more than a hundred Toronto-area developers at our PhoneGap meetup at Mozilla in May 2014, to share how he uses Ionic at our web development consultancy with clients, and for his own experimental projects.

Watch the video walkthrough of Ionic and then read why we think Ionic is a great choice for HTML5 mobile app development.

Three Reasons We Think Ionic is Great

Ionic is an Open Source framework with a dedicated community-driven spirit behind its development team. It is bridging the gap between web and native app development and it has rich, native-style UI components and interactions. The UI Elements are more than just a jQuery widget. Each UI element comes with a supporting delegate service. This delegate service allows you to access and control the element itself. Delegation also allows you to have several instances of the same component in the same view. But wait… there are even more reasons to love it.

1. Ionic is best friends with AngularJS:
Ionic and AngularJS go very well together for many reasons: The UI components used in Ionic are AngularJS Directives; the framework uses delegates to control the UI elements and a UI-Router with multiple histories. It uses UI-Router for route and state management. When using Ionic you can even manage multiple history streams, allowing you to build apps with non-linear navigation.

2. You can achieve amazing style with Ionic:
When using Ionic, all the CSS is generated using SASS and the CSS was designed to be easily overridden, making it easier for developers to update in an iterative workflow and customize their apps. The CSS is stand-alone, making it independent of Ionic's underlying JavaScript. The Gulp task to compile SASS comes included in the framework. One of the big differentiating factors about Ionic is that it uses Flexbox standard to achieve a responsive layout. This allows you to build grid layouts with any number of columns (there’s no restriction to a 12 column layout), and you can even vertically align content within each column.

3. It’s performance oriented:
We’ve found Ionic to be performance obsessed, with fast and consistent interface – even though it’s relatively new. It has hardware accelerated animations and minimal DOM manipulations. You need not include jQuery, although you can add it if you want. It will reliably work for complex apps both on iOS and on Android. Coming soon - We hear that Ionic will be releasing a useful tool to build apps with a graphical interface at http://ionicframework.com/creator/.

Recommended Resources:

Before you delve into ionic, watch our video for a tutorial, above, and follow along with Varun’s tutorial on how the code works and the framework looks in action. Plus check out the following links.

Let me know what you thought of this introductory blog post on Ionic and please share it with other web developers who’ll want to hear about this great tool for their future apps.