Ionic overall architecture and its cheat sheet.
APRIL 30, 2015
Ionic is one of the most popular Hybrid UI Framework today to build mobile apps using your fav. web technologies like HTML 5, CSS, SASS and AngularJS. Ionic was first introduced in 2013 lead by Max Lynch and these are making great progress in terms of bridging the gap between different mobile platforms.
So whats the architecture looks like.
Ionic is build on AngularJs (a Javascript framework which enhances the vocabulary of HTML) so I will mention like Ionic / Angular in rest of the briefing. The outer square indicates its wraped around node js so its pre-requisite to install nodejs first. Your app sits in inner square of Ionic / AngularJs since you build the app using these both frameworks. Ionic uses ngcordova underneath to build and emulate the specific platform app. Apache Cordova is set of APIs which helps developers access native functions of iOS or Android platform. Using Ionic CLI (Command Line Utility) its pretty easy and lightweight to put your app on iOS or Android simulator. This complete recipe is served and wrapped under nodejs as indicated in the architecture diagram. This is very high level overview of Ionic.
Ionic also uses few more technology stack to make this work all together. Few of them are :
- gulp — Javascript code build tool
- bower — Responsible to fetch the dependencies.
- sass — CSS look and feel.
- travis CI — For test and deploy the code.
Here’s the cheat sheet how you can go from zero to app
I am really excited about ionic framework and would recommend using ionic for your mobile app development.
