FuzzyToast

I've been making web applications for 15 years, and while the technology has changed, I've noticed a pattern I see as being counter-productive and unnecessarily inefficient.

First, we grab some sort of server infrastructure and begin building server pages (call it xSP, e.g. JSPs, ASP, PHP or even Ruby on Rails). Regardless of the technology, the result is quite similar: A series of template files are combined with data on the server and fed to a stupid web browser as an HTML page.

But our users have smart web browsers and expect a certain amount of dynamic interaction. So we begin to carve off chunks from our server pages and re-implement them with some AJAX wizardry and lots of hand-waving (thank the FSM for jQuery, eh?). The end result is that we now have to maintain code in two places: JavaScript and our Server Page technology.

If the end result is a dynamic, AJAX-laden web application (rich client), why didn't we just begin with that path first and ignore the xSP bit altogether?

Introducing the Fuzzy and the Toast

In making a dynamic web application, we need to deal with concrete bits, like sending a slice of bread to a web service and getting back buttered toast. This includes:

• Data retrieved from web services
• Templates that describe how to display the data
• Static contents like images

But there is also a fuzzy aspect of how these toast-like results are inserted back into this dynamic application, and our goal is to have a plugin that can help with both the fuzziness and the toastiness of a modern, dynamically-interactive web application.

That is what the jquery.fuzzytoast.js plugin is all about. Making it easy to grab a template from a web server, make a REST call for some data, combining it and inserting it back into the document. The plugin moves the xSP template processing from the server to the client, making the server development significantly more straight-forward and easier.

This demo application is an example of how to use it. Everything on this site is dynamic and loaded as needed. You could actually drop the entire thing in an Apache web site and away you go. Note: The REST calls really just read static JSON files.

Usage

The easiest way to use this plugin is to place a fuzzytoast aspect on a button or some other object and have it grab an online template, some data from a REST call and insert it as the child of some element, as in:

$('#some-buttom').fuzzytoast ({
    template: 'templates/about.html',
    data    : 'rest/some-data.json'
});

This call makes many assumptions, but the fuzzytoast parameters are the following:

• template - The URL of the template to use

• data - The URL to a REST interface that responds with a data model used to substitute in the template.

• destination - The jQuery selector to use when adding the results (as a child element). If not specified, it defaults to #main. This can be changed by the following assignment:
  $.fuzzytoast.default_destination = '#primary-container'

• method - The HTTP method used when retrieving the data. Defaults to get

• append - Should the results be inserted as the only child of the destination (false) or appended to the end of the existing children (true).

Utility Functions

Templates themselves may contain data that needs to call the fuzzytoast system, and in this case, you can build up the dynamic aspects by first creating the action, and then calling it, as in:

var id = $.fuzzytoast.create({
    template    : 'templates/profile.html',
    data        : 'data/user/'+$(this).attr('id')+'.json',
    destination : '#main'
});
$.fuzzytoast(id);

Or doing this with a single call to $.fuzzytoast() as in:

$.fuzzytoast({
    template    : 'templates/profile.html',
    data        : 'data/user/'+$(this).attr('id')+'.json',
    destination : '#main'
});

A couple of reasons why you would want to use the utility function form of $.fuzzytoast() instead of the initial selector method usage described above, e.g. $('#selector').fuzzytoast():

First, the $(this) is not available without being inside a function call.

Second, you might want to kick off the call with something other than a click, as in:

$('#user-list li').
    hover(
        function() { 
            $(this).addClass('ui-state-hover'); 
            $.fuzzytoast({
                    template    : 'templates/profile.html',
                    data        : 'data/user/'+$(this).attr('id')+'.json',
                    destination : '#main'
                });
        }, 
           function() { $(this).removeClass('ui-state-hover'); }
        );

Tell others about this article: