Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Express Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

What is Template Rendering?

2:35 with Andrew Chalkley and Joel Kraft

Here's an introduction to template rendering.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    The majority of the HTML you serve from an app will never change. 0:04
    If a user is viewing photos in a gallery for example, the photos change. 0:09
    But the rest of the page stays the same. 0:14
    There will be some small differences, like a different caption, or 0:17
    some content specifically related to that photo. 0:21
    But the basic structure and most of the HTML will be the same. 0:24
    Most web application frameworks handles this situation using what are called 0:29
    templates. 0:33
    A template provides the basic HTML for your app and serves it to the users. 0:35
    Templates also lets you vary the output to provide customized responses. 0:40
    For example, displaying different usernames. 0:45
    Let's take a look at how they work. 0:48
    When a request comes in to a given route, 0:51
    the server decides how to handle the request. 0:54
    We've seen the most basic things you can do with the express response 0:57
    objects already. 1:01
    For instance, 1:01
    using the res.send method to send the string I love Treehouse to the browser. 1:02
    A server can send back a response containing HTML derived from a template. 1:08
    Templates are a special type of file that have their own syntax and language. 1:14
    They live on the server, and act as some kind of form letter for your HTML. 1:19
    So, it's like an HTML page with holes or blanks in it. 1:25
    You can fill in those blanks with custom content by adding 1:29
    variables to the template. 1:32
    The result is a full HTML page sent to the client. 1:34
    The process is called rendering the template. 1:38
    Because rendering a template results in what the viewer sees on their screens, 1:42
    templates are often called views. 1:46
    Most templates in languages resemble HTML. 1:50
    The most popular template in languages for JavaScript developers are, Handlebars, 1:53
    EJS, which standards for embedded JavaScript, and Pug. 1:58
    Pug used to be called Jade. 2:03
    If you've heard of Jade, Pug is the exact same thing with a different name. 2:05
    There are several others. 2:10
    And I've put some useful links in the teacher's notes. 2:12
    You can use basically any templating engine with Express, but 2:15
    Pug is by far the most popular. 2:20
    Template engines in express are very easy to set up and use. 2:22
    Pug syntax has a slightly steeper learning curve than 2:27
    some of the other templating languages. 2:30
    But don't worry, I'll explain the most important parts. 2:32

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up