Templating

Obviously we don't just send text to the client, we usually send back HTML in standard web applications and deal with dynamic data in our applications as well.

Template engines offer us the ability to bind static HTML to dynamic data and output the result of the two as our HTML responses to serve our HTTP requests.

There are many template engines available:

• Jade
• Handlebars
• Dust
• EJS
• more...

Template Engines

"Template engines offer us the ability to bind static HTML to dynamic data and output the result of the two as our HTML responses to serve our HTTP requests."

All template engines have the same purpose of allowing us to pass data to our template engine to dynamically render static output

The main difference between them is more or less syntax of how we write our templates.

In Express, regardless of the template engine used the syntax to call them is the same using the res.render() function.

res.render()

As noted before, the res object is the object we use to send an HTTP response back to the client based on the HTTP request our application received.

//When we call the render() function we pass it an object of data values to bind to output
app.get('/', function (req, res) {
  res.render('index', { userName: 'Jason', email: 'jaywon@dark.net'});
});

Which would be passed to a template like:

//index.jade

h1 
  Hello #{username}
div
  Your email is: #{email}

//index.hbs

<h1>
    Hello {{username}}
</h1>
<div>
  Your email is: {{email}}
</div>

Jade (.jade)

Handlebars (.hbs)

Both templates would render the exact same HTML output

Adding Template Engine

To tell Express which template engine we will be using we need to:

1. Install the NPM template module
2. Require it in our app.js (or main server file)
3. Tell Express the template engine we will use
4. Tell Express where our template files are located

$ npm install --save jade

//Tell Express which Template engine we are using by NPM module name
app.set('view engine', 'jade');
//Tell Express where our template files live
app.set('views', './views');

NOTE: Express will automatically append the file extension when using res.render() but needs to know where to look.

Attributes

This is how you add attributes

input(type="text" placeholder="insert text")

becomes...

<input type="text" placeholder="insert text">

Classes and IDs

Add classes with CSS-style syntax

Classes and IDs

If you're just creating a div with classes and/or IDs, you can omit the `div` part of the code

Template inheritance

Using the keywords block and extends can help keep our templates dry

Layout file

html
  head
    link(href="/path/to/client/side.js")
  body
    include ./includes/header.jade
    block content
    include ./includes/footer.jade
    

Include

html
  head
    link(href="/path/to/client/side.js")
  body
    include ./includes/header.jade
    block content
    include ./includes/footer.jade
    

Allows you to inject Jade code. This is useful for code that needs to be reused

h1 Welcome to Fine Leather Goods LLC.
ul
  li
    a(href="/") Home
  li
    a(href="/about") About
  li
    a(href="/contact") Contact
  li
    a(href="/cart") Cart
    

layout.jade

./includes/header.jade

Extends

Once you have a layout defined you can extend it.

Interpolation

to introduce (something additional or extraneous)

between other things or parts; 

interject; interpose; intercalate.

Interpolation

  - var leatherGoods = ["Purse", "Wallets", "Shoes", "Luggage"]
  ul
    each goodie in leatherGoods
      li= goodie // this line isn't very helpful

  - var leatherGoods = ["Purse", "Wallets", "Shoes", "Luggage"]
  ul
    each goodie in leatherGoods
      li
        a(href="/products/#{goodie}") Check out our amazing #{goodie}!

Code

Want basic Javascript in your jade?

Code

    - var user = { cart: ["Pappa's New Bag"] }
    - var authorised = false
    #user
      if user.cart
        h2 Items in your cart
        ul
          for item in user.cart
            li= item

      if authorised
        h2 Buy Now
        a.description(href="/checkout") checkout now!
      else
        h2 Create an account?
        p.description.
          you must be logged in to purchase!

Conditionals?