Where does jQuery fit-in with frameworks like JavaScriptMVC, BackboneJS, SproutCore and Knockout?

Question

I have been happily using JQuery for the last 2 years and have been quite sucessful creating some really cool functionality with it...so I am very comfortable with it. I also beleive the future of the web will continue on the current client-side path.

However...

The next challenge seems to be coming in the form of various controller frameworks: KnockoutJS, BackboneJS, SproutCore, JavaScriptMVC (the list goes on).

Additonally, there are some great AMD Loader tools for use like RequireJS or LabJS etc. However, jQuery now has define and then capabilities baked-in.

It's getting harder-and-harder to keep track of it all...

And now, my task seems to be to evaluate/decide-on a strategic-direction for using some form of either an MVC or MVVM framework client-side...but I have so many questions.

• Where does JQuery fit-in with the various controller-frameworks mentioned above?
• Is JQuery used alongside each or do some of them have their own 'JQuery-styled version' baked-in?
• Are tools like RequireJS still needed if you implement one of the various controller-frameworks mentioned above?
• Does the define and then capabilities baked-into JQuery now supercede the AMD Loader mentioned above?
• Which one seems most modular? (see notes below)

NOTES:
One thing I don't want in any future-framework is the requirement of having to take-in vast amounts of functionality that I don't use. Meaning, I would rather use a framework that is truly modular. For example, to use jQuery UI you have to take-in a lot other core libraries that you might not actually use.

I will be experimenting with each one, but some REAL feedback would be great. I've seen some 'similar' questions, but none have really answered the above skew.

Thanks in advance!

Answer 1

jQuery a cross browser normalization tool. It gives you the following

• DOM utilities
• Event system
• Ajax
• Animations
• ES5 utilities
• some other thinge

Backbone/knockout/yada/yada are MVC-like libraries that are there to help you structure and write modular application. You only need these if you want their structure.

RequireJS/yada/yada are module loaders. You need some form of module loader if you want to write a modular application.

Where does JQuery fit-in with the various controller-frameworks mentioned above?

As mentioned, jQuery normalizes browsers. controller frameworks do not. You don't need jQuery but you need some way to normalize browsers.

Is JQuery used alongside each or do some of them have their own 'JQuery-styled version' baked-in?

Backbone / knockout / JavaScriptMVC do not have browser normalization baked in so you need a tool for that. I'm not sure about SproutCore it does seem to have a lot in there.

Are tools like RequireJS still needed if you implement one of the various controller-frameworks mentioned above?

These are only needed if you write to write modular applications. So pretty much yes.

There are three flavours of modular applications

• async require loaders like requireJS
• sync require loaders like modul8
• using namespaces and just including files
• packages like ender

Does the define and then capabilities baked-into JQuery now supercede the AMD Loader mentioned above?

No. the define capability baked into jQuery allows you to use it with an AMD loader without wrapping jQuery. You still need an AMD loader. The "then" capability is just some sugar of jQuery deferreds.

Which one seems most modular? (see notes below)

That's an opinionated question. My personal opinion is that all these frameworks including jQuery are bloated and not modular.

You want modular, write your own library, write your own architecture.

However if you want the lesser of evils I would choose backbone because it's simple and small or spine which is similar

Answer 2

I'll answer on JavaScriptMVC as I'm a contributor:

Where does JQuery fit-in with the various controller-frameworks mentioned above?

JavaScriptMVC depends on jQuery and uses it extensively.

Is JQuery used alongside each or do some of them have their own 'JQuery-styled version' baked-in?

JavaScriptMVC has no competing functionality with jQuery. This is not as true with Backbone that has its own event system. But, anything backbone or spine add are very minimal.

Are tools like RequireJS still needed if you implement one of the various controller-frameworks mentioned above?

JavaScriptMVC comes with a dependency management system -> steal. You can use JavaScriptMVC with RequireJS, but steal is actually much more powerful and about equal in size downloaded by a user.

Which one seems most modular? (see notes below)

This isn't opinionated. JavaScriptMVC is extremely modular. You use only what you need. Compared to Backbone or spine, you can use it's M, V, or C parts standalone. When assembled together, it's only 1k bigger than Backbone (when using jQuery and Underscore). You can see the various sizes of base components here: https://github.com/jupiterjs/javascriptmvc/issues/26

But JavaScriptMVC is much more powerful (in terms of features) vs Backbone or Spine. For example, it's templated event handlers prevents practically all memory leaks. Here's a tooltip that hides itself when the window is clicked:

$.Controller('Tooltip',{
  "{window} click" : function(){
    this.element.remove();
  }
})

This is absolutely critical with the MVC approach when your controls are listening to changes in the model like:

$.Controller('Todos',{
  "{Todo} created" : function(Todo, ev, createdTodo){

  }
})

Controller will auto-unbind all of these external event handlers.

A few other strengths of just the MVC parts:

• $.Class is a very powerful class system
• $.View and $.Model supports deferreds
• $.Controller can 'rebind' event handlers
• $.Model supports associations, getter / setters, defaults, validations

Now, JavaScriptMVC is much more than just it's MVC parts (which are part of the jQueryMX sub-project). It has:

• jQueryMX - jQuery's missing functionality like special events, dom helpers, etc.
• Steal - a dependency management system. But it can do things like take an ajax app and make it google crawlable.
• FuncUnit - An awesomely powerful testing framework.

Now, on what to use, a lot depends. A lot depends if you are making an "app" or a "page". An application, that needs testing, dependency management, where you care about memory leaks, I'd look at JMVC or SproutCore.

If you are gluing a few basic widgets together, I'd look at spine or backbone.