Javascript MVC framework + jQuery Mobile

Question

I'm building a (fairly simple) web app that will ultimately be used pretty equally on desktop and mobile devices. I'm using Rails on the backend, but the actual app will be built as a single-page app, so Rails will simply serve up the initial frontend assets and act as a REST backend.

I'd like to use jQuery Mobile for the mobile optimized UX, including list views, touch input (e.g. swipe to edit an item), etc. (Note that I've considered just using a UI framework such as Twitter Bootstrap or Foundation, but I would strongly benefit from the deeper mobile optimized UX that jQuery Mobile enables.)

I'd also like to use a Javascript MVC framework to better structure my Javascript code. I've played with a few frameworks but haven't used any of them in-depth and am still debating on the final choice.

My main question is which of these MVC (or MVVM) frameworks have been proven to work well in conjunction with jQuery Mobile.

Mobile aside, my strong preference would be a data-binding based framework such as Knockout, Ember, Angular, or Batman (in fact, based on my initial experiments, I quite like Batman), which automatically updates the UI when the model layer changes. However, I could see this conflicting with jQuery Mobile, which also makes significant changes to the DOM, also wants to own the location hash, etc.

An alternative would be to use one of the lower level frameworks such as Backpack or Spine. I suppose the routing layer would still cause conflicts, but I could at least use the model, controller, and view layer (and especially the REST persistence).

Or perhaps there's a hybrid approach, where a data-binding based MVC framework is used for everything in the desktop version, and the view layer is somehow swapped out for jQuery Mobile in the mobile version, still leveraging the model and controller layers?

Any luck with one of the data-binding based MVC frameworks? Any luck with Backpack or Spine? Did either of those work well enough with jQuery Mobile that you would recommend them? Any other recommendations?

I realize this question is somewhat open ended, with no single correct answer, but I feel that this is still an appropriate question for Stackoverflow.

Answer 1

since you got no answer after so long I can only contribute with my vote for two frameworks

Backbone.js is the classic one, strong community

However my favorite is Ember from a desgin point of view. One of its goals of Ember.js is to make it trivial to integrate the tools you’re already using, and you will see jquery functions mentioned in some examples of its documentation.

I am not sure about jQuery Mobile, I used mostly with the normal jQuery, but so far look good

Be aware that Ember does sacrifice a little bit of performance if that achieves a better abstraction. I usually favor that.

Answer 2

If you are concerning about the performance, I suggest that you go with Backbone as it is not a full-stack framework which means that it can be pretty fast comparing to other full-stack framework