Sencha Inc. | HTML5 Apps

Blog

Sencha Touch Spotlight: Echo Conference Mobile

December 08, 2010 | Jay Robinson

What is Echo Conference Mobile?

Echo Conference Mobile uses Sencha TouchEcho Conference Mobile is a mobile web application built using Sencha Touch, that provides information to Echo Conference attendees. It features event details including schedule, speakers, sessions, and maps. This mobile web app allowed a majority of our 600+ registered attendees with a smartphone device to access conference information whenever they needed it.

Update (Sept. 9th, 2011): The Echo Conference team have updated their app and code for 2011.

Echo Conference is a media/technology conference where we aim to teach, equip, and lead creative church leaders. Echo Conference Mobile app allows our attendees to make informed decisions on speaker and session information and provides technology that can be used as a source of creative inspiration.

Why We Chose Sencha Touch

Sencha Touch provided us the ability to jump into mobile application development based on our background in web development. By choosing to build a web application, it was quick and easy to deploy and allowed us to make on-the-fly updates, when needed. Echo Conference Mobile web app, built on the Sencha Touch framework, was a perfect fit for our attendees since it has support for WebKit devices and most of our attendees carry iOS and Android devices.

We had very limited development time to meet our conference deadline. Using Sencha Touch, we were able to create a mobile application quickly enough to distribute it at our 2010 conference. We needed nothing more than a text/code editor and any WebKit browser to do on-the-fly testing. Sencha Touch provided all of the UI components we needed, so it took almost no time to do UI design. In the end, we used the default theme with small tweaks for additional content. The entire mobile app was built based on information architecture rather than a UI mockup so using the default Sencha Touch theme just helped bring the data to life.

Here are a few examples of how we used Sencha Touch to build our conference app. (Click the images to see them full-size.)

Schedule list in Echo Mobile's Sencha Touch appConference location map in Echo Mobile's Sencha Touch appRecent tweets in Echo Mobile's Sencha Touch app

  1. Using the Bottom tabs was key to organizing the main content sections of the app. They provided easy visual cues to help users navigate the available content.
  2. The Carousel was a perfect way to group a collection of content for easy, quick access. We used it to display the maps of different floors and buildings.
  3. The Proxy and Reader provided the framework for a basic conference Twitter stream. We used it to pull our twitter account plus the conference hash tag allowing attendees to follow along with the conversations taking place at the conference.

Advice for developers starting out with Sencha Touch

  • Play with the code. When we first started using Sencha Touch, we knew nothing about it (or any Sencha products). So, we just dove head-first into the documentation and examples. We spent the first few days looking over different examples and deciding what we needed for our application. Since all of the components are based on HTML5, CSS3, and JavaScript, it was easy to run locally and play with the code to see what it could do.
  • Use the Sencha Forum. After we got our initial application running, there were times when we ran into more application specific bugs that we needed to resolve. There’s a wide variety of people in the forums including beginners who are just starting out and seasoned Sencha developers. They were all willing to lend a hand by providing suggestions and examples. We appreciated having this additional help.
  • Don’t give up. We are still just touching the surface of what can be built with mobile web applications. Just because there isn’t an example or forum post of doesn’t mean it can’t be done. All of the code is there for you to explore and build upon. In a few cases, the best solution we found was to dig down into the Sencha Touch code to figure out how something was working. That led us to the best result.

Final Thoughts

Working with Sencha Touch has been a very rewarding experience. We received great comments from our attendees and look forward to building an even richer application next year.

The developers at Sencha have done a remarkable job laying the groundwork for web developers to create great mobile applications. The Echo Conference Mobile app was basically a test to see what we could build, and with Sencha Touch we developed an app that exceeded our expectations. We were able to build a production ready app in a short time. Plus, we learned a lot in the process.

There are 4 responses. Add yours.

rich02818

4 years ago

Does not run properly on Droid 2.2.  I drilled down to “Breakout Session 1” followed by the top link, then clicked the ‘Back’ button within the app.  The 2 screens seem to be superimposed over each other and the UI is non-responsive.  This is repeatable by drilling down various places and trying to back up…

sensar

4 years ago

Any chances of making this source code available?

pakhot

4 years ago

i like this post a lot, thanks for sharing this info.
i am going to bookmark this page for sharing with my friends.

patrick

4 years ago

Is the source code available?

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

Commenting is not available in this channel entry.