In the ever evolving quest for the best mobile application development stacks, I’ve recently been looking at Ionic. Ionic is a library that provides mobile-optimized UI components to build “native-feeling” hybrid applications.
Where does it fit?
Ionic fits in the UI layer. But unlike other libraries in that space (Twitter Bootstrap, Foundation, Ratchet, Topcoat and others), Ionic is not agnostic in terms of the underlying architectural framework you are using. Instead, Ionic is built on top of AngularJS to provide a complete solution for developing applications that are both well architected and native-feeling. That’s great news if you are an Angular developer. If you use another architectural framework, you can still use the Ionic CSS stylesheets, but you won’t get the powerful UI interactions, gestures, and animations.
I’ve been impressed with the number and the quality of the components and interactions available in Ionic. My employee directory sample app (below) may never have felt that close to native.
Cordova Integration
Another thing I like about Ionic is its integration with Cordova. In fact, the Ionic CLI is built on top of the Cordova CLI. Here is how you install the Ionic CLI, create a seed project, and run it in the emulator or on a device:
npm install -g ionic ionic start myApp cd myApp ionic platform ios ionic emulate ios ionic run ios
This should look very familiar if you are using Cordova or PhoneGap.
Sample Application
To further experiment with Ionic, I created an Angular/Ionic version of my employee directory application with the seed project as a starting point. You can run it in the browser or on a mobile device as a Cordova/PhoneGap app. You can also run a hosted version of the application here.
Source Code
The complete source code for the application is available in this repository on GitHub.
Pingback: Tutorial: Build an sample app with Ionic and AngularJS()
Pingback: Sample Force.com Mobile Application with Ionic and AngularJS | Christophe Coenraets()
Pingback: Quickly start an app using Yeoman, Ionic, AngularJS and PhoneGap | Blog MNCC()
Pingback: Employee Directory Sample Application with Ratchet 2.0 | Christophe Coenraets()
Pingback: Sample Mobile Application with Ionic and AngularJS | Christophe Coenraets - appgong()
Pingback: Employee Directory Sample App with Ionic and Node.js | Christophe Coenraets()
Pingback: Worker Listing Pattern App with Ionic and Node.js | PakUltimate()
Pingback: Quickly start an app using Yeoman, Ionic, AngularJS and PhoneGap | thanhpegasus()
Pingback: Zero to One: Building Mamoru – Weeks 5 and 6 | Something Worth Reading()
Pingback: Sample Application with Ionic 2 | Christophe Coenraets()