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

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.
   ProsConsDeveloping simple applications for iOS or Android isn’t time consumingRequires connection to the InternetSome problems regarding implementation of views can be solved by using HTML, while it’s not so simple in case of native mobile programmingCurrent browsers enable the access to some APIs of the device. Not only does it require the acceptance, but also it doesn’t always work properly.The HTML code can be used for developing an application for desktop (MacBook, PC)Low efficiency
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:
   
3. Android - Java
4. iOS - Objective-C, Swift
5. Windows - C#
6. ProsConsUser-friendlyLack of compatibility between systemsShort responce time to user actionRequires particular programming language and SDK knowledge for corresponding platformsEasy access to the data Access to components such as calendar, GPS, camera, etc. High efficiency
7. 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.
   ProsConsIn comparison to native apps it reduces amount of work that is necessary to create an appLower efficiency than that of native appsCan be easily integrated with websitesProblems with external linksMultiplatformLimited functionality

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.