Sencha Touch And Restful Models (My Solution)

For those that have been sitting on the edges of their seats waiting for this post, here it is. Finally!

To start off, let's here is a list of my goals.

• Establish an automated method for retrieving a child model from a RESTful service.
• Reduce the application code to manage multiple result sets of slight variation.
• Reduce the code complexity for working with RESTful services and Sencha Touch.
• Simplify the development experience with Sencha Touch and model associations.

The pattern that I immediately see with any RESTful service is an initial subset of data that contains a URI.  To understand the full data set for the same RESTful service, a client would navigate the URI to retrieve the rest of the service details.  We end up with something like this.

{ id: 0, uri: 'makers/0' }

Once the uri of the makers Model is expanded, you should see something like this which contains a model of Chevrolet that I have owned.

{ id: 0, name: 'Chevrolet', models: [ { id: 0, maker_id: 0, name: 'S10', year: '2003', uri: 'cars/0/0' }, ... ] }

Inside the models array, there are potentially multiple records that will next need to be expanded. The complicating factor is the need to navigate and further expand the data sets that you see once the user requires more information. In the above example data set, I have chosen these fields to show on the initial view. I have identified these fields to display to the user to present them with enough information to make their next choice.

View my screencast to see this in action.

You can download the code to my solution from my github project, RestModel.  The implementation with some examples and unit tests are all included.  Please leave a comment if you have any questions or need assistance with setting this up and running with it.

Sencha Touch And Restful Models (The Problem)

This is the first of a couple posts that will discuss Sencha's Touch framework and the concept of using Rest.  The final post will present a solution and examples of this implementation while showing what I have created and learned along the way of solving this problem.

One of the features I have been thinking about with regards to Sencha Touch is having the ability to retrieve additional information while leveraging the very useful and powerful Model implementation. In the context of the Model implementation while using Restful services, the data should in the most strict form contain a URI.  This URI should be a reference to additional information.

In my instance, I am using a phone form factor to frame this problem.  In the context of a phone-based web application, the application should contain just enough information to render the screen useful.  Any additional information that needs to be given to the user should be done on-demand.  For example, a list of car makers shouldn't include a list of all of the cars ever made by the maker.  When the user selects the maker, then a list of cars should be provided to the user.  That should be done following a new request for information.

The on-demand retrieval of information is a convenient and arguably a core feature of restful services.  In the phone form factor, the ability to see the separation of the data requirements for the screen and utilization of the on-demand concept is very easy to see.  Taking the request model to a full-sized browser becomes a bit more tricky depending on the design of the screen and how the data is presented to the user.  For simplicity, we'll stick with the phone to simplify the concept and see some examples.

Hopefully the following pictures will illustrate this a little more obviously if I haven't portrayed the intent.

In it's most basic representation, there is a parent model with a child model.  The child model has enough details to create the proper linking between the parent and child.  Furthermore, it contains an URI property that will assist in retrieving additional information regarding the child object.

After some triggered action, likely a user driven action, the URI is expanded and additional information is "automagically" expanded into the model.  Now any interactions with this model will have the properties, prop1, prop2, and prop3 available for the selected child record.











In the next post, we'll see the implementation that I came up with, view some examples and discuss the project a little more in-depth.

For my solution, see my post Sencha Touch and Restful Models (My Solution).

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.

REST - Taking a Closer Look (Citations)

There was an abrupt end to my posts regarding REST.  This in part due to a goal change and feeling like I didn't have to much more to really dive into at this time.  I wanted to make sure I give credit where due and provide the resources I used very heavily in reference to my earlier blog posts.

Each of the following links were used in some way throughout my research.  Please visit these links for further reading.

Grails Screencast : http://grails.org/screencast/show/31
REST Wikipedia article : http://en.wikipedia.org/wiki/REST
HTTP v1.1 Specification : http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
POST Tunneling : http://stackoverflow.com/questions/1101888/is-there-any-reason-not-to-use-http-put-and-delete-in-a-web-application

REST - Taking a Closer Look (Part 7)

We are going to take a little detour and look at the method values available.  These values have very defined intentions for use and how they should be treated on the response side of the transaction.  The w3.org has documented eight different methods in the HTTP v1.1 specification.

• OPTIONS
• GET
• HEAD
• POST
• PUT
• DELETE
• TRACE
• CONNECT

It seems that all communication is now expected to work through the GET and POST methods.  The GET is intended for retrieving data with potential for cache.  The POST is intended to push data onto the server.  These two methods are very common and do not require a lot of discussion.

OPTIONS Method

The OPTIONS method intends to determine what options are available to the client.  This may be useful in the cases of determining a user has access to specific resources on the server.  The w3.org HTTP v1.1 specification has this to say about OPTIONS.

