JavaScriptMVC and List Performance

Most applications center around displaying and interacting with lists and individual pieces of data. Consider applications like GMail, Grooveshark, Twitter, Facebook, and Hulu. Each of these applications displays a list of items where a user can drill down into a single item. In many cases, the user can edit a single item while in the list view.

posted in javascriptmvc, Development on January 08, 2011 by Justin Meyer

Most applications center around displaying and interacting with lists and individual pieces of data. Consider applications like GMail, Grooveshark, Twitter, Facebook, and Hulu. Each of these applications displays a list of items where a user can drill down into a single item. In many cases, the user can edit a single item while in the list view.

Displaying a list of items is often the worst performing (in terms of time to display) part of an application. This is for multiple reasons:

  • A list typically shows more data.
  • Each item’s html needs to be created and inserted into the DOM.
  • Event handlers often need to be registered on each item’s control.

From it’s earliest versions, JavaScriptMVC has been almost entirely about making the performance of displaying lists as fast as possible. In fact, no superior solution is likely possible. This article discusses how it accomplishes this feat.

Insertion

When data is retrieved from the server, it needs to be converted into a form suitable for human interaction. With web development, this means HTML. That HTML needs to be inserted into the DOM for it to be visible.

For optimal performance across multiple browsers, the HTML should be created as a string and inserted into the DOM using a single innerHTML call (or a technique that uses innerHTML).

Furthermore, when building strings, it’s important to join an array of strings as opposed to concatonating strings (if you want to achieve good performance in IE).

JavaScriptMVC’s View layer ($.View) provides these optimizations with a very elegant syntax:

$(“#recipes”).html( “//path/to/recipes.ejs”,
  [ {name: ‘ice cream’,id: 1},
    {name: ‘hot dog’, id: 2} ] )

In //path/to/recipes.ejs:

<%= for(var i =0; i < this.length;i++){ %>
  <div class='recipe <%= recipe[i].identity()%>'>
  <%= recipe[i].name %>
  </div>
<% } %>

When creating a template, $.View creates a JS function that concatenates an array of strings. The function looks like:

var _v1ew = [];
for(var i =0; i < this.length;i++){
  _v1ew.push(“<div class="’recipe ”,
    recipe[i].identity(),">”)
  _v1ew.push(recipe[i].name)
  _v1ew.push(“</div>”)
}
return _v1ew.join(“”);

Note, that in development mode, $.View makes a request for the template. However, you can package the processed form of your view into your production build like:

steal.views(‘//path/to/recipes.ejs’)

If you package your view, not only will no request be made, the view will not have to be processed!

In summary, $.View provides a highly performant use of client side templates with minimal syntax.

Responding to Events

Once content has been inserted into the DOM, the user must be able to interact with it. Traditionally, a developer would have to add event handlers to the page. This would require performing additional expensive DOM manipulations and traversals to add the necessary event listeners.

However, JavaScriptMVC pioneered the use of event delegation which allows you to listen on another element for events on another element. We worked to bring JavaScriptMVC’s 1.5 event delegation into jQuery and we pushed extremely hard for $.fn.delegate.

$.Controller is designed around event delegation. This allows you to listen for events on a root element and does not require additional expensive DOM manipulations:

$.Controller(“Mylist”,{
  “.recipe .delete click” : function(){
     // delete the recipe
  }
})

In summary, $.Controller removes the needs for additional expensive DOM manipulations by organizing delegated event handlers.

Conclusion

Displaying interactive lists is probably the most common ‘bad-performing’ functionality that is critical to user experience.

JavaScriptMVC’s $.View and $.Controller provide completely optimal solutions to displaying interactive lists while providing a straightforward and relatively simple syntax.

comments powered by Disqus
Contact Us
(312) 620-0386 | contact@bitovi.com
 or cancel