Jade is a template engine for node. js and the default rendering engine for the Express web framework. It is a new, simplified language that compiles into HTML and is extremely useful for web developers. Jade is designed primarily for server-side templating in node.
EJS (along with all the other competing template engines) allows you to generate full-blown HTML pages which certainly enables a "proper front-end". EJS is a tool for generating web pages that can include dynamic data and can share templated pieces with other web pages (such as common headers/footers).
Pug makes it easy both to write reusable HTML, as well as to render data pulled from a database or API.
You don't need to install any extra modules to render an HTML file in Express. Just install express and you are good to go.
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>
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, 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&msid=217708588685721440865.0004d1d4faefdd11adf39&ie=UTF8&ll=43.167638,-7.838262&spn=1.010793,0.991384&t=m&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&msid=217708588685721440865.0004d1d4faefdd11adf39&ie=UTF8&ll=43.167638,-7.838262&spn=1.010793,0.991384&t=m&output=embed")
iframe(width="420", height="315", src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)
Jade now provides inline syntax for nested tags:
a: img
turns into
<a><img/></a>
Taken from the official documentation.
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);
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With