Home ›

At the Forge - Backbone.js

Issue 206

From Issue #206
June 2011

Aug 31, 2011  By Reuven M. Lerner
 in
Write simple MVC applications in JavaScript with Backbone.js.

Listing 1. appointments.html

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/
↪1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/
↪1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/
↪0.3.3/backbone-min.js"></script>

<title>Appointments</title>
</head>
<body>
<h1>Appointments</h1>

<table>
<tr>
<th>Person</th>
<th>Date/time</th>
<th>Note</th>
</tr>
<tr id="new-appointment">
<td><input type="text" name="person" /></td>
<td><input type="text" name="meeting_at" /></td>
<td><input type="text" name="note" /></td>
</tr>
<tr align="center">
<td colspan="3"><input type="button" id="add-appointment" 
 ↪value="Add Appointment"/ ></td>
</tr>
</table>

<hr />

<p>Number of appointments: <span id="number-of-appointments">
 ↪</span></p>

<table id="appointments">
<tr>
<th>Person</th>
<th>Date/time</th>
<th>Note</th>
</tr>
</table>

<script type="text/javascript">
     (function ($) {

     Appointment = Backbone.Model.extend({
         person: null,
         meeting_at: null,
         note: null
     });

     Appointments = Backbone.Collection.extend({

       update_appointment_counter: function() {
           $("#number-of-appointments").html(this.length);
       },

         initialize: function(models, options) {
           $("#number-of-appointments").html(this.length);

           this.bind("add", options.view.add_appointment_row);
           this.bind("add", this.update_appointment_counter);
       }

     });

     AppView = Backbone.View.extend({
       el: $("body"),

       initialize: function() {
         this.appointments = new Appointments(null, {view:this});
       },

       events: {
         "click #add-appointment": "add_appointment"
       },

       add_appointment: function() {
           var person = $("#new-appointment 
           ↪td input[name=person]").val();
           var meeting_at = $("#new-appointment 
           ↪td input[name=meeting_at]").val();
           var note = $("#new-appointment 
           ↪td input[name=note]").val();

           this.appointments.add({person: person, 
           ↪meeting_at: meeting_at, note: note});
       },

       add_appointment_row: function(model) {
           $("#appointments").append("<tr><td>" + 
           ↪model.get('person') + "</td>" +
   "<td>" + model.get('meeting_at') + "</td>" +
   "<td>" + model.get('note') + "</td></tr>");
       }
     });

     var appview = new AppView;

     })(jQuery);
</script>

</body>
</html>
Conclusion

Backbone.js is one of the smallest and easiest-to-understand MVC frameworks for JavaScript applications. It has become quite popular, as evidenced by the number of blog posts about it in the past few months. The support that its authors, Jeremy Ashkenas and others at DocumentCloud, have offered to many Backbone.js users has been quite impressive to see as well.

Although this column obviously didn't go into great depth about Backbone.js, one shortcoming in this application should have been obvious. What happens when the user wants to store data? Right now, the appointment calendar is not only simple-minded in its interface and execution (for example, there's no way to look at just today's appointments, let alone remove or edit existing ones), but it also fails to provide persistent storage.

Next month, I'll discuss how you can connect a Backbone.js application to a persistent back-end database or server-side MVC application (thus providing an MVC-squared solution), giving users and developers the best of both worlds—flexible development with dynamic JavaScript, but with a robust back end that can persist data easily.

Resources

The home page for Backbone.js is on GitHub, at documentcloud.github.com/backbone. This page points not only to the code, but also to some tutorials and documentation. In a step that I hope many other authors will follow, the authors of Backbone.js put up a copy of the source code, thoroughly commented in a beautiful format, at documentcloud.github.com/backbone/docs/backbone.html.

I encourage anyone interested in Backbone.js to read through the code and comments. I certainly learned some things about Backbone.js in particular and JavaScript in general from reading through this code.

A number of tutorials and blog postings describe how to do interesting things with Backbone.js. A short and to-the-point tutorial is at www.plexical.com/blog/2010/11/18/backbone-js-tutorial.

A more involved example by Alex Rothenberg, who packaged up this work as a Ruby gem, is at www.alexrothenberg.com/2011/02/11/backbone.js-makes-building-javascript-applications-fun.html.

Finally, an excellent two-part tutorial on Backbone.js is available at liquidmedia.ca/blog/2011/01/backbone-js-part-1 and liquidmedia.ca/blog/2011/01/an-intro-to-backbone-js-part-2-controllers-and-views.

Reuven M. Lerner is a longtime Web developer, architect and trainer. He is a PhD candidate in learning sciences at Northwestern University, researching the design and analysis of collaborative on-line communities. Reuven lives with his wife and three children in Modi'in, Israel.

______________________

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState