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.

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.