Jade

TotT 2014

Jade

"Jade is designed primarily for server side templating in node.js ... It is only intended to produce XML like documents (HTML, RSS etc.)"
- jade-lang.com

Use Cases

• HTML Shorthand
• Templating

Example: Static HTML

Example: Embedded JS

Example: Mixins

Example: Extends

// in layout.jade
doctype html
html
  head
    block head
    link(rel="stylesheet", href="css/common.css")
  body
    block body
    script(src="js/common.js")
    block postscript
    

Example: Extends

// in login.jade
extends layout.jade

block head
  title Login
  link(rel="stylesheet", href="css/login.css")
  
block body
  form.login
    input#username
    input#password
    button(type="submit") Login
    
block postscript
  script(src="js/login.js")
  

A Word of Caution

Like everything else, templates have their place.

Don't write your whole app in a template!

Demo: Express Jade Madlibs

Views, context, POST

Demo: Express Jade Madlibs

Review

• Static markup
• Loops and conditions
• Mixins
• Extensions
• Jade views in Express