Design recommendations needed for single page webapp

Question

We need to change/rewrite an existing series of pages/workflow screens into one standard page. The project in itself will essentially be to build a single web page app inside the context of a larger existing application.

Our goal is to leave the server side implementation the way it is as much as possible. This means we won't be using a REST model, but rather just some form submissions to a java backend. Each end point will point to a JSP.

Each form will be created as a widget. When one widget submits it may affect the value of the other widgets which need to change their values on the fly.

It seems the 2 main options for single page web apps are Backbone.js or Ember.js.

Given our requirements, which of these 2 (or any other frameworks) will fit best? Or is there some other approach all together we should take?

Answer 1

There are probably a bunch of things you should look into.

Emberjs is 42k minified+gzip while Backbone.js is just 5.6kb. Emberjs packs a lot of power in it which the barebones Backbone doesn't give you.

Analyse if you even need all those features. If your requirements are covered by just Backbone, IMO you should give Emberjs a pass. Shipping all those extra bits for no use is foolish.

With Emberjs, you will have to use jQuery as well. Not sure if you are already using it or not.

IMHO, I would use Emberjs if the single page web app is super complex with lots of feature requirements else Backbone should suffice.

Answer 2

Did you have a look at AngularJS? It is more comparable to EmberJS.

I would recommend you EmberJS for the moment, as it is more mature in term of ecosystem (Routing, Data, ...)

Backbone is lower-level than both precedents.

Answer 3

Either will accomplish what you want.

I am partial to Ember as it provides a Routing/statechart framework which really helps lock an application's behavior down. Not to mention that it is MVC, which will help you separate your concerns. Each form or widget in your app will be a view that you define, binding inputs to your model layer.