Which Javascript MV* platform/library should I use for my project?

We'll start developing a Web application that uses the following:

  1. Spring MVC Framework
  2. Hibernate
  3. MySql or MongoDB (or maybe both)
  4. HTML5 for a mobile app that will run on the browser (This will be a secondary part of the actual Web app)

I've never used any javascript MVC/ MV* framework before. I've been using plain jQuery and other libraries whenever I needed any.

Requirements for the Web app:

  1. Normal login etc.
  2. Dashboard which will show analytics, graphs etc.
  3. A form design tool - e.g. an editable form where users can enter new lines and a live preview of the changes should reflect on a mobile like screen adjacent to it. See how it looks in a mobile view kinda thing. User can add, edit and delete new lines. So it'll be an interactive form building interface. (This is where I think an MV* library / framework will help me. What say? Or the jQuery can do the trick?)

Requirement for the HTML5 mobile app:

  1. User will access the app from the browser.
  2. It should look like a native app (but actually it'll be an HTML5 app)
  3. It'll have at the most 2-3 pages (with NEXT buttons) and simple textarea for input (e.g. email, phone number etc) and SUBMIT buttons. (Would using jQuery mobile be the best solution? Or should I use MV* library or anything that gels well with HTML5 and will make my life easier. What to use?)

I'm a bit confused with the array of frameworks and libraries like Backbone.js, Ember.js, KnockoutJS, AngularJS etc.

Can someone please guide me. I'll be very obliged and thankful. I'm not expecting the best framework, I just need the 'best' framework for my situation above. :)

Half a year ago I was sitting in your shoes. I have been using the same stack, had the same design principles. I went with AngularJs and couldn't be more happy :).

I have been evaluating this set of frameworks:

  • Knockout JS
  • Backbone JS
  • Pub Sub
  • Batman JS
  • Sammy JS
  • Sprout Core
  • JS MVC
  • Angular JS

And I was taking those conditions under evaluation:

  • Multiple models? (can we have few separate controllers handling small chunks of DOM separately running smoothly on the same page)
  • UI & Data Binding? (change in UI is reflected in objects state, and vice versa)
  • Automatic content switching? (when you navigate to #dashboard or #posts the content change id supported by framework)
  • Templating? (no need of using 3rd party library for templating)
  • Integration with different frameworks? (like jQuery)
  • Supports HTML 5 Local Storage? (does it support local storage or does it have it integrated in the framework)
  • Unit Testing support (does the nature of the framework makes stuff easy to test)

Most of the frameworks on my list either supported or fulfilled all these conditions. That was surprising for me, as I was hoping one will prove to be best over another. It turned out that they all are pretty close, so in my case the only way to go was to try them out one by one. After I followed few tutorials, I decided to go with AngularJs and that was the best decision I've ever made :-)

To be honest, pretty much all of the frameworks will help you out. The most important thing for you will probably be a declarative binding of view and model. Most of the frameworks you have chosen will support it.

I suggest you follow the same approach as mine. Write simple app in 3 of them and see whatever feels most natural for your coding style.