Cómo crear mejores plantillas angulares con Pug

Como desarrollador, aprecio cómo se estructuran las aplicaciones de Angular y las muchas opciones que la CLI de Angular pone a disposición para configurarlas. Los componentes proporcionan un medio sorprendente para estructurar vistas, facilitar la reutilización de código, la interpolación, el enlace de datos y otra lógica comercial para las vistas.

Angular CLI admite varias opciones de preprocesador CSS integradas para diseñar componentes como Sass/SCSS, LESS y Stylus. Sin embargo, cuando se trata de plantillas, solo hay dos opciones disponibles: HTML y SVG. Esto es a pesar de que existen muchas opciones más eficientes, como Pug, Slim, HAML, entre otras.

En este artículo, cubriré cómo usted, como desarrollador de Angular, puede usar Pug para escribir mejores plantillas de manera más eficiente. Aprenderá cómo instalar Pug en sus aplicaciones Angular y cómo hacer la transición de las aplicaciones existentes que usan HTML para usar Pug.

Pug (anteriormente conocido como Jade) es un motor de plantillas. Esto significa que es una herramienta que genera documentos a partir de plantillas que integran algunos datos específicos. En este caso, Pug se usa para escribir plantillas que se compilan en funciones que toman datos y representan documentos HTML.

Además de proporcionar una forma más simplificada de escribir plantillas , ofrece una serie de funciones valiosas que van más allá de la simple escritura de plantillas como mixins que facilitan la reutilización del código, permiten la incrustación de código JavaScript, proporcionan iteradores, condicionales, etc.

Aunque HTML es universalmente utilizado por muchos y funciona adecuadamente en plantillas, no es SECO y puede ser bastante difícil de leer, escribir y mantener, especialmente con plantillas de componentes más grandes. Ahí es donde entra Pug. Con Pug, sus plantillas se vuelven más fáciles de escribir y leer y puede ampliar la funcionalidad de su plantilla como una ventaja adicional . En el resto de este artículo, lo explicaré cómo usar Pug en sus plantillas de componentes Angular.

Por qué deberías usar Pug

HTML es fundamentalmente repetitivo. Para la mayoría de los elementos, debe tener una etiqueta de apertura y cierre que no esté SECA. No solo tienes que escribir más con HTML, sino que también tienes que leer más. Con Pug, no hay paréntesis angulares de apertura y cierre ni etiquetas de cierre. Por lo tanto, está escribiendo y leyendo mucho menos código.

Por ejemplo, aquí hay una tabla HTML:

 <table> <thead> <tr> <th>Country</th> <th>Capital</th> <th>Population</th> <th>Currency</th> </tr> </thead> <tbody> <tr> <td>Canada</td> <td>Ottawa</td> <td>37.59 million</td> <td>Canadian Dollar</td> </tr> <tr> <td>South Africa</td> <td>Cape Town, Pretoria, Bloemfontein</td> <td>57.78 million</td> <td>South African Rand</td> </tr> <tr> <td>United Kingdom</td> <td>London</td> <td>66.65 million</td> <td>Pound Sterling</td> </tr> </tbody> </table>

Así es como se ve esa misma mesa en Pug:

 table thead tr th Country th Capital(s) th Population th Currency tbody tr td Canada td Ottawa td 37.59 million td Canadian Dollar tr td South Africa td Cape Town, Pretoria, Bloemfontein td 57.78 million td South African Rand tr td United Kingdom td London td 66.65 million td Pound Sterling

Al comparar las dos versiones de la tabla, Pug se ve mucho más limpio que HTML y tiene una mejor legibilidad del código. Aunque insignificante en este pequeño ejemplo, escribe siete líneas menos en la tabla Pug que en la tabla HTML. A medida que crea más plantillas con el tiempo para un proyecto, termina escribiendo menos código acumulativamente con Pug .

Más allá de la funcionalidad proporcionada por el lenguaje de plantillas Angular, Pug amplía lo que puede lograr en sus plantillas. Con características (como mixins, interpolación de texto y atributos, condicionales, iteradores, etc.), puede usar Pug para resolver problemas de manera más simple en contraste con escribir componentes separados completos o importar dependencias y configurar directivas para cumplir con un requisito.

Algunas características de Pug

Pug ofrece una amplia gama de funciones, pero las funciones que puede usar dependen de cómo integre Pug en su proyecto. Aquí hay algunas características que pueden resultarle útiles.

1. Agregar archivos Pug externos a una plantilla usando include .
   
   Digamos, por ejemplo, que le gustaría tener una plantilla más sucinta pero no siente la necesidad de crear componentes adicionales. Puede sacar secciones de una plantilla y colocarlas en plantillas parciales y luego incluirlas nuevamente en la plantilla original.
   
   Por ejemplo, en este componente de la página de inicio, las secciones 'Acerca de' y 'Servicios' están en archivos externos y se incluyen en el componente de la página de inicio.
   

    //- home.component.pug h1 Leone and Sons h2 Photography Studio include partials/about.partial.pug include partials/services.partial.pug

    //- about.partial.pug h2 About our business p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    //- services.partial.pug h2 Services we offer P Our services include: ul li Headshots li Corporate Event Photography

   

