4 ms·

Show HN: nunjucks, a better templating system for javascript (jinja2 inspired)

38 points by jlongster 14y ago

lrem 14y ago
Lack of appealing templating was the last technical thing holding me back from experimenting more with client side. Damn, I'm slowly running out of excuses ;-)
deleted 14y ago
[deleted]
JPKab 14y ago
As a person who plays around with Node, has used (and hated) Jade, thank you thank you for doing this. I wanted Jinja for javascript so bad, and EJS simply didn't deliver what I wanted. Let me quickly state something about Jade: I think it's great for those whose philosophy is "as little typing as possible." For me, my goal is simplicity, not minimal typing. That's why I don't like Jade. I can take a Jinja template, show it to somebody who only knows HTML, and they can figure it out rather quickly. Jade, not so much.
- jlongster 14y ago
  That's exactly how I feel. I think Jade is awesome, just not my cup of tea. I know several people that love it. After developing node apps for a year, I'm tired of constantly battling my templates. I hope that this benefits others as well!
- lowboy 14y ago
  I am a proponent of ALTAP and of using significant whitespace such as Python and Haml so I appreciate Jade's style. Although I can see the utility of being close to HTML, the jump to simple Jade or Haml shouldn't be that bad for a competent developer.
- insin 14y ago
  You might also be interested in: https://github.com/deoxxa/node-ginger https://github.com/deoxxa/node-ginger https://github.com/chrisdickinson/plate https://github.com/chrisdickinson/plate https://github.com/paularmstrong/swig https://github.com/paularmstrong/swig Sounds like my reasons for liking Jade are the same as yours for not liking it: simplicity, but for me, as opposed to someone who only knows HTML. The trade-off for requiring less typing in some cases (which is a bonus, but not a goal) via significant whitespace and being element-based is having many fiddly moments trying to get whitespace to appear between elements where its lack affects the layout. I've loved Django's template inheritance since I first laid my eyes on their template docs in the magic-removal days, so once Jade added the same sort of inheritance - plus conveniences like "append" for adding to blocks in parent templates - the deal was pretty much sealed for my Node.js projects. Form rendering and other truly display logic is the point where I part with the appreciation Django gave me for designer-friendly templates which just can't do logic beyond the basics. Jade's mixins, effectively being functions which can only return elements, but allowing you to optionally pass in arguments, attributes and a block of elements, and use JavaScript logic, are getting me most of the way there when using my JavaScript port of django.forms, without having to step outside the templating system.
grannyg00se 14y ago
"Mustache is great, but...lacks sophisticated features such as template inheritance" Perhaps my templating needs are trivial, but isn't that what a parial is? Mustache lets you include any template within another template, thereby "inheriting" from the parent.
- jlongster 14y ago
  That's the opposite of what inheritance does. Partials let a template include another one. Inheritance allow a template to use another template and inject only specific content into it. http://jinja.pocoo.org/docs/templates/#template-inheritance http://jinja.pocoo.org/docs/templates/#template-inheritance You absolutely need this if you're using the templating system for all pages on your site, and have various subpages that inherit from the base and override only certain portions of it.
azundo 14y ago
From http://nunjucks.jlongster.com/differences http://nunjucks.jlongster.com/differences Missing features that will be implemented (in order of priority): Autoescaping I recognize it is first priority, but please mention this on the main page until it is implemented. Given that feature parity is advertised with only "a few subtle differences" my guess is that many people will assume autoescaping.
islon 14y ago
The more I read about templates the more I'm sure about developing rich ajax clients on top of plain html and forget templates exist.
dochtman 14y ago
Did you find http://bitbucket.org/djc/jasinja http://bitbucket.org/djc/jasinja before building this? If not, where do you think I should advertise it?
ludwigvan 14y ago
This is great. It seems strange to me that logicless templates who have taken it too far have gained so much popularity in js templating. For someone considering handlebars, here is what I have found really constraining, note that most of them are by design: - No builtin equality check between two variables. So, you can do: `{{#if my_boolean}}`, but cannot do `{{#if my_variable == 2 }}` You have two options here: - Resort to implementing an ifequal helper (and other trivial helpers like gt, lt etc.) - Prepare everything before handing it to the template, so before passing the json to the template, add another field like, equal_to_two to check for equality with 2. - Partials lack access to parent. Say you are iterating over answers of a question, so you do: {{#each answers }} {{ text }} - {{ user }} {{/each}} At some point, you will want to add some information in the parent scope, so you do this: {{#each answers }} {{ answer.text }} - {{ answer.user }} -- in response to {{../user }} {{/each}} Now, you may want to register this snippet as a partial: {{ answer.text }} - {{ answer.user }} -- in response to {{../user }} So that you can do: {{#each answers }} {{> answer_partial }} {{/each}} But answer_partial cannot access the parent scope (question item); so you resort to another custom helper "include". - Lack of keyword and delimiter compatibility with Django/Jinja2; so you need to replace each of your {% if %}'s to {{if}} and so on. - It is hard to tell what the current context is referring to at times, so, it is helpful to use an additional debug helper (again not builtin) that just logs the current context. Block helpers change the context, except when they don't. The only reservation I have with nunjucks is that it faces the danger that it might be abandoned like other efforts; other than that, it seems it will address all the painpoints I am experiencing with handlebars, but speaking with jlongster on twitter, he seems determined to keep working on it.
- underwires 14y ago
  Yeah, the equality check thing kills me. I have a page that needs <selects> for choosing a time of day, and so I set a bunch of vars like isHour1, isHour2 and isMin0, inMin5, etc. A total pain when what I want is {{if hour == 1}} http://jsbin.com/uvuhip/1/edit http://jsbin.com/uvuhip/1/edit ugly...
  - ludwigvan 14y ago
Kilimanjaro 14y ago
Beautiful. I'm in love with Jinja and this is exactly what I was looking for in JS. Already got github/flosch/pongo for golang so the cycle is complete. Jinja won. Now, let's get the best from all and unify it in a universal templating system, so all languages can build libraries to parse and render the same templates, no matter the language. We all win.
jokull 14y ago
Cool, and thanks. Did you already see [jsonjinja](https://github.com/mitsuhiko/jsonjinja https://github.com/mitsuhiko/jsonjinja) ? Nice that you can precompile templates too. Can’t wait to roll this into my brunch template.

38 points by jlongster 14y ago

lrem 14y ago

Lack of appealing templating was the last technical thing holding me back from experimenting more with client side. Damn, I'm slowly running out of excuses ;-)

deleted 14y ago

[deleted]

JPKab 14y ago

As a person who plays around with Node, has used (and hated) Jade, thank you thank you for doing this. I wanted Jinja for javascript so bad, and EJS simply didn't deliver what I wanted. Let me quickly state something about Jade: I think it's great for those whose philosophy is "as little typing as possible." For me, my goal is simplicity, not minimal typing. That's why I don't like Jade. I can take a Jinja template, show it to somebody who only knows HTML, and they can figure it out rather quickly. Jade, not so much.

jlongster 14y ago
That's exactly how I feel. I think Jade is awesome, just not my cup of tea. I know several people that love it. After developing node apps for a year, I'm tired of constantly battling my templates. I hope that this benefits others as well!
lowboy 14y ago
I am a proponent of ALTAP and of using significant whitespace such as Python and Haml so I appreciate Jade's style. Although I can see the utility of being close to HTML, the jump to simple Jade or Haml shouldn't be that bad for a competent developer.
insin 14y ago
You might also be interested in: https://github.com/deoxxa/node-ginger https://github.com/deoxxa/node-ginger https://github.com/chrisdickinson/plate https://github.com/chrisdickinson/plate https://github.com/paularmstrong/swig https://github.com/paularmstrong/swig Sounds like my reasons for liking Jade are the same as yours for not liking it: simplicity, but for me, as opposed to someone who only knows HTML. The trade-off for requiring less typing in some cases (which is a bonus, but not a goal) via significant whitespace and being element-based is having many fiddly moments trying to get whitespace to appear between elements where its lack affects the layout. I've loved Django's template inheritance since I first laid my eyes on their template docs in the magic-removal days, so once Jade added the same sort of inheritance - plus conveniences like "append" for adding to blocks in parent templates - the deal was pretty much sealed for my Node.js projects. Form rendering and other truly display logic is the point where I part with the appreciation Django gave me for designer-friendly templates which just can't do logic beyond the basics. Jade's mixins, effectively being functions which can only return elements, but allowing you to optionally pass in arguments, attributes and a block of elements, and use JavaScript logic, are getting me most of the way there when using my JavaScript port of django.forms, without having to step outside the templating system.

grannyg00se 14y ago

"Mustache is great, but...lacks sophisticated features such as template inheritance" Perhaps my templating needs are trivial, but isn't that what a parial is? Mustache lets you include any template within another template, thereby "inheriting" from the parent.

jlongster 14y ago
That's the opposite of what inheritance does. Partials let a template include another one. Inheritance allow a template to use another template and inject only specific content into it. http://jinja.pocoo.org/docs/templates/#template-inheritance http://jinja.pocoo.org/docs/templates/#template-inheritance You absolutely need this if you're using the templating system for all pages on your site, and have various subpages that inherit from the base and override only certain portions of it.

azundo 14y ago

From http://nunjucks.jlongster.com/differences http://nunjucks.jlongster.com/differences Missing features that will be implemented (in order of priority): Autoescaping I recognize it is first priority, but please mention this on the main page until it is implemented. Given that feature parity is advertised with only "a few subtle differences" my guess is that many people will assume autoescaping.

islon 14y ago

The more I read about templates the more I'm sure about developing rich ajax clients on top of plain html and forget templates exist.

dochtman 14y ago

Did you find http://bitbucket.org/djc/jasinja http://bitbucket.org/djc/jasinja before building this? If not, where do you think I should advertise it?

ludwigvan 14y ago

This is great. It seems strange to me that logicless templates who have taken it too far have gained so much popularity in js templating. For someone considering handlebars, here is what I have found really constraining, note that most of them are by design: - No builtin equality check between two variables. So, you can do: `{{#if my_boolean}}`, but cannot do `{{#if my_variable == 2 }}` You have two options here: - Resort to implementing an ifequal helper (and other trivial helpers like gt, lt etc.) - Prepare everything before handing it to the template, so before passing the json to the template, add another field like, equal_to_two to check for equality with 2. - Partials lack access to parent. Say you are iterating over answers of a question, so you do: {{#each answers }} {{ text }} - {{ user }} {{/each}} At some point, you will want to add some information in the parent scope, so you do this: {{#each answers }} {{ answer.text }} - {{ answer.user }} -- in response to {{../user }} {{/each}} Now, you may want to register this snippet as a partial: {{ answer.text }} - {{ answer.user }} -- in response to {{../user }} So that you can do: {{#each answers }} {{> answer_partial }} {{/each}} But answer_partial cannot access the parent scope (question item); so you resort to another custom helper "include". - Lack of keyword and delimiter compatibility with Django/Jinja2; so you need to replace each of your {% if %}'s to {{if}} and so on. - It is hard to tell what the current context is referring to at times, so, it is helpful to use an additional debug helper (again not builtin) that just logs the current context. Block helpers change the context, except when they don't. The only reservation I have with nunjucks is that it faces the danger that it might be abandoned like other efforts; other than that, it seems it will address all the painpoints I am experiencing with handlebars, but speaking with jlongster on twitter, he seems determined to keep working on it.

underwires 14y ago
Yeah, the equality check thing kills me. I have a page that needs <selects> for choosing a time of day, and so I set a bunch of vars like isHour1, isHour2 and isMin0, inMin5, etc. A total pain when what I want is {{if hour == 1}} http://jsbin.com/uvuhip/1/edit http://jsbin.com/uvuhip/1/edit ugly...
- ludwigvan 14y ago

Kilimanjaro 14y ago

Beautiful. I'm in love with Jinja and this is exactly what I was looking for in JS. Already got github/flosch/pongo for golang so the cycle is complete. Jinja won. Now, let's get the best from all and unify it in a universal templating system, so all languages can build libraries to parse and render the same templates, no matter the language. We all win.

jokull 14y ago

Cool, and thanks. Did you already see [jsonjinja](https://github.com/mitsuhiko/jsonjinja https://github.com/mitsuhiko/jsonjinja) ? Nice that you can precompile templates too. Can’t wait to roll this into my brunch template.