intro to handlebars js

 

 

Learning Objectives

 

by the end of this lesson,
you will be able to:

- Describe server side rendering

- Name a benefit of template engines

- List 3 HBS helpers

Q:
How have we handled HTML so far?

 

THERE ARE BETTER WAYS.

Template Engines:

Handlebars

Jade

EJS

Mustache

Dust

 

What is
Server Side Rendering?

5

Server Side Rendering:
The server compiles a file,
ready for the browser to read.

Introducing: HBS
Minimal HTML templating!

The power of HBS:
Add logic to HTML

We can use variables, if-helpers, each-helpers.

 

Add logic: variables.

<h1> {{variableName}} </h1>

Add logic: if-helper.

<section>

    {{#if name}}

        <h1> Hello {{name}} </h1>

    {{else}}

        <h1> I don't know your name </h1>

    {{/if}}

</section>

Add logic: each-helper.

<section class= 'fav foods'>

    <ol>

        {{#each foods}}

            <li> {{this}} </li>

        {{/each}}

    </ol>

</section>

Pass Data: res.render

app.get('/', (req, res) => {

    res.render ('index', {

        name: 'Michelle',

        foods: [

            'pizza',

            'ice cream',

            'kale'

        ]

    })

})

Let's do this.

1. Build out a basic express server

 

2. Add a route for /
that sends the words `hello world`

 

 

Add HBS.

  • 1. npm install --save hbs
  •  
  • 2. Create views folder, and index.hbs file

 

2. Add hbs as view engine, pass data to render

 

  • 3. Have each express route render the handlebar
    files and
    send the result back to the browser

 

Learning Objectives

 

by the end of this lesson,
you will be able to:

- Describe server side rendering

- Name a benefit of template engines

- List 3 HBS helpers

Your Turn.

Create an express-HBS site that displays the following data about yourself!
Add an if statement.

 

const favorites = {

    name: ' ',

    color: ' ',

    season: ' ',

    foods: [' ', ' ']

}

64-intro-hbs

By Michelle Bergquist

64-intro-hbs

  • 127
Loading comments...

More from Michelle Bergquist