Tempo: a tiny JSON rendering engine

http://twigkit.github.com/tempo/

by rafaelc • 15 years ago

107 24 15 years ago

twigkit.github.com

robryan• 15 years ago

I generally pass the templates needed for a page into a Javascript variable from the back end. Looks nice for template nesting though, as opposed to storing a nested template in a separate Javascript variable.

thefreshteapot• 15 years ago

As a user of the "prototype.js" library this is a little similar to the default template syntax, yet with one extra character.

Thomas Fuchs has a very similar version: http://mir.aculo.us/2011/03/09/little-helpers-a-tweet-sized-...

And finally, I ported the template functionality from the "prototype.js" to php. https://github.com/freshteapot/php-template

Prototypejs - api of "Template" http://api.prototypejs.org/language/Template/

keytoll• 15 years ago

http://www.youtube.com/watch?v=D-BetceTGiA

franze2• 15 years ago

is the unobtrusive javascript paradigm dying or already dead?

ehsanul• 15 years ago

From the link: Degrades gracefully if JavaScript is not enabled

Graceful degradation is less common for JavaScript now than it used to be though. So if you want a smooth web experience, these days you just can't go without JavaScript. I personally don't think that's a horrible thing, but I guess most people who've disabled JavaScript (or use Lynx or something) would disagree.

etherealG3• 15 years ago

I think that's just a result of lazy programmers. Most of the sites I put together work with or without js. It's not that hard to do with a good templating engine that splits up each "ajax" part of html into a piece that can be rendered with a refetch of the entire page, or a refetch of just that part.

franze2• 15 years ago

i.e.: http://twigkit.github.com/tempo/examples/twitter with no-script turned on http://yfrog.com/h2g6vcqj well, i'm not quite sure how "Degrades gracefully" is defined, but i would not call the no js-version "gracefully"

wladimir• 15 years ago

The only thing I was still using Lynx for is for downloading graphics drivers on Linux. Alas, since NVIDIA did their last site update, that doesn't seem to work anymore :(

I think that if your site has a clear-cut function, you should at least try to provide that functionality even for bare-html browsers. Doesn't matter if it looks ugly, the focus is this case is on functionality not looks.

tomjen3• 15 years ago

Javascript is pretty much necessary to browse the web these days, unless you stick to things like wikipedia, and only write text.

_delirium2• 15 years ago

I haven't had big troubles for browsing the web, though interacting with it (e.g. posting stuff in comment areas) is more problematic. Looking at the sites I regularly visit, all can be browsed fine without js: Wikipedia, HN, Reddit, Twitter, any Wordpress blog, Slashdot, Google News and just about everything it links to, university professor/project websites, etc.

In fact, I can't think of a site I regularly visit that doesn't work without js, except for things clearly in the category of "web apps", like canvaspaint.org, where the idea of "browsing" them doesn't even necessarily make sense. Even gmail works without js!

y0ghur7_xxx• 15 years ago

Here[1] is a list of other JS templating engines. The page compares them for speed.

You could add yours.

[1]http://jsperf.com/dom-vs-innerhtml-based-templating/112

etherealG3• 15 years ago

sorry to be a hater, but while I find the idea of mixing js and html not great, the alternative being offered up here is to introduce a new language and mix that in with html instead of js. isn't that counterintuitive? wouldn't it be better to just use actual js in your templates instead of this arbitrary {{}}-based stuff?

biot2• 15 years ago

It's a very familiar style of markup that I find immediately intuitive. The benefit being that it separates the markup from the code populating it.

weego• 15 years ago

{{tag}} is not "valid" markup (it will pass a validator but has negative semantic value), which is even worse than mixing a little well crafted logic into your display code.

Ataraxy• 15 years ago

As someone that isn't really a developer but understands enough to break things or cobble them together, this seems quite accessible to me.

For example, I could conceivably see taking an existing web services API and spitting JSON results into a themeforest template.

I'm sure there's a million ways of doing it, but this at a glance seems like a quick way of making that happen.

aitorciki• 15 years ago

How well does the {{}} syntax coexist with server-side template languages like Django's one which uses the exact same marker for placeholders?

d0m2• 15 years ago

You can use tags in your django templates do avoid that issue. For instance, I am using icanhaz which use mustache's templates ({{}}) and I inspired myself of a snippet called Verbatim. So, basically, in your template you do:

  <body>
  {% js_template test %}
  Here you can freely use {{}} because the surrounding tags make django ignore them.
  {% endjs_template %}

d0m2• 15 years ago

Interesting. At first sight, I couldn't really understand the difference with the existing icanhazjs(.com) library? Can you elaborate on this?

zdw• 15 years ago

Looks interesting, especially to those coming from Smarty as it appears quite similar in terms of templating.

To compare the two, the upside is you get to feed the site JSON, which is easier to generate. The downside is the extra content load time of the script vs doing the template integration server side and caching the result.

Tempo: a tiny JSON rendering engine

Related Stories