In the summer of 2012 I wanted to learn javascript. I had played with all of these web services for years that were doing some magic in the browser I just didn’t understand, but wanted to learn. Javascript was the secret sauce. Somewhere along my travels, I came across some lightweight Javascript MVC frameworks that were getting a lot of attention and gaining in popularity. These were Backbone, Ember, Angular, and Knockout. During the month of August, I decided I’d give each one a spin for a week and decide on which one I wanted to use to build my first full fledged web application (Rentything). Below are my thoughts that I can recall in regards to each.
Disclaimer: This is from a newbie’s perspective who was simultaneously learning javascript through Code Academy. If you are the type who spends any time whatsoever debating whether x framework is truly MVC, or not a framework at all, or something else even remotely resembling an already formed opinion of the four frameworks in question, this post is not for you. Also note that by the time you are reading this the information is likely outdated, as these frameworks have been moving at lightning speed. And finally, I am doing this writeup largely from memories of how I felt using the frameworks from 8 months ago, and my memory is terrible. You’ve been warned.
Knockout.js
First up was Knockout. Immediately I was impressed. Their website was beautiful, well documented, and had some amazing interactive tutorials. I watched some screencasts and was very impressed. Things just worked. I had no troubles picking up the syntax at all. There was just one problem, no router (that’s the thing that takes you from /page1 to /page2 and so on)! I tried using Sammy, Davis, Pathjs and a bunch of other javascript routers out there but couldn’t quite get them to play nicely with Knockout. Rats, unfortunately it was a dealbreaker. Sigh, I was almost in love. I am not sure if Knockout has a router built in these days as I haven’t looked at it since. Knockout, you’ll always be my first.
Ember.js
Next up was Ember. It was hard. It promised all this awesome stuff and the site looked cute and I wanted to learn a little bit of templating and Handlebars sounded cool so I figured I’d love this framework, but sadly I did not. Frustrating was what it was. I spent hours just trying to get really basic stuff going that took me minutes with Knockout. The reason, I’m not sure. I think the team behind Ember came from existing open source projects and so had an opinionated way of how things should be done. And I guess that opinion didn’t fit into my pea brain. Another reason, the documentation really sucked. I mean terribly. I would literally spend hours copying and pasting documentation straight from their documents and all I got were errors that I didn’t understand and had no idea how to troubleshoot. I cursed a lot using Ember (if you could call it using). I was glad to move on.
Angular.js
Angular was awesome. I really loved using it. Pretty easy to understand, although their website left a lot to be desired (disorganized mostly). I really loved the form handling capabilities. I was like “Oh snap, that shit works and I don’t have to do a thing”. Everything was going peachy but then I hit a juggernaut of a roadblock. These things in Angular called directives. I wanted to use a Bootstrap carousel, which with every other framework or library, simply required you to declare the Bootstrap script like you would any other. Not with Angular. I didn’t understand. So I asked what the heck was going on in the forums. People replied saying I had to write a directive thingy. So I went looking into what that was. Man oh man, I was WAY in over my head. So I backed away. Dealbreaker, again. Sigh. Don’t make me go back to Ember, please God no. Only 1 framework left. Backbone, man up and do what you do, only let me understand you while you’re doing it.
Backbone.js
I didn’t know what the hell was going on. Everything was confusing to me on their website. There were no examples, there were no simple tutorials. The website was filled with jargon that I just didn’t understand. I was thinking oh man I am seriously lost. But Google to the rescue. I must had done every single tutorial that was available on the first three or four pages on Google. They all did things slightly differently. It was annoying, but I also began to see the power in the flexibility of Backbone. Slowly but surely I started to get it. I put it through the paces and I didn’t run into the roadblocks that the other frameworks did (Knockout’s lack of router, Ember’s terrible documentation, Angular’s complicated directives). Still, aside from Ember it was the least enjoyable to work with. I found it repetitive in certain tasks and lacked some of the cool things that made the other frameworks strong, such as Knockout’s two way data binding sorcery. So I started looking around to see if there were any libraries built on top of Backbone. And yes, there were a ton. I tried Knockback, which combined Knockout and Backbone, but it had its own way of doing things which was just another thing for me to learn. Then I came across Marionette, and it made my relationship with Backbone so much nicer. With Marionette, I actually started to enjoy working with Backbone.
So after all was said and done, I chose Backbone for Rentything because it had what I needed, didn’t have terrible documentation, didn’t have any deal breakers, was the most mature of the frameworks with the most plugins and largest community, and Marionette saved me a ton of time with it. Just in time, too, as I was about to give up on learning javascript completely.
So to recap, from a newbie’s perspective using terrible reconstructive memory from events that happened 8 months ago:
Best Website: Knockout.js
Worst Website: Angular.js
Best Documentation: Knockout.js
Worst Documentation: Ember.js
Most Fun: Knockout.js
Least Fun: Ember.js
Easiest to Learn: Knockout.js
Hardest to Learn: Ember.js/Backbone.js
Most Mature: Backbone.js
Largest Community: Backbone.js
Most plugins/libraries: Backbone.js
Hardest Component: Directives in Angular.js
Things have probably changed dramatically since then. I just started scanning through the frameworks websites as I am writing this, and it looks like Knockout still doesn’t have a router, Ember’s documentation still sucks and they know it (and are working on making it easier) according to http://emberjs.com/blog/2013/03/21/making-ember-easier.html , Angular now has a lot of contributors who have made tons of directives for Bootstrap and other things, and since I’m most familiar with Backbone, I know they recently released version 1.0.
I think for any projects in the near future, I’d probably give Angular another go as the community has grown drastically and it was a pleasure to work with. For smaller projects, I’d definitely go with Knockout since it was just so fun. Backbone has been great, but only after I’ve stacked it with quite a few plugins/libraries to help speed up development. I’d like to try working with a framework that just pleasantly works out of the box next time. My own javascript knowledge has grown a considerable amount since I gave these frameworks a go, so I am sure a second time around will be much less painful.