When the name Pug comes to mind, you will remember the breed of Pug dogs, which originated in China. But what does it do in the world of programmers? Yes, today we want to talk about what a pug is. So stay tuned.
As you know, HTML is the first language that most developers go to to learn, and after passing the HTML CSS training, they enter the JavaScript training field in the next step.
CSS and JavaScript have various tools to facilitate the development process, but HTML did not have these tools for many years, but today this has changed with formatting systems.
Now what was the problem with using plain HTML?
Because HTML is a markup language and does not have the capabilities of a programming language, defining them is usually done through a set of tags. But there are some things that limit HTML, such as:
- Using dynamic data in HTML is not easy.
- If you want to place multiple elements repeatedly, you have no shortcuts, you have to do it yourself.
- User in HTML does not have the ability to create new types of tags.
- Although highly readable, writing HTML can sometimes take a long time.
Of course, solving all these problems is impossible, before the advent of the formatting system; Because these systems make it possible for you to create HTML with different controllers. This will make the code generate faster and add new features to the HTML development process. One of them is pug, which we will define in more detail below.
What is a template engine and why do they use it?
Before reading about Pug, let’s talk a little about Template Engine and find out what this technology does. Template Engine is simply a program that compiles templates written in different languages (including a wide range of languages) into HTML. In other words, the Template Engine receives data from an external source and injects it into the intended Template. The image below will help you better understand.
In its simplest terms, it is a program that covers a wide range of languages and compiles templates written in different languages into html. In fact, they are a bunch of fast-paced web template engines that separate the logic and appearance of the program, just like the MVC model. This model is responsible for displaying page elements related to the View and the program logic is managed by the Controller. The task of Template Engines is to load the values required for the View.
The Template Engine separates the logic and appearance of the program and places them in an isolated environment. If you are a programmer, you will probably remember famous models like MVC when you hear this sentence, and you know that in MVC model, the way of displaying page elements is related to View and the program logic is managed by Controller. The function of the Template Engine is to load the required values of the View. Let’s look at this with an example:
What is a pug?
To get started with pug, you must have Node.js installed on your system. Because Pug is a Template Engine or template engine for Node and browser that integrates well with HTML code and has a simple and fluent syntax. It can be said that it is easy to learn and makes your code readable and understandable to others, and you are allowed to display the data you have taken from a database or API well.
What is pug history
Template Engine initially started out as Jade, but was forced to rename it Pug in 2015 due to copyright issues and trademark infringement; Because it was both short and well-remembered, and from the developers’ point of view, the breed of dogs was funny. By renaming version 2 of this template, the logo and all repositories were changing.
Conclusion
Well friends we said what is a pug. Now we want to tell you some tips about it:
First, this template is very easy to use. Just install the pug with a simple command and add it to your project. Now it’s time to set up the View Engine, and finally you need a file with the pug extension. create.
The next thing is that the pug significantly reduces the size of the code, and because of the high readability of the code in the template of the pug engine, the code looks more like attractive paragraphs that are easy to read. Tags do not need to be closed in the pug, and most importantly, JavaScript and Pug are well compatible. This means you can easily put your JavaScript code inside the pug.
You should not forget that in pug you can not copy html code from anywhere you want and add it to your project. You must first turn them into a pug to be usable. Also, correct coding in Pug is very important. A small mistake in the structure, indentation or spacing of the code may make you regret it.
I hope you like this article, friends, and if you have experience working on it, share it with us in the comments section.