A year using Ionic to build hybrid applications

​

Introduction

It is been exactly a year since we started using Ionic Framework here at ​​ MateProfiler.com​​. At that time we researched a lot on technologies to create Hybrid mobile applications (applications made with Web standards that run inside of a native container).

After some time digging we ended up having the choice between jQuery Mobile (which was already production ready) and an emerging framework based on AngularJs named Ionic (which was on beta2 and not production ready yet).

Seeing that the community behind Ionic was already active and growing extensively we decided to give it a shot (coming from an AngularJS background also helped to choose).

Basing your product on Software that are not stable yet can be dangerous but fortunately for us, the Ionic team made an excellent work not to break too much things between releases and even added new features from time to time.

This post is about what we love about Ionic (UI, Build, Debug, Performance) and what we learnt (limitations) throughout our journey.

UI

Ionic proposes dozens of UI components ready to use with extended options available. To have a clear understanding of the UI available, go check the Ionic ​​component page​​ it speaks for itself.

Collection of component

We have been amazed by the quality of these components, how they all interact with each other and specific platforms.

OS specific styles, behaviors and transitions

Since beta7 the application layout depends on the device you use. Ionic follows the platform specific guidelines to display elements in the right way (e.g the menu toggle button will be on the left on iOS and on the right on Android)

Ionic does not only focus on specific layouts but also on specific transitions and behaviors (e.g on iOS ionic allow scrolling to bounce past the edges of the content by default but not on Android).

Having specific styles, behaviors and transitions by default on each platform is really nice but having a way to overwrite them in a single place is even better. That is why beta14 introduced the ​​$ionicConfigProvider​​!

During the configuration phase of your app (before the init) you can use ​​ $ionicConfigProvider​​​ to overwrite any specific style, behavior or transition. During runtime you can also use ​​​$ionicConfig​​ to set and get config values within your controllers or services.

​​More info​​

Build

If you have any Cordova experience you know that building an application is far from being easy. Getting your machine ready to build is complicated due to platform specific prerequisites. For instance, to be able to build iOS application you must run OSX and have Xcode installed.

An alternative exists if you do want to take care of building your app. ​​ Phonegap build​​​ makes all the durty work for you but only accepts ​​ official plugins​​, which is great for most needs but limitating for big applications.

If you still want to build yourself, here are some advices:

Prerequisite

First prerequisite to build hybrid applications is to have NodeJs and NPM running.

Then install Cordova globally:

sudo npm install -g cordova

Cordova allows you to add platforms, plugins, run and build your application. It is sufficient by itself but for following demonstration we will be using ​​Ionic CLI​​ which is a Cordova decorator, meaning that you can use every command that Cordova proposes plus some more.

sudo npm install -g ionic

Ionic CLI was in our opinion game changing. It drastically made everything easier: installation (e.g save plugin dependencies within package.json), build (e.g building with Crosswalk) and debug (e.g live reload, console logs).

iOS

iOS Prerequisite

• OSX
• Xcode

If you do not have any Apple device you should install the iOS emulator, which is really good, or at least much better than the one for Android.

sudo npm install -g ios-sim

You are now ready to build your code for iOS:

# Add iOS platform for cordova
ionic platform add ios

# Build Debug version
ionic build ios

# Build Prod version
ionic build ios --release 

# Run your code within the emulator
ionic emulate ios

# Run your code on real device if connected
ionic run ios

Android

Android Prerequisite

• Android SDK
• Ant

# MacOs
brew install ant

# Debian/Ubuntu
sudo apt-get install ant

• Having ANDROID_HOME environment variable set (in your .bashrc or .bash_profile file)

# Path to your sdk in your file system
export ANDROID_HOME=~/Library/Android/sdk

On Android the emulator is part of the sdk so you do not need to download it.

You are now ready to build your code for Android:

# Add iOS platform for cordova
ionic platform add android

# Build Debug version
ionic build android

