Sencha Touch Spotlight: Freescale

October 05, 2011 | Jay Robinson

Pentagram is the world’s largest independent design consultancy. The firm is owned and run by 16 partners, a group of friends who are all leaders in their individual creative fields. Each of our clients works directly with one or more of our partners. This reflects our conviction that great design cannot happen without passion, intelligence, and personal commitment, which is demonstrated by a portfolio of work that spans five decades.

Ponticlaro is a leading developer of websites, user interfaces and mobile apps. Their clients include universities, creative agencies, Fortune 1000 companies and forward-thinking individuals.

Our goals were to create an engaging and easy-to-use catalog of Freescale’s diverse product line-up that could be easily updated using their pre-existing database structure. This database is constantly updated and refined using their custom CMS by many different members of their company, so it was critical for us to normalize the data into a usable format and present this catalog of products elegantly on the iPad.

We enabled the app to work offline and be portable to future iOS, Android and other HTML5-based tablet devices. We also included native iOS functionality by leveraging our custom builds of PhoneGap and PhoneGap plugins, incorporating native email composition, multi-tasking detection and an introductory video animation.

“We easily saved 3-4 months of development time by leveraging the functionality in Sencha Touch and look forward to seeing version 2.0!”

App Features

The app allows electrical engineers to filter products that fit their design needs based on their chosen parametric values. The app also allows the user to save lists of products for later and share these lists with co-workers and friends. The app self-updates everyday with the latest product information pulled from Freescale’s servers and provides extensive product specs.

This satisfies Freescale’s core audience of technically-savvy engineer types, but what about other iPad users who might come across the app? For this, we developed the “Explore Freescale” section that highlights many of the applications and uses Freescale’s technology in a more consumer-accessible way. Freescale serves many different sectors of the economy including medical, industrial, automotive and networking customers, all of which are highlighted in the app. It’s amazing how many products have Freescale components inside of them, so we highlighted these in large side-scrolling lists that illustrate how big Freescale’s influence really is, whether the public knows it or not.

Why We Chose Sencha Touch

We chose to use Sencha Touch because of the extremely flexible layout engine and built-in Compass theming. We used the many different layout options to split up our views into different usable regions. The built-in support for popover elements in Sencha Touch was really useful and became a common interaction technique.

We required full control over the look-and-feel of the app to match our pixel-perfect mockups and strict corporate guidelines. Sencha Touch allowed us to replicate the exact user experience we created through our wireframing and design process. Since we were initially targeting iOS, we were also able to take advantage of a number of exciting CSS3 techniques.

The Sencha Touch store gave us an optimized foundation for filtering based on multiple parametric values. We relied heavily on the store API and the ability to create custom filters. The object-oriented framework also made it easy to extend the parts that we liked and add more functionality and metadata. We also used the localstorage API to handle all of our “save for later” product lists.

We easily saved 3-4 months of development time by leveraging the functionality in Sencha Touch and look forward to seeing version 2.0!

Our Advice for New Developers

Get to know the layout options and simplify your views. In cases where you don’t need the features that Sencha Touch Lists give you and you want optimal scrolling performance, use a stripped-down HTML representation of your data styled with CSS instead of the built-in Sencha Touch list objects which require more memory. The fewer panels/views you nest, the snappier your interface will be. Don’t forget to destroy hidden views correctly to avoid interaction and performance issues.

We recommend that you use “cache-blockers” in your CSS and JavaScript code. A cache-blocker is something that you append to the end of a stylesheet or image URI to force the browser to reload it, such as:

http://example.com/foo/bar/js-lib.js?v=1.2

Whenever you change this, it’s good practice to increment that cache blocker (i.e. v=1.2 changes to v=1.3) to make sure your app is seeing this change.

It probably goes without saying, but save yourself some trouble, and do most of your testing on the device. Don’t assume that the speed or functionality you are seeing in a desktop browser will replicate on the device. Critical design decisions must be made based on device-tested prototypes. Don’t be afraid to re-write to get the initial speed optimizations you require!

Final Thoughts

We enjoyed working with Sencha Touch and feel confident that it is ready for commercial app development. Our plans are to develop new app prototypes and deliver the best apps running on the next wave of iOS and Android tablets for our clients. We look forward to finding new clients that want to use Sencha Touch for their mobile or tablet app and push the envelope with regard to what is possible with touch-based user experiences. Contact us at howdy@texas.pentagram.com or info@ponticlaro.com.