JQuery Blueprint - a js templating framework in just 30 lines of code.

http://github.com/bunchesofdonald/jquery-blueprint

7 15 16 years ago

weesilmania4• 16 years ago

But why?

weesilmania4• 16 years ago

Sorry I don't mean to be cheeky, I seriously want to know what the application of this might be, can't see a real-world example.

mikeyg• 16 years ago

I think the value is in having your templates already loaded client side, then being able to render them as your data comes back from the server in JSON or XML.. It lets you keep the server side controller very simple & generic, possibly just enough to handle authNZ and a model query.

WesleyJohnson• 16 years ago

Templating systems are pretty useful and used in quite a few frameworks. Alot of the controls in ASP.NET basically work as templates where you define the markup and bind a list of data to the control the markup (template) is repeated for each piece of data. This is relatively easy on the server side, but on the client side it's a bit more difficult.

If you wanted to create a realtime twitter client, for example, done all on the client you'd need to fetch a collection of new tweets periodically and render them in JavaScript. Without a templating framework, you'd have to loop through the new tweets and construct the presentation using something like "innerHTML" or "document.createElement()". A templating system allows you to construct the layout of a single tweet in standard HTML, mix in a bit of the template's JS syntax, and then essentially "bind" the list of new tweets to the template and the markup is repeated for each new tweet.

Given that example, there are plenty of uses that follow the idea of replicating content over and over using the same template: Email clients, chat clients, news readers, blogs, photo galleries, classified listings, etc, etc.

tchvil2• 16 years ago

For a real world exemple, check out our app http://beebole-apps.com/?demo, the rendering is entirely built client side with a Javascript templating engine (PURE).

sunir• 16 years ago

There often can be advantages with client-side Javascript templates when building gadgets, such as those in OpenSocial containers.

Not sure I value this templating system over others yet.

xhuang• 16 years ago

gist: replace

tariq• 16 years ago

care to elaborate how it compares to other js templating frameworks? (ie. features, speed)

bunchesofdonald2• 16 years ago

As far as features, there aren't many. I'd looked at all the other js templaters and they all seemed to do too much, IMO. I just wanted one that would take an html template, let me give it a data object, and have it render it into an element on the page.

Speed wise, I haven't benchmarked it, but it uses regex (admittedly not the best way) and jquery.append() to do the heavy-lifting, that combined with the fact it's doing very little, it should be very fast.

I'm working on making it parse the template first that way I can get rid of the regex, or at least minimize it's usage.

echaozh• 16 years ago

Have you seen http://beebole.com/pure/ before?

bunchesofdonald2• 16 years ago

I hadn't... but it still looks like it does far more than I want. But it does look like it might be one step up in functionality, for those who want just a little more control over the rendering process.

tchvil2• 16 years ago

PURE had ~50 lines when starting, but then the real life came with its clunky browsers, various libs and functionality needs.

sarwarb• 16 years ago

Have you seen http://code.google.com/p/trimpath/wiki/JavaScriptTemplates?

JQuery Blueprint - a js templating framework in just 30 lines of code.

Related Stories