Sencha Touch and Ext JS Spotlight: Jarvus Innovations

Jarvus Innovations builds brands, software, apps, and websites for both internal products and a wide range of clients including Christie’s Auction House, Philadelphia Eagles, The Wharton School of the University of Pennsylvania, Philly Tech Week, TEDxPhilly 2010 and many others.

See the Jarvus-built apps in the Sencha Touch App Gallery:
Philadelphia Eagles
Philly Tech Week

“We use Ext JS and Sencha Touch extensively for our client projects.”

h3. Why We Chose Sencha Touch and Ext JS

We’ve been using Ext JS since v2, migrated to v3, and we’re now using v4 which offers a big step up with the MVC framework. We chose Ext JS because it gave us the basic components we needed to build our apps quickly and efficiently versus other bloated frameworks that forced us to use components we didn’t need. With all of our experience in Ext JS, it was easy for us to choose Sencha Touch for mobile apps when it came out because we were already familiar with the syntax and platform.

We use Ext JS and Sencha Touch extensively for our client projects. We have built apps that use both Ext JS and Sencha Touch such as the Wharton livestream app that we built using Ext JS for the chat app and moderation console and Sencha Touch for the presenter’s iPad interface. Here, we’ll describe the Sencha Touch apps we built for Christie’s auction house and the Philadelphia Eagles.

We built an iPhone app for Christie’s auction house in New York. They wanted to support both iOS and Android, and they wanted new features such as “My Christie’s” user login, absentee bidding, and the ability to view featured articles and videos from their collection.

For this app, we used SASS, so we could apply the Christie’s branding and design elements to the existing Sencha components we used to build the app. We used Sencha gesture events and carousel to implement a photo gallery that allows users to navigate by swiping and pinching. We also used the Sencha list component on almost every screen and each one has a custom template. The list component made it easy to erase and rebuild the DOM of off-screen cards which improved performance. Plus, we used the custom XML proxy class and model override methods, so we could cleanly communicate with SOAP web services.

The Philadelphia Eagles wanted to build a mobile app to enhance the 2011 NFL Draft experience for Eagles fans. We helped to craft a creative concept and then built iPhone and Android applications, as well as an HTML5 mobile website that displayed prospective draft pick information, relevant twitter feeds, and live draft functionality to notify users of picks on draft day.

With Sencha Touch, we used SASS to give us full control over the style of the application and internal elements, which we used to apply the Eagles branding and design materials. We also used the Sencha Touch list component which allowed us to wire up JSON feeds for news, prospective player reports, and live draft pick reporting on draft day.

h3. Business Value of Using Sencha Touch and Ext JS

We’ve trained many of our developers on Ext JS since we started Jarvus. One of the techniques we use is to hire high school and college students as interns because they’re open to learning a new framework. They have learned Ext JS quickly by using the robust documentation which is really focused on specific, practical details. Plus, the Sencha blog has saved us a ton of time in training because our interns can read the posts and learn from the code samples–particularly the articles on MVC design pattern and the structure of building large apps have been very helpful. These technical resources help us to learn from the real-world implementations, and then we can base our app design on those examples.

h3. Our Advice for New Developers

The best advice beyond diving into the docs and learning Ext JS and Sencha Touch, is to stay on top of the Sencha Blog. The Sencha dev team’s blog posts are incredibly informative and help to supplement technical knowledge from the docs with design pattern concepts and practical use examples. This will prepare you to handle any future changes and allow you to scale the app if you’re wildly successful.

h3. Final Thoughts

We’ve hired junior developers that have experience in other frameworks, and we quickly push them over to Ext JS and Sencha Touch. We’re a Sencha development house. We’re in it for the long haul, and we’re excited to see what’s coming with Sencha Touch 2.