Building with Ionic Framework

Andrew Clinton
16 Jan 2015

I have been passionately building apps with Cordova / Phonegap for over a year now, and one problem that has increased over that period is a lack of clean, smooth, and natively-looking UI/UX. Sure, Cordova provides all of the backend API for making your hybrid HTML5 app work like a native app, but where is the framework for making the UI look and feel native?

About 6 months ago I had been using jQuery Mobile for all of my front end components and design, and it was working ok. I ran into the same problems as everyone else, littering my style sheet with overrides and lots of customizations to make the components look more native. Not to mention, jQM was just slow as a "dead turtle on it's back" as my friends can attest to me saying. I realized that there had to be a better solution for my apps. Someone or some company had to have a better solution than jQM.

Pause for dramatic effect...

And then I found the Ionic Framework, the savior of hybrid HTML5 apps. I now had the two tools needed to create hybrid web apps that could rival native Android and iOS apps. So what does Ionic do for Cordova developers like me?

Ionic is built using SASS which makes it super easy to customize and provides great looking widgets and native-looking components. It also has stylesheets specific to popular platforms out there like iOS and Android. Are you getting the picture so far? In case you aren't, Ionic = less time spent designing components and styles and more time spent creating a feature rich app on the back end.

Even better, Ionic is actually built on Cordova, so the same commands such as cordova build and cordova run android --device still work! Further, the Ionic CLI ships with some built in commands that make building your app through Ionic even easier! Check out their Repo for more info. One of my favorite Ionic CLI commands though, is ionic serve --lab which opens up a local server supporting Live Reload. It looks a little something like this..

This CLI tool allows you to make you changes to the files in your www folder and see the live changes on this web page. Basically, it's pretty awesome. Before I found Ionic, I had to make changes to my source code and then compile/build and then run on the device. The Ionic lab makes this testing process so much faster and easier.

Finally, the icing on the cake that is Ionic is the fact that it is built on Angular JS. Angular provides a smart and organized back end built on a MVW structure, so that you can create an app that functions flawlessly. Angular does have a slight learning curving if you have never used a Javascript framework before. I had never used a MVC type framework before, but after seeing how amazing Ionic was, I decided it was worth learning the Angular way of doing things.

One of the ways that Ionic uses Angular to perfection is through AngularUI Router. When building an app through the Ionic CLI, you have the option of some starter templates such as tabs or side menu. Both of these app templates are built on the ui router built into Angular which makes nested views and routing super simple. Check out the simple example I have provided below.

As you can see in the code above, I define an abstract view which happens to be the tabs template. All other views in the app are a child of the abstract state, so the tabs are visible and maintain a history stack across the entire app for each individual tab. Pretty sweet, huh? I didn't have to write any logic to handle the tabs styling for active/inactive or maintaining the tabs stack history.

Ionic has even more to offer if you want to bump up your HTML5 apps up to the next level, so don't let me keep you any longer. Go get yourself some Ionic Framework!