2. Reutilización de bloques de código mediante mixins .
   
   Por ejemplo, supongamos que desea reutilizar un bloque de código para crear algunos botones. Reutilizarías ese bloque de código usando un mixin.
   

    mixin menu-button(text, action) button.btn.btn-sm.m-1('(click)'=action)&attributes(attributes)= text +menu-button('Save', 'saveItem()')(class="btn-outline-success") +menu-button('Update', 'updateItem()')(class="btn-outline-primary") +menu-button('Delete', 'deleteItem()')(class="btn-outline-danger") 

   

3. Los condicionales facilitan la visualización de bloques de código y comentarios en función de si se cumple o no una condición.
   

    - var day = (new Date()).getDay() if day == 0 p We're closed on Sundays else if day == 6 p We're open from 9AM to 1PM else p We're open from 9AM to 5PM

   

4. Los iteradores como each y while proporcionan funcionalidad de iteración .
   

    ul each item in ['Eggs', 'Milk', 'Cheese'] li= item ul while n < 5 li= n++ + ' bottles of milk on the wall'

   

   

5. JavaScript en línea se puede escribir en plantillas Pug como se demuestra en los ejemplos anteriores.
6. La interpolación es posible y se extiende a etiquetas y atributos.
   

    - var name = 'Charles' p Hi! I'm #{name}. p I'm a #[strong web developer]. a(href='https://about.me/${name}') Get to Know Me

   

7. Los filtros permiten el uso de otros idiomas en las plantillas de Pug .
   
   Por ejemplo, puede usar Markdown en sus plantillas Pug después de instalar un módulo JSTransformer Markdown.
   

    :markdown-it # Charles the Web Developer ![Image of Charles](https://charles.com/profile.png) ## About Charles has been a web developer for 20 years at **Charles and Co Consulting.** 

   

Estas son solo algunas de las características que ofrece Pug. Puede encontrar una lista más amplia de funciones en la documentación de Pug.

Cómo usar Pug en una aplicación angular

Para las aplicaciones nuevas y preexistentes que usan Angular CLI 6 y superior, deberá instalar ng-cli-pug-loader . Es un cargador CLI angular para plantillas Pug.

Para nuevos componentes y proyectos

1. Instale ng-cli-pug-loader .
   

    ng add ng-cli-pug-loader

2. Genera tu componente según tus preferencias.
   
   Por ejemplo, digamos que estamos generando un componente de página de inicio:
   

    ng gc home --style css -m app

3. Cambie la extensión del archivo HTML, .html a una extensión Pug, .pug . Dado que el archivo generado inicialmente contiene HTML, puede optar por eliminar su contenido y comenzar de nuevo con Pug. Sin embargo, HTML aún puede funcionar en las plantillas de Pug, por lo que puede dejarlo como está.
4. Cambie la extensión de la plantilla a .pug en el decorador de componentes.
   

    @Component({ selector: 'app-component', templateUrl: './home.component.pug', styles: ['./home.component.css'] })

Para componentes y proyectos existentes

1. Instale ng-cli-pug-loader .
   

    ng add ng-cli-pug-loader

2. Instale la herramienta CLI html2pug. Esta herramienta te ayudará a convertir tus plantillas HTML a Pug.
   

    npm install -g html2pug

3. Para convertir un archivo HTML a Pug, ejecute:
   

    html2pug -f -c < [HTML file path] > [Pug file path]

   Dado que estamos trabajando con plantillas HTML y no con archivos HTML completos, debemos pasar la -f para indicar a html2pug que no debe envolver las plantillas que genera en html y etiquetas de body . El indicador -c le permite html2pug saber que los atributos de los elementos deben separarse con comas durante la conversión. Cubriré por qué esto es importante a continuación.
4. Cambie la extensión de la plantilla a .pug en el decorador de componentes como se describe en la sección Para nuevos componentes y proyectos .
5. Ejecute el servidor para verificar que no haya problemas con la forma en que se representa la plantilla Pug.
   
   Si hay problemas, use la plantilla HTML como referencia para averiguar qué podría haber causado el problema. Esto a veces podría ser un problema de sangría o un atributo sin comillas, aunque es raro. Una vez que esté satisfecho con la representación de la plantilla Pug, elimine el archivo HTML.

Cosas a tener en cuenta al migrar de HTML a plantillas Pug

No podrá usar plantillas Pug en línea con ng-cli-pug-loader . Esto solo representa archivos Pug y no representa plantillas en línea definidas en decoradores de componentes. Por lo tanto, todas las plantillas existentes deben ser archivos externos. Si tiene plantillas HTML en línea, cree archivos HTML externos para ellas y conviértalas a Pug usando html2pug .

Una vez convertido, es posible que deba corregir las plantillas que usan directivas de enlace y atributo. ng-cli-pug-loader requiere que los nombres de atributos enlazados en Angular estén entre comillas simples o dobles o separados por comas. La forma más fácil de hacerlo sería usar el indicador -c con html2pug . Sin embargo, esto solo soluciona los problemas con elementos que tienen múltiples atributos. Para elementos con atributos únicos, use comillas.

