Sencha Inc. | HTML5 Apps

Blog

Joe’s First Sencha Touch Experience

April 29, 2011 | James Pearce

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.

We caught up with Joe to see how his first experience with Sencha Touch had been.

Joe McCann, wearing a hat. Joe, 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!

There are 22 responses. Add yours.

mark

4 years ago

Maybe new developers will want to know that the sencha team doesn’t respond to bugs in the sencha touch forum for months.
Just read bug reports:
http://www.sencha.com/forum/forumdisplay.php?57-Sencha-Touch-Bugs

Brian Moeskau

4 years ago

@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.

mark

4 years ago

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.

Scott Martin

4 years ago

@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.

Regards,
Scott.

Mathieu Robin

4 years ago

Hello,

Interesting but doesn’t work correctly on Android (Nexus One, Android 2.2.1).

Joe McCann

4 years ago

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.

Cheers!

-joe

john doe

4 years ago

yeah doens’t work on an iphone

Joe McCann

4 years ago

John Doe,

See the comment directly above your’s; it is specifically targeted toward the iPad 2.

Cheers!

-Joe

Alex Korn

4 years ago

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).

Ak

4 years ago

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)

Joe McCann

4 years ago

Ak,

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.

Cheers!

Joe

Ak

4 years ago

@Joe
Thanks for your clarification. I will try to modify the CSS for iPhone.

Thanks,
AK

Markus Wichmann

4 years ago

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.

XL

4 years ago

Thanks, Joe, for sharing this and all the comments in your code!
XL

Gabriel

4 years ago

Can anybody tell me where can i learn more about Sencha Touch?

Michelle

4 years ago

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?

Silit

4 years ago

Hi I’m looking forward. It is used in the future in Sopware, The shop is my next Shopsystem.

Jörg

James

3 years ago

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.

John Doe the 3rd

3 years ago

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

James Pearce Sencha Employee

3 years ago

Link fixed; thanks

Joey Garcia

3 years ago

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.

Winter

3 years ago

Is it really used in Shopware?

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.