Overview of Sencha Touch and the Kent Mobile App

University of Kent mobile app icon

University of Kent mobile app icon

It took a while, but we got there… The University of Kent finally has a mobile web app! You can access it on an iOS, Android, or Blackberry device (or WebKit if you’re not on a mobile).

We started work on our mobile web app back in July. It took us about three weeks of fairly intensive investigation, trial, error, dead-ends, and finally a solution we were really happy to work with, and which we felt could be a solid framework on which to expand the functionality of our mobile app.

So what kind of functionality did we want from the app?
It’s important to realise that in its initial state the app doesn’t provide students with anything that they can’t already access online on a desktop browser. The key difference is that we wanted to provide a range of information to students on-the-go, all in one place, and in a format that’s easy to use and access on a mobile device. The key things we wanted to address in the early stages of the app were:

  • Timetables
  • PC availability
  • Campus maps
  • Mobile device setup help pages
  • Getting started pages
  • Feedback form
  • News feeds
In later stages the plan is to provide other information, such as link ups with campus restaurant menus and services, Moodle, the Student Data System, and the library online catalogue.
JQuery Mobile investigation
JQuery Mobile LogoAn early candidate as a development platform for our mobile app was JQuery Mobile.
JQuery Mobile allows developers to build a mobile web app using only HTML5, assigning attributes to tags to provide functionality and a mobile look and feel. As a development environment it looked promising:
  • Simple.
  • Quick to build a basic app.
  • Works across a large number of devices.
So we spent a week or so building a prototype app using JQuery Mobile. It was ok, but we found a few issues:
  • Not a programming language, so it didn’t feel powerful enough for an extensible MVC framework to allow a range of functionality.
  • Slightly clunky transitions (at least in beta). User experience sort of ok.
  • Limited ability to modify the look and feel of the app.
  • Doesn’t feel like a native app – eg no gestures or swipes.
  • Will only ever allow a web app, rather than an app in iTunes etc.
The move to Sencha Touch
Sencha LogoThe negatives of JQuery Mobile weren’t massive, but were enough for us to feel we should at least take a look at a viable alternative.
We chose Sencha Touch, a mobile app framework based on the the Ext JS javascript framework.
We spent a few days building another prototype with Sencha Touch, and found it had pretty much the converse pros and cons from JQuery Mobile:
Pros
  • entirely in javascript, so is powerful enough for an extensible MVC framework to allow a range of functionality.
  • Smooth transitions and user experience.
  • Ability to modify the look and feel.
  • Does feel like a native app – native gestures, swipes, etc.
  • Can potentially be wrapped up in PhoneGap for AppStore or Android Marketplace.
Cons
  • Steeper learning curve that JQuery Mobile.
  • Requires more effort to build even a basic app.
  • Only iOS, Android, and Blackberry are supported.
  • Slower initial loading time (although faster once the app has loaded up in the device).
So, we felt on balance that Sencha Touch offered the best solution for developing functionality in the long-term, as opposed to getting something simple up and running quickly.
Summary
  • We looked at JQuery Mobile. Seemed promising.
  • We looked at Sencha Touch. Seemed even more promising.
  • Sencha Touch has bit of a development learning curve, but it is powerful and fast.
  • Sencha Touch offers only 3 compatible mobile OS (iOS, Android, Blackberry). However these three systems cover the vast majority of smartphones used to access www.kent.ac.uk currently.
  • Our app may still be a little rough around the edges but we needed to get something out there. There is still a lot of work in the pipeline…

2 responses to “Overview of Sencha Touch and the Kent Mobile App

  1. Hi there…
    I took a look in your app and it’s great 🙂
    Also, I would like to ask you how to integrate OpenStreetMap with Sencha… Is there some good tutorials? 🙂
    Greetings form Bosina

  2. Hi Bosina!
    Glad you liked our app.

    We got OpenStreetMap to work with our app using something called Leaflet http://leaflet.cloudmade.com/

    Like Sencha Touch it’s a javascript library that provides you with an API for pulling in a map and adding markers, popups, setting zoom, etc.

    There’s a little bit of a learning curve but it’s fairly straightforward to use.

    Hope that helps!

Leave a Reply

Your email address will not be published.