Michael
Well written. I was looking more for a reference guide where this was more for a person that had never heard of PUG.
Details
In this guide, we’ll demonstrate how to get up and running with Pug, a template engine for Node and for the browser. We’ll start by installing it, go over its basic syntax and then look at several examples of using JavaScript in Pug. Finally, we’ll explore a couple of Pug’s more advanced features.
Description
As web designers or developers, we likely all have to write our fair share of HTML. And while this is not the most difficult task, it can often feel a little boring or repetitive. HTML is also static, which means that if you want to display dynamic data (fetched from an API, for example), you invariably end up with a mishmash of HTML stings inside JavaScript. This can be a nightmare to debug and to maintain.
This is where Pug comes in. Pug is a template engine for Node and for the browser. It compiles to HTML and has a simplified syntax, which can make you more productive and your code more readable. Pug makes it easy both to write reusable HTML, as well as to render data pulled from a database or API.
In this guide, I’ll demonstrate how to get up and running with Pug. We’ll start by installing it from npm, go over its basic syntax and then look at several examples of using JavaScript in Pug. Finally, we’ll explore a couple of Pug’s more advanced features by building a simple Node/Express project which uses Pug as its template engine.
Creator
James Hibbard
James is a regular contributor to SitePoint, most notably on topics around JavaScript. He's also the technical editor for various books (e.g. JavaScript: _Novice to Ninja_ and _Jump Start Vue.js_). He also works for his local university as a network admin / web dev where he spends a fair bit of my time working on Rails apps.
