Give Your Apps a Backbone(.js)

As the internet gets smarter and smarter and JavaScript starts piling up on web pages, we need to learn to organize our code. The days of filling the global namespace with all the functions we can think of are long over and have become far too difficult to maintain. Along with many other design patterns, the MVC (model, view, controller) pattern can bring order to the chaotic spaghetti of your JavaScript code. Right now, the de facto JavaScript MVC framework library is Backbone.js.

What is Backbone.js?

Backbone.js provides you with extremely simple ways to create models and views which organize your code in a logical way that separates the code that creates the interface that the user sees and interacts with (the view) from the data and processing of that data (the model). This separation allows you to be able to switch models and/or views without requiring changes to the other. So you can use the same model with other views or change the way the model stores data without requiring any changes in the view.

You may have noticed that I haven’t mentioned anything about controllers. This is because Backbone.js isn’t a true MVC framework and lacks controllers, but has routers for a similar purpose. This isn’t really a fault. A controller tends to be most useful for client-server relationships because the controllers on the server intercept the requests from the view on the client machine and dictate the actions that should be done, but when everything is run in the client, the view can communicate directly with the model.

Features of Backbone.js

Backbone.js automatically utilizes the observer pattern on its models, so the views can directly listen to any changes that happen to a model (such as a value changing) and immediately update the view to reflect those changes. Backbone.js also comes with built in support for jQuery and Zepto for DOM manipulation. Another bit of the library that can come in handy is their collections, “with a rich API of enumerable functions,” which contain multiple models for simpler maintenance, rather than your view needing to worry about multiple models itself. Finally, Backbone connects everything to your existing back-end API through a RESTful JSON interface, and can even synchronize with back ends that don’t support REST and JSON, though it takes a little tweaking.

Looking Ahead

I’ve seen tutorials popping up in numerous places showing off the abilities of Backbone.js and teaching users how to utilize the power of this amazing library. I feel like I can do no less than bestow the same type of knowledge upon you – my readers – so I’ve started a video series. The first 5 videos will teach you about the individual modules of Backbone.js, and then I’ll walk step by step through making a simple web application with Backbone.js. I’ll be updating the list of released tutorials below.

Backbone.js Video Tutorial Series

At the moment, I’m not really sure what I’ll build for the final application tutorial, so if anyone has any cool ideas, shout them out in the comments. I would rather use a suggested idea (if any are given) rather than something I think up because this blog is all about you people, so I want to teach you what you want and need to learn. Also, don’t forget to share this article with your JavaScript programming friends so I can get lots of ideas. Happy Coding!

Author: Joe Zimmerman

Author: Joe Zimmerman Joe Zimmerman has been doing web development ever since he found an HTML book on his dad's shelf when he was 12. Since then, JavaScript has grown in popularity and he has become passionate about it. He also loves to teach others though his blog and other popular blogs. When he's not writing code, he's spending time with his wife and children and leading them in God's Word.