Sammy.js and Express.js the dynamic Duo for progressive website enhancement
I could have called this blog article Sammy Davis Jr. and Frank Sinatra - Me and my shadow, but no one would have understood, that this is all about fancy web development and Node.js. However after you have read this article, you might actually think and smile, about what a good fit this title would actually be…so let’s go:
Yeah, we all love the fancy world of AJAX, but unfortunately, we don’t live in a perfect world. When it comes to publishing real world apps to the Web, normally the first thing you encounter is the world crashing in your face, cause you start to test your page in non fancy browsers (yeah talking about you here, IE ;)
I follow up to the great writeup from Ben Nolan and Dav Glass upon how to do progressive enhancement with node.js and the concept of serverside DOM rendering of javascript, if for some reason it is not available in the clients browser.
While Ben’s writeup is somewhat theoretic and involves Firefox pushState functionality, Dav gives a real cool demo with YUI 3.
All this fancyness however comes with higher complexity…so I actually left it apart until I discovered Sammy.js a week ago and hey, saw it clear in front of me: That was the solution to progressive enhancement we are all searching for!
What’s Sammy.js and what does it have to do with progressive enhancement?
Sammy.js (yeah Sammy David Jr. inspired) is to the clients browser, what is Express.js (Sinatra inspired) to the server. Or to put it simple, Sammy.js is all about encoding AJAX state on the client into the hash URL, whereas Express is about serverside routes = encoding serverside state into the URL.
What is so beautiful here is, that while both do substantially the same, but one on the client to enable your seemless AJAX navigation, and the other on the Server to prevent you from writing strange regexp patterns and do unfancy URL parsing, the way they encode state is quite the same: they both use URL encoding.
So let’s look @ how Sammy encodes an URL:
// string
get('/user/:id', function() {
...
});And now lets look @ how Express encodes an URL:
app.get('/user/:id', function(req, res){
...
});
Looks familiar? This is because both use “routes” as there way of mapping query strings to variables, so in the above example, user:id could be the name of a user to search for.
With sammy, this search would happen on the client involvimng perhaps some AJAX request to the client. With express this search is done on the server.
All things are beautiful here, cause Sammy will keep away nasty problems developers had to face with AJAX development. E.g. the browsers back button not working. Sammy does it all for you and it does it the same way as Express does it on the Server!
Well, so how do you connect both up together:
The point is you don’t have to do anything! If the browser has Javascript support, Sammy will disable the links (prevent the default action for clicks) and handle them with Sammy’s Javascript functions instead.
If there is no Javascript support, the Browser will simply call out to the Server and Express will handle the request, like in a normal Client-Server scenario.
Well there is one Gotcha however. AJAX apps normally do massive clientrside DOM manipulation, whereas this cannot be done on the Server normally.
Well fortunately there comes some help from Elijah Insua and his awesom JSDOM project on Github. JSDom basically is a serverside DOM parser and enables you even to use JQuery on the server.
So big up yourself and get fancy with Sammy and Express!
