

jade: a node.js template engine - fosk
http://jade-lang.com/

======
jashkenas
If you're using a template engine to render UI on the client side, it's
helpful to have a rough idea of the relative performance:

<http://jsperf.com/dom-vs-innerhtml-based-templating/45>

Here's a screenshot of the results: <http://cl.ly/42CP>

It can make a difference, because UI-rendering can often be _the_ performance
bottleneck in a JS web app ... especially in older browsers like Internet
Explorer.

Although, perhaps it isn't a problem at all -- looking at the source, it
doesn't appear as though Jade supports IE:

[https://github.com/visionmedia/jade/blob/master/lib/jade.js#...](https://github.com/visionmedia/jade/blob/master/lib/jade.js#L89)

~~~
abp
Hm, what about <https://github.com/jquery/jquery-tmpl>, jquerys official
templating plugin?

I use this one with a js-app in conjunction with knockout.js and a few others.

So performance of this one would be interesting, too.

Btw: The actual benchmark is really compelling.

~~~
jashkenas
JSPerf.com is like a wiki -- so by all means, please edit the page and add a
"jquery-tmpl" test.

~~~
abp
Yes, i know. I'am just very tired. But anyway, i've added it now.

<http://jsperf.com/dom-vs-innerhtml-based-templating/46>

It performs really poor..

~~~
jashkenas
Oh my goodness -- that's really fascinating. I had no idea that the new
jQuery-tmpl templates were that egregiously slow. (Nearly 100x slower, for
those who don't want to run the tests.) Thanks for adding 'em to the list.

~~~
abp
No problem after all. :) It's really horrible. But it's not that bad for me.
knockout.js does a good job with partial rendering via databinding (ie. only
rerender what really changed or is added).

Also it's just beta 1, lets see what happens next.

But adding Eco Template as engine for knockout.js would be a great idea, i
think...

------
drdaeman
Pros:

\- Clean, nice HAML-like syntax. Expect less typing and easier reading.

\- Extensible. It's extremly easy to provide your own filters, doctypes.

\- Extremely cool ability to hook the compiler and manipulate the result tree.
See CSRF example — it's just _awesome_.

\- Command-line tool to compile templates. A must for static mock-ups.

\- High quality code. I'd really wish I could write code as pretty as that.

Cons:

\- No template inheritance. And no fragment inclusion (unless you write your
own filter or extend the compiler to support some "jade:include" attribute).

\- Parsing and rendering is synchronous. So expect Node to block while doing
jade.render().

\- Filters are synchronous, too. So are iterators (therefore, forget your idea
to write model, which lazily fetches data from DB on demand).

\- No client-side support. Not like this is important, but this would be neat,
considering it's JS after all.

Jade is awesome, but synchronous code in asynchronous world somehow feels
wrong.

~~~
drdaeman
Correction: I was wrong on lack of client-side support - it should work,
except for IE, which don't support getters.

------
andymoe
Yeah, jade pretty much rocks. (I'm a fan of haml too) The nodejs ecosystem is
maturing a whole lot.

Express+jade=win:

<http://expressjs.com>

~~~
erikpukinskis
Do you have any experience with node-router? I'm new to Node.js, and I started
using it, but express looks better documented at least. I can't figure out
static files with node-router, but there's documentation of how to do it with
express.

------
jlees
I'm interested as to the anecdotal benefits of using a templating engine like
jade or haml. I much prefer the longhand way of embedding code into
handcrafted HTML, but then I date back to the early PHP and ASP days and use
Django heavily at the moment. Can't quite wrap my head around this mix of
generated tags and logic.

~~~
weixiyen
\- faster to write

\- less thinking

\- easier to modify and understand

I've been writing longhand for 10 years, and it was a no brainer. Just
download it and try it on a project for a day. If you are not sold, you can
always go back (since it just generates regular html).

I also highly recommend sass over css. The benefits of sass over css is much
greater than the benefits of haml over html.

~~~
aaronblohowiak
I agree about sass.

Haml is Much easier to diff/ merge

------
gmac
Check out <https://github.com/mauricemach/coffeekup> too: similarly spare and
elegant markup, and nothing but CoffeeScript. (Especially ace if you're using
CoffeeScript throughout the stack. And why wouldn't you be?)

------
wallfly
jade looks interesting, had not heard of it before and will be looking closely
at it for sure.

I'd like to also recommend Nickolay Platonov's little-known but powerful JS
templating library "Shotenjin":

<https://github.com/SamuraiJack/Shotenjin>

Shotenjin is built with Joose v3, which also rocks:

<https://github.com/Joose/Joose>

------
bobobjorn
What is the benefit of this style of templating engine compared to for example
pure (<http://beebole.com/pure/>) where you write your html in html, keeping
it free from logic and keeping it in a way anyone with html skills can
understand?

------
erikpukinskis
What are the benefits of using jade over haml-js?

~~~
moe
I'm curious, too. The syntax looks very similar to HAML but isn't HAML.
Wouldn't it make more sense to adopt HAML itself instead of inventing a
dialect?

~~~
aaronblohowiak
Filters, AST manipulation/introspection

~~~
moe
How do these relate to the syntax?

------
abp
The page is really pretty looking and simple. :)

Very nice.

------
indexzero
Old news

~~~
mcs
Right.

