Is it considered bad practice to use HTML in Jade?

Question

Jade looks like a cool templating engine and I think I'll be using it for my next project. However, some of the syntax doesn't make sense to me.

What do you get by doing this:

ul
  li
    a(href="#book-a") Book A

instead of:

<ul>
  <li><a href="#book-a">Book A</a></li>
</ul>

I understand you save some typing, but it seems less readable to me. I noticed on Jade's live demo that regular html passes right through the translation. So would it be considered bad practise to do something like this:

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>

`ul: li: a(href="#book-a") Book A` looks pretty readable. Are you just planning on using Jade for template logic? — Blender, Apr 18 '13 at 22:58
@Blender, yeah on its own it isn't bad. However, in a larger page I feel like I'd get lost. I've never used Jade before so I can just learn to get used to it. But I'm wondering my above solution is smart or not. — , Apr 18 '13 at 23:00
Does Jade actually let you insert HTML into Jade templates? I think you'd be much happier using something like Jinja2 for Node: http://nunjucks.jlongster.com/ — Blender, Apr 18 '13 at 23:04
@Blender, I think so. I used their demo site and put in some raw html and saw it come out raw in the output. Jinja2 looks awesome! And it plays nice with express (which is what brought me to Jade to begin with). — , Apr 18 '13 at 23:09
jade seems pretty bad for me becaue it is sloooow compared with other template engines and is less readable. Also, there's a BIG learning curve. EJS is fast, simple, no learning curve, it's like php. — Gabriel Llamas, Apr 19 '13 at 06:59
IMO it's substantially easier to get lost when you have a lot of extra angle brackets and double the amount of tags you really need. I don't see how it becomes *harder* to read when you remove extraneous noise. — Dave Newton, Jan 25 '14 at 04:16
can you use jade to only render the dynamic part of your html...and not mess with rest of your html?? — Muhammad Umer, Nov 22 '14 at 21:01
also can you render partially and render rest. So lets say when app starts up it renders most of the html. But when user abc wants to see his profile jade renders name to abc and merge it with regular pre rendered html and then you send it — Muhammad Umer, Nov 22 '14 at 21:03

score 76 · Accepted Answer · edited Jan 30 '17 at 01:54

Background

Actually jade/pug syntax allows plain HTML (or any other plain text) through the use of 3 syntaxes, as you can see in the reference on the project's site.

dot syntax (also known as "Block in a Tag")

ul.
  <li><a href="#book-a">Book A</a></li>
  <li><a href="#book-b">Book B</a></li>

pipe syntax (also known as "Piped Text")

ul
  | <li><a href="#book-a">Book A</a></li>
  | <li><a href="#book-b">Book B</a></li>

tag syntax (also know as "Inline in a Tag"), "Simply place some content after the tag", can also do the trick

ul
  li <a href="#book-a">Book A</a>

which will render

<ul><li><a href="#book-a">Book A</a></li></ul>

The Question

Back to your question, your sample

<div class="someClass">    
  <h3> #{book.name} </h3>
</div>

could be written as simple as

.someClass
  h3= book.name

Which is a lot more readable I think, so in that case you should consider a bad practice writing raw HTML, but not always.

IMO

IMO, common sense is the best good practice. Maybe i would consider using a raw chunk of HTML to insert a widget on the page, i.e. a youtube video or a custom google map <iframe>.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed"></iframe>

<iframe width="420" height="315" src="http://www.youtube.com/embed/_Vkm2nMM3-Q" frameborder="0" allowfullscreen></iframe>

As said above, here doesn't makes sense to use the attribute syntax. The result is nearly the same, and is quicker leaving the raw html.

iframe(width="425", height="350", frameborder="0", scrolling="no", marginheight="0", marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&amp;msid=217708588685721440865.0004d1d4faefdd11adf39&amp;ie=UTF8&amp;ll=43.167638,-7.838262&amp;spn=1.010793,0.991384&amp;t=m&amp;output=embed")

iframe(width="420", height="315", src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)

@weisjohn Thanks for the advice on the link change. Updated the answer with the new url and removed links that are broken now (those pointing to the visionmedia repo). — laconbass, Jan 29 '16 at 23:27

score 7 · Answer 2 · answered Apr 30 '14 at 16:53

7

Jade now provides inline syntax for nested tags:

a: img

turns into

<a><img/></a>

Taken from the official documentation.

answered Apr 30 '14 at 16:53

Nelo Mitranim

823
1
13
13

score 1 · Answer 3 · answered Nov 13 '16 at 03:32

you can use the following approach too to use plain html as your view engine.

app.set('views', path.join(__dirname, '/path/to/your/folder'));
app.set("view options", {layout: false});
app.engine('html', function(path, opt, fn) {
  fs.readFile(path, 'utf-8', function(error, str) {
      if (error)
          return str;
      return fn(null, str);
  });

});

Is it considered bad practice to use HTML in Jade?

3 Answers3

Background

The Question

IMO

Linked