Qué es pug y cómo aplicarlo

Para desarrollar un sitio web se pueden utilizar distintos procesos, herramientas y caminos, como apostar por un CMS como WordPress o PrestaShop, usar portales web comerciales enfocados a usuarios sin conocimientos de programación web, realizar un diseño y desarrollo completo por código o utilizar un motor de plantillas como Pug HTML.

A continuación, hablaremos sobre 

Pug, qué es, para qué se utiliza y qué beneficios aporta a la hora de utilizarlo para afrontar un proyecto web.

Qué es una página con pug

Pug se llamó en principio Jade, pero a lo largo del desarrollo de este proyecto tuvo que cambiar de nombre por motivos de licencia en el nombre de Jade. Cuando hablamos de Pug en diseño y desarrollo web estamos haciendo referencia a un motor de plantillas que tiene como objetivo facilitar la creación de código HTML. Al ser un motor, pug es capaz de procesar código HTML, estando construido con JavaScript lo que le permite trabajar con Node.js.

Por lo tanto, Pug es un template engine que facilita la creación de código en HTML, haciendo mucho más sencilla su lectura y comprensión, lo que repercute positivamente a la hora de realizar cambios o mantenimiento en un sitio web.

Pug no trabaja con etiquetas, sino con indentaciones como Python, por lo que el código se presenta en un formato jerárquico utilizando tabulaciones, haciéndolo mucho más amigable para la vista, y facilitando de forma notable su compresión.

A la hora de escribir código con Pug solo es necesario escribir el nombre de la etiqueta, añadir un espacio, y luego su contenido, por ejemplo: 

head

 title Título de la web

Este mismo código en HTML sería:

< head > 

< title >Título de la web

< /head > 

Podemos apreciar como es mucho más sencillo y fácil de leer el código HTML anterior utilizando Pug que haciéndolo directamente con HTML puro. 

En internet existen algunas páginas que permiten pasar código HTML to Pug, para poder verificar cómo es mucho más sencillo de leer cualquier sitio web desarrollado con este motor de plantillas de Node.js.

Cómo utilizar Pug

Para poder utilizar pug solo es necesario instalar un compilador y añadir una extensión a la herramienta que se utilice para codificar, que añada la sintaxis propia de Pug.

Cuando se compila el código escrito en Pug, se genera el código correspondiente en HTML de forma automática, por lo que las webs desarrolladas con este motor de plantillas son compatibles para cualquier navegador.

Gulp y Prepros son dos de los compiladores de Pug más populares que se utilizan actualmente.

Para qué sirve y sus ventajas

El principal objetivo de utilizar Pug es el de acelerar y simplificar la escritura de código HTML para crear una página web. Por este motivo, este motor de plantillas es el ideal para muchos proyectos, ofreciendo una serie de ventajas interesantes:

Acelera el tiempo de codificado en HTML

Una de las ventajas obvias de utilizar Pug para programar en HTML es el ahorro de tiempo. No será necesario estar abriendo y cerrando etiquetas todo el tiempo, lo que hará necesario mucho menos caracteres a la hora de codificar.

Crear código mucho más limpio

El código que se escribe en Pug es más “limpio” o claro que en HTML. Al no utilizar apertura y cierre de etiquetas y recurrir a la indentación, el código se presenta en un formato simple mucho más fácil para su lectura.

A la hora de leer un código escrito en Pug el proceso de comprensión de cada uno de sus elementos, así como de la estructura, es más fácil que con una codificación pura en HTML.

Es muy fácil de aprender

Aprender a utilizar Pug es muy sencillo, ya que solo es necesario conocer un par de normas que simplifican el HTML. Si se tienen conocimientos en HTML, el salto a programar con Pug es inmediato, pudiendo programar con este motor de plantillas sin ninguna dificultad.

Genera código HTML equivalente

Abordar un proyecto web con Pug no implica tener problemas de compatibilidad a la hora de publicar el sitio en internet. Esto es debido a que los compiladores de Pug crean de forma automática el correspondiente código HTML, es decir, convierten el código Pug en código puro HTML.

No tiene coste

Pug es un proyecto abierto por lo que se puede utilizar incluso para proyectos profesionales, sin tener que realizar un pago de licencia o uso.

El significado de Pug es el de un motor de plantillas enfocado en facilitar la codificación en HTML para conseguir reducir la dificultad y el tiempo de programación. Para los que quieran codificar una web en HTML y tener un mayor control sobre todos los detalles y elementos que la forman, Pug se presenta como una alternativa muy interesante debido a los muchos beneficios que ofrece.

Si quieres programar en HTML y quieres simplificar y acelerar el proceso, Pug es una de las mejores alternativas que puedes encontrar en el mercado.