MLB Gametracker App for Mobile Web

This is my second Enyo project and my first to be released in the wild. The company I work for builds white-label gamecast solutions that we sell to various customers in the US. All of our apps are web-based and we wanted to give our mobile version a native look and feel without the need to install a native app as our customers promote the applications from their own web properties. Enyo provided a great way to implement a swipe-based navigation which lets the user browse through a lot of data in a hurry while still keeping an eye on what's happening in the game. Here is a finished game (be sure to open in a mobile browser or just narrow your viewport for the layout to be rendered correctly)

There are still a few quirks and we really need a way to clue the user in on how to use the navigation b/c it isn't immediately obvious, but if you swipe back and forth either on the top nav bar or anywhere in the app besides the scoreboard or the horizontal band that shows current game state, you can navigate through the panels of content. I'm thinking a dismissable overlay with instructions maybe.

When I first laid this out, I was using a fittable layout with the overflow content rendered in a scroller, but performance was unacceptable on iPhone 4 and Android devices. This was a bit discouraging and then I discovered I was unable to get rid of the browser's address bar using the fittable layout. These two issues made fittable layouts a deal-breaker. So I went the route of rendering the application into a div in the DOM rather than the document.body and letting the app components take up their natural height. That way I got native scrolling, but this introduced another problem of dealing with the varying heights of the arranger panels, so I had to write some hacky jQuery code in order to dynamically adjust container heights when certain events occur. I feel like there's a better way to deal with this, but I was unable to figure it out by project deadline.

What really impressed me about Enyo was how easy I was able to encapsulate various re-usable UI elements. Write the code once, then include it as a component where needed in other components.

The data models are implemented with Backbone.js. I didn't use the native Enyo MVC stuff. The docs just aren't there yet, and I'm comfortable enough working with backbone to tack it together with Enyo manually.

The app is a bit more interesting during a live game, but this gives you an idea of what's there. Feedback welcome!


Sign In or Register to comment.