What is jade?
Jade, now known as Pug, is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. It is used to generate HTML dynamically and is known for its clean and minimal syntax.
What are jade's main functionalities?
Template Rendering
Jade allows you to render HTML templates with dynamic data. In this example, a simple template is rendered with a variable 'name' which is replaced with 'World'.
const pug = require('pug');
const html = pug.render('p Hello, #{name}!', { name: 'World' });
console.log(html);
Template Inheritance
Jade supports template inheritance, allowing you to create a base template and extend it in other templates. This example demonstrates how 'index.pug' extends 'layout.pug' and defines a content block.
const pug = require('pug');
const html = pug.renderFile('index.pug');
console.log(html);
// index.pug
// extends layout.pug
// block content
// h1= title
// p Welcome to #{title}
// layout.pug
// doctype html
// html
// head
// title= title
// body
// block content
Mixins
Mixins in Jade allow you to create reusable blocks of code. This example shows a mixin 'list' that generates an unordered list from an array of items.
const pug = require('pug');
const html = pug.renderFile('mixin.pug');
console.log(html);
// mixin.pug
// mixin list(items)
// ul
// each item in items
// li= item
// +list(['Apple', 'Banana', 'Cherry'])
Other packages similar to jade
ejs
EJS (Embedded JavaScript) is a simple templating language that lets you generate HTML markup with plain JavaScript. It is similar to Jade but uses a more traditional syntax that is closer to HTML, making it easier for those familiar with HTML to use.
handlebars
Handlebars is a popular templating engine that provides the power necessary to let you build semantic templates effectively with no frustration. It is known for its simplicity and logic-less templates, which makes it different from Jade's more feature-rich approach.
mustache
Mustache is a logic-less template syntax. It is named 'logic-less' because it lacks any explicit control flow statements like if and else. This makes it very different from Jade, which supports more complex logic and features.