University Marketing & Communications

May 20, 2014

Backbone.js and the UW social media site

By Jon Swanson

Screenshot of UW social media site

Recently, we released uw.edu/social into the wild. You should go check it out (and connect with our social media properties).

The idea behind it is pretty simple. Our presence on social media properties is growing—and growing a little unruly. Not all of our social media properties have the same account name (an unfortunate byproduct of being an institution named “UW”), plus our presence spans almost a dozen properties. Our mission was to wrangle everything into a simple landing page that makes it easier for Huskies to connect with our central UW accounts.

Although I am on the University Marketing & Communications social media working group, I’m first and foremost a developer. Which means I wouldn’t be the one blogging about this site if there wasn’t something cool going on in the code.

JavaScript is a functional scripting language and it tends to get disorganized and messy. I do pride myself on following coding best practices—like minimizing globals, eliminating redundancy and making sure each function has only one function—but the very nature of JavaScript keeps me from writing what I consider to be Good Code

Enter Backbone.js. Backbone is an incredible tool for bringing object-oriented concepts and MVC organization to JavaScript code. The code I can write with Backbone is much easier to read and is organized quite beautifully. Unlike the equivalent vanilla JavaScript, it can be Good Code. The social site is my first solo front-end coding project that works entirely in the Backbone.js framework, and I am very pleased with the results. (For the team’s first full-on Backbone project, check out Dane’s fine work on the refactored and updated campus maps.)

Screenshot of UW social media site

The code pulls in the last 40 photos from our Instagram account and then scaffolds and populates a background grid with those pictures. The images are randomly selected with a few caveats, and the wonder of Backbone’s object-oriented framework makes those caveats possible without shoving lots of extra data into the DOM or polluting the global namespace. When choosing a background image for one of the background tiles, the InstagramBackgroundView object (an extension of Backbone.View) keeps track of loaded images to ensure that identical images aren’t too close to each other in the background. It even does this while rotating the tiles dynamically. It’s also mobile friendly: The DOM stays light and our users’ mobile data usage is minimized because the view doesn’t actually download the images or create/populate the grid.

The social site is more than just a nice thing; it’s a harbinger of things to come, a peek into our future. The model-view-controller paradigm is such a nice way of organizing code that we’re going to try to do it everywhere. In future iterations of the UW theme, keep your eye out for our take on MVC-izing WordPress.