Sencha Touch Spotlight: Viewbeat

Viewbeat app icon Viewbeat is an application that makes it fast and simple to ask questions and get answers from your friends and other people, with rankings! Built using Sencha Touch and wrapped with PhoneGap, it features a simple user interface that lets you see the most popular answers at a glance (based on the rating system), so you don’t have to go through all of the answers every time.

bq(pullquote right). Instead of worrying about the interface, I could focus on building my application–enabling me to be more creative.”

It’s my personal project and the result of an idea that I developed after struggling to find an easy way to ask my friends about a product I was planning to buy. My goal was to build a tool that lets people ask a question on the go and get answers fast with the most basic privacy options and notification abilities.

Viewbeat also lets you discover more about your friends and find new like-minded people based on the answers they give. Thanks to the unique matching algorithm, you can find like-minded people with similar interests at the touch of a button and group them, as well as the topics and even topic options you like so you can follow them separately.

Sencha Touch lets you create elegant user interfaces that look and feel like native apps
The component model makes it simple to create complex and easy to use interfaces
Developing custom components such as a profile image button is a breeze with Sencha Touch

Click each image to view larger. Check out Viewbeat in the Sencha Touch App Gallery.

h3. Why I Chose Sencha Touch

I carefully considered whether to go native or use a mobile framework that supports open web technologies. Being able to port my applications to several mobile platforms without a hassle was an important part of my criteria. After carefully examining my options, I decided to choose HTML5/JavaScript and add some PhoneGap to the mix, so I can use native application features such as notifications and access to the contacts list.

Before starting development, it was clear that I needed a touch-based UI framework that had components like sliding panels and action sheets with the look-and-feel of modern touch devices. Among the touch frameworks I reviewed, I decided to use Sencha Touch because it has all of the required components, packaged in an easy-to-use framework that I can use to build robust applications. Instead of worrying about the interface, I could focus on building my application — enabling me to be more creative.

With its strong Ext JS background, Sencha Touch also enabled me to develop my application using an MVC pattern that ensures that my application has the flexibility to be extended easily. As a developer with strong MVC experience, having a familiar pattern at hand made the development process more relaxing and less stressful.

Finally, the object-oriented approach of Sencha Touch let me create custom widgets and extend the capabilities of provided elements, making it a breeze to create custom functionality which is crucial for my application.

h3. Business Value of Using Sencha Touch

Using the Sencha Touch framework, I completed the application in three months, mostly in my spare time, and cut my development time in half. I also got the benefit of a modern, rich UX, while having the freedom to focus on the details of designing and developing the internals of my application.

h3. Advice to New Developers

Learning to use Sencha Touch was easy. Newcomers should start by watching the Sencha Touch video tutorials which provide a good overview. I also recommend going through the Kitchen Sink demo — it includes a lot of good examples for creating a rich, high quality UI.

h3. Final Thoughts

I am quite satisfied with the outcome of this project and I’m going to continue building my upcoming mobile projects with Sencha Touch and PhoneGap. I believe that mobile is the way of the future for computing, and Sencha Touch will definitely be a big part of it.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>