Sizlate

Over the past year I have been experimenting with Node.js. Its been a pretty interesting journey and I have learned a great deal.

One of my more interesting experiments has been Sizlate.

On projects at work I often find myself doing things like this:

 domNode.find('div.class').html('<b>INSERT SOME STUFF HERE</b>'); 

It’s a really powerful way to populate HTML. What I really like is that there is no need to add any crazy syntax into my templates.  Templates are just valid HTML and the point of insertion is specified by the jQuery selector.

From the developers point of view this is really simple, it does however introduce problems when Javascript is not turned on. I found myself wondering how this technique might be transferred onto the server.

After some experimentation I came up with Sizlate. A HTML templating engine for Express.js.

Its pretty easy to get jQuery running on Node.js but I decided that  jQuery wasn’t  a good fit for my use case.  Sizzle is the selector engine used by jQuery, I decided to investigate using Sizzle to provide the selector functionality. It turned out that this works quite nicely using the JSDOM project.

To use Sizlate you simple need to register it as your templating engine:

var sizlate = require('sizlate'); 
app.register('.html', sizlate); 

And then just call res.render as you would normally with Express:

 res.render('template.html',  { selectors: { 'a': 'hi there' } }); 

That’s the most basic example. On github I have provided an example of  passing sizlate an object allowing more complex data structures to be used. There is also an example using partials.

At the moment Sizlate only works on the serverside but it should be quite easy to get it working in the browser.

Feel free to have a play and let me know if you have any feedback.

Sizlate is available as a NPM package and can be installed using the command:

 NPM install sizlate 
 
For more details please read the readme on github.com.
Advertisements

4 thoughts on “Sizlate

  1. I like that this is a different method to ordinary templating – and yes, removing a syntax seems cleaner. But it seems that now templating is pushed into the app logic, so templates are not something less-technical people can be editing, unlike when they are in separate files and similar to blocks of HTML (albeit with crazy syntax).

  2. On the contrary, it makes it particularly easy for one developer to build a static html page containing dummy data. This developer doesn’t need to know anything about the application. Someone else with knowledge of the application can then come along later and insert the data with Sizlate.

    You could also do it the other way round where the template builder knows they have to add certain classes and id in the design for the data to be inserted.

  3. Pretty interesting, I assume you could pass multiple selectors? It sorta reminds me a little of a Scala web framework called Lift (liftweb.net) with one big difference. Lift is ‘view first’ and loads templates first then calls into code to replace partial segments and it does this through css selectors in HTML, leaving the HTML completely valid, but allowing the application to replace data through DOM manipulation. Might be worth taking a look at that and seeing if you could borrow any ideas.

    I’d be interested in seeing further demos for things like for loops and multiple selectors. I suspect that where you might have conditional logic in your template before, you probably don’t need that anymore due to the application decided what to select in the HTML in the first place.

    Keep it up, and definitely show it around.

  4. Yep, you can pass in as many selectors as you like. If you pass in multiple you even get a cascade where you can override values from the previous selectors.

    Thanks for letting me know abot liftweb.net, I shall take a peak.

    There are some more intersting demos over on the github page. You are correct in that all conditional logic needs to happen before you pass data into your template to be rendered.

Comments are closed.