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
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions