Sencha Touch App Contest 2010: An Interview with e-resistible
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.
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.
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.
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.