{"id":229,"date":"2011-11-08T11:36:44","date_gmt":"2011-11-08T11:36:44","guid":{"rendered":"http:\/\/blogs.kent.ac.uk\/webdev\/?p=229"},"modified":"2011-11-08T11:36:44","modified_gmt":"2011-11-08T11:36:44","slug":"overview-of-sencha-touch-and-the-kent-mobile-app","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2011\/11\/08\/overview-of-sencha-touch-and-the-kent-mobile-app\/","title":{"rendered":"Overview of Sencha Touch and the Kent Mobile App"},"content":{"rendered":"<p><img loading=\"lazy\" class=\"alignleft size-full wp-image-235\" style=\"border-style: initial; border-color: initial; margin-left: 20px; margin-right: 20px; margin-top: 0px; margin-bottom: 0px; border-width: 0px;\" title=\"University of Kent mobile app icon\" src=\"http:\/\/blogs.kent.ac.uk\/webdev\/files\/2011\/11\/icon-.png\" alt=\"University of Kent mobile app icon\" width=\"114\" height=\"114\" \/><\/p>\n<p>It took a while, but we got there&#8230; The University of Kent finally has a <a href=\"http:\/\/www.kent.ac.uk\/mobile\">mobile web app<\/a>! You can access it on\u00a0an iOS, Android, or Blackberry device (or WebKit if you&#8217;re not on a mobile).<\/p>\n<p>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.<\/p>\n<p><strong>So what kind of functionality did we want from the app?<br \/>\n<\/strong>It&#8217;s important to realise that in its initial state the app doesn&#8217;t provide students with anything that they can&#8217;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&#8217;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:<\/p>\n<ul>\n<li>Timetables<\/li>\n<li>PC availability<\/li>\n<li>Campus maps<\/li>\n<li>Mobile device setup help pages<\/li>\n<li>Getting started pages<\/li>\n<li>Feedback form<\/li>\n<li>News feeds<\/li>\n<\/ul>\n<div>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.<\/div>\n<div><strong>JQuery Mobile investigation<\/strong><\/div>\n<div><img loading=\"lazy\" class=\"alignright\" style=\"background-color: #000000; border-style: initial; border-color: initial; border-width: 0px; margin: 20px;\" title=\"JQuery Mobile\" src=\"http:\/\/jquerymobile.com\/wp-content\/themes\/jquery-mobile\/images\/jquery-mobile-logo.png\" alt=\"JQuery Mobile Logo\" width=\"186\" height=\"57\" \/>An early candidate as a development platform for our mobile app was <a href=\"http:\/\/jquerymobile.com\/demos\/1.0rc2\/\">JQuery Mobile<\/a>.<\/div>\n<div>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:<\/div>\n<div>\n<ul>\n<li>Simple.<\/li>\n<li>Quick to build a basic app.<\/li>\n<li>Works across a <em>large<\/em> number of devices.<\/li>\n<\/ul>\n<div>So we spent a week or so building a prototype app using JQuery Mobile. It was ok, but we found a few issues:<\/div>\n<div>\n<ul>\n<li>Not a programming language,\u00a0so it didn&#8217;t feel powerful enough for an extensible MVC framework to allow a range of functionality.<\/li>\n<li>Slightly clunky transitions (at least in beta). User experience sort of ok.<\/li>\n<li>Limited ability to modify the look and feel of the app.<\/li>\n<li>Doesn&#8217;t feel like a native app &#8211; eg no gestures or swipes.<\/li>\n<li>Will only ever allow a web app, rather than an app in iTunes etc.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div><strong>The move to Sencha Touch<\/strong><\/div>\n<div><img loading=\"lazy\" class=\"alignright\" style=\"border-style: initial; border-color: initial; border-width: 0px; margin: 20px;\" title=\"Sencha\" src=\"http:\/\/www.sencha.com\/img\/sencha-large.png\" alt=\"Sencha Logo\" width=\"208\" height=\"78\" \/>The negatives of JQuery Mobile weren&#8217;t massive, but were enough for us to feel we should at least take a look at a viable alternative.<\/div>\n<div>We chose <a href=\"http:\/\/www.sencha.com\/products\/touch\/\">Sencha Touch<\/a>, a mobile app framework based on the the Ext JS javascript framework.<\/div>\n<div>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:<\/div>\n<div>\n<div>\n<div><em>Pros<\/em><\/div>\n<ul>\n<li>entirely in javascript,\u00a0so is powerful enough for an extensible MVC framework to allow a range of functionality.<\/li>\n<li>Smooth transitions and user experience.<\/li>\n<li>Ability to modify the look and feel.<\/li>\n<li>Does feel like a native app &#8211; native gestures, swipes, etc.<\/li>\n<li>Can potentially be wrapped up in PhoneGap for AppStore or Android Marketplace.<\/li>\n<\/ul>\n<div><em>Cons<\/em><\/div>\n<div>\n<ul>\n<li>Steeper learning curve that JQuery Mobile.<\/li>\n<li>Requires more effort to build even a basic app.<\/li>\n<li>Only iOS, Android, and Blackberry are supported.<\/li>\n<li>Slower initial loading time (although faster once the app has loaded up in the device).<\/li>\n<\/ul>\n<\/div>\n<div>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.<\/div>\n<div><strong>Summary<\/strong><\/div>\n<div>\n<ul>\n<li>We looked at JQuery Mobile. Seemed promising.<\/li>\n<li>We looked at Sencha Touch. Seemed even more promising.<\/li>\n<li>Sencha Touch has bit of a development learning curve, but it is powerful and fast.<\/li>\n<li>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.<\/li>\n<li>Our app may still be a little rough around the edges but we needed to get\u00a0something\u00a0out there. There is still a lot of work in the pipeline&#8230;<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>It took a while, but we got there&#8230; The University of Kent finally has a mobile web app! You can access it on\u00a0an iOS, Android, &hellip; <a href=\"https:\/\/blogs.kent.ac.uk\/webdev\/2011\/11\/08\/overview-of-sencha-touch-and-the-kent-mobile-app\/\">Read&nbsp;more<\/a><\/p>\n","protected":false},"author":2,"featured_media":235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8989],"tags":[1071,841,8813,1064,8995,843,8976,8974,8968],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/229"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":10,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"predecessor-version":[{"id":241,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/229\/revisions\/241"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/235"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}