Sencha Touch Spotlight: Emerge Interactive and TEDxPortland

Emerge Interactive is a digital marketing agency providing interactive solutions for consumer brands, including CMS and e-commerce websites, mobile and Facebook applications. Emerge offers clients a single source for delivering digital solutions that succeed and thrive in a rapidly changing marketplace. Our promise is to “Inspire and Deliver the Remarkable.”

TEDx is a program of local events that brings people together to share a TED-like experience. Emerge had the pleasure of being creative collaborators for the inaugural TEDxPortland event–contributing our digital expertise to enrich the event experience through an interactive networking “game.”

The goal of the project was to connect attendees and digitally augment their networking via an interactive installation along with a mobile website. Attendees were asked provocative questions, and their answers were anonymously projected onto a large screen. Real-time relationship scores indicated how similar attendees were to other individuals at the party, based on their answers, and players could pull up their Twitter and LinkedIn profiles right there from the app and connect. Days after the event, players were still answering questions through the mobile site and using it to connect with other party VIPs.

Due to the short lifetime of the project, we chose to build a mobile website instead of device-specific applications. That way we could deploy the application without having to go through the App Store approval process and easily iterate up to the day of the event. The fact that we could use Sencha Touch to create mobile websites, and not just applications, was critical.

One of the main concerns when building any mobile website is cross-device compatibility. For this requirement, we leaned heavily on Sencha Touch which mimics native UI elements out of the box, providing users with a familiar user experience. This was a big advantage for us as well because we didn’t have to tweak CSS for each device individually. The UI elements were production ready and didn’t need styling. Since we were able to use the UI elements without doing custom coding for different platforms, our QA was radically streamlined.

Compared to other JavaScript frameworks, Sencha Touch has a richer set of libraries and objects that can be leveraged in the client, beyond just the UI elements. Also, Sencha Touch manages the state on the client side, so your app or site can be more responsive because the load is reduced on the back-end. For a real-time application like ours, responsiveness was critical, and Sencha Touch did not disappoint.

Finally, Sencha Touch support for an MVC approach was critical to supporting our team-based development methodology and the highly collaborative nature of this project. We separated concerns which allowed us to deploy teams working concurrently on the application and then integrate their work at a later point.

Sencha Touch allows you to take advantage of the simplicity of remote data access libraries which can be a huge advantage–they were for us. This greatly reduces the need for server side processing. You also don’t need to worry about session variables in many cases, which allows for easier scaling. The model layer is very robust, with computed columns being just one example. You can also sync client-side changes to the server via the framework’s built-in functionality.

Keep in mind that Sencha Touch is continuing to deliver new functionality. This is a good thing! The docs are awesome and will quickly become your best friend. Familiarize yourself with them early in the process and be sure to reference them regularly.