Day 12: Views - Website Templates with Pug

Reminders for Tony

Put on mic
Open Zoom chat
Record! Anyone else?

Housekeeping

Assignment 2 extensions
Announcing Assignment 3

Topics Covered

Goal for the day

By the end of the day, you should have your static HTML pages converted to Pug templates located in a /views directory.

Topic 1: The Big Picture

See MVC in the MDN glossary

MVC (Model-View-Controller) is a pattern in software design commonly used to implement user interfaces, data, and controlling logic. It emphasizes a separation between the software’s business logic and display. This “separation of concerns” provides for a better division of labor and improved maintenance. Some other design patterns are based on MVC, such as MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), and MVW (Model-View-Whatever).

The three parts of the MVC software-design pattern can be described as follows:

Model: Manages data and business logic.
View: Handles layout and display.
Controller: Routes commands to the model and view parts.

Activity objectives: Pug project init

Copy the files from express-static in the backend sample code.
Install the following NPM modules:
- $ npm install express (probably already installed)
- $ npm install pug
Create a views folder in your project root.

Topic 2: Pug overview

We will be converting the individual animal files in the backend/1-animals-static in the sample-code repository.

Mid-day Huddle

who needs help?
any pivots?
any show-and-tell?

[lunch]

Activity objectives: Convert your 3-page website to Pug templates

Create and save a index.pug file in your views directory.
Using pug syntax, duplicate (or improve) the HTML structure of your index.html static file.
Create an endpoint handler for your home page and render your new Pug view.
Repeat this process for the other pages of your site.