Gran parte de la configuración descrita aquí se puede automatizar mediante un ejecutor de tareas o un script o un esquema angular personalizado para conversiones a gran escala si elige crear uno. Si tiene algunas plantillas y desea realizar una conversión incremental, sería mejor convertir un archivo a la vez.

Sintaxis del lenguaje de plantilla angular en plantillas Pug

En su mayor parte, la sintaxis del lenguaje de plantilla Angular permanece sin cambios en una plantilla Pug, sin embargo, cuando se trata de enlaces y algunas directivas (como se describe anteriormente), debe usar comillas y comas desde () , [] y [()] interfiere con la compilación de plantillas Pug. Aquí están algunos ejemplos:

 //- [src], an attribute binding and [style.border], a style binding are separated using a comma. Use this approach when you have multiple attributes for the element, where one or more is using binding. img([src]='itemImageUrl', [style.border]='imageBorder') //- (click), an event binding needs to be enclosed in either single or double quotes. Use this approach for elements with just one attribute. button('(click)'='onSave($event)') Save

Las directivas de atributos como ngClass , ngStyle y ngModel se deben poner entre comillas. Las directivas estructurales como *ngIf , *ngFor , *ngSwitchCase y *ngSwitchDefault también deben ponerse entre comillas o usarse con comas. Las variables de referencia de la plantilla (p. ej., #var ) no interfieren con la compilación de la plantilla Pug y, por lo tanto, no necesitan comillas ni comas. Las expresiones de plantilla entre {{ }} no se ven afectadas.

Inconvenientes y compensaciones de usar Pug en plantillas angulares

Aunque Pug es conveniente y mejora los flujos de trabajo, existen algunos inconvenientes al usarlo y algunas compensaciones que deben tenerse en cuenta al usar ng-cli-pug-loader .

Los archivos no se pueden incluir en plantillas que usan include a menos que terminen en .partial.pug o .include.pug o se llamen mixins.pug . Además de esto, la herencia de plantillas no funciona con ng-cli-pug-loader y, como resultado, no es posible usar bloques, anteponer y agregar código Pug a pesar de que esta es una característica útil de Pug.

Los archivos Pug deben crearse manualmente, ya que Angular CLI solo genera componentes con plantillas HTML. Deberá eliminar el archivo HTML generado y crear un archivo Pug o simplemente cambiar la extensión del archivo HTML y luego cambiar templateUrl en el decorador de componentes. Aunque esto se puede automatizar mediante un script, un esquema o un ejecutor de tareas, debe implementar la solución.

En proyectos Angular preexistentes más grandes, cambiar de plantillas HTML a plantillas Pug implica mucho trabajo y complejidad en algunos casos. Hacer el cambio conducirá a una gran cantidad de código descifrado que debe corregirse archivo por archivo o automáticamente usando una herramienta personalizada. Los enlaces y algunas directivas angulares en los elementos deben citarse o separarse con comas.

Los desarrolladores que no están familiarizados con Pug primero deben aprender la sintaxis antes de incorporarla a un proyecto. Pug no es solo HTML sin paréntesis angulares y etiquetas de cierre e implica una curva de aprendizaje.

Al escribir Pug y usar sus funciones en las plantillas angulares, ng-cli-pug-loader no otorga a las plantillas Pug acceso a las propiedades del componente. Como resultado, estas propiedades no se pueden usar como variables, en condicionales, en iteradores y en código en línea. Las directivas angulares y las expresiones de plantilla tampoco tienen acceso a las variables Pug. Por ejemplo, con variables Pug:

 //- app.component.pug - var shoppingList = ['Eggs', 'Milk', 'Flour'] //- will work ul each item in shoppingList li= item //- will not work because shoppingList is a Pug variable ul li(*ngFor="let item of shoppingList") {{item}}

Aquí hay un ejemplo con una propiedad de un componente:

 //- src/app/app.component.ts export class AppComponent{ shoppingList = ['Eggs', 'Milk', 'Flour']; }

 //- app.component.pug //- will not work because shoppingList is a component property and not a Pug variable ul each item in shoppingList li= item //- will work because shoppingList is a property of the component ul li(*ngFor="let item of shoppingList") {{item}}

Por último, index.html no puede ser una plantilla Pug. ng-cli-pug-loader no es compatible con esto.

Conclusión

Pug puede ser un recurso increíble para usar en aplicaciones Angular, pero requiere cierta inversión para aprender e integrarse en un proyecto nuevo o preexistente. Si está preparado para el desafío, puede echar un vistazo a la documentación de Pug para obtener más información sobre su sintaxis y agregarla a sus proyectos. Aunque ng-cli-pug-loader es una gran herramienta, puede faltar en algunas áreas. Para adaptar cómo funcionará Pug en su proyecto, considere crear un esquema Angular que cumpla con los requisitos de su proyecto.