Sencha Inc. | HTML5 Apps

Blog

Sencha Touch App Contest 2010: An Interview with e-resistible

December 21, 2010 | James Pearce

Alexander Pope once wrote “What mighty contests rise from trivial things”. We can be fairly sure he wasn’t talking about JavaScript, but he might just as easily have said “from powerful mobile app frameworks”: our Sencha Touch App Contest last month brought together hundreds of the best mobile developers from around the world — in eager hope of winning $50,000 in cash and prizes. And the results were spectacular.

In a series of blog posts, we’d like to introduce you to some of the developers behind the apps that were produced for the competition, and give them a chance to explain why and how they created their competition entries.

Nick Poulden, Chief Architect for the UK-based food ordering site e-resistible.co.uk We start with Nick Poulden, Chief Architect for the UK-based food ordering site e-resistible. Nick’s app enables users in the UK to search for local takeout restaurants, quickly place an order online, and have their food delivered to any location — all via their mobile device.

I caught up with Nick this week to ask him about how he put the app together.

With Sencha Touch I was able to create a mobile app with a native look and feel — and without having to learn an entirely new programming language or native SDK.”

Q: So, Nick, what was the thinking behind building a mobile service for e-resistible in the first place?

Our goal is to make ordering takeaway food as easy as possible for our customers. We knew that being able to do so from a mobile phone would add real value to the service we provide as our customers are not always in front of a computer when they want to order. A mobile app is something we have been considering since we first came up with the idea of an online takeaway service 3 years ago, but it’s only recently that we had time to think about implementing it.

Sencha Touch app built by Nick Poulden

Q: Was it easy to choose between using web and native technologies to reach your mobile users?

We wanted our customers to have the best experience possible from the first time they used our mobile app. A native app would be easy to develop for one platform, but we wanted to support as many types of device as possible. We realized we could do this using a web-based framework without sacrificing anything on user-interface. We could have used a slimmed down version of our web pages, but the benefits didn’t seem worth the effort. We thought our mobile users would feel more comfortable with an app-like experience.

Q: What made you choose Sencha Touch as your framework? Did you find it easy to work with?

Sencha Touch offered a familiar look and feel to the native apps our customers are familiar with. Thanks to clever use of CSS, theming the app so it was inline with our brand was super-easy and quick to develop. With Sencha Touch I was able to create a mobile app with a native look and feel — and without having to learn an entirely new programming language or native SDK.

Sencha Touch app built by Nick Poulden

Q: And on the server side? You already had something in place for the desktop site presumably?

The server side of the application was build using nginx, Node.js, Connect and Express with CouchDB for the database. Restaurants, orders and customers are all represented internally as JSON objects, so there was minimal work to be done on the server side to implement the mobile version of the site. In fact there are only about 4 calls to the server needed when placing an order: listing restaurants, viewing an individual restaurant, logging in and submitting an order.

Q: So the mobile app itself… talk us through the flow and some of the Sencha Touch components you use.

The splash screen is an Ext.Container with a ‘card’ layout and a ‘fade’ animation for the imagery. There is a setInterval event which changes the image every 10 seconds or so. The restaurant listings page uses an Ext.List view with a docked titlebar. The restaurant info page is an Ext.TabPanel using a combination of containers, lists and map components for the individual tabs. The login and confirmation pages are all Ext.FormPanels with regular form elements for inputting order information. Everything we used was an off-the-shelf Sencha Touch component.

Q: You’ve done a good job of matching the desktop brand with the mobile site — how did you get on theming Sencha Touch?

It was extremely easy to theme the app! 90% of the work was simply updating one SASS variable in the theme (the $baseColor variable) to match the red from our logo. The rest of the styling was done using a regular CSS stylesheet. I developed the main style in Google Chrome — thanks to its use of WebKit I knew that the branding of the two sites would be consistent.

Q: And finally, tell us a little about that cool animation when you complete your order…

The animation at the end was produced using Sencha Animator. From downloading the Animator tool for the first time, the animation took about 2 hours to create, having never used it before. The interface was intuitive enough that I didn’t even need to read any documentation — it was all trial and error. We thought the application would make our customers smile!

Thanks, Nick — and congratulations on your success in the contest!

Be sure to visit e-resistible.co.uk on a compliant touch screen mobile device or desktop WebKit browser to see this terrific app for real.

Written by James Pearce
James Pearce heads developer relations at Sencha. He is a technologist, writer, developer and practitioner, who has been working with the mobile web for over a decade. Previously he was the CTO at dotMobi and has a background in mobile startups, telecoms infrastructure and management consultancy. James is the creator of tinySrc, the WordPress Mobile Pack, WhitherApps, modernizr-server and confess.js, and has written books on mobile web development for both Wiley and Wrox.
Follow James on Twitter

Share this post:
Leave a reply

There are 5 responses. Add yours.

Henry p

3 years ago

Great stuff!  Any chance to see the animation without completing an order?  Would love to see the animation. This app is awesome.  Congrats on winning a prize.

darkduck

3 years ago

Why don’t you publish a tutorial showing some of the css tricks that you used to build this?

Taniya

3 years ago

Congratulations!!! Really great work…
Go on and write a tutorial on Sencha Touch. Will be a great help to many of us.

Prudence

3 years ago

Heck of a job there, it absoultely helps me out.

Lynn

3 years ago

You know what, I’m very much inlicned to agree.

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

Commenting is not available in this channel entry.