# Build Prod version
ionic build android --release 

# Run your code within the emulator
ionic emulate android

# Run your code on real device if connected
ionic run android

Add plugins

Adding plugin and re-installing is really easy using Ionic.

# add a toast plugin
ionic plugin add nl.x-services.plugins.toast

Adding plugins will automatically register the plugin within the ​​package.json​​​ under ​​​cordovaPlugins​​ key.

"cordovaPlugins": [
    "add nl.x-services.plugins.toast"
  ]

Now if you reinstall from scratch (when “platform” and “plugins” folders are missing) Ionic will be able to add plugins back.

Splashscreens and Icons

If you have experienced developing hybrid applications, you know that creating splashscreens and icons is a pain! There are so many parameters that come into play:

• Width and Height
• Density
• OS
• Device
• Landscape / Portrait

If you want to correctly address those parameters you will end up creating a dozen splashscreens and icons per OS. By experience do not even try to do it yourself (e.g using Photoshop), it is a waste of time.

There are some online tools that can help you generating splashscreens and icons but Ionic is also here to help!

All you need to do is creating two files (either .psd, .ai or .png) within the ​​resources​​​ directory (create if not exist). One named ​​icon​​​ that needs to follow ​​​this template​​​ and the other named ​​​splash​​​ that needs to follow ​​ this template​​

Then run one of the following commands (depending on your needs):

# generate both icons and splashscreens
ionic resources

# generate only icons
ionic resources --icon

# generate only splashscreens
ionic resources --splash

It will upload your files to Ionic’s servers and create everything for you (create the correct platforms folders and even edit the ​​config.xml​​ file).

Debug

Debugging hybrid applications can be difficult if you do not know some technologies and tricks.

During this year we tried [Intel XDK], IDE (based on brackets). What it does is gathering most of your needs in one place. You have got the code editor (obviously), the emulator, a way to build your application through Intel’s servers and a ​​ mobile application​​ to preview your work directly on your mobile.

​​Intel XDK​​ sounded really promissing but turned out not to be mature enough for our needs. Fortunately for us Ionic was!

Ionic also provides you a lot of tools to debug easily:

Ionic Serve

The ​​ionic serve​​​ command starts a local development server (based on express) and allows live reload via websockets. It is exactly the same as running ​​​cordova serve​​.

That being said Ionic is once again ahead of Cordova with the ​​--lab​​​ option. Running ​​​ionic serve --lab​​ will open your app in a browser, but it now shows you what your app will look like on a phone, with both iOS and Android side by side.

Live reload and Console logs

The ​​run​​​ or ​​emulate​​ command will deploy the app to the specified platform devices/emulators. You can also run live reload on the specified platform device by adding the ​​ --livereload​​​ option. The live reload functionality is similar to ​​ionic serve​​, but instead of developing and debugging an app using a standard browser, the compiled hybrid app itself is watching for any changes to its files and reloading the app when needed.

With live reload enabled, an app's console logs can also be printed to the terminal/command prompt by including the ​​--consolelogs​​​ or ​​-c​​ option.

Ionic View

​​Ionic view​​ is really similar to what XDK provides with it’s own “app preview” application.

Once your application is ready to be tested, upload your app to Ionic’s servers and share it to your friends!

ionic login
ionic upload
ionic share EMAIL

This feature allows you to bypass app stores alfa or beta testing.

Performance

Performance is a key player when creating hybrid apps. Indeed Webviews (technology that made hybrid app possible) are often neglected by OS constructors (Android and iOS are no exception. Though it is evolving, web views can now be updated via the Play store on Android) and that one of the reason behind the poor performance that we all noticed when using Hybrid apps.

Ionic once again tackled this very problematic by creating optimized UI components and embedding Crosswalk into their CLI.

JavaScript

AngularJS is known as being slow when it comes to render (and watch) thousands of items. Rendering thousands of items is something really common on modern apps (e.g display a list of friends) that is why Ionic introduced the ​​collection-repeat​​ directive.

It allows an app to show huge lists of items with much better performance than ​​ng-repeat​​. It is only possible because under the hood, Ionic only renders items that are currently visible and VOILA!

It means that on a phone screen that can fit eight items, only the eight items matching the current scroll position will be rendered.

<ion-content>
  <ion-item collection-repeat="item in items">
    {{item}}
  </ion-item>
</ion-content>

WebView

​​Crosswalk​​ allows you to build Android applications with an up to date chromium embeded! With the Crosswalk Project, you can:

• Develop around device fragmentation
• Provide a feature rich experience on all Android 4.x devices
• Easily debug with Chrome DevTools
• Improve the performance of your HTML, CSS, and JavaScript

Crosswalk is not easy to install, do not even try to do it yourself, Ionic is here to help!

# add the Crosswalk browser to your Android project
ionic browser add crosswalk

If you would like to specify a different version of Crosswalk, run ​​ionic browser list​​ to see which browsers are available and what versions. Then install the version needed.

ionic browser add crosswalk@version

Now building android will automatically embedded Crosswalk (adding 20Mb+ along the way)

Limitations

Mobile only

In case you wondered Ionic is only for native/hybrid mobile apps (Android, iOS, Windows phone, Chrome and even Apple Watch) and cannot be used to develop desktop applications. One of the reasons is the browser compatibility (Ionic does not support IE9 for instance, see the Grid system limitation below).

As for our product a desktop application was necessary, we ended up creating three projects. Common: Contains the services and all the controller logic that can be shared.Web & Mobile: inherit Common, extend controllers and set its own views.

Grid system

The grid system is not as fancy as Bootstrap 3 grid system. It is actually similar to Bootstrap 2 approach (without the 12 columns restriction).

It should be noted that Ionic’s grid system is using ​​ CSS Flexible Box​​​ that is a pretty new CSS feature that ​​ is not supported by old browsers​​ such as IE9.

Here is how you can create a row of five columns:

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Now if you want to have a particular behavior on mobile for example you could use the ​​responsive-sm​​ class:

<div class="row responsive-sm">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

For most needs this grid system is good enough but we had problems when trying to have let’s say three columns on landscape tablet, two on portrait tablet and one on mobile. It cannot be made easily.

Reinstallation

Ionic CLI is great to create and build projects but there is one thing that it does not support yet: ​​--variable​​.

For instance Facebook cordova plugin requires to be install using ​​APP_ID​​​ and ​​​APP_NAME​​ variables:

cordova plugin add https://github.com/Wizcorp/phonegap-facebook-plugin.git --variable APP_ID="123456789" --variable APP_NAME="myApplication"

These variables will not be stored in the ​​package.json​​ file which makes reinstallations impossible.

We ended up creating the following script to reinstall (OSX).

#!/bin/sh

set -e

# cleanup
rm -rf platforms/
rm -rf plugins/

read -p "Which platforms do you want to build? (android ios): " platforms
platforms=${platforms:-"android ios"}

# install platforms and plugin
echo "installing platforms "$platforms
cordova platform add $platforms

# reinstall specific plugins
cordova plugin add nl.x-services.plugins.toast@2.0.2
cordova plugin add nl.x-services.plugins.launchmyapp@3.2.2 --variable URL_SCHEME='mateprofiler'
cordova plugin add https://github.com/Wizcorp/phonegap-facebook-plugin.git --variable APP_ID="123456789" --variable APP_NAME="mateprofiler"
# etc

It does the job.!

Conclusion

Choosing Ionic turned out to be the best decision we made

Today Ionic has proved to be more than just a framework, it is a complete ecosystem that helps you develop, build and ship great Software.

Despite few problems Ionic is certainly the most advanced ecosystem to build hybrid apps and knowing that they created all of this in a year is amazing.

Choosing Ionic turned out to be the best decision we made for our project ​​ MateProfiler.com​​.