The OPTIONS method represents a request for information about the communication options available on the request/response chain identified by the Request-URI. This method allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.

Responses to this method are not cacheable.

In the Book example I have been working through, I could it being used to determine if a user has read-only access or may have create, update and delete privileges as well.  The client application could be formed in a way to respect the response of an OPTIONS request to provide certain features to the user based on their authorizations.

HEAD Method

HEAD, is header that I have only read about and never use in practice.  The definition as defined by w3.org from the HTTP v1.1 specification is,

The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response. The metainformation contained in the HTTP headers in response to a HEAD request SHOULD be identical to the information sent in response to a GET request. This method can be used for obtaining metainformation about the entity implied by the request without transferring the entity-body itself. This method is often used for testing hypertext links for validity, accessibility, and recent modification.

Two things come to mind.  Checking the end point is valid and exists, pushing data to the server without sending a response to the client.  Now these two are likely very useful in certain conditions.

My extinct is to avoid HEAD whenever the User's experience is at stake.  Another words, if there is a need to make a request to the server to gather information.  It does not seem practical or feasible to make a HEAD request first to determine if the end point is valid and contains fresher data than the browser's cache.  The result would be in certain situations an additional request to retrieve the data.

I can see this being used in a CDN type implementation, where the delivery nodes are responsible for checking for updates periodically.  In this instance that User is waiting for the response and additional requests.  The node can make requests more often to check staleness using HEAD and then make a GET request to retrieve an update when necessary.

Another useful condition may be to push user activity information to the server.  In this case, the response codes should indicate whether the user is still allowed to access the system.  Otherwise, if the system is dependent on the client pushing data or communicating on a regular basis to avoid a session disruption from the server side.

PUT and DELETE Methods

The PUT and DELETE methods are primarily used in RESTful services.  They are used to indicate the action of updating or deleting some data.  I have already worked through the PUT and DELETE methods in a previous post.  Check it out for what I have discovered there

TRACE Method

TRACE is a method intended for testing and debugging purposes.  The method indicates that the server should do nothing more than reflect the request data back to the client.  HTTP v1.1 identifies this as,

The TRACE method is used to invoke a remote, application-layer loop- back of the request message. The final recipient of the request SHOULD reflect the message received back to the client as the entity-body of a 200 (OK) response. The final recipient is either the origin server or the first proxy or gateway to receive a Max-Forwards value of zero (0) in the request (see section 14.31). A TRACE request MUST NOT include an entity.

This is useful to identify how a request may be processed on the way through all of the various hops between the client application and the server.  If there are no hops between the client and server there is likely going to very little change of the request on the way through to the server.  I have never used this in practice, but I am intrigued to learn more about it and how I may be able to utilize it.

CONNECT Method

This method appears to be reserved but not implemented.  So there is not much to say about it, except it may be used with SSL tunneling.  See the w3.org's HTTP v1.1 specification for more details and updates to the specification.

Java SE for Embedded and Plug Computers

Wednesday night I attended the WJUG meeting on Java SE for Embedded devices.  The presentation was given by Jim Connors of Oracle and previously Sun prior to the buyout.  Jim showed the power of Java SE for embedded devices how there is very little to change in the development process.

During his presentation he showed a hockey scoreboard implementation that he built.  The scoreboard was using a JavaFX front end on his Windows laptop.  He showed that with a similar implementation using jcurses he could show the scoreboard through putty.  The data regarding penalties, time, and period were all managed by the application running from a full-sized laptop.

He showed there was an important distinction between the Java SE platform and Java SE for Embedded.  First off, the size of the embedded jre was reduced by nearly half.  This was to accomodate the size constraints of the flash drive with the device.  Secondly, there are specific builds for each embedded based device.  The download site for Java SE Embedded has several to choose from and may have the binaries for most devices available on the market.

The embedded space will likely grow into a larger market.  It seems reasonable that Developers and IT shops alike should start to take notice.  The advantages of this platform are low cost and low power consumption.  Both making it an easy adoption for any hosting environment.  Jim had two Global Scale devices on hand.  They have two devices that are priced at $99.

In wrapping up the presentation, he showed a web farm with six nodes.  The first node was the load balancer running Apache Tomcat with mod_proxy.  The last five nodes were responsible for handling the traffic.  The advantage of this implementation is the cost.  These machines may not be that powerful today, but there is growing demand for smaller more powerful and ecological embedded type devices.  Did I mention that these devices only run on 5W of power.  Slap an external hard drive on this machine and suddenly you have a lower powered server that can handle a reasonable amount of traffic.

Check out Jim's blog of tomcat micro cluster to see it in action.  It's very cool and as Jim put it, inspired by the old days of google and their first rack mount systems.