What is the Ionic Framework?

I’ve spent the last eight days working on building an app that detects potholes using the accelerometer and GPS to report them to a database so other users can be warned of the pothole before they drive into it. To build it I’ve been using Ionic2/Cordova. For most of that time, I didn’t really understand the relationship between the technologies I was using. Why is this?

What does this software do?

Software has to do something. And yet sometimes it can be hard to figure out what that something is. Simple software does simple things that are easy to understand. The Calculator on my iPhone takes numbers and returns other numbers. In contrast, if you want to make an app, you install Cordova, Ionic, Angular2 and Typescript, use a template, and type Ionic serve or Ionic View. And bam, you have a functioning app with menus and scroll and it even rotates sideways when you turn your phone. And yet you have no understanding of what each part is doing. I know because I did it. Before getting into it though, let’s contrast the Ionic way with the “native app way.”

The Native Way

Early computers didn’t have software that could run on more than one type of computer. But people got tired of rewriting software. So they made ways to be able to reuse software across different computers. Android and iPhones are just different types of operating systems. If you write an app for Android, you’ll probably use Java and if you then decide you want to make a similar app for iPhone, you’ll completely rewrite the app in Swift or Objective C. You might think this is like translating a novel from English to Spanish, but in some ways it’s more difficult. You might not always be able to find an equivalent word between English and Spanish, but you can always translate a sentence. Programming languages, on the other hand, can require that you structure things completely differently to get the same user experience on different platforms. The better comparison might be a home builder from the United States that decides to start building houses in Japan. Then he finds out that the zoning, earthquake proofing, room size and arrangement preferences, foundation requirements, and eleven other things are all different. But they’re all just houses right?

But luckily there’s another way!

The Ionic Way

Ionic/Cordova allows you use to write an app in Javascript just once. Then your code talks to Cordova, which translates your requests to the platform, whether Android OR iPhone. Cordova is what allows you to talk to the operating system to get access to hardware like the accelerometer, GPS and all the rest, while Ionic is what makes it look good and function in the way the user expects an app to function on a smartphone. Doing this translating takes work on the part of the phone. But with even cheap phones having powerful processors and 2 GB of RAM these days, most phones can handle it. If you’re making a game that needs access to the full power of a phones hardware, you’ll have to find another solution. But for the rest of us, Ionic/Cordova is an excellent solution.

Testing

Knowing how your app works in Chrome is useful, but getting it up on a phone is essential. For this, Ionic has Ionic View. View is an app for iOS and Android that runs your app inside of it. After an easy setup, all I need to do is code git push ionic master.

Two or three minutes later I can open Ionic view and there’s my app. I have full access to all of the hardware on the phone and can test everything out without having to keep my phone plugged into my computer as I would with an emulator. The accelerometer is receiving updates fifty times a second, the GPS has a lock on location and everything works smoothly even on my antiquated iPhone 5s.

Final Notes

I haven’t built apps with Swift or Java or any other native language. So I can’t compare and contrast the experiences. But I can tell you that Ionic/Cordova along with the templates provided can allow you to get up and running quickly. Getting access to the accelerometer took some time, while GPS was easier. I’m indebted to Raymond Camden and his blog for providing excellent relevant examples at https://www.raymondcamden.com/2016/07/07/working-with-ionic-native-shake-rattle-and-roll

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.