Trek Into Backbone.js

8 Mar 2012

This is a story of my Javascript image gallery, why I went with vanilla
Javascript, the countless hours I put into it, and why I’m rewriting it with
Backbone.js and jQuery.

The Javascript image gallery on my site has come a long way. Before I started
working on it several months ago, I had little Javascript experience. I had
only done a tiny jQuery-UI paginator and some exercises from Crockford’s
“Javascript: The Good Parts” and Eloquent
Javascript. There were two motivations behind
building my own image gallery. First, it would be cool and I could use it to
post pictures to perhaps show my family what I’ve been up to since I’m all
grown-up and rarely home. Secondly, I really needed to level up my Javascript
skills Rocky-style before I headed down to Mozilla for a web development
internship. What use is a web developer that doesn’t know Javascript?

I started the trek into what I called “Javascript: The Final Frontier”, a
mission to explore Javascript, to seek out new technologies, and to go where
most web devs have gone before. The gallery started out with pure vanilla white
Javascript. I was aware of this library called jQuery, but I am stubborn and
believed that was the easy way; I wanted to be “hardcore”, really get my hands
dirty with the core of the language. Things definitely did get dirty.

Fast-forward. After countless hours hacking on it and gaining experience
(through pain) with Javascript, the image gallery and album viewer turned out
great! Well, at least on the frontend. I felt the code got sort of messy. Sure,
I had things pretty well modularized as best as I could, but there was no grand
structure. Some of the logic got complicated especially when trying to resize
images and center images; I had to know the size of the image before I could
properly transform it, but I don’t know the size until it is loaded into the
DOM. There were became a lot of img.onload handlers.

Then, I heard about Backbone.js from the mentor,
thedjpetersen. He had been using it to help write
his sleek persistent IRC web client
Subway, which has exploded and gained
quite a following. Backbone.js gives an MVC structure to web applications.
Structure, you say? That’s exactly what my gallery needed.

I have just recently started to begin learning it. It provides a nice
transition from vanilla Javascript to JQuery since I feel comfortable with
Javascript now. Combine that with a Python Wok hook I wrote, which
precalculates the image sizes and binds that data to the DOM, and the gallery
which be much more shinier.

On an off-note, I will try to make a blog post every day before I go to sleep.
I had been spending an hour or two every night before sleep watching Netflix, but
now I’m trying to faze out all mindless entertainment and use that time instead
for productive entertainment (blogging and hacking!).