Backbone.js Post Image

Solution: Visually Inspect Backbone.js View/Templates + Application Logging Support

by on March 20, 2013 12:00 am

During the development of a fairly large JavaScript-based web application using Backbone.js, it became increasingly difficult manage the numerous View.js and Template.js files. Those familiar with Backbone MVC design approach have probably also encountered this. Best practice for an MVC user interface is to decompose it into many snippets made up of a controlling Backbone View, an HTML template, and a Model/List . Each of these elements are defined into their own JavaScript file.

As the application grew, the Views grew. Trying to determine which View and Template was responsible for a particular UI area was confusing. View naming conventions and logically grouping files helped some, but it still took some hunting and pecking to find the right view or template to make a change.

Our Creation

To solve this problem, we created a JavaScript UI Inspector and Logging library. It allows you to quickly identify and inspect JavaScript files during development, as well as provides logging support.

This inspector library outlines a UI View/Template boundary on MOUSE OVER.When the area is double-clicked, it displays the View/Template name and optional model (JSON) for the View element. An example of this is shown in the screenshot below. The library outlines the View element in red on mouse over.

backbone-viewer-blog

The View Inspector is toggled by hitting CTRL-ENTER.

We’ve opened-sourced this library on GitHub (at https://github.com/in-the-keyhole/khs-logger), and it has numerous configuration options.

This library is AMD compatible, so it can be loaded using a <script> tag, or as a Require.js module. It is applied to Backbone Views using a mark() method that requires the EL, along with the View/Template name, and optional JSON model object. jQuery is the only dependency, so when loaded, we attached a single instance to it. Library attributes and methods are accessed with $.Log.<attribute/method>. Enabling View Inspecting is turned on with the following expression:

$.Log.inspect(); // done once at application start

Views are marked for inspection by applying the following expression in a Backbone View render method. The expression is highlighted below:

return Backbone.View.extend({
    tagName: 'p',
    render: function (eventName) {
        var compiled_template = _.template(Template);
        var $el = $(this.el);
        $el.html(compiled_template(this.model.toJSON()));
        $.Log.mark($el, "categoriesPaneRefView.js -> category-tab-pane-ref.html", this.model.toJSON()); // Mark for inspector...
        return this;
    },
});

Of course, this could be generalized further to avoid having developers litter up View.js files with this code. However, it’s arguable on what kind of value this provides the developer. For large projects with a multitude of Views, we’ve found it helpful. So we added an extension feature to the visual Inspector.

Custom Inspectors can be installed to display “Inspect” for additional information. An Inspector is a function closure that will be executed and supplied with a View’s jQuery EL value. The returned HTML from the Inspector will be displayed in the pop-up UI inspector. Here’s a simple example Hello World Inspector implementation:

// install hello world inspector.
$.Log.install(function (el) {
    return "Hello World, there are " + el.children().length + " elements";
});

Here’s a screen shot of how it looks, when invoked:

backbone-viewer-blog2

The library also has application logging features that we’ll talk about in the next section.

Logging Support

If you are building an application that has heavy usage, logging can provide useful troubleshooting and performance diagnostics. It can also provide a way to intercept Log expressions for other purposes, such as sending error Log statements to a remote URL.

Most browsers provide console logging using the console.info(), console.debug(), etc. APIs. However, the format of the Log statements (i.e. date/time) is determined by the developer that is applying the Log. Additionally, viewing Log statements is dependent upon the browser. For instance, Internet Explorer only provides console Log support if developer tools have been installed.

The View Inspecting Library also has robust Log support. Once the library is loaded, Log expressions can be expressed (where appropriate) in your application code, as shown below:

	$.Log.info("Info expression...");
	$.Log.debug("Debug expression...");
	$.Log.error("Error expression...");

Expressions in the output will be prefixed with date/time:

backbone-viewer-blog3

Log levels can be set to filter out unwanted Log statements:

	$.Log.level = $.LogLevel.debug;

Additionally, a remote RESTful Log URL can be specified. Then, Log statements will be sent to this URL for server side processing.

Here’s an example that turns remote logging on, creating an error handler so that all errors are logged to the server:

	// Remote logging URL and level
	$.Log.remoteUrl = "sherpa/log";
	$.Log.remoteLevel = $.LogLevel.error;

	 // Log all errors to server
	window.onerror = function (message, url, linenumber) {
	    $.Log.error(message + "line:" + linenumber + "url:" + url);
	};

The library also supports logging to local storage. This can be useful when attempting to diagnose user issues. The number of Log records saved to local storage by default is 100, however this can be configured. It’s simply turned on as follows:

// turn on local storage logging
$.Log.logLocal = true;

Logs are stored as a JSON string and can be retrieved or reset with the following expressions:

	$.Log.localLogEntries(); // returns Local Storage Log Entries as JSON
	$.Log.resetLocalLog(); // resets local storage log

The View Inspector feature can be used to display local logging expressions through the UI. Just install the provided local logging inspector, applied like this:

    // Install local logging inspector
    $.Log.install($.Log.localStorageLogInspector());

Here’s a screen shot of a View Inspector displaying local storage Log entries:

backbone-viewer-blog4

Conclusion

This logging library has been open-sourced on GitHub at https://github.com/in-the-keyhole/khs-logger. Definitely check it out for more details on installation and usage. We hope that you find this tool useful!

— David Pitt, asktheteam@keyholesoftware.com

  • Share:

Leave a Reply

Things Twitter is Talking About
  • RT @OMGFactsTECH: The first two video games copyrighted in the U.S. were Asteroids and Lunar Lander in 1980
    October 1, 2014 at 3:21 PM
  • Expansion update: remodel construction & electrical done; mudding, painting & carpet to go. Can't wait for our bigger team rooms!
    October 1, 2014 at 1:14 PM
  • Reddit's ExplainLikeImFive has good discussion brewing - "How does a coding language get 'coded' in the first place?" http://t.co/tXj3dISHCi
    September 30, 2014 at 11:10 AM
  • Each dev language has its own way of working with random number generation. See how #JavaScript & #Java stack up: http://t.co/QENl4kGVIs
    September 30, 2014 at 10:43 AM
  • .@TheGrisExplores: there's a new comment on your Dependency Injection Options for Java blog post - http://t.co/vs897t7bHd (Just FYI :-) )
    September 29, 2014 at 1:48 PM
  • Don't miss Vince Pendergrass' first post on the Keyhole blog - Don’t just randomize, truly randomize! http://t.co/QENl4kGVIs #cryptography
    September 29, 2014 at 9:57 AM
  • .@manohart Thank you for reading! Post author Alok Pandey has answered your question here - http://t.co/Uhn9Bv9L1a
    September 26, 2014 at 11:33 AM
  • Tech Night is now! @zachagardner & @lukewpatterson are presenting to the team on #Docker Code-Along style. Great discussions to be had!
    September 25, 2014 at 5:15 PM
  • Neat - A #JavaScript promise is an I.O.U. to return a value in the future. Here's a quick overview of promises: http://t.co/6wCz9aP4Qn
    September 25, 2014 at 11:35 AM
  • A huge welcome to Matthew Brown who joins the Keyhole team today!
    September 24, 2014 at 4:30 PM
  • RT @darrellpratt: A Journey From Require.js to Browserify http://t.co/t6N7Db1I4A
    September 24, 2014 at 11:54 AM
  • Creating a UI Designer for Quick Development - http://t.co/pNrayNFs5T http://t.co/hvqOaD6Wfq
    September 24, 2014 at 10:40 AM
  • We are under construction! Knocking down walls & expanding our offices in Leawood, KS this week. http://t.co/ph6JElh8lr
    September 23, 2014 at 9:46 AM
  • Did you know? Today in 1986 it was ruled that computer code is protected under copyright law - http://t.co/mCmWPvKOBE
    September 22, 2014 at 4:30 PM
  • Don't miss Alok Pandey's very first post on the Keyhole blog - Creating a UI Designer for Quick Development http://t.co/dWYMCOO3rf
    September 22, 2014 at 2:43 PM
  • If you're a Java dev, you're likely familiar with Annotations. But have you created your own #Java Annotations? Ex - http://t.co/mf1F3eIDY3
    September 21, 2014 at 5:15 PM
  • Check out a quick intro to Functional Reactive Programing and #JavaScript - http://t.co/4LSt6aPJvG
    September 20, 2014 at 11:15 AM
  • In Part 2 of our series on creating your own #Java annotations, learn about processing them with the Reflection API - http://t.co/E1lr3RmjI7
    September 19, 2014 at 12:15 PM
  • The life of a Keyhole consultant - A Delicate Balance: It’s What We Do http://t.co/ToRpWY3aix Blog as true today as the day it was written.
    September 19, 2014 at 9:50 AM
  • 7 Things You Can Do to Become a Better Developer - http://t.co/llPNMUN8nQ
    September 19, 2014 at 8:43 AM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2014 Keyhole Software, LLC. All rights reserved.