Tutorial hero
Lesson icon

Learning the Ionic 1.x Framework as a Sencha Touch Developer: Part 5

Originally published March 29, 2015 Time 14 mins

In the last part of this series we looked at how to make use of native API’s in an Ionic application using Cordova. In this part – which will be the final part in this series – we will discuss how to build Ionic applications for both iOS and Android. I’ll also provide a “mini analysis” of Sencha Touch vs Ionic based on my experience so far. Although this is the end of this particular series, there will still be plenty more Ionic content to come in the future.

There are two ways to create app store ready builds of Cordova / PhoneGap applications. The normal way is to build the application locally using the CLI tools installed on your computer, the other is to use Adobe’s PhoneGap Build cloud building service.

The benefit of building locally is that applications can be built without having to upload to a third party service and you have more fine tuned control over your application and plugins. However, you will need to install the native SDK’s of the platform you are building for. If you want to build iOS applications, you need to have a Mac to install the required SDK’s, so if you have a Windows computer you’re out of luck and will only be able to build for Android.

The benefit of using PhoneGap Build is that compilation is handled in the cloud, so you do not need to install the SDK’s of the target platform on your computer. PhoneGap Build is much easier to set up and provides a way for Windows users to build iOS applications, but you do not have as much control over the application.

Building an Ionic Application Locally with Cordova through the Command Line

This tutorial will give most of the focus to building with PhoneGap Build, but I’ll also quickly walk through how you can create a build locally too. Once your environment is set up correctly it should be as simple as running a few commands.

  • Add each platform that you wish to build for by running the following commands:
ionic platform add ios
ionic platform add android
  • Then run the build commands:
ionic build ios
ionic build android

There’s certainly a few more steps you’ll need to undertake before getting it on the app stores, like signing and submitting your applications though. For a more in depth tutorial I’d recommend checking out the Ionic Publishing Guide or this tutorial on coderwall.com.

Building an Ionic Application with PhoneGap Build

As far as I can tell, Ionic does not support automated PhoneGap Build building through the CLI like Sencha Touch does by default. So the process for getting an app built through PhoneGap Build wasn’t nearly as smooth as the rest of my Ionic experience.

I was contacted by Max Lynch, one of the Co-Creators of Ionic, via Twitter and this topic came up:

Andrew McGivery (go check out his blog) responded:

So I checked it out and it turned out to be a really awesome solution.

There’s a few important things to note about building with PhoneGap Build instead of the normal Cordova through the command line approach:

  • A Cordova / PhoneGap application (which is what an Ionic application is) contains a bunch of difference files and folders that aren’t needed for PhoneGap Build. PhoneGap Build only requires what is located within the www folder
  • PhoneGap Build uses a config.xml file to specify how the application should be built. Your Ionic project will already have this but the format required by PhoneGap Build is slightly different. For the correct formatting of your config.xml file take a look at the PhoneGap Build documentation.

So essentially, PhoneGap Build just needs a zip file of what is inside your www directory, and a config.xml file that should be contained in the root of this directory. We could just zip this up manually and upload it to PhoneGap Build ourselves, but by using Grunt we can zip, upload and download the resulting build all from the command line (it saves a lot of time and frustration).

Creating Automated Builds for PhoneGap Build with Grunt

Let’s walk through exactly how to do this, it shouldn’t take any more than about 10 minutes to set up and will probably save you many hours in the long run.

1. Add the grunt, grunt-contrib-compress and grunt-phonegap-build node modules to your project

We need grunt to actually be able to use grunt, grunt-contrib-compress to zip up our files and grunt-phonegap-build to handle uploading and downloading from PhoneGap Build.

You can add these by running install commands for each of them separately (i.e npm install grunt-contrib-compress), but instead we are just going to add them as dependencies to our package.json (you should already have this in the root folder of your Ionic project).

  • Update your package.json file to reflect the following:
"devDependencies": {
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0",
    "grunt": "~0.4.5",
    "grunt-contrib-compress": "*",
    "grunt-phonegap-build": "*"
  }

NOTE: These are just the version numbers at the time of writing this post, don't worry if yours are different.

  • Now just change your directory in a command terminal to your current project, and run:
npm install

to install any dependencies that are missing from your project.

NOTE: I did initially use grunt-zipstream for zipping the project, but I couldn't get it to work. It seems that it may not be compatible with later versions of node.js. The command would successfully executed and say "Done, without errors" but there was no zip package created.

2. Create a Gruntfile.js file

To make use of the grunt packages we installed we need to create a javascript file in the root of the project to configure the commands. We will be providing some configuration options to the grunt-phonegap-build package and the grunt-contrib-compress package.

  • Create a file called Gruntfile.js in the root of your projects directory and add the following:
module.exports = function (grunt) {
  // Project configuration.
  grunt.initConfig({
    'phonegap-build': {
      debug: {
        options: {
          archive: 'app.zip',
          appId: '1375227',
          user: {
            email: 'you@domain.com',
            password: 'yourpassword',
          },
          keys: {
            ios: { password: 'test' },
            android: { key_pw: 'test', keystore_pw: 'test' },
          },
          download: {
            ios: 'debug/ios.ipa',
            android: 'debug/android.apk',
          },
        },
      },
      release: {
        options: {
          archive: 'app.zip',
          appId: '1375227',
          user: {
            email: 'you@domain.com',
            password: 'password',
          },
          keys: {
            ios: { password: 'test' },
            android: { key_pw: 'test', keystore_pw: 'test' },
          },
          download: {
            ios: 'dist/ios.ipa',
            android: 'dist/android.apk',
          },
        },
      },
    },
    compress: {
      main: {
        options: {
          archive: 'app.zip',
        },
        files: [{ expand: true, src: ['**/*'], cwd: 'www/' }],
      },
    },
  });

  // Load tasks.
  grunt.loadNpmTasks('grunt-contrib-compress');
  grunt.loadNpmTasks('grunt-phonegap-build');

  // Default task.
  grunt.registerTask('default', 'compress');
};

Let’s go through what these options mean…

Explanation of grunt-phonegap-build Settings

debug and release – You will notice there are two almost identical lots of settings here. We can provide both a debug configuration and a release configuration. In the example above I’ve just duplicated the same settings, but if you’d like to have both a debug and release build built you can modify these accordingly.

archive – This specifies the zip file that should be sent to the PhoneGap Build servers.

appId – This is the App ID of your application on PhoneGap Build, login into your build.phonegap.com account to grab this (you will first need to create a new App on PhoneGap Build if you haven’t already).

user – This specifies the credentials for your PhoneGap Build account.

NOTE: Using email and password to authenticate is now deprecated, you should instead use a token instead (thanks to Andrew McGivery for pointing this out below), i.e:

"user": {
            "token": "*******************"
          },

This token can be found by going to Edit Account > Client Applications in your PhoneGap Build account. If you ever need to, you can invalidate this token and create a new one.

keys – Your development or distribution keys attached to the application are initially locked, these settings allow you to send the passwords associated with the keys to unlock them so that the application can be built successfully. It is possible to create a all the certificates and provisioning profiles you need for iOS from a Windows computer.

download – This specifies where the built applications should be downloaded (that’s right, it will just auto download to your computer once it has finished building, how cool is that!). You will have to create the ‘dist’ and ‘debug’ folders in the root of your project yourself – it will not be created automatically if it doesn’t already exist

Explanation of grunt-contrib-compress Settings

archive – This specifies what the generated zip package should be called (make sure it is the same as the archive you are specifying for PhoneGap Build).

files – This specifies which folders should be zipped up. The settings I have will zip up everything inside of the www folder, without including the www folder itself. For PhoneGap Build we need the root folder to be the one that contains index.html, config.xml etc. There’s a lot of different possible settings you can have for this, so check out the documentation for more information.

3. Run the grunt commands

Once you have created the Gruntfile.js file and set the appropriate settings, you can run:

grunt compress

to create your zip file and:

grunt phonegap-build

To send that zip file off to PhoneGap Build. It will go through the process for both the debug and release version, which you probably don’t want during development. So instead you should run:

grunt phonegap-build:debug

to just create the debug version.

It’s a little more work to set up but I do find this method even more convenient than the command line tool provided by Sencha Cmd for PhoneGap Build. That can’t really be considered an argument in favour of Ionic though, since we could just as easily set the same process up for a Sencha Touch application (grunt is a useful tool in its own right and is not a part of Ionic).

So, is Ionic better than Sencha Touch?

Now that we’ve reached the end of this series, I’m sure the thing a lot of people would be interested in hearing is: as a Sencha Touch developer have I “converted” to Ionic?

A lot of Sencha Touch developers may be concerned about the future of Sencha Touch and any Ionic users that happen to be reading this would most likely be rooting for their framework. I’ll tell you right now that I’m not going to give you a straight answer on this.

Until one framework is miles ahead of the other, I don’t think I’d ever be so bold as to say that one is straight out “better” than the other one, it almost always depends on circumstance, objectives, preference etc.

I will give you a definitive answer to my overall preference eventually, but it would be silly to do that now. Ionic is still very much a shiny new thing to me now, and I want to spend a long time getting more intimate with the framework, learning the ins and outs, before I make any judgement.

I am impressed enough with the framework initially though to start using it with my “real” projects, rather than just fun test apps, and look forward to trying it out in a production environment soon. At this stage I suspect that Ionic will become my default framework, and I will use Sencha Touch on a case by case basis whenever I feel it would provide a significant benefit over Ionic. My gut feeling is that, for single developers, Ionic will be the framework of choice in the future.

Overall I was extremely impressed with Ionic. Some things that I particularly like are:

  • Live editing with ionic serve
  • Ionic View for previewing applications and sending to others
  • Automatic generation of splash screens and icons (massive time saver!)
  • Integration with AngularJS + ngCordova
  • Ability to generate new applications from templates
  • The default styling is sleek and minimal

The list of things I don’t like about Ionic is much shorter, but I haven’t had enough time to really push the limits with it yet. At this point in time it’s hard for me to tell whether the things I don’t like are just due to the fact that I haven’t found the proper way to do it yet, or if it is just the way the framework works. From my initial experience though, these are the things that I found Ionic didn’t do as well as Sencha Touch:

  • The code structure seems less organised
  • The data system doesn’t seem to be as powerful
  • Using Local Storage is more of a manual process than with Sencha Touch

This is the end of the Learning the Ionic Framework as a Sencha Touch Developer series, but I will certainly be adding more Ionic content in the future – I’ve added a sub-category for Ionic to the menu bar already so you know I’m serious 😉

Learn to build modern Angular apps with my course