Using the Ionic Framework to Supercharge Your Mobile App
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:
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/.
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.
- Ionic’s Tutorials & Formulas: learn.ionicframework.com
- Ionic’s 500+ MIT-licensed open-sourced font-icons: ionicons.com
- Examples of how to use Ionic and the various UI elements provided: codepen.io/ionic/public-list
- Ionic’s Community Forum: forum.ionicframework.com
- GitHub Contributions: github.com/driftyco/ionic
- A YouTube show all about using and learning Ionic
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.