Sencha Touch Spotlight: CarSense Mobile Inventory

December 16, 2010 | Jay Robinson

CarSense is one of the Northeast’s leading used car brands, and Nimblelight is a small web development and consulting firm in Philadelphia. The work we do for CarSense has helped expand their storefront to the web and cultivate strong relationships with their online audience.

“Other frameworks offered similar solutions, but none that performed as well as Sencha Touch.”

We recently built a mobile version of CarSense’s extensive online vehicle inventory that enables carsense.com visitors to browse over 1,300 low-mileage used cars on their Apple iOS or Google Android touch device. With an array of search and sort options at their fingertips, visitors can get details on vehicles they like, scroll through car photos, schedule a test drive, send an inquiry, obtain a vehicle history report, and get directions to a CarSense location—all from their phone.

Why We Chose Sencha Touch

CarSense’s slogan is “One Less Thing in Life to Negotiate” and it informs all aspects of their no-haggle, no-pressure sales process. So our first priority was to build something very easy to use and, more importantly, easy to find. The fact that Sencha Touch gave us the ability to bypass the app store and still recreate the experience of a native app made it a very attractive solution.

Digging deeper, we were impressed that Sencha had solved the “position: fixed;” problem so smoothly and were able to implement a silky-smooth page scroller. Also, CarSense has a large vehicle inventory, and Sencha’s fixed toolbars and menus provided us with a way for users to navigate extensive search results quickly and easily. Other frameworks offered similar solutions, but none that performed as well as Sencha Touch. We knew we’d never be able to replicate the behavior of a native touch application using mouse events, so it really came down to the framework that offered the best native touch events. Sencha Touch expanded and enhanced the basic touch events offered by Mobile WebKit, adding touch events like pinch, swipe, tap and tapcancel. Once again, though other frameworks offered similar shortcuts, none were as smooth and well implemented as Sencha Touch.

“We were impressed that Sencha had solved the ‘position: fixed;’ problem ... and were able to implement a silky-smooth page scroller.”

Our developers have a strong jQuery background, so the ability to select HTML elements and add event listeners with the Sencha Touch framework was a great advantage for us in terms of familiarity. This ability became particularly helpful when we needed to add button behavior in an Xtemplate’s markup. We were able to keep the number of templates to a minimum by adding event listeners to HTML elements in the markup. By using SASS to theme the CarSense app, we shaved several hours — maybe even days — off our design and development time. Plus, since some of the components of the app required a fair amount of HTML, XTemplates was also a great time-saving feature. Since we started using Sencha Touch, the API documentation has gotten better and better. Any developers just starting out with Sencha Touch should dive into the documentation; it’s a great resource.

Advice for Developers Starting Out with Sencha Touch

Our advice to new developers is that you shouldn’t panic just because everything is in JavaScript and you have less control over the HTML. Sencha Touch does all of the heavy lifting for you by creating the HTML based on the configuration options you choose in your panels. It's important to understand the different types of layout options you can have in a panel (vbox, align, pack, etc) and when to use them. Remember that a layout configuration on a panel applies to the item's children and not to the item itself. This was something we learned from building our first application.

Final Thoughts

Adoption of the new app has been fast and steady as thousands of visitors now use the iPhone version of the mobile inventory each month (and that number is growing). We are also gaining users on the Android platform. Sencha Touch enabled us to quickly deliver a superior mobile shopping experience to CarSense customers — and to deliver that experience without asking the customer to visit the App Store. Because we could serve the appropriate version of the site to visitors, CarSense didn’t have to create an additional advertising campaign to drive customers to the app, saving a considerable amount of money and rollout time. Plus, it would have been too costly to re-create the look and feel of a native app from scratch on each mobile platform.

There are 4 responses. Add yours.

ziggy

3 years ago

On carsense:

Why do pages flash (appear/disappear/reappear a moment later) when you go to a new page?

Also, scrolling briefly highlights the item you touch then scrolls.

Oscar Waczynski

I have taken a look at the application and found that it’s relatively smooth, and has a great UI design.

My 2 issues are:

1. After browsing the site with the iPhone vertically, I then turned it sideways and found that it would not realign properly.

2. Ziggy touched upon this one, the pages disappear and then reappear when you choose a new tab. It doesn’t always do it, but it’s distracting.

Anthony Matejcich

Does Sencha have an Australian base? this is really interesting stuff?

Facebook Layouts

Carsense is a large used car dealer by my home. I am 16, turning 17 in May and have worked as a member of the maintenance crew at my school over the summer. I am interested in applying for a part-time job there during the weekends or maybe after school on weekdays. I am wondering if it is a dumb idea for me to apply for it because I have no skills in that field aside from doing maintenance work and I imagine cashier work would be within reach for me

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

Commenting is not available in this channel entry.

Blog