Backbone and Bootstrap for Beginners

Last weekend I challenged myself to learn about Backbone.js and Twitter Bootstrap.

(What about the robots, you ask? I know, I'll get back to those soon - I just needed to do this, really.)

Having only a weekend day to get to the point where I really felt like I could have some honest opinions about both frameworks, I decided to do what I generally tell other people to do: find something that already exists and try to copy it.  And by copy, I don't mean just copy-paste-run, but start it from scratch.  Think like a developer:  How would you start this project? Chances are you don't start at line 1 and finish on line 200; more likely, you start at line 1, stop at line 20, move that chunk down so you can start at line 1 again, realize you forgot something at line 25, tack on some lines between lines 50 and 55... and so on.

So that's exactly what I did.  I used Jérôme Gravel-Niquet's todos.js and copied it pretty much exactly.  I used his design, I took note of the functionality, and I got to work.  I didn't finish, alas, but I did get really close.  (The only reason I couldn't finish it was simply due to lack of time.)

I used Twitter Bootstrap to help out with the styling.  (I didn't use any of the .js libraries because I didn't need them.)

That said, here are my thoughts:

Backbone.js

The ramp-up time for Backbone.js is much longer than Knockout.js.  That is to say, it's got much more functionality and has a whole lot more power.  Knockout.js is really only useful for data binding.  Backbone is extraordinarily useful for (and was pretty much created exactly for) creating complex, single-page web apps.

With great power comes great responsibility, however.  I found that one of the major reasons it took so long to figure out what was going on in Backbone.js was that it's just so... messy? Convoluted? Haphazard? Disorganized?

Basically, when working in node.js (and more specifically, express.js - though also more generally, any server-side MVC framework), it's really easy to mentally separate models, views, and controllers: they're physically separated into different files, making it really easy to just focus on a specific model, view, or, well, controller.  In Backbone.js (though I'm sure it's totally possible, and working with this one example I know I'm judging more than I probably should), there is no separation.

In every example I saw (probably because I specifically searched for "backbonejs tutorial," which caters more to beginners), the app itself was limited to a single page of JavaScript.  It got messy, and quickly!  Plus, for every change you make in your model, you also need to make a change in the view.  And then you had to decide if it was going to be in the model's specific view, or in the app's view...  I think it's fair to say that stuff got complicated, and quickly.

All this is to say that with more practice, I'm sure the decisions one must make in building a given app will become painfully obvious, thus ramping up development efficiency :-)

Twitter Bootstrap

I should start by saying that to date, I've only worked on sites/apps that were small enough to warrant hand-written CSS (by way of Stylus/nib).  Which basically means, I've never used any style frameworks (960.gs comes to mind) - if for no other reason than I didn't really need to.  Also, in my attempt to become a world-class developer/software engineer, I knew that shortcuts wouldn't help me really, truly, learn CSS basics.

Playing with Twitter Bootstrap, I noticed the following:

  • It's pretty amazingly easy to get started - literally just include the stylesheet(s) of your choice and the extra JavaScript library (if you want it), and you're all set and ready to go
  • It's fairly overkill if you're just trying to do something simple
  • You can't just use Twitter Bootstrap - you're probably going to have to add your own styles as well (unless you're okay with your app looking like every other app that uses Twitter Bootstrap!)

All in all, Twitter Bootstrap is a good option for folks who are: a) in a hurry, b) not super familiar with CSS, and/or c) looking for easily-achieved styling consistency (with cross-browser compatibility and responsive-ness, to boot!).

There isn't much more to say about Twitter Bootstrap - you really just plug it in and go.  But again, if you're just fixing up a personal site or a fairly simple little web app, you might not need it.  On the other hand, if you're just interested in putting together something fairly professional-looking without too much effort, then Twitter Bootstrap might be just the right CSS framework for you.

Conclusions

I need a bit more time and practice before I will feel completely awesome at Backbone.js.  And I'm still deciding if Twitter Bootstrap is 100% worth it.  But all in all, I really enjoyed the few hours I spent playing with them!  On to the next project!!

 

Have questions/comments/suggestions? Feel free to comment!