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.
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.
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.
The complete source code for the application is available in this repository on GitHub.