![]() If you’re interested in finding out more, you can read the original name change announcement in this GitHub issue. ![]() And while some of it’s probably still quite valid, the fact that the name change coincided with a major version bump means that Pug’s syntax has several differences, deprecations, and removals compared to its predecessor. There’s still a lot of Jade-related material available online. The name change took effect with version 2.0. It’s also worth noting that Pug used to be called Jade until it was forced to change its name due to a trademark claim in 2015. You won’t need a template engine if you’re fetching a small amount of data from an API (in which case you can just use JavaScript’s native template strings), or if you’re making a small static site. You’re more likely to benefit from a template engine if your site or web application is data driven - such as a staff directory for administering employees, a web store that lists various products for users to buy, or a site with dynamic search functionality. It also facilitates a separation of concerns, keeping your application logic isolated from your display logic. ![]() This approach allows you to reuse static web page elements, while defining dynamic elements based on your data. This is illustrated by the following diagram.Ĭredit: Dreftymac, TempEngWeb016, CC BY-SA 3.0 The template engine will normally receive data from an external source, which it will inject into the template it’s compiling. What’s a Template Engine and Why Do I Need One?īefore we start looking at Pug, let’s take a second to understand the concepts involved.Ī template engine is a program which is responsible for compiling a template (that can be written using any one of a number of languages) into HTML. 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. We’ll start by installing it from npm, go over its basic syntax and then look at several examples of using JavaScript in Pug. In this guide, I’ll demonstrate how to get up and running with Pug. ![]() Pug makes it easy both to write reusable HTML, as well as to render data pulled from a database or API. It compiles to HTML and has a simplified syntax, which can make you more productive and your code more readable. Pug is a template engine for Node and for the browser. This can be a nightmare to debug and to maintain. 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. ![]() And while this is not the most difficult task, it can often feel a little boring or repetitive. Join now.Īs web designers or developers, we likely all have to write our fair share of HTML. SitePoint Premium gives you an entire collection of books covering developer essentials like Pug, Gulp, Git and more. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2023
Categories |