The Return of the HREF – The Sammy Javascript Microframework

Recently, for me at least, it seemed as if Javascript development had (de)volved into:

<a href="#" onclick="Some.module.call(); return false;">Click Me!</a>

Or worse yet, binding event handlers to every anchor on the page with jQuery. That’s so meh if you ask me.

That’s why I’m excited about Sammy by Aaron at http://quirkey.com, a javascript microframework built ontop of jQuery and modeled after the Sinatra microframework for Ruby. On the surface, it’s a simple and convenient way rely on to the href attribute we web developers have become so fond of. Digging deeper, it provides a lightweight, stateful, organized framework to our increasingly prevelant AJAX applications.

Stateful AJAX with Sammy

One of the primary benefits that Sammy provides is that it’s based around event binding to URLs. That means we can do:

<a href="#/blah">Click Me!</a>

and it will be mapped to a Sammy framework event that handles the URL http://mysite.com/#/blah.

Note the hash in the URL that does not reload the entire page, instead (with Sammy) it fires any events bound to the #/blah URL. Why is this important? Firstly, I’m a firm believer that the average web user subconsciously likes to see the URL change whenever they click something on a web page. Secondly, that user can then use the “back” button and remain in the AJAX application you’ve built, possibly undoing the action you’ve just performed (depending on how you coded your app).

The Sammy framework provides everything you need to be able to handle these hash URLs by abstracting RESTful requests ontop of jQuery.

app = $.sammy(function() {
  this.get('/#blah', function() {
    $('.do').something():
    cool();
  });
});

$(function() {
  app.run();
});

Any link to “#/blah” will fire the function you do define that $('.does').something(); cool();

Aaron says it better than I can:

jQuery is probably the fastest, most robust way to abstract basic low-level Javascript functionality that every Javascript devleoper needs. However, it really remains low-level and does not imply any structure or organization for larger scale Javascript applications.

The key here is "larger scale" javascript apps. If your app has one or two small javascript effects, then it may not make sense for your app to use Sammy. Just use the onclick attribute or event bindings in your favorite javscript framework. But, if your app works natively without page refreshes, then I strongly recommend using Sammy to organize your AJAX events.

9 thoughts on “The Return of the HREF – The Sammy Javascript Microframework”

  1. There is a typo after $('.do').something(), a colon instead of a semicolon.
    I'm also no sure about this.get('/#blah',… maybe it should be this.get('#/blah',…

Leave a Reply