I found myself researching javascript frameworks last night and thought I’d share a bit of knowledge. The killer feature of a javascript framework is that you can setup a model (think object) or collection (think array of objects), bind a dom element to that model or collection and then any changes made directly to the model will automatically update the dom. Some of them even support two-way binding, meaning that if you update a form field (or anything else) that is attached to a model, it will update the model and then the model will update the dom. It can all be a bit confusing at first, but you can find several live examples on knockout.js.
There are a lot of different frameworks out there and I’m not really attached to a particular one right now, so here’s a quick list of the ones I’ve been researching.
Backbone.js
One of the first ones out there. Very low level and powerful, but it’s a lot more leg work to get anything done.
Spine.js
This was built in response to backbone.js, it appears to be another low level implementation.
Knockout.js
High level, bindings are directly in the dom instead of attached in the JS. There appears to be a great community around this one.
Ember.js
Don’t know anything about it but I’ve heard good things. High level and seems to be comparable to knockout.js.
Angular.js
One more higher level framework, this one built by google.
If you’ve had any experience with these I’d love to hear about it!
I’m still all about Backbone. I played with Angular quite a bit and I had trouble keeping my code as separated as usual. There’s a lot of magic in Angular that can be a pitfall for some people if they don’t realize what’s going on behind the scenes (one example that comes to mind is filtering large models). When you’re writing backbone apps, you know exactly what you’re doing and how efficient or inefficient you’re being in the process.
Another thing I like about backbone is if I’m curious about some functionality, all I need to do is look into the awesomely annotated, fairly lightweight source. Angular is 14k loc annotated. It’s just a beast.
I do get the feeling that if I learned Angular I would be able to write simple web apps more quickly than in Backbone. But nothing is ever simple. There’s no one-size-fits-all solution to anything and that’s how I feel Angular is.
The most compelling argument I’ve heard for Angular comes from Igor Minar, who works a lot on the framework at Google. He says that the way Angular does things is the future of browsers. That sort of functionality and style will probably be implemented in browsers fairly soon, so you better get used to it.
“Nothing is ever simple.” Truth.
Thanks for the comment. Backbone is a lot closer to the metal and, you’re right, you do get a better sense of what is actually going on in your code. The problem is that I have a lot of little app ideas I want to knock out and very little “spare” time to devote to them. For that particular reason, I’m willing to sacrifice a bit of size and possibly even some performance just so I can get a proof of concept out the door. Too bad that strategy doesn’t work in production for the masses, eh?
In that case, then your best bet is probably angular. Though angular is a framework, not a library. And with it being a framework, it seeks to be your solution for a lot of things (templating, dom manipulation, utility, model, view, controllers). So, there’s A LOT to learn. But I’m sure once you did learn it (if you have the time), that it would definitely help you churn out performant apps faster.
I think Angular is only supported on IE8+. So, as long as you don’t care about that, you should be good.
Ember.js (formerly Amber.js) is the mini-app template version of Sproutcore. It was going to be a “simpler” Sproutcore I think, but after the division, I stopped following the projects. Sproutcore is a beast.
Backbone is awesome, but I find writing views a real pain. The declarative bindings in Knockout make its views a lot of fun. The downfall of Knockout is a solid model system (like Backbone’s). You get a ‘viewModel’ which is really just an arbitrary object you bind to your view, but no structure is enforced.
I’m currently using Backbone’s Models and Collections to manage data, state, and queries (mixin backbone-query) together with the viewModel in knockout to manage view state (pagination, filters, etc). Maybe a winning combination, the jury is still out.
Extending Knockout with custom bindings is also very simple. still haven’t tried Angular, but I’m of the opinion that if it’s from Google, it’s probably solid.
—
Aaron