Hi Brad,
I started looking into doing web development and have been hearing about Pug; what the heck is that?

Pug is a templating language to simplify the creation of HTML documents.

What we mean by templating or HTML Templating is the ability to create templates for HTML documents where when we use them, that is when we render them, place holders will be substituted with real data. For example I might have a static HTML document but depending on the URL used or parameters provided I might want a different title heading. I can in my template define a header tag but the contents of the tag will be a place holder that is substituted with different text at render time depending on the provided parameters or URL path.

If you’ve never written HTML before or hate writing HTML then Pug looks to be a good alternative as its not HTML but a meta language which will generate HTML for you.

The Pug syntax and keywords map directly to HTML so if you use the Pug keyword h1 (Example: h1 Hello) Pug will generate a h1 tag that looks like this: <h1>Hello</h1>. Similarly paragraphs are p, un-ordered lists are ul and anchors are a; basically Pug drops the angle brackets and closing tags from HTML to simplify the syntax to reduce typing and improve readability.

Pug template files are saved with the file extension .pug and will be processed into HTML files when rendered.

Here is an example of a Pug template:

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

extends layout

block content
  h1= title
  p Welcome to #{title}

In the layout.pug file we define an HTML document with a header and body. The header will define a title tag where the value is a place holder variable called title. At render time its expected that a parameter hash will be passed in with one parameter being the title argument. We also link to a style sheet setting the rel and href attributes. Lastly we define a body but instead of putting content in the body we define a block called content, this block is a place holder for down stream templates to override. If you are familiar with C++, C#, or Java think of this statement as defining a pure virtual method. We are saying that the body will contain something but we’re relaying on the template which will extend layout to provide what that something is.

In the index.pug file we extend the layout.pug file so index.pug will use everything defined in layout.pug when generating the final HTML document. What index.pug adds is a header tag and paragraph tag to the body of the document by implementing the content block. These two tags also expect a title argument to be passed in when we generate the HTML. The h1 tag is set to the value of title argument where the paragraph tag concatenates a string literal, Welcome to, with the value of the title argument.

Because Pug templates can be extended we can cut down on duplicate code and ensure consistency between pages. This is not unlike Master Pages in ASP.net.

The minimalist syntax of Pug compared to HTML some would argue makes writing and reading Pug much easier for humans then HTML.

A thing to point out here, since all the brackets and closing tags have been removed, that is to define a h1 tag I just have to type h1= hello Pug is space delimited like Python or YAML. To put an anchor within a list item you need to ensure that you properly indent your lines:

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

Similarly multi-lined paragraphs need to be handled to ensure that all the lines get put into the same <p></p> tag.

p This is a one line example.
p
  | This is a multi-lined
  | example of a paragraph
  | using Pug.

There are however alternative syntax for the different keywords in Pug to simplify this type of space sensitivity.

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

p This is a one line example.
p.
  This is a multi-lined
  example of a paragraph
  using Pug.

Variables and Control Flow

Pug can also be used when the HTML document being generated is more dynamic and different elements need to be generated based on inputs. Pug template documents can include variables and these variables can be used by the different keywords.

- var foo = "hello world"
h1= foo

The above would render <h1>hello world</h1>

You can also check variable values with if statements and switch-case statements.

if user == "Bill"
  h1 Hello William
else
  h1 Hello #{user}

Pug also has For-each loops so you can generate HTML dynamically when passed in a collection of data, such as generating a list:

ul
  for book in books //books is a json array: {"books": ["A", "B", "C"]}
    li= book
  else
    li Sorry, no books in your library.

Needless to say Pug as a language has a lot of functionality to allow you to create dynamic HTML documents.

Although the condensed syntax is nicer to read, call me old school I’ve just always preferred to write the HTML myself and typing has never been my performance bottle neck so I’d admit I don’t use Pug myself but it is rather common so its good to know about it for when you do come across it in the field.

I recommend checking out Pug’s website at pugjs.org for an in-depth reference to the Pug meta language as the documentation is quite good.

So that is what the heck Pug is, a meta language to simplify the generation of HTML documents used in JavaScript projects such as those who use Express and Node.js. I hope that helps, if you have any questions feel free to leave them below and I’ll try to answer them as time permits.

Until next time think imaginatively and design creatively