PubSub is a pattern that makes coding an application, cleaner and more maintainable. Traditional procedural code often grows difficult to maintain. A quick trip into the “Event-Driven” land of PubSub will let us see how this simple pattern helps an application to be coded in discrete and meaningful segments.
PubSub is our ticket out of the Procedural Programming world, and even if you didn’t really want to leave this world, please consider just this small excursion to a land where: the code is not excessively indented; and the functions are concise; and you can still use all the usual code that you are familiar with.
The trip to PubSub is not long, because the only border crossing you need to make is to Code by Event. We will let PubSub events take care of the structure of the application, and in no time you will be wiring up handlers to event as well as triggering events, all together making your application sing.
To speak the PubSub language, here is a quick phrase book of translations:
|
publish (make an event) |
subscribe (handle an event) |
|
pub (lish an event on a channel) |
sub (scribe to a channel, assigning a function that will be called) |
|
go (call all subscribers to this event) |
on (this event do this action) |
|
emit (an event) |
when (this event happens, call this function) |
|
trigger (an event) |
listen (for this event, and act on it) |
|
throw (the ball) |
catch (the ball, and tag second base) |
If you have been coding in and around any event-based systems (such as the Browser DOM) some of this lingo is sure to sound familiar, if not don’t worry, the natives are friendly and most of them speak your language. It is the custom, in the PubSub culture to do all of your application architecture in Publish and Subscribe calls. To experience the culture of this land, no better way than to start mingling with the code:
A diagram of the arrangement of events being published and the subscriptions to those events, in this example code.
(function($) {
$.subscribe(‘/search/term‘, function(term) {
$.getJSON(
’http://someserver.com/search/…’,
{ q : getQuery(term) },
function(resp) {
if (!resp.query.results.result.length) { return; }
$.publish(‘/search/results‘, [ resp.query.results.result ]);
}
);
});
// look ma, a new feature!
$.subscribe(‘/search/term’, function(term) {
$(‘#searches’).append(‘<li>’ + term + ‘</li>’);
});
$.subscribe(‘/search/results‘, function(results) {
var tmpl = ‘<li><p><a href=”{{url}}”>{{title}}</a></p></li>’,
html = $.map(results, function(result) {
return tmpl
.replace(‘{{url}}’, result.url)
.replace(‘{{title}}’, result.title)
}).join(”);
$(‘#results’).html(html);
});
function getQuery(term) {
return ‘select title,url from search.news where query=”‘ + term + ‘”‘;
}
$(document).ready(function() {
$(‘#searchForm’).submit(function(e) {
e.preventDefault();
var term = $.trim($(this).find(‘input[name="q"]‘).val());
if (!term) { return; }
$.publish(‘/search/term‘, [ term ]);
});
});
})(jQuery);
Rebecca Murphy does a good job of offering a releif form the standard procedural coding methods (i.e. nested if and else clauses).
This simple example is nicely instructive in letting us see the construction of a basic PubSub application. A real-world application is inevitably more complex, and to manage the complexity, we may need either discipline or tools to organize our PubSub events. If you are disciplined in the naming of your event channels, then you will have a relatively easy time when it comes to maintaining the application. But as you create your channel names, there is a certain amount of fore sight (ideally you will also have knowledge of all future feature requests :) that will be needed for you to continue in an extensible and understandable way. If you are not super human in this respect, then we might look into tools that can help…
The diagram to the right of the example code (above) relates directly to the code, and “shows” all connections between our publications and subscriptions to PubSub events. This diagrams can be generated form the source. Or, if you only had the diagram, the outline of the full source could be made.
Advertisement
Like this:
Be the first to like this post.
