Clase 9 - Motores de plantillas

Vista previa del material en texto

Clase 9: Motores de plantillas
Motor de plantillas
Uno de los primeros problemas del desarrollo web: dinamismo
Imagina que eres pionero en el mundo del desarrollo web, y quieres desarrollar una página que pueda dar la bienvenida al usuario que la visite. 
Al momento, escribes tu nombre:
<h1>¡Bienvenido, Mauricio!</h1> 
¡Muy emocionante! Pero hay un problema: El nombre es estático.
¿Cómo afrontar los datos estáticos en una página web?
Tú y tu equipo de desarrolladores contemplan el problema presentado anteriormente y presentan diferentes propuestas:
· Crear n páginas web para cada usuario (descartado)
· Cambiar el mensaje por “Bienvenido, usuario”, menos ameno, pero más genérico (descartado)
· Llamar a todos Mauricio y pedir que reconozcan su nuevo nombre (súper descartado, ¿quién propuso esto?)
· Desarrollar un código que, antes de renderizar la etiqueta <h1></h1>, delimitar una “marca” reemplazable por algún dato, con el estilo:
<h1>¡Bienvenido, {{nombre}}</h1>
(¡Bien ahí! Comenzamos con esta idea)
Entonces, una vez que eligen esta idea, comienzan a desarrollar lo que será un “Motor de plantillas”. De manera que podamos colocar
<h1>¡Bienvenido, {{nombre}}</h1>
Luego, una vez teniendo el nombre a mostrar, simplemente reemplazar {{nombre}} por ese nuevo dato.
¡Ahora todo lo que necesitemos que sea dinámico, podemos marcarlo como un “reemplazable”, y el motor de plantillas reemplazará el dato antes de mostrarlo al cliente.
Ejemplo de una plantilla de carrito de compra
Motor de plantillas como solución de dinamismo en sitios web 
Existen múltiples motores de plantillas tales como: Handlebars, ejs, Pug. 
Cada uno de estos tiene una sintaxis diferente, diferentes reglas de reemplazo de plantillas, aunque son muy similares en funcionamiento. 
Podemos crear sitios web completos basados en un motor de plantillas, con el fin de brindar una experiencia ligeramente más dinámica, a comparación de una página web estática. 
En este curso profundizaremos en el uso de handlebars.
Motor de plantillas vs librerías y frameworks frontend
¿Aún utilizamos un motor de plantillas?
Seguramente, a lo largo de las últimas diapositivas, pensaste: “¿En serio tanto lío para dinamizar un saludo de bienvenida?, eso es cosa de nada con React, Angular, etc.”. 
Sin embargo, tenemos que comprender que hay diferentes contextos para cada tecnología. Es por ello que, cuando preguntamos a un desarrollador “¿Qué es mejor entre x e y?” casi siempre escuchamos un “depende”. 
La diferencia principal: nivel de dinamismo 
Nivel de dinamismo
· El nivel de dinamismo refiere a qué tanta interacción tiene el usuario con la página, además de qué tan constantes son los cambios y renderizados de los elementos de la página.
· Tener definido el nivel de dinamismo que tendrá nuestro proyecto, nos permitirá focalizar la tecnología a utilizar.
· Que una herramienta sea poderosa, no significa que sea la solución para todo. 
¿Qué elegir según el nivel de dinamismo?
· Para “Landing pages”, donde el dinamismo es casi nulo, salvo los típicos formularios del final. Podemos utilizar javascript puro para resolver este problema, ya que no necesitamos un nivel de complejidad alto en una tarea tan sencilla.
· Cuando hablamos de un website, comenzamos a viajar por diferentes páginas, tal vez nos interesa mostrar algunos productos para catálogo o un sistema de login sencillo para pedidos. Entonces el dinamismo aumenta, aquí podríamos utilizar más un motor de plantillas. Dinamismo controlado, pero aún no con el nivel de complejidad para considerarse webapp.
· Finalmente, entrando a una webapp llegamos al nivel de dinamismo más fuerte de la web. Como el nombre lo indica, es una aplicación en tu navegador. Aquí los elementos cambian muy constantemente, son muy manipulables, requieren respuestas más rápidas y salen y entran al DOM constantemente.
· El motor de plantillas ya no es útil en este punto debido a que Handlebars necesita renderizar la plantilla por completo para poder mostrar la información actualizada, esto afecta al DOM y da la impresión de un sitio “lento”.
· Es entonces cuando un framework o librería como React, Vue, permiten aprovechar el Virtual DOM para performance, o como angular que tiene su propio mecanismo de renderizado interno. 
NOTA: El recurso puede llegar a ser subjetivo ya que en realidad podemos utilizar React, Vue, Angular, para cualquiera de las tres opciones, lo importante es ampliar nuestro criterio sobre la utilización de una tecnología. Por ejemplo:
· Si en una empresa necesitan hacer una landing page, ¿Qué tan necesario sería levantar un proyecto de react completo para una única vista? 
· Si tu cliente te pide una agenda personalizada al 100% con diferentes módulos, notas, tareas, contactos, sistema de recordatorios, ¿Realmente te tomarás el tiempo para levantar esto en plain javascript?
· Si tendré un website de dinamismo controlado para mostrar productos, o para mostrar diferentes mensajes o contenidos según sea el usuario, pero no habrá una interacción tan compleja con éste y el contenido no cambiará tan drásticamente, seguro podemos utilizar un motor de plantillas. 
¡Importante! Recuerda que puedes llegar al mismo resultado utilizando cualquier tecnología, pero evidentemente en algunos casos será demasiado compleja una tarea si elegimos mal, o en otros casos nos daremos cuenta de que el proyecto era “demasiado sencillo” para la herramienta utilizada y tal vez “no era necesario hacer tanto”. ¡Irás aprendiendo sobre la práctica!
Express y Handlebars
Handlebars
· Es un motor de plantillas pensado para agregar un nivel medio de dinamismo en una página web
· Dicho motor preprocesa el html que queremos renderizar, reconociendo el patrón {{variable}}, de manera que buscará un objeto que cuente con dicha propiedad para poder sustituir, dando el efecto de dinamismo.
· No está pensado para elementos de cambios constantes, esto debido a que los cambios siguen requiriendo una renderización completa del DOM.
Instalación y configuración de Handlebars en Express
1. Tener listo tu proyecto express
Antes de pensar en Handlebars tenemos que comenzar a plantear nuestro proyecto de Express. Debemos pensar en la estructura de nuestras carpetas y en dónde colocaremos las plantillas. 
¿Será mi aplicación completamente hecha de plantillas, o generaré una plantilla para casos especiales? En este curso trabajaremos sobre un proyecto pensado completamente en plantillas. 
La estructura inicial deberá ser como lo indica la imagen:
2. Agregamos una carpeta Views
En esta carpeta agregaremos todas las plantillas que queramos utilizar, podemos entender entonces que aquí colocaremos las páginas a utilizar en el proyecto. 
Sin embargo, necesitamos un marco inicial para colocar las plantillas, para ello utilizaremos un “layout”. Crearemos una carpeta layouts dentro de views, y dentro colocaremos un “main.handlebars”, haciendo referencia a que ese es el marco principal. 
Luego, fuera de layouts, pero dentro de views, agregaremos un index (página inicial)
NOTA: (Ignorar si en versiones más nuevas no aplica). El nombre de la carpeta layouts y el archivo main.handlebars deben respetar ese nombre para que el motor de plantillas reconozca correctamente el marco inicial.
NOTA 2: Cuida muy bien dejar los archivos en el nivel indicado, de otra manera no se leerá correctamente. Haz énfasis a los chicos de la importancia del nombre de los archivos, carpetas, y el nivel de cada uno. 
3. Configurar main.handlebars
Nota que es la estructura de un html cualquiera, sin embargo, esta vez dentro de body colocamos con {{{}}} el nombre body (única vez que encerraremos en tres llaves)
Ahora, cada vista de views que vayamos a renderizar, se renderizará dentro de este body. De esta manera, no tenemos que escribir una estructura html completa por cada vista que queramos trabajar. 
NOTA: body es la única etiqueta en handlebars que utiliza la triple llave {{{}}} el resto siempre son dos {{}}
4. Saludar desde index.handlebars
Nota que, como la vista index estará dentro delmain layout, ya no es necesario crear una página para poder mostrar la vista. 
Generarmos un saludo, indicando que al entrar a dicha ruta se mostrará el nombre. Nota cómo dejamos name entre las dos llaves, haciendo referencia a que es una variable reemplazable al momento de hacer el preprocesamiento.
Podemos colocar cuantas variables necesitemos al momento de renderizar. 
5. Instalar el motor de handlebars
Tenemos la estructura, las plantillas, ¡todo muy bonito! Sin embargo, no hemos configurado nada en el servidor para que realmente podamos leer y trabajar con las plantillas. 
Para ello, levantaremos nuestro servidor y configuraremos el motor de plantillas interno, esto lo conseguimos instalando con npm: 
6. Configurando handlebars en nuestro motor express
NOTA: Aquí estamos utilizando un __dirname generado para trabajar con type module. Recuerda que este “__dirname” lo puedes enseñar bajo tu libertad y según qué tan actualizado esté el tema al momento de dar la clase. De igual manera, se deja una diapositiva adicional para explicar el método actual.
Archivo utils.js para poder exportar el __dirname 
(sólo válido si trabajamos con type:module)
Creando método GET que renderiza la pantalla
Pie de imagen…
¡Voilà! ¡Ahora la plantilla reemplazó el nombre para dar la bienvenida a un usuario específico!
Estructuras en Handlebars
No solo se trata de reemplazar
Si bien las plantillas permiten “reemplazar” una marca por un dato dinámico, Handlebars nos proporciona también la capacidad para poder realizar estructuras de decisión o de repetición.
Cuando utilicemos una estructura, lo haremos con el símbolo # dentro de las dos llaves, como:
{{#if condición}}
No admite expresiones, sólo booleanos.
Asimismo, podemos realizar ciclos también utilizando la palabra reservada para Handlebars “each”.
Como se mencionó, necesitaremos colocar el hashtag para poder ejecutar un ciclo:
{{#each elemento iterable}}
Ejemplo: configurando método para hacerlo más complejo
Ejemplo: configurando index para poder usar if/else y ciclo each
Ejemplo: Hilda rol=user
Ejemplo: Hilda rol=admin
Express Router + Handlebars
Mover lógica de vistas a un router
Una forma de trabajar correctamente con plantillas, conforme crece nuestro sitio web, es colocar las vistas como si fueran un router más de nuestro servidor.
La gran diferencia está en que los demás routers suelen responder con res.send. Mientras que el router de vistas siempre debe responder con res.render.
Además, este router se colocará en la ruta raíz ‘/’ y no será necesario ser precedido por ‘/api’ como los demás. 
Moviendo la lógica anterior al archivo views.router.js (no olvides exportar el router)
Finalmente sólo utilizamos el router en app.use
Nota que el router se encuentra en la ruta raíz, de manera que, cuando queramos hacer un llamado de un servicio más “lógico” que no requiera una vista, iniciaremos el router siempre con “/api/” Ya que las rutas sin api, corresponden a vistas a partir de ahora.
Agregando js y css
Tu carpeta public aún sirve
A pesar de que ahora las páginas las tenemos en views. No significa que public deje de sernos útil. Recuerda que, al ser un servicio de archivos estáticos, nos puede servir para almacenar archivos de todo tipo a fácil acceso.
Eso quiere decir que también podemos guardar archivos de js y css con el fin de poder referenciarlos desde cualquier punto del servidor, en este caso, desde cada una de nuestras vistas. crearemos una carpeta css y una carpeta js para almacenar nuestros archivos
Usar los archivos js es sencillo
Sólo basta con crear su etiqueta debajo de la plantilla a utilizar. Procura que siempre sea debajo. Así aseguramos que el archivo pueda leer el DOM correctamente.
Usar los archivos css requiere más pasos 
Ya que la referencia a los archivos css está en el head, pero nuestras plantillas sólo viven en el body, no podemos importarlo desde nuestra plantilla, sino que tenemos que hacerlo desde el main.layout.
La pregunta es. ¿Cómo dinamizar estas vistas? la clave está en que el mismo link de importación de css sea una clave para reemplazar en plantilla.
¡Interesante!
Pero nuestro app.render debe cambiar
Ahora, cuando necesitemos mostrar una vista, dicha vista deberá estar asociada con un css, el cual siempre colocaremos como “style” en el objeto de sustitución.
Por ejemplo, para volver a mostrar la vista de index.handlebars, pero ahora utilizando el archivo index.css, el objeto lo enviaremos con un nuevo elemento “style”
Nota que el style debe tener el mismo nombre que el archivo, incluyendo su extensión
Archivos index.css e index.js utilizados en index.handlebars
Se hará una prueba sencilla cambiando el color a los <p></p>, y mostrando un mensaje en consola para corroborar que los elementos se hayan importado correctamente. 
Visualizando los cambios en la misma plantilla index.handlebars