slider-image

Intro

  • Created in 2012 by Forbes Lindesay
  • Renamed in 2015 from "Jade" to "Pug"
  • PugJS is a HTML templating engine
  • Designed to compile templates server-side in Node.js

Features

  • Clean code
  • Variables
  • Mixins
  • Javascript inlining
  • Include, Inheritance & Extends
  • Iteration (loop)
  • Conditions and switches
  • Escaped / Unescaped interpolation
  • Etc...

Pros

  • Elegant HTML
  • HTML code is valid
  • Great with NodeJS
  • Usage with Express server
  • Open source
  • Very short and easy syntax
  • Structured with indentation
  • Built in support for Markdown, CoffeeScript and others
  • Etc...

Cons

  • Not everyone likes significant white space
  • Somewhat high learning curve
  • JavaScript inlining can get cumbersome for more than one line
  • Requires a task-runner on advanced projects
  • Aaaand it's a tough job to use a mixin as an attribute for another mixin >.<

Installation & Getting started

To install 
pug
CLI globally simply run 
npm install -g pug-cli
To watch and compile a Pug file use 
pug -w ./ -o ./html -P
in the terminal
To explain the flags above 
-w
stands for "Watch", 
-o
means output to ->, and 
-P
stands for "Pretty", compile pretty HTML output

Syntax

For example (in Pug): 
p Text here
p.my-text Text here
<p>Yes!, HTML code is valid</p>
Generates (in HTML): 
<p>Text here</p>
<p class="my-text">Text here</p>
<p>Yes!, HTML code is valid</p>

Comments

For example (in Pug): 
// THIS COMMENT IS PUBLIC (VISIBLE AS HTML COMMENT)
div.container

//- THIS COMMENT IS PRIVATE (NOT VISIBLE IN HTML)
div.container
Generates (in HTML): 
<!--THIS COMMENT IS PUBLIC (VISIBLE AS HTML COMMENT)-->
<div class="container"></div>
<div class="container"></div>

Attributes

To give HTML attribute to a Pug tag you simply write the tags next to the tag between parantheses
For example (in Pug): 
div.container
    p(style="color: red;") I'm red
    p(style={"color": "red"}, class="test") I'm red
Generates (in HTML): 
<div class="container">
    <p style="color: red;">I'm red</p>
    <p style="color: red;" class="test">I'm red</p>
</div>

Include

Including files in Pug is similar to the other languages include
For example (in Pug): 
//- another-file.pug
p I'm from another pug template

//- index.pug
div
    include ./another-file.pug
    p I'm from index template
Generates (in HTML): 
<div>
    <p>I'm from another pug template</p>
    <p>I'm from index template</p>
</div>

JavaScript Inlining

You can write inline JavaScript into Pug, such as functions, variables and etc...
Note: Must write a dash before writing the inline code as shown in the example below
For example (in Pug): 
- let myVar = "Text from JavaScript variable";
p= myVar
Generates (in HTML): 
<p>Text from JavaScript variable</p>

Iteration

You can write inline JavaScript into Pug, such as functions, variables and etc...
For example (in Pug): 
- const myTable = ["First", "Second", "Third"]

- for (let i = 0; i < myTable.length; i++)
    p= myTable[i]

each item in myTable
    p= `${item} from each`
Generates (in HTML): 
<p>First</p>
<p>Second</p>
<p>Third</p>

<p>First from each</p>
<p>Second from each</p>
<p>Third from each</p>

Interpolation

You can write inline JavaScript into Pug, such as functions, variables and etc...
For example (in Pug): 
- let myString = "string with <em>Italic</em> font"

//- Escaped
p #{myString}

//- Unescaped
p !{myString}

//- Tag
p !{myString} #[b Bold text]
Generates (in HTML): 
<p>string with &lt;em&gt;Italic&lt;/em&gt; font</p>
<p>string with <em>Italic</em> font</p>
<p>string with <em>Italic</em> font <b>Bold text</b></p>

Mixins

You can write mixins to use later in your Pug file, as shown below
For example (in Pug): 
mixin generateLink(hyperRef, text, className)
    a(href=hyperRef, class=className) !{text}

+generateLink("#", "Link Text", "link")
Generates (in HTML): 
<a href="#" class="link">Link Text</a>

Inhertiance

You can extend Pug files and pass inheritances from template to another

Note: Declaration of template inheritance ("extends") should be the first thing in the file and there can only be one extends statement per file.
For example (in Pug): 
//- father.pug
p Text from the father

//- child.pug (compiled)
extends ./father.pug
Generates (in HTML): 
<p>Text from the father</p>

Block

You can extend Pug files and pass inheritances from template to another
For example (in Pug): 
//- father.pug
p Text from the father
    block mySon
        span He's 9 years-old

//- child.pug (compiled)
extends ./father.pug
    block mySon
        span No father, I just celebrated my 10 years yesternight
Generates (in HTML): 
<p> Text from the father
    <span>No father, I just celebrated my 10 years yesternight</span>
</p>

Case

The case statement is a shorthand for JavaScript’s switch statement
For example (in Pug): 
- const friends = 10
case friends
    when 0
        p you have no friends
    when 1
        p you have a friend
    default
        p you have #{friends} friends
Generates (in HTML): 
<p>you have 10 friends</p>

Sources

https://pugjs.org
https://devhints.io/pug
https://stackshare.io/pug
https://developer.ibm.com/node/2014/11/11/compare-javascript-templates-jade-mustache-dust/

Thanks for listening
Questions?

1/19