Sencha Touch Spotlight: Nanocrowd

Nanocrowd develops technology that understands why people like things. Our first use of this technology is helping people find movies they’ll enjoy. By knowing why people like things, we can make the process of finding movies faster, easier, and more fun.

These are wild times to be in the movie business, and we have to remain flexible, moving quickly to new platforms. For example, with over 40 million iPads sold (and half of them being used to stream movies and television), the iPad has become a leader in mobile entertainment devices. To support this platform, we recently announced our first movie-search application designed for the iPad, built with Sencha Touch: search.nanocrowd.com.

h3. Why We Chose Sencha Touch

bq(pullquote right). “We wanted to remain flexible and create a single code base that we could extend to other platforms.”

Nanocrowd started life as a desktop application, so our challenge was to convert our movie recommendation website into a mobile movie-watching platform. Our development team didn’t have expertise in mobile or touch; and, even though we were building our first mobile application specifically for the iPad, we wanted to remain flexible and create a single code base that we could extend to other platforms.

After evaluating several technologies, we found that Sencha Touch was the best fit for our needs. It took full advantage of HTML5 and CSS3, offering us the cross-platform framework we needed. We built a quick prototype and found it easy to learn. Most important, Sencha instantly put an elegant face on our mobile application.

To develop our mobile app, we started with lists of channels and movies. To become an intuitive mobile application, it was crucial that we convert our desktop grids and scrolling lists into touch-centric scrolling lists. Sencha Touch made it easy to inject movie and channel data into a pane that had three independent scrolling lists, and the first piece of our application was done.

We also needed to present a wealth of information about the movies our users selected. Sencha allowed us to create multimedia overlays which we could float over any other application pane. We created our “Movie details” overlay which includes a thumbnail image, a JavaScript tag cloud, text about the movie, and checkbox forms for flagging whether a movie has been seen or for clearing alerts.

Finally, we wanted to create a fun trailer-viewing experience. Of course, we had to load the trailer for the movie users selected, but then we also wanted our users to be able to scroll through and watch the trailers for any of the movies in the channel. We created a new pane (with an elegant transition, naturally) that included an embedded YouTube viewer, thumbnails for “next” and “back” scrolling, and information about the movie and the channel.

On this pane, we took full advantage of the HTML5 video display and controls, including not only pause and play but also pinch-zoom for full-screen viewing. These same controls and viewer will be available to us on any platform that supports HTML5. When users are ready to watch a movie, a simple sheet flies in, populated with more information from our database showing them where they can watch the movie. One click launches the website or application where they can watch their movie instantly on their iPad.

Our decision to use Sencha wasn’t based on any single element, but rather on how comprehensive the framework is and how easy it is for us to make our applications feel both native and elegant.

h3. Business Value of Using Sencha Touch

Sencha Touch enabled us to cross over from being a desktop web application to a touch and mobile application without extensive training or hiring. We appreciated how easy it was to get started with the framework–we had a prototype application up and running in a couple weeks and understood what it would take to build the real thing. The “Kitchen Sink” examples and code samples were consistent time-savers, as we frequently found just what we needed by snagging source code straight from the Sencha website. After finishing the prototype, we developed a rich, multimedia mobile application with about 6 person-months of development, all with well-designed elements that give our users a familiar touch experience.

Perhaps even more important to our future is that we’re relying on Sencha to solve problems and issues that arise with device OS upgrades and with new hardware platforms. In the coming year, we plan to release our applications on several different platforms, and not only will the application function well out of the box, but as cross-device browser issues arise with these new devices, we’re depending on Sencha to address them.

Finally, we continue to benefit from the Sencha team’s enthusiastic customer support. They are responsive and helpful in our coding efforts as well as getting us up-to-speed on the touch and mobile platform. As we’ve progressed, Sencha has become a valuable technology partner.

h3. Our Advice to New Developers

Don’t worry about mastering the framework before you begin coding–the sooner you begin to prototype and write some code, the faster you’ll learn to take advantage of all the tools and support that is available. When we started, we thought we were building a prototype, but before we even realized it we’d developed pieces of our application. This prototype/experiment/build process has been very successful for us.

There are two things we wish we’d done sooner. We were slow to take advantage of the theming capabilities in Sencha Touch. We thought we’d add them at the end, but it would’ve been more effective and easier to build them in from the beginning. Be sure to spend some time working with theming sooner rather than later. Also, jump into the forums and establish yourself as an active participant as soon as you get started. Although we used the forums as a resource, we didn’t think we should contribute actively until we were “experts,” and we wish we’d participated more fully from the start.

h3. Final Thoughts

Looking to the future of consumer applications, there will continue to be a variety of platforms and operating systems we’ll need to support. Our customers will be adding new “screens” where they’ll want to watch TV and movies and you know they’ll expect all of their devices to play nicely together. By developing in Sencha Touch, we’re building a foundation that we can extend to those platforms as they emerge and change.