Ionic (pt. 1): Learn about frontend oriented SDK

Standard cell phones are a thing of the past! Smartphones took over the market and instead of being used only as communication tools, they became mobile powerhouses with computer-like functions. We can get additional features with thousands of applications written by other developers, but what if we want to develop something on our own?

Ionic is a set of tools created for developing hybrid applications for mobiles devices. A the beginning of this article, let’s focus a little bit on devices. It’s no longer possible to develop websites without thinking about its mobile versions. It’s actually necessary to do, if you want to receive better results in Google search engine. Currently about 20% of the whole Internet traffic is caused by mobile devices.

Before you start developing a mobile application you should take into consideration the usage share of operating systems:

As you can see, Android and iOS are the most popular ones, and luckily Ionic supports both of these operating systems. Since its version 1.2, Ionic supports Windows Phone, but only in version 10 and Edge. It’s obviously only an approximate data and it differs depending on the market (for example, iOS is way more popular in the USA).

Android is so popular thanks to the dynamic development and regular releases of new models of smartphones (most of them come with a new version of the operating system). The biggest disadvantage of this approach is that it causes the fragmentation, what can be seen below (data form 4th January 2016):

Ionic fully supports Android from version 4.4, unfortunately lower versions have problems with it. Luckly, the number of devices with newer system gradually increases.

Types of mobile applications

It’s similar to website development — there are a lot of different programming languages and devices, therefore there will always be differences in the presentation on specific operating systems. But, while we can be certain that the website we developed for Windows will be working on Mac or Linux, it’s not the same case with mobile apps. 
There are 3 types of mobile applications:

  1. Web applications
    It’s a mobile version of a website and all we need to run it is a web browser. Since we’re not working on a native version of the application, the knowledge of mobile application development is not necessary.

2. Native applications
They are built only from native components that are created in specific programming languages. Native applications have almost unlimited access to devices’ power. We’re equipped with components of Software Development Kit (SDK), which gives access to features like: camera, accelerometer or files’ system. There’s no JavaScript parser to put strain on the processor, so the compiled code works with the full efficiency. The simplest examples of native applications are the ones dedicated to sending text messages and calling, which everybody has on their phones. 
The biggest drawback of such approach is the lack of compatibility between devices. iOS-oriented apps will not work on Android and the opposite. Every application has to be rewritten in the corresponding programming language. Based on the operating system, apps are written in:

  • Android — Java
  • iOS — Objective-C, Swift
  • Windows — C#

3. Hybrid applications 
They combine both pros and cons of the aforementioned types of applications. They benefit from both web apps and native apps development. The first one enables cross-platform programming, while the elements of the second one are used in connection with HTML5 coding. 
In other words, the web browser loads the website. The application embeds this browser and replaces some elements with their respective native components. As the final effect, we receive a full-fledged multiplatform application with almost native-like access to the power offered by smartphones.

Ionic — what’s that?

Ionic is a frontend-oriented SDK used to develop hybrid applications. It offers a variety of components and scripts, which allow to create applications regardless of our skills in programming native applications.

Ionic is based on Angular and Cordova, a mobile platform, which packs web-app to the output file, which we can be executed on a smartphone.

As I already mentioned, Ionic is a set of tools, which includes:

  1. Ionic framework
    It’s a set of ready to use styles and scripts. If you don’t really need some extremely creative layout, you can develop a full-fledged application based on what authors of Ionic enabled in this framework.
  2. Ionic View
    In my opinion it’s one of the best features of Ionic, as it helps in the presentation of our application. Our Client has to install Ionic View and, when given the ID number, he receives 1:1 copy of the application on his device. There’s no need for him to install any updates in the future — all he has to do is to synchronize the app and it will automatically be updated to the newest version.
  3. Ionic Creator
    This tool is designed for creating mockups and templates for later usage. It allows to create views, transitions, forms or enables working on group projects — basically everything we need for our full-fledged application is there. Ionic Creator is the only paid element of the SDK — the free version allows us to create a single project without the possibility of exporting it to the main app.

Developers also have access to the Ionic Market, a collection of ready to use templates (such as material design), plugins (for instance date picker or unlock screen) or starting packages, which can be used as the base of the application. The author of the extension decides whether its free or not.

Installation

Our first step should be checking whether Node.js is installed. If it is, we can proceed and globally install Ionic and Cordova. In order to do that we have to open command prompt and type:

npm install -g cordova ionic

Now we can choose the base for our project. Whichever template we choose, Ionic creates a structure of catalogues and files, that contain selected expandable components.

In order to present the progress of this process, we’re going to create a simple application with the list of tasks. We will choose blank as our template.

$ ionic start todo blank

After the download, we can add platforms that we want to use.

$ ionic platform add ios
$ ionic platform add android

Now we’re able to build our application and emulate it. Since emulators aren’t as fast as normal Operating Systems, and Apple devices can’t be run on Windows, I recommend not emulating the application, as there are other ways to test your application even before building it. If you’re still interested in imitating OSs, here are commands that will let you do it:

$ ionic build android
$ ionic emulate android

In this article you had the opportunity to learn about three types of mobile applications and to look at their drawbacks and advantages. You also had found out what hides behind the installation of Ionic. With this knowledge you can move on to the second part of this series, where I’m going to guide you through your first application- its development, testing and compilation.


Originally published at www.merixstudio.com on February 18, 2016