We recently had a hackday in which our goal was to implement part of the iPhone / iPad / Android TSRInfo applicationĀ using Phonegap and three different javascript / css frameworks. Specifically, the goal was to implement the news listing and video section. We had two people working on each approach: Sylvain Fankhauser and Laurent Prodon used with Backbone.js, Thomas Botton and BenoĆ®t Pointet used JQuery Mobile (the Alpha 3 version), and Markus Leutwyler and I used Sencha Touch. I also looked into a few different solutions for having a tab bar which scrolls horizontally independantly of the rest of the page: an experimental jquery mobile scrollview component(which worked quite nicely), TouchScroll, and iScroll. None of us had ever really used these frameworks before, so it was also a bit of a test how quickly you can get into these different frameworks.

Sencha Touch

Sencha Touch is a 300kb JS Framework for Mobile Devices. It's related to Ext JS and jQTouch. Different from many other frameworks (e.g jQuery Mobile), you usually don't deal with any HTML at all, it's all in Javascript. Let's look at a very basic HelloWorld Example:

new Ext.Application({
    launch: function() {
        new Ext.Panel({
            fullscreen: true,
            html: 'Hello World!'
        });
    }
});

In this example, we define a new Application, and then when the document finished loading the launch function is called. A panel component is then displayed on screen, containing the words ā€˜Hello World!'. As you can see, no HTML was involved in writing this example. Basically, components know how to render themselves as HTML. The only time i've seen HTML was when setting up templates to display data. Sencha Touch supports MWC, you can break up your Application into Models,Controllers and Views. To deploy SenchaTouch to Mobile Devices, PhoneGap can be used.

For our ā€œFluid Mobileā€ Hackday, we wanted to demonstrate that the SenchaTouch + PhoneGap combination could offer ā€œnear nativeā€ performance and handling.

An example application was coded that read the phone Contacts (through the PhoneGap Contacts API) and displayed them in a list. The end result was a very performant application, including the page transitions.

jQuery Mobile

Jquery mobile is a mobile UI solution layer on top of jQuery. It allows you to easily define views, actions and visual transitions to compose a web app. Most of an jquery mobile interface is coded in HTML5, with clever custom data-attributes to specify widget and action transitions.

Views

A view is a simple structure of HTML

tags. Which means that a single document could hold all the views of an app, theoretically (some caveats apply when views are passed parameters).Learning it and coding with it is easy and efficient. Moreover, it automatically applies some CSS theming that makes your mobile web app look like one and still lets you override it whereneeded.

Transitions

Jquery mobile provides a good set of view transition effects, which provide an overall good user experience.

Routes/Actions

Every html link is interpreted an app route/action (per default): to attach an action to some element of a view, you simply can make a link pointing to some other view. This routing scheme is however limited: passing parameters through GET variables is not compatible with the ā€œall views in one document approachā€, it conflicts with the representation of routes through urlĀ hashes.

Screenshots

jqm video page screenshot

Conclusion

jqm is not an app framework, it is a UI framework. It does not impose an approach nor provide help for client-side business logic. Learning it is easy although it is still badly documented (i.e. documentation is there but not accessible in one single page + some points aren't clear enough).

Backbone

Backbone is a small (4kb!) mvc framework to structure javascript application. It doesn't relate in anything with the other frameworks tested today as it doesn't provide any UI. Ā We used jQuery for DOM manipulation and underscore.js for collection and template handling (more on this later).

Stucture

Backbone helps you to structure your application in a MVC way: it provides base ā€œclassesā€ for the models (to handle data structure), the views (to display model data) and the controller (basically a url router here).

Model

A model in Backbone is just an object with getters and setters which emits events on change and offers some validation mechanisms.

View

Backbone binds your view to a model and make it react on model changes. It becomes quite powerful if you use templates with value placeholders in the html representation of your view (weused underscore.js templates, but you could use any template engine).

Controller

The backbone controller is a router that matches url hashes to functions. Passing parameters is really easy.

Conclusion

Backbone is a nice way to structure your javascript app. We really appreciated its small footprint (4kb) and that it doesn't try to do everything (use your own dom manipulation lib, template as you want, ā€¦). You would probably need to add another UI lib on top if you want to do heavy UI things (jQueryMobile maybe). The application we created during this day was the same as the others functionality wiseā€¦ but without the fancy transitions. Ā Backbone documentation is quite good for such a small project and the code is easily readable.

Hackday Summary

The framework with which we came closest to acheiving the hackday goal was jQuery Mobile. It had a nicely scrolling list of news items, a tab bar at the bottom to allow switching to different sections, horizontally scrolling rider tabs in the ā€œnewsā€ view, and was able to play videos from the video section. The data was hardcoded, not fetched from the real TSRInfo feeds.

The Sencha Touch app had an overall very good user experience. It is however a framework that takes developers a while to understand how to use it properly, as it is a fairly large library. In our hackday, we didn't get very near the goal. I imagine that if we knew the library already, it would have been fairly straigtforward to implement. The $99 per developer license fee for commercial applications is a bit of an off-putter, though. This proprietary aspect of it certainly also discourages many would-be contributors from submitting patches or new features.

Backbone provides a nice paradigm for developing, but as noted above, it doesn't provide any UI elements itself. Combining it with jQuery Mobile might be interesting ā€¦


Do you have a question, a comment, or just feeling inspired? Mention us or share this article on Mastodon, Twitter or LinkedIn.

Subscribe to blog updates using the RSS Feed.