Michelle Bergquist
Librarian gone Web Dev.
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
Supplemental deck for a galvanize lesson
