Sencha Inc. | HTML5 Apps

Blog

Sencha Touch Spotlight: Group Commerce

October 07, 2011 | Eric Entin

Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com
Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com.
View Boston Deals app in the Sencha Touch App Gallery

Group Commerce logo Group Commerce is a white-label group buying platform built to serve the needs of publishers and merchants. Browsing deals is something people love doing during down-time. Buying deals should be simple on whatever device they’re using, so mobile-optimized access was a common customer request. Plus, our deals are often local, so we wanted to be able to deliver nearby deals to consumers when and where they’re most relevant.

Other companies in the deals space have mobile sites, so we needed our mobile offering to stand out.”

Other companies in the deals space (both direct-to-consumer and other white-label platforms) have mobile sites, so we needed our mobile offering to stand out. Time-to-market was another consideration — our first client that required a mobile app asked to launch as soon as possible, and we wanted to support at least iOS and Android (and quickly add more platforms in the future).

So — we needed a way to build a mobile deals site with a great user experience, on a short time frame, for iOS and Android. It was a tall order…

Our apps let customers browse and buy deals selected — and often sourced — by their favorite publishers. The first app we launched using Group Commerce’s Sencha Touch-based deal app framework was for Boston.com, the online home of The Boston Globe. Boston.com’s audience, which generally lives in and around Boston, was already accustomed to purchasing great deals from local businesses at boston.com/deals (via desktop). Our challenge was translating that strong desktop experience to an equally powerful mobile one.

As a tech startup working with premium publishers that have lots of brand equity and incredibly high expectations, we weren’t willing to accept a subpar experience in exchange for minor improvements in speed or cost.

Now, people who visit the site with their mobile devices receive a might-as-well-be-native experience tailored to the form factor and usability patterns of their devices. They view, buy, and share the latest deals, subscribe to our email lists, invite friends, and even contact customer support directly from the app.

Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com

The Sencha Touch support for Google Maps integration was a major help when implementing our “deals near you” map. Apple’s MapKit API is certainly not as easy to use or customize as the Google Maps API. Adding a map to the application that had great look and feel took very little work. It even has support for Street View, a great feature the iOS MapKit API lacks.

Individual deals often have several images attached to them, so the Sencha Touch carousel made adding a beautiful native-like scrolling picture gallery easy and fast. We even decided to alter the appearance of the page indicators (easy with Sencha) to make them stand out better against the various images.

Allowing users to buy deals within the mobile app was an important feature that Sencha Touch helped us implement quickly. By taking advantage of Sencha forms, we were able to easily create great-looking purchase forms, perform any needed validation, and handle any errors returned by the server.

Why We Chose Sencha Touch

Most importantly, Sencha Touch is, at its core, based on open web technologies. This means that you get the important “write once, run everywhere” effect on all mobile devices that Sencha Touch supports. Up until recently, it was possible to get away with only supporting iOS because that’s where most of the mobile app users were. For Group Commerce today, foregoing Android support and failing to serve a huge and growing portion of our users is not an option. Sencha support for more obscure platforms is just icing on the cake. If you eventually wrap your Sencha Touch app in a native shell like PhoneGap for distribution as a “native” app, the actual code that provides the functionality of your application can run on the same open web technologies probably used for your desktop sites, so maintenance and upgrades become much more efficient.

We used Node.js to build the backend server for the mobile application, which meant that we were able to build both the client and the server in JavaScript. Removing the “context switches” between adding something to the backend and adding something to the client speeds development. You can also take advantage of awesome libraries like Socket.io to push data in real time between the server and client. If you’re clever, you can even use the same code for the client and the server… how cool is that? That would never be possible if you built the clients natively. Not only would you have to write the backend API, but also client libraries for each platform you wanted to support. We were also able to take advantage of technologies like CoffeeScript and Jade to make writing and maintaining our JS even easier and cleaner.

To be fair, other mobile application frameworks provide similar tooling around the MVC pattern, but the fact is that none of them are as visually elegant by default as Sencha Touch. It’s also so insanely theme-able (with CSS!) that future clients with different color schemes and layout requirements can easily have their own mobile app with its own look and feel without us needing to touch any code.

Boston Deals, a Sencha Touch app built by Group Commerce for Boston.com

Business Value of Using Sencha Touch

We were able to go from requirements gathering to launch in 3 weeks with a “team” of 1 engineer. That pretty much speaks for itself. Even if it took the same amount of time to develop a native iOS or Android application as it does to develop a Sencha Touch app (which it doesn’t) that would mean a time savings of 50%… but Sencha Touch supports more than just those 2 platforms.

The amount of time it would have taken to write proprietary touch-scrolling libraries, mobile UI widgets, and an MVC framework (which would have to be compatible over multiple mobile browsers) would have been several orders of magnitude greater than the amount of time it took to write the app using Sencha Touch. We’ll also get bugfixes and new features automatically with each new Sencha release.

Our Advice to New Developers

Don’t be afraid to dive into the Sencha Touch source code. It’s very well written, formatted, organized, and commented. If something isn’t working the way you expect it to, just start reading the library until you know exactly why!

Final Thoughts

We’re currently working on wrapping our Sencha Touch apps in PhoneGap, so we can incorporate native-only features like push notifications. It’s pretty easy to define a nice API that abstracts things like whether the app is running in a browser, so we’ll be able to continue using the exact same code base for our all of our apps.

There are 2 responses. Add yours.

Alexander

3 years ago

That is super information! Thanks for sharing! I’m going to Tweet about your blog.

Tommy

3 years ago

If I communicated I could thank you enugoh for this, I’d be lying.

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

Commenting is not available in this channel entry.