Ionic. Overview

2017-10-03

Recently I worked on a project, where we used a framework which was new for me - Ionic. So I had to get acquainted with the new technology and get general idea of it in order to implement the features of the project. So here are my first impressions of Ionic.Ionic is HTML5 framework which claims to be a tool for easy and fast mobile app development, using HTML, CSS and JavaScript. It applies MVC pattern and works with its ‘view’ part. Ionic is a set of CSS and JavaScript components and icons. It reminds me Twitter Bootstrap by the place in the project and the way you should work with it: components are built in HTML code, and for some JS parts it is necessary to activate or add settings in script. There is some documentation on Ionic web-site where the ways to use all components are described, but I think it is quite restrained and short, and not always enough to get how to use one or another element and how to build it into application code. So I had to search for more examples of using components or solving problems.

As for model, controller and general project structure, Ionic needs to be built into Angular app to use all its features fully. It can work with both first and second Angular and all documentation on the web-site is represented in two variants. Despite the popularity of Angular, I think it's a big disadvantage, because 'quick start' is possible only if you're familiar with Angular and want to use it. In any other cases you'll have to either learn one more technology or choose another tools.

To start an application on mobile devices Ionic needs a wrapper. It uses Cordova or PhoneGap platforms and respectively supports some set of their plugins. Cordova had to be uploaded before Ionic:

$ sudo npm install -g cordova

Moreover it needs special tools to develop apps for particular platform: iOS or Android. Ionic itself could also be simply installed as npm module:

$ sudo npm install -g ionic

You can easily generate a new application using default templates, represented by Ionic: blank, tabs, sidemenu, etc. You could get full list of templates using command:

$ ionic start --list

All templates, apart 'blank' give an opportunity to learn general scheme of work with the framework. You can use one command to get app template:

$ ionic start projectName tabs

where 'projectName' is the name of the folder that would be created for the project, and 'tabs' is the type of template, in this case with tab navigation.

But there is a more useful instrument to get acquainted with Ionic: Ionic Creator, in which you can faster create more complicated templates. It's hard to say, if this is a good way for designing an app, but it is very handy to understand how to combine different parts when using framework for the first time.

All navigation systems provided by Ionic assume implementation of one page application scheme. For example, in the app we generated earlier, index.html file has the following structure:

<body ng-app="starter">
  <ion-nav-bar class="bar-stable">
    <ion-nav-back-button>
    </ion-nav-back-button>
  </ion-nav-bar>
  <ion-nav-view></ion-nav-view>
</body>

Navigation component 'ion-nav-bar' is connected with 'ion-nav-view' where one of the templates, based on active tab or menu item, is included. Routing is implemented by Angular routing tools.

Generally, using this framework seems to be quite easy after some experiments and if you could use some of predefined navigation systems. But if interface gets more complicated and you have to use nested elements, it could be much more difficult.

Provided CLI has a number of opportunities accept application generation. For example you can start a local server to test an application:

$ ionic serve

If you use the same command with --lab flag, it displays the page in browser where you can see how the app will look on iOS and Android platforms.

You can generate icons and splashscreens (loading screen, which is displayed to user while application is loading) from single source for different platforms using command:

$ ionic cordova resources [platform]

Of cause you can build an application, emulate run on particular platform, run directly on mobile device, generate separate components -- you can see the full list of commands in documentation.

Overall, I think Ionic is quite handy tool, but it has a serious limitation both in technology stack and in project complexity level.

Author: Irina Agamyan

Mifort, Mifort-blog, Mifort-articles, Ionic, JavaScript