Sencha Inc. | HTML5 Apps

Blog

Sencha Customer Spotlight: Burrows/Ford

May 09, 2012 | Ricky Clegg

Sencha Customer Spotlight: Burrows/Ford Burrows is a full service communications agency which helps its clients give their customers key information and creative content to inform their purchase decisions. Our latest application is known as ‘Ford Showroom’ and is a portal for all things Ford. The main goals for this app were to help dealers sell cars, while immersing customers in the Ford brand.

Our new application has two versions, a consumer experience and a dealer experience. One of the features that makes the dealer experience unique is the ability to send parts of the application to large screen televisions placed around the dealership. The app takes full advantage of the real estate that a tablet computer has to offer and provides immersive experiences to the user via full screen images, serving video and a wealth of information. The application contains up to ten different car nameplates.

Burrows used the card layout and new Viewport floating panel system to create overlays. With the Sencha Touch swipe event, navigating through the pages is fast and smooth.

Why We Chose Sencha Touch 2

In 2011, we chose Sencha Touch as our mobile framework. It was light years ahead of the other JavaScript frameworks on the market and provided a great API to aid in the transition of our Flash Platform developers to JavaScript. As a company, we really aim for a ‘one codebase’ to fit all solutions, and Sencha was our best chance of achieving this goal. We built apps in Sencha Touch 1 for clients including Ford.

With the prospects of the new Ford Showroom App, we did some thorough testing and found that Sencha Touch 2 continued to offer the best components and features. As a company, we made the decision to use Sencha Touch 2. If you want to write object oriented JavaScript, there is no easier place to start. The ‘extends’, ‘requires’, ‘statics’ and ‘constructor’ is the best foundation any JavaScript novice or pro could ask for. What we have learned is every byte counts, and using the lazy loading AJAX and JSONP features in Sencha Touch 2 to request your JavaScript files and data is a great way to keep memory down and only request code when needed.

Layouts are our most utilized feature in Sencha Touch 2, due to their flexibility to create cross platform applications. The Showroom application will be available on both Android and iOS. We make great use of the VBox and HBox layouts along with the flex configuration property to make the app resolution-independent. The layouts allow the app to stretch to any size easily and handle the content within the containers. Switching through the views and getting the data is easy using Sencha MVC technology which is built right into the framework.

Throughout the application, we built custom components. DotNavigation is one of my favorites. It’s a simple dynamic indicator for a toolbar that we used for a card layout or carousel to show which page the user is viewing. It helps users easily navigate around views in a very app-like fashion, taking advantage of CSS3 animations.

In the dealer release of the application, we allow communication to a server through the Sencha Touch web API that enables the dealer to send high res images and videos to large screen televisions around the dealership.

Burrows took advantage of the Sencha VBox and HBox layouts with box flex set on each component to make a completely flexible menu system that fit both iOS and Android. Business Value of Using Sencha Touch 2

Business Value of Using Sencha Touch 2

The value goes first and foremost to our clients. The days of companies just wanting an iOS based application are over. Now, it’s all about cross platform and how many Android tablets and iPads you can support. The cost savings of not developing twice can add up to the hundreds of thousands and during a recession every penny counts.

For our developers, the efficiency gain is almost immeasurable. Without Sencha Touch, we would still be working out how to make a momentum-based touch scroller. Instead, using Sencha technologies we can make prototypes in hours, not days.

Our Advice to New Developers

The biggest piece of advice we have for other developers is: go with the framework, do not fight against it. It is easy as a web developer to dive in and start forcing your own CSS and HTML into components to bend views to your will. Littering your CSS files with position absolute and float left. The layouts and components provided with Sencha Touch are fantastic and really flexible. Read all about them in the Sencha documentation, and you will love the framework.

For all newcomers, read the API. Sencha offers great documentation and support forums. Read through the ‘Hello World’ examples and watch the videos. You don’t need to know a lot to get started, but with a few fundamentals you will go a long way. The built-in MVC architecture is great and a rapid way to develop. However if you are new to design patterns, do not confuse yourself, take the time to get familiar and read about the pattern first.

Final Thoughts

Burrows recommends Sencha Touch 2 to any company or developer. Whether for speed, platform penetration, or just the need to make JavaScript an easier transition from developing in another language. Sencha products have a great community, are full featured and for Burrows, the only JavaScript framework for creating mobile applications.

There are 10 responses. Add yours.

Michael

3 years ago

Great article… is there a viewable version? Or some more screenshots or a screencast?

I tried this one:
http://www.burrows.info/work_casestudies_interactive/work_interactive_casestudy_ford_technology.html

But I can’t install it on my iPad in Germany.

Regards,
Michael

Ricky Clegg

3 years ago

Hi Michael, Thanks for the comments.

Sadly the Ford Showroom is only running on a pilot at the moment in selected Ford dealerships. It will be going for public release on Android and iOS in July. You will be able to hear more about the App and Sencha at http://www.sourcedevcon.eu/ if you are able to attend.

Our original application build using Sencha Touch 1.0 is available if you would like to look. it is available from http://itunes.apple.com/gb/app/ford-focus/id454693533?mt=8 however depending on your location it is only available in UK, France, Spain, Italy and Russia. If you can a chance to download it check it out. It is nothing compared to our new Sencha Touch 2 application though.

As it is not public yet, I cannot really give out more screenshots. If you are looking for more information about using Sencha and the App Store check out the links below.

Sencha Touch Docs: http://docs.sencha.com/touch/2-0/
My Speaker Deck - Submitting Sencha Touch Apps to the App Store: http://speakerdeck.com/u/rickyclegg/p/submitting-a-phonegap-app-to-the-app-store

MAHESH

3 years ago

Hi Ricky,

Superb article, with great details and its definitely helpful for new developers. 

It’s good to see way you grown along with Burrows with expertise in mobile application development from where we both started with company’s first mobile application (Ford Focus).

I’m looking forward to see the Ford Showroom app. smile

Keep up the good work. 

Regards
Mahesh

Chris Walker

3 years ago

So true about going with the framework! I fought it with my first Touch 1.0 app. Now I am using the new Sencha Architect to port the app to Touch 2. It’s taking awhile but it’s less complex code wise doing it within the MVC framework now.

Dario

3 years ago

Great article…I would like to see more screenshots.

PromWTX

3 years ago

Interesting to know that a big company such as Ford is using Sencha.

Lucy Marian

3 years ago

Fantastic to read about Sencha Touch 2. I just pleased to read about it and got some important information about it. Love this product. Thanks for this allocation. LOL

Simon

3 years ago

I think it’s about time you added an anti-spam plugin to the comments form!

Real Estate Investment

3 years ago

Fantastic to read about Sencha Touch 2, Interesting to know that a big company such as Ford is using Sencha

Property Investment

3 years ago

Great article… is there a viewable version? Or some more screenshots or a screencast?

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

Commenting is not available in this channel entry.