Introduction
In the holy wars of "Pug vs HTML", it is really confusing sometimes to realize which one of these to use. The same is true for SQL vs NoSQL, and the similar is true for Java vs Python. Then, people think why not talk about Pug vs HTML as well. HTML is always the perfect language to consider, however, for the case of Pug, this might be a bit of confusion. Some developers don't know Pug and some who know they know it as Jade framework.
I don't think I need to explain the background or usage of HTML language. Pug framework was historically known as the Jade framework. The framework is used with Node.js runtime to develop dynamic interfaces.
Moreover, HTML only has static files and every framework for web development supports a processed HTML generation; the same is true for PHP, and ASP.NET as well. Then likely, you are aware of the fact that HTML is sometimes embedded with some variables that iterate and expand for the content. Even this web page was generated all with variables. Nothing was written from scratch on the page. It was merely a concept of variables that allowed you to read the page and so on.
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 on 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 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 the 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 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 an 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 one.
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 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.
Rendering from other platforms
HTML is also used as the most widely used standard for Office documentations too. There are several libraries out there, that allow you to convert HTML to other formats, such as PDF or Word documents -- and vice versa.
This gives you an extreme extensibility over the control of visuals of your documentations.
If you are a data science expert, then you can use HTML there as well; Jupyter, a highly flexible and most widely used notebook framework, supports HTML generation natively.
Pug vs HTML
This shows how useful HTML can be, in most cases. Remember, the HTML here is generated after compilation and execution of the code. So HTML is still static, but just allows rendering of the documents in a web browser too.
Lastly, just the way Pug gets converted to HTML, you can covert HTML to the Pug framework as well as needed. Thus it gives you a really flexible way of managing your front-end in both ways. However, care must be taken that a generator/converter may remove many details from your HTML content.
What to choose?
Now, that I have shared everything that you need to know, what makes Pug the Pug and HTML the HTML, it is time to understand what is expected from each of these frameworks.
Pug is a templating framework used typically only with Node.js runtimes. If you are working with Node.js runtimes then Pug should be considered ㅡ along with other millions of processing templates. 😃 Pug is only one of such frameworks that you should consider, there would be other libraries that allow you to render HTML content dynamically.
As mentioned, the Pug is a different source code and has nothing for HTML (other than the embedded HTML source code), if you want to utilize Pug, make sure you are using the frameworks that support Pug natively.
HTML on the other hand is a universal language for writing the front-end UI in web technologies. HTML is a standard, and not just a standard but also it is implemented in other platforms, where you can (for instance) make mobile apps with Node.js runtime, and much more. In most cases, you will always end up with HTML pages for the front-end as it specifies somewhat of the standard. Pug, whereas, is a templating framework used to define the structure of a web document while programming with Node.js.
Iffi ShellsPosted Jul 20, 2020, 1:58 AM
Well , you explained us very well but i have some questions in my mind when i have html then why we need the pug btw otherside brower's only understand the html . if we have big websites then browers need times to convert the pug into htmk enviroment.
Hadshana KamalanathanPosted Jul 21, 2018, 11:07 PM
Thanks for sharing...
sudhanshu madhekarPosted Feb 22, 2018, 11:47 PM
Good one Iqra. it's very informative.
Sourabh SomaniPosted Nov 27, 2017, 1:22 AM
Well I Love ejs, hate pug (jade) - white space sensitivity is hell :)
Sourabh SomaniPosted Nov 27, 2017, 1:19 AM
Can you compare HTML and aspx Page? If in this article you compare like PUG vs (HandleBar or EJS or Mustache etc) then that was good.
Sourabh SomaniPosted Nov 27, 2017, 1:16 AM
Awesome, I don't know how much you know about Tempting engine, Why are you comparing HTML and PUG(Jade) but really if someone will read your article that person will get confuse.