Sencha Inc. | HTML5 Apps

Blog

Sencha Touch Spotlight: Freescale

October 05, 2011 | Jay Robinson

Freescale iPad app, built with Sencha Touch
Pentagram Austin and Ponticlaro partnered to produce the Freescale iPad app.
View Freescale iPad app in the Sencha Touch App Gallery

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.

Freescale iPad app, built with Sencha Touch Freescale iPad app, built with Sencha Touch Freescale iPad app, built with Sencha Touch
Freescale’s iPad app allows customers to navigate different product families, while the ‘Explore Freescale’ section shows all of the different applications made of Freescale products.

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.

Freescale iPad app, built with Sencha Touch Freescale iPad app, built with Sencha Touch Freescale iPad app, built with Sencha Touch
1) Freescale products can be filtered by many different parametric values to match any engineering project.
2) All Freescale products include an excerpt, full description and link to the product’s webpage.
3) App users can save their favorite products into lists that can be shared and accessed later.

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.

There are 3 responses. Add yours.

lee byeung ok

3 years ago

Good News but
Most of Sencha Touch developers are just waiting for Comming Sencha Touch2…
before it’s comming… most of news about sencha touch is not as exited as before…. ^^;

WHEN !!!!!

Marv

3 years ago

I can’t hear anthying over the sound of how awesome this article is.

Reno

3 years ago

I had no idea how to approach this before-now I’m lkcoed and loaded.

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

Commenting is not available in this channel entry.