Sobre los Templates
Los Templates son una parte esencial en la dinámica de desarrollo con LitGirl. A lo largo de las diferentes secciones de este capítulo vamos a profundizar tanto en su estructura como utilización.
¿Qué son?
Para resumirlo y no entrar en definiciones confusas, los Templates son ficheros HTML normales que dentro de su contenido incluyen variables o instrucciones Dynamo que el compilador de Lit se encargará de interpretar y ejecutar.
Veamos un ejemplo
<html lang="en"><script src="path/to/litgirl/index.js" charset="utf-8" type="module" async defer></script><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>{=dataLit.titles.2}</title>{{=meta-tags}}<link rel="stylesheet" href="{=dataLit.default.urls.css}" media="all" nonce="qOmGiV7uvTsJadT14EVEWWkgc+/nOTSQ"></head><body>{{=test-load}}<div class="{=dataLit.default.classList}"><!-- Este contenido HTML se mantiene inalterado --></div>{{=test-footer}}</body></html>
Como puedes apreciar en el ejemplo de código anterior, este es el aspecto que puede tener un Template con Lit. A continuación vamos a analizar de manera más pormenorizada las distintas expresiones o variables que pueden observarse en el mismo y su función.
Importante:
Los ejemplos de sintaxis que estudiaremos corresponden a la versión Alfa 0.0.1. Es de esperar cambios sensibles en el futuro cercano.
Variables de transpilación
<title>{=dataLit.titles.2}</title>
Las variables de transpilación son parte esencial de los Templates. Representan la unidad mínima de inyección de datos admitida por Lit.
Partes de las variables
1.- {= Apertura del transpilador.
2.- dataLit.titles.2 De dónde obtiene los datos a asignar. Por ejemplo, en este caso concreto, el compilador buscará el valor en el almacén de datos abstractos dataLit (el cual creamos con setDataLit() como ya vimos en la guía de inicio rápido), y a continuació,n tomará la tercera posición de la propiedad titles, que evidentemente es un array.
3.- } Cierre de la instrucción.
Aquí podemos ver otros dos ejemplos. En el primero se asigna una url a la etiqueta <link>, para enlazar un archivo css. En el segundo ejemplo, se asigna una clase a un elemento HTML. Cabe señalar que estas características se pueden potenciar utilizando los condicionales de Dynamo. Pero esto lo veremos más adelante.
<link rel="stylesheet" href="{=dataLit.default.urls.css}" media="all" nonce="qOmGiV7uvTsJadT14EVEWWkgc+/nOTSQ">
<div class="{=dataLit.default.classList}"><!-- Este contenido HTML se mantiene inalterado --></div>
Info
En los ejemplos anteriores, la variables toman su valor de propiedades contenidas en el objeto dataLit. Sin embargo, estos valores pueden provenir de cualquier otro objeto o variable que esté dentro del alcance de Lit. Mira el siguiente ejemplo para entender mejor a qué nos referimos.
<html lang="en"><script src="path/to/litgirl/index.js" charset="utf-8" type="module" async defer></script><head><script type="text/javascript">const greets = 'Hola Mundo';</script></head><body><h1 class="txt-center red m-t-10 m-b-10 bold">{=greets}</h1></body></html>
Como puedes ver en este otro ejemplo, el valor a transpilar se obtiene directamente de una constante que se ha declarado en el propio documento. Con lo cual sustituirá {=greets} pot la frase Hola Mundo. De la misma manera funcionaría si esta constante, o cualquier otro tipo de dato que contuviera un valor, estuviera dentro de otro archivo JavaScript incluido en el documento.
Constantes de compaginación
Las Constantes de compaginación son expresiones Dynamo en la estructura de las páginas del sitio, que indican a Lit fragmentos HTML que debe buscar, compilar e inyectar en el template. Normalmente dichos fragmentos se encontraran en el directorio parts de LitGirl. Aunque, como ya explicamos en la guía de inicio rápido, esto dependerá de si se ha alterado o no la configuración por defecto de Lit al momento de inicializar la aplicación.
Aquí algunos ejemplos:
<html lang="en"><script src="path/to/litgirl/index.js" charset="utf-8" type="module" async defer></script><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">{{=meta-tags}}</head><body>{{=https://domain/path/test-load.html}}{{=includes/test-footer}}</body></html>
Partes de las constantes
1.- {{= Declaración de apertura.
2.- meta-tags En la primera constante simplemente se asigna un nombre de un archivo HTML a ser compilado e insertado dentro del documento desde el que se solicita. Como puedes observar, no es estrictamente obligatorio indicarle la extensión del archivo, es suficiente con el nombre. Sin embargo, recomendamos, al menos de momento, agregar la extensión tal que para este caso quedaría así: meta-tags.html
3.- https://domain/path/test-load.html Este tipo de declaración se utiliza principalmente cuando se necesita cargar un componente o fragmento específico desde una url distinta a la urlBase con la que se configuró LitGirl al inicializarse. También puede utilizarse este tipo de asignación para incluir componentes o fragmentos desde un sitio externo siempre que las políticas de CORS lo permitan.
4.- includes/test-footer En este ejemplo, asumimos el supuesto de que se ha creado un directorio includes dentro de partials, o el directorio base para los componentes y fragmentos que se haya configurado al inicializar LitGirl. La estructura puede tener la profundidad de directorios que necesitemos para nuestro proyecto.
5.- }} Cierre de la declaración.
NO agregar la barra inicial ( / )
Cuando se indique una ruta a una constante de compaginación que se encuentre en la url base con la que se inicializó LitGirl, se debe comenzar directamente por el nombre del archivo a compaginar. O en su defecto, el nombre del primer directorio dónde debe comenzar a buscarlo. La '/' inicial es innecesaria para el compilador de Lit y hemos optado por omitirla. Por ejemplo: {{=/meta-tags}} o {{=/includes/test-footer}} provocaran un error de compilación.
Ejemplo completo
A continuación, tienes una visión de conjunto de todo el código que hemos utilizado en los diferentes apartados de esta sección. Pensamos que puede resultarte útil para comprender mejor el funcionamiento de las Variables de transpilación y Constantes de compaginación de Dynamo que LitGirl debe compilar.
<html lang="en"><script src="path/to/litgirl/index.js" charset="utf-8" type="module" async defer></script><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>{=dataLit.titles.2}</title>{{=meta-tags}}<link rel="stylesheet" href="{=dataLit.default.urls.css}" media="all" nonce="qOmGiV7uvTsJadT14EVEWWkgc+/nOTSQ"></head><body>{{=https://domain/path/test-load.html}}<div class="{=dataLit.default.classList}"><!-- Este contenido HTML se mantiene inalterado --></div>{{=includes/test-footer}}</body></html>
Protección contra Harvesters y Scrapers
Como ventaja adicional, y muy relevante por cierto, las Variables de transpilación al igual que las Constantes de compaginación ofrecen una capa extra de seguridad frente a Cosechadoras(Harvesters) y los Raspadores web(Scrapers).
El uso corecto de la encapsulación dificulta que programas maliciosos puedan obtener datos sensibles, tales como números de teléfono, direcciones de email o la estructura real de las páginas, con un simple escaneo del sitio. Lo que, normalmente para lograrlo, conlleva tener conocimientos algo avanzados de programación o contratar servicios externos tales como Cloudflare, por nombrar uno de los más populares.
Bastante sencillo, ¿no?
Como habrás podido notar, si ya conoces algunos de los motores de plantillas más populares, la sintaxis utilizada en los templates de Lit tiene algunas similitudes con la utilizada en varios de ellos. La principal diferencia con el resto, es la potencia, el alcance y la versatilidad que se les a incorporado a las mismas.
* Sin embargo, donde realmente LitGirl alcanza su mayor potencia, es con el uso de las estructuras de control incorporadas en Dynamo. Estos son bastante poderosos y también pueden utilizarse para manejos más complejos de las Variables y Constantes que vimos en este capítulo. Pero esto lo tratamos en una sección específica sobre: Condicionales, bucles y rangos .
¿Tienes preguntas? Escríbenos a dev.litgirl@ohyoo.net
LitGirl © Equipo de Desarrollo - All rights reserved.