Joe’s First Sencha Touch Experience

Teagrams, an iPad app built with Sencha Touch Well-known designer and developer Joe McCann recently spent a few days using Sencha Touch. We asked him to talk through his experiences of building his first application for the tablet form factor using the framework, and to let us know how he got on.

You can read Joe’s full write up on our Sencha Touch learn section, the code for his app on GitHub, and also check out a hosted version of the app on tablet (and WebKit-based desktop) browsers here.

We caught up with Joe to see how the experience had been.

Joe McCann, wearing a hatJoe, you’ve been designing and developing for mobile for a little while now. Tell us what motivated you to check out with Sencha Touch?

After seeing David Kaneda speak on a panel at SXSWi this year about the latest and greatest features of Sencha Touch, and finally having the shiny new iPad 2 firmly in my grasp, I was convinced that I needed to build a Sencha Touch app for the iPad 2. And it was a chance to gain some new skills with what I feel is an important mobile and tablet framework.

Why did you specifically target the Apple iPad?

The UI on the iPad 2 is gorgeous and the browser is incredibly responsive and snappy. Oh, and because the iPad overall had an 83% share of the tablet market in 2010 even before the iPad 2 came out, I knew a large a number of people would be able to use it.

Your first app is far from basic too. It seems you wanted to create something that people would actually use.

Yes. Instead of building something that is just a “Hello World” app, or merely one step above that, like pulling in some tweets from Twitter, I thought about making something that developers (and myself for that matter) would actually consider a bit more of a “real world” project. Coupling that with the large screen size the iPad 2 provides, a photo gallery of some sort seemed like a nice idea.

But rather than using Flickr, I wanted to try out the ultra-hip and exciting Instagram API instead! And thus, Teagrams was born – an app that snags Instagrams tagged with the word “tea”. (Sencha is after all a type of tea!)

What really compelled me to do something that required a web service call is I wanted to build something that would allow me to use the new “Pull-to-Refresh” feature in Sencha Touch 1.1. Considering how fast people are posting photos to Instagram, I figured refreshing our “teagrams” list would be a decent test of this UI pattern.

And your feelings now that you’ve finished?

I need to point out this was my first Sencha Touch app. Ever. But I was able to get up to speed and build the app in one business day. Anyone can! Once you wrap your head around the object-oriented nature of Sencha Touch, creating incredibly robust and visually stunning applications is quite trivial.

If you’re a developer looking at mobile or tablet application development, and you’re considering web technologies, I highly recommend looking at Sencha Touch sooner rather than later.

Thanks Joe!


  1. Brian Moeskau says

    @mark: You may be aware that another little project called Ext 4 was just released this week and has been consuming a lion’s share of developer resources over the past couple of months. Expect the responsiveness on Sencha Touch to increase dramatically now that Ext 4 is out the door. Also note that Sencha Touch will greatly benefit from all of the work in Ext 4 that goes back into the core platform, which is part of the reason for this focus.

  2. mark says

    Sorry. I didn’t mean it to sound like that. I’m a long time extjs user and love all your products. Please feel free to delete both of my comments.

  3. Scott Martin says

    @Brian: While you make a valid point that your resources that were heavily involved in ExtJS, I would also point out that an simple comment regarding this problem was able to persuade Mark to relax.

    Point: Silence during delay != communication to us about the reason for delay
    Perhaps you can understand the difference.


  4. says

    Hey Mathieu,

    You are correct. It was an app where I specifically targeted the iPad 2, not even the iPhone. I think if I was to build on this app I would explore the what I believe are the profile features Sencha Touch has where you can modify the UI based on the expected “device profile”.

    So, in summary, this app was specifically developed for and tested against the iPad 2.



  5. says

    Good post and very cool app, Joe. Just wanted to give you guys a heads up that the link for “code for his app on GitHub” is broken (should be an absolute–not relative–URL).

  6. Ak says

    I know, that you have mentioned that this implementation is for iPad2, but code wise
    I am not able to understand what is there in your implementation, that says, that this app is for iPad2?
    Or I want to know, what should be done to look this better in phone based devices(like iOS and Android)

  7. says


    There is nothing in the implementation that specifically says that it is for the iPad 2; I, Joe McCann, said that and mad the decision myself that only wanted to target the iPad 2.

    With that being said, to make this “work” or at least layout better on say an iPhone or Android phone, all one needs to do is modify the CSS that is associated with each list item and the image and image container for the modal that pops up when one taps a “teagram” list item. The CSS is the only thing that “breaks” the view on a mobile smartphone. Modifying the CSS is quite trivial. Fork the code and give it a try.



  8. Markus Wichmann says

    This sort of personal how-to makes reading easy and fun without being less informative than e.g. a purely technically written document. Thanks a lot for letting us participate in your experience.

  9. Michelle says

    Still Mark has a very valid point. I’m sorry, but the fact that Extjs 4.0 was ‘consuming a lion’s share of developer resources’ just is not a valid excuse for totally ignoring your Touch users for months on end. There are even people pulling bug reports now because of lack of response..
    ‘..Expect the responsiveness on Sencha Touch to increase dramatically now that Ext 4 is out the door…’ Great, but for how long? Until [some-other-Sencha-product-version-x.x] needs to be released?

  10. James says

    I agree with Marks comment (first comment). Please sort out the bugs in Sencha Touch. They’ve been around for too long and effect development.

    I too am a long time ExtJS developer. Very disappointed with where the company is headed in terms of response. Growing pains? Maybe, please address them quickly.

  11. John Doe the 3rd says

    Just a heads up: the code link is wrong, you need to remove the first part of the URL

  12. Joey Garcia says

    I think it would be helpful to see a simple web app example that emphasizes how to intelligently handle device detection and how you include only the files you need for that device.

    For example, do you programatically include differently JS files? or do you have one file with a bunch of device flags (isPhone, isTable, etc…). Do you use multiple JS files and load all but only call the code you need?

    I’d love to hear how Joe does this, and even better with Sencha Touch.

Leave a Reply

Your email address will not be published. Required fields are marked *