Overall concepts
The code you write in Pug gets converted to standard HTML documents. Your web browsers are only configured to understand HTML code, anything other than the standard will fail. That is why, HTML is the king (apart from the content, of course). So, once we are done with the templating framework, the only thing we get is the HTML. Any framework that you may have worked with, ranging from ASP.NET to PHP to Python etc., they all end up generating the HTML content, dynamically. Pug is no different in this aspect. Pug generates the content for your HTML web pages that you can, then, deliver to the customers.
Pug is a templating framework only. It is provided as a library for Node.js projects. You can install Pug by setting up a dependency to the Pug framework in your package.json file.
- "dependencies": {
- ...
- "pug": "^2.0.0-rc.4"
- ...
- }
Once you are done with this, just run the command to update the packages in the dependency store. You can do that like below.
$ npm update
Once everything is set up, you set the View Engine to Pug in the Express app variable.
- app.set("view engine", "pug");
After this, each time you call the res.render() function, your app will generate the HTML web page for that Pug document. This is not a Pug tutorial, merely a difference between the HTML and Pug or the benefits of one over the other.
Pros of Pug
First, let's discuss the Pug framework. Pug framework is a highly flexible framework which supports the generation of HTML content dynamically for almost any sort of data. You can write the Pug template to create -
- User Profiles
- List of store items
- Templated HTML documents
- Conditional blocks in the web pages
We can render and create the conditional blocks and iterative structures to produce the dynamic HTML web content instead of hardcoding everything.
Node.js runtime supports Pug templates by default ㅡ the template engine is Jade by default, however, Jade has been renamed to Pug. You can continue using Jade engine, but it is recommended to use Pug templates. Pug templated files are written as below.
- doctype html
- html
- head
- title My Page
- body
- h1 Heading
- p My paragraph here.
This will get translated to the following HTML content on demand.
- <html>
- <head>
- <title>My Page</title>
- </head>
- <body>
- <h1>Heading</h1>
- <p>My paragraph here.</p>
- </body>
- </html>
There are many different parsers that you can use to parse the HTML content to Pug, and vice versa. One of such parsers is html2jade.org. You can enter any sort of HTML content and get the Pug.
The major benefit of using Pug is that you can use variables in the template. Templates can let you control the generation of the HTML as well. You can, such as, add conditions to control when a page shows something, and when it doesn't.
- - var shouldShow = false;
- iv
- p= "I " + (shouldShow ? "will" : "will not") + " show anything."
This is one of the ways that you render the content, dynamically. The conditional blocks support, direct if...else blocks as well. Another major contribution that it has for your web documents, is the ability to iterate over the collections. I recently worked on a web app, where you could generate questions based on a collection. That collection would be used to iterate over the collection and write the results. That was only possible because you would be able to loop on a collection. In HTML, you cannot do that.
Pug also supports variables. In ASP.NET, you have model parameters passed. Those parameters are used to render the values on the screen. Such as the user profiles. In Pug, you can do the same. The downsides of Pug are, that you cannot use the same code on other platforms. You have to (and you must!) convert the code to HTML before migrating the code anywhere else; otherwise use a Pug generator everywhere.
This is one of the frustrations, because the Pug is entirely different code than HTML. In ASP.NET or PHP code, your HTML is still there and you script it. Whereas Pug is a different story in itself.
Pros of HTML
Now, after the Pug, we also need to understand what Pug can do for us. Pug is an excellent framework but HTML is the standard. The thing is, HTML can be utilized almost everywhere. HTML directly inherits the layout inflation from XML -- Extensible Markup Language. This enables HTML to be used across a different range of devices, platforms and even data sharing models.
HTML is supported for,
- Web development
- The home of HTML
- Any framework has to boil down to HTML
- Even pug gets down to the HTML
- Mobile development
- Android APIs support native HTML parsing (e.g. "<b>Hi</b>" is rendered as a Bold text)
- Xamarin framework by Microsoft also supports HTML rendering (with the Razor templates)
- HTML5 APIs provide a higher level of detail for the view generation
- data- and aria- APIs support accessibility as well
- Good control over the DOM
- HTML5 supports better DOM manipulation with JavaScript
- Extended/custom attributes and properties can be tied to the elements.
HTML provide a better way to develop the templates, but it comes with its own cons; so downsides must also be talked about. It is not dynamic. Thus, once you write your own name, you cannot change it.
- <h1>Hello, visitor</h1>
- <p>You are our visitor, we are glad to have you here.
This, HTML code will render the same text everywhere. You can use it on Android, web browser, extension plugins and anywhere that an HTML parser is supported. But the downside of this is that you cannot change the content, a "visitor" is always a "visitor". You cannot change that text to a different.
HTML can be extended for support of other platforms/namespaces in XML. You can include libraries and then render the controls directly on the page. In one of the recent projects, I used HTML templates for the email marketing programs. The templates generated for a sample web based page, were used to generate the entire email campaign. This let me write the beautiful email template, with every graphics rendered and the layout controlled in a much flexible and easy way.
