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

In the last post we installed Ionic and generated our first application. We also looked at creating an ionic.io account and uploading the application to it (with that done you can test your applications on your device right away by downloading the Ionic View app).

Now we need to learn how to start using Ionic. As always, the best place to start is the documentation. Ionic’s documentation is especially user friendly, and you can see at a glance all the different topics you should be focusing on.

If you first head to the Overview page you will see a lot of the stuff we have already done mentioned. There is also some additional information mentioned though, specifically that:

• Ionic supports SASS
• Ionic comes with an icon pack
• Ionic uses the MIT license, meaning you can use it in personal or commercial projects for free

Next, head to the Ionic Book section of the documentation. You can skip straight to Chapter 3 – Starting your app if you’d like but it may be worth while to have a read of Chapter 1 – What is Ionic as well. If you don’t end up reading the first Chapter, here’s a few important quotes I’ve pulled from there:

If you’re reading this as a Sencha Touch developer then all this should sound pretty much the same to you (aside from the Angular bit of course). If this is your first experience with a HTML5 mobile framework then perhaps a little more background will help.

Chapter 3 walks you through building your first application with Ionic, a simple to do list app. The to do list and note taking applications are about as common as “Hello world!” apps for getting started – they’re a bit dull but are a good place to start learning. There’s no point in me duplicating the tutorial here so make sure you head over to the Ionic website to complete the tutorial.

Remember, you will need to create a new blank Ionic App first by running:

ionic start todo blank

As you start coding the application, the first big difference you may notice when comparing it to Sencha Touch is that HTML is used to define the structure of the application. Although HTML is used in Sencha Touch to define templates, most of the work is done purely in JavaScript. For example in Ionic, we define a container with a list like this:

<ion-content>
        <ion-list>
          <ion-item ng-repeat = "task in tasks">
            {{task.title}}
          </ion-item>
      </ion-content>

Whilst in Sencha Touch we would do this:

{
    xtype: 'container',
    items: {
        xtype: 'list',
        tpl: '{title}',
        store: "TaskStore"
    }
}

I’m not sure whether I prefer this approach or not yet, I feel like Sencha Touch provides a cleaner and more manageable approach but it is easier to see what is going on at a glance with the Ionic approach.

I also found the way data is handled and submitted quiet interesting. Take a look at this sample code:

<form ng-submit="createTask(task)">
  <div class="list">
    <label class="item item-input">
      <input type="text" placeholder="What do you need to do?" ng-model="task.title">
    </label>
  </div>
  <div class="padding">
    <button type="submit" class="button button-block button-positive">Create Task</button>
  </div>
</form>

Although it seems a little confusing at first, this code will take all the input from within this form (or more specifically, anything defined on ‘task’) and submit it to the ‘createTask’ function. We then create the corresponding method in the controller:

$scope.createTask = function (task) {
  $scope.tasks.push({
    title: task.title,
  });
};

This isn’t all that different to the way Sencha Touch handles a form submission. In Sencha Touch we define our forms in Javascript, fire an event when the form is submitted and then listen for that event in the controller to capture the data. Again, I feel like Sencha Touch’s way is cleaner, but the Ionic approach strikes me as being much easier to understand initially.

(I should point out though that it makes sense that I would find learning Ionic easier since I’m already familiar with HTML5 mobile frameworks, and I wasn’t when I started with Sencha Touch. The overall process is pretty much the same between the two, there’s just different ways of doing it.)

The final noteable difference is the concept of a Factory in Angular, which seems to fulfill a similar role as the Sencha Touch Stores, which handle saving data to, and loading data from, local storage.

Here’s what I ended up with after completing the tutorial:

UPDATE: Part 3 of this series is out now, and it’s a big one!