Sencha Touch Debugging

I will start by prefacing this post with it is often very frustrating to try to debug Sencha based frameworks.  My particular gripe in this case is with Sencha Touch 2.0.  I am working on a little project to get more familiar with Sencha Touch.  The project is hosted on github if you want to look on and see what I am doing.  (Maybe you can shed some light on my stupidity.)

NOTE: This is not a post on how to debug Sencha Touch.  My intention is to document what I am seeing and hopefully find someone with similar issues or with a solution.  Check back later for the resolution, as I am sure it will be something ultimately simple.

My issue at the moment is the Observable mixin.  I have a controller, MlbSchedule, that is watching an event fired by the TeamList.  The event, itemtap, is caught by the MlbSchedule controller.  Then the method drillInOnTeam is then called.  So far so good.

Ext.define("MlbSchedule", { extend: 'Ext.app.Controller', mixins: ['Ext.mixin.Observable'], ... initializeListeners: function() { var tList = this.getTeamList(); tList.on("itemtap", this.drillInOnTeam); }

drillInOnTeam fires an event teamSelected, which does nothing more than pass the record along.  The intent here is to send the record out to the listener to transfer control to the next controller that is set to handle the selection of the item in the list.

drillInOnTeam: function(dataView, index, target, record, event, options) { console.log(this.fireEvent("teamSelected", record)); }

The application, app.js, initializes the listener attached to the MlbSchedule controller as follows.  There are no errors at this point and everything appears to be in good working order.

initializeListeners: function() { var mlb = this.getController("MlbSchedule"); mlb.on("teamSelected", this.showTeamNews, this); }

Now, when clicking the row list item, everything fires except he method showTeamNews is never executed.  I am not at a loss.

How do you debug this?  I can step through the various steps of the fireEvent method.  Is there a better approach?

[SOLVED]
It turns out that the event teamSelected was being fired off of the TeamList instance instead of the MlbSchedule instance.  (face palm)

initializeListeners: function() { var tList = this.getTeamList(); tList.on("itemtap", this.drillInOnTeam, this); }

Something so inane.  I don't know how Sencha can correct this sort of developer stupidity.

However, the garbage man showed up as I was writing this post.  I had not put the trash out yet and chased him down and even assisted in loading all the garbage from my current home project into the truck.  This is a good reminder that sometimes the simplest solution is to walk away.

Sencha Touch vs jQuery Mobile: High Level Review

With the advent of the iPhone and later Android based phones, the need to build applications that conform to the profile of these devices has become a very popular and important job.  With the addition of the tablet based devices based on the operating systems in these leading platforms, this need has grown further.  The time and energy required to deliver a mobile application is multiplies for each device platform.  Mobile web applications can address this problem to some extent.

This research topic will be looking at Sencha Touch (ST) and jQuery Mobile (jQM).  The goal is to understand how the two stack up.  In the end hopefully it will be clear which is a more powerful framework based on tangibles and some intangibles.

Admittedly, I have a bias in having experience with Sencha frameworks, specifically ExtJS 3 and 4.  Their Touch framework is new to me.  I have only dabbled in jQuery in the past and the extent by which I used it was rather limited.  However, in terms of some of the enterprise level features, ExtJS has been a more powerful framework.

Sencha Touch Website - v2.0 Beta 1

jQuery Mobile Website - v1.0.1

Device support is important to some.  For my purposes, I am mostly concerned with targeting the iPhone and Android-based phones.  This will simplify the rest of the research, however it's important to note the device support today by each framework.

• jQM, lists support for iOS, Andriod, BlackBerry, bada, Windows Phone, palm webOS, symbian, MeeGo.  See the full report on Browser Support.
• ST v1.1.1 supports, iOS, Android and BlackBerry.  While v2.0 is in beta, the support for Android versions 3.x is labelled as "fundamentally broken, and do not plan to officially support it in Touch 2." [Raising The Bar].  Issues with transitions in the ICS browser have been raised with Android development and appear to have been resolved.

ST v2.0 Beta 1 Kitchen Sink

jQM v1.0.1 Pages & dialogs screen

These screenshots give a general feel for the default look and feel of the both frameworks.  ST tries to mimic the look of the iOS styling whereas jQM uses a theme similar, but varies drastically from the iOS look.  These themes apply the same on an Android based device (tested in an Android Emulator).

jQM is based off of the popular framework jQuery.  This is prevalent in the script loads as well.  Among the javascript files loaded, are jquery-1.6.4.min.js and jquery-mobile-1.0.1.min.js.  This results in a payload of 32111 and 24840 bytes respectively gzipped or 56.9 KB.  

ST on the other hand loads one file with ExtJS framework requirements in addition to the Touch framework.  The total payload 28658 bytes, or 28.6 KB.  A 28.3 KB larger smaller download.  This is a minimal factor as long as caches are utilized properly and occurs on a occasional basis per user.  In slow network situations this could leave a user less frustrated.

Both frameworks pay some lip service to PhoneGap.  A solution that may be a very valuable and easy way to deploy an application to a large customer base while having complete control over the user experience for deploying updates.  A huge drawback to native applications is the platform dependent implementation.  While these javascript-based frameworks are still very new and maturing they do provide relatively good experiences compared to the native based application.  For more information on PhoneGap, please review the documentation provided by the two frameworks or visit http://www.phonegap.com.

Anyone who has done a any amount of studying iOS application development will now that it follows the MVC pattern very religiously.  I won't discuss the details of MVC here but you can read up more on the pattern on Wikipedia.  One of the feature additions in ExtJS 4 was full scale MVC support.  The model was formalized and additional classes were built to support the concept of view and controller.  After doing some work with iOS, I found that I actually appreciated that concept very much.

With that, I would personally look to building new web-based applications following that pattern.  ST is based on ExtJS 4 and brings the MVC pattern to the table.  A cursory search on the google machine, I could not find a concise document on using jQ or jQM to implement MVC based applications.  I think this is knock on the framework and may for some be a deal breaker.

I was also more impressed with the transitions by ST.  I have an iPhone 3GS running iOS 5.0.1.  Anyone running this combination will feel the pain I do on occasion with regards to performance (small price to pay for some of the adds).  The transitions were seamless and very smooth.  With jQM, I found that transitions were not as good.  Here is a set of screenshots of what I am referring to.

The first screen shot appeared after clicking the "Page & dialog" option on the front demo page of jQM.  A page load occurred, the first screen shot appeared and then after enough time to capture the image the second screen shot appeared.  Now, I am not sure if this an intended feature.  What I will say, from a expectation level as User evaluating this demo, I did not expect this transition.  I suspect that the demo application is formed in a way to easily adapt into a tablet/large form factor and adjusts down to the resolution of my iPhone.  That is my uneducated guess.

With these very basic criteria, ST seems to be a better fit for greenfield web application development.  Developer experience with jQuery or ExtJS may be another deciding factor.  As stated earlier, I have more experience with ExtJS.  I feel that it would be a smaller learning curve to learn the ST framework, understand the documentation styles, and implement the application and features necessary to build an application.