#Jade Basics

Create an express project called JadeBasics. Add the following:

  • An h1 element with the test Jade Basics
  • A p element with the text Jade basics text.
  • An unordered list with three items in it: item01, item02, item03.

We will use Pug as a template engine. It allows us to:

Use a very readable shorthand for creating HTML Use JavaScript declared variables in our HTML so we can make a change in one place and see it propagated everywhere Divide our pages up into composable, reusable modules. For instance, on all our pages we can use a header and footer that we define only once in specific place. Use Mixins, which are reusable chunks of HTML that can be inserted anywhere in our pages. For instance, a specific kind of customized button. To understand all this takes time, but it is a very useful skill to develop.

There are other templates engines. Which one you use can be a matter of taste or a matter of fitting the right tool to the right use case. We will focus mostly on Pug because it is widely used and well written and well integrated into Express.

And yes, as Austin points out, Pug used to be called Jade. There was a copyright issue regarding the name, so we now call it pug. I didn’t like the new name at first, but it has grown on me. Certainly, it is short! There may be assignments where I talk about Jade, just remind me to update the assignment, and mentally change the word Jade to Pug.

Written with StackEdit.