Sencha Inc. | HTML5 Apps

Blog

Sencha Touch Spotlight: Stella & Dot

January 26, 2011 | Jay Robinson

Sencha Touch Spotlight: Stella & DotStella & Dot is one of Inc 500’s fastest growing companies and is backed by Sequoia Capital and Radar Partners. Stella & Dot combines the best of direct sales with ecommerce, retail merchandising and social media. Our independent sales entrepreneurs (whom we call Stylists) often run their businesses outside of their home at trunk shows and on the go. They fit their business activities around full-time work or looking after their young families. Mobile web applications are an ideal tool to help them make the most of their time. Our first mobile web application showcases our jewelry collection and enables our Stylists to evangelize Stella & Dot to potential new consultants and event hostesses.

View the mobile site

Why We Chose Sencha Touch

Stella & Dot use the Sencha Touch JavaScript framework for their mobile web app. Here is Sencha Touch v1.1 shown on an iPhone 4.Given the diversity of our workforce, we knew we needed a mobile web application that could work across multiple smartphone devices such as iPhone and Android. We didn’t want to compromise rich features that a native application could provide such as touch and swipe capabilities, device access, and a mobile-appropriate UI. This led us to look at mobile application frameworks that would enable us to create, deploy and optimize a compelling application experience using web-standard technologies.

Although Sencha Touch is a new mobile framework (version 1.0 was not launched when we made the decision to use it), we knew that the technology had the right provenance in its Ext JS roots. Also, the Sencha Touch TouchStyle demo app had some features that we could leverage for our app, e.g. product category pages and animated transitions.

We used the Sencha MVC model to build a stateful client side mobile application. As a starting point, we looked at the Sencha Twitter app example. The application state is stored in URL hash tags, which facilitates bookmarking and backward/forward navigation within the browser.

We relied extensively on Ext.data.Stores for loading and caching data fetched from our service layer which reduced server calls and optimized the user experience. Data keys were used to retrieve previously loaded data from the store manager (Ext.StoreMgr).

The Sencha Touch class inheritance model allowed us to extend basic framework components to create custom, feature rich user controls. For example, on the Host tab, we created an ExpandablePanel that allows content to expand and contract – see below.

Business Value of Using Sencha Touch

Stella & Dot use the Sencha Touch JavaScript framework for their mobile web app. Here is Sencha Touch v1.1 shown on an iPhone 4.Our analysis showed that we had a large number of consultants who owned iPhone and Android devices. When considering native app development, this caused a dilemma because we didn’t have the time, resources or skill set to create one native application, let alone two!

There were a number of other important considerations. We wanted to launch the app at our annual conference. This only gave us about seven weeks to design, build, test and deploy the application.

We also wanted to create a wow factor with mobile — the kind of reaction you get with really well designed native apps. Stella & Dot is a fashion brand, so the app had to reflect amazing design, aesthetics and usability.

In summary, we needed a native-like experience but in a much shorter time-frame and across multiple devices. Sencha Touch allowed us to get to market very quickly with an application that is optimized for both iPhone and Android. The framework dealt with the low level operations, so we could focus our development effort on creating a compelling user experience. Our development team was able to get up to speed quickly on the framework and deliver our first mobile application in record time.

Our Advice to New Developers

Stella & Dot use the Sencha Touch JavaScript framework for their mobile web app. Here is Sencha Touch v1.1 shown on an iPhone 4.We recommend becoming part of the Sencha developer community. The framework is new, so the best way to learn is from other developers. The forum is a great place to ask questions and get answers either from the Sencha team or the Sencha mobile developer community. Sencha offers great training courses on Sencha Touch, so if possible, attend a training session before or early in the development cycle.

Also, check out the Kitchen Sink and other mobile web app demos. They are a good starting point for understanding what you can do with the framework.

Final Thoughts

Sencha Touch has really helped us to achieve our short-term mobile ambitions within a very aggressive timeline. However, there is so much more we can do with mobile. Ultimately, we want to increase the productivity of our on-the-go consultants by delivering training, allowing them to place customer orders and view order status, and connect with the Stylist community. We expect that Sencha Touch will enable us to maximize the impact of our mobile development efforts.

There are 10 responses. Add yours.

David Kaneda Sencha Employee

4 years ago

Awesome theme!

chandru

4 years ago

Perfect theme and colors.
will try to get my hands dirty on this themeing sencha touch.

Jay Robinson

4 years ago

Nice work, guys!

John Porter

4 years ago

Cheers, mate!

Helen Cain

4 years ago

Wow, this looks amazing. Trying it now wink

Ro Laren

4 years ago

great.. i now want to try my own at Sencha Touch..

Sebastien Hareng

4 years ago

Looks nice! Great job!

BB

4 years ago

Does it work on Android devices?

sonia.mike732

4 years ago

grate job.nice design.

Lizbeth

4 years ago

isn’t Stella¨ very similar to Alma&Co;. ?

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

Commenting is not available in this channel entry.