CODEWITHSUNDEEP
node.jsexpresspugtemplate-engine
user623990
user623990

Reputation:

Is it considered bad practice to use HTML in Jade?

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>

Upvotes: 35

Views: 26473

Answers (3)

laconbass
laconbass

Reputation: 17825

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)

Upvotes: 76

nilakantha singh deo
nilakantha singh deo

Reputation: 1006

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);
  });

});

Upvotes: 1

Nelo Mitranim
Nelo Mitranim

Reputation: 854

Jade now provides inline syntax for nested tags:

a: img

turns into

<a><img/></a>

Taken from the official documentation.

Upvotes: 7

Related Questions