Ionic Framework

I’ve recently started to learn the Ionic Framework. At it’s core, Ionic allows for creation of mobile apps from a single project code base. But the apps will reflect the native look and feel of the host operating system. The documentation goes over mainly IOS and Android. But Windows is supported and works very well. I have also tested the Android apps on a Amazon Fire.

Parts

Ionic framework uses many different technologies to achieve this magic. Ionic Framework is very active and has been quick on moving to the latest of each of the pieces.

Cordova

Cordova by itself is a great way of using HTML, CSS and Javascript to create mobile apps. Support covers most mobile systems. There is a huge selection of plugins available to use almost any native resources for any of the device. And thanks to Ionic keeping their Framework updated and focused on standards, these updates are mostly going to work without much issue.

Angular

Angular is being leveraged for the ability of components to quickly use the proper UI piece. For example when the button is to be used, Ionic will use the component for that OS. This way while the code just says button, the user sees the proper button for their phone. No need to write separate portions in code for each OS for common UI elements.

Ionic Framework

Ionic adds a large number of components that can be applied, all with the purpose of making the code very little between the operating system it will be used on.

A great example on how Ionic will handle things in the background is the Storage portion. Ionic Storage will use whatever storage is available and will focus on the best and most stable. So on a mobile device with SQLite available Ionic Storage will pick SQLite. But while testing in the browser the SQLite won’t be available to Ionic Storage will pick which browser storage is available. But the developer doesn’t worry, they just save the data in Ionic Storage and magic is done.

Tools

Ionic comes with a great CLI (command line interface) that makes quick work on starting a new project, adding pages and different components. Also included is a small server that allows testing inside a browser. Keep in mind that native calls such as to a camera are not usable in the browser.

Another cool little feature is a comparison mode. That’s where in the browser you’ll see each OS that you’ve targeted. For most of my projects, I’ll see IOS, Android and Windows all running side by side. It’s great for checking to make sure it looks great.

For an editor, I’m using Visual Studio Code and Visual Studio 2015 Community edition. Any code editor will work to edit the files. I’d recommend applying any plugins that target Typescript, SASS and Angular. Angular, as well as Ionic, defaults to these.

Ionic also has cloud services to allow testing and releasing.