Implementando un template engine

Clase 7 de 43 • Curso de Express.js 2018

Resumen

Destructuring es una sintaxis que nos permite extraer datos de objetos o arrays.

Ejemplo: test : { a : “hola”, b : “mundo” } //Los nombres de las variables tienen que ser las llaves del objeto o el array const {a,b} = test console.log(a +’ '+ b)//hola mundo.

Tipos de template engines

Conoce varios template engines populares en la actualidad.

Mustache
Handlebars
doT
EJS
Nunjucks
Underscore
ECT
Template7
jTemplates
PUG

Repasa qué es un template engine

Contribución creada con los aportes de: Cristian Camilo Cucunubá y Julio J Yépez.

Julio J Yépez

student•

Les comparto una lista de varios template engines muy usados en la actualidad:

Además de PUG obviamente.

Daniel Salazar Munoz

student•

Mencione algo relacionado con tu aporte en la anterior clase, node ofrece variedad para realizar este tipo de funcionalidades, tu aporte esta muy bueno .

Daniel Quispe

student•

Me parece genial que expliques el funcionamiento de los template con un ejemplo “en bruto”, eso hace que tengamos una mejor idea de cómo funcionan las cosas.

Cristian Camilo Cucunubá

student•

Destructuring es una sintaxis que nos permite extraer datos de objetos o arrays.

Ejemplo:

   test : {
      a : "hola", 
      b : "mundo"
   }
//Los nombres de las variables tienen que ser las llaves del objeto o el array
const  {a, b } =  test
console.log(a +' '+ b)//hola mundo

jorge llanque

student•

otro que también son muy utilizados ahora son los spreed operators

{...anything}

Eduardo Hidalgo Díaz Rugama

student•

Vaya, me costó trabajo hacer que me corra el ejercicio, tuve un montón de errores de sintaxis. Les dejo aquí el código del ejercicio limpio para que nadie se vaya a frustrar porque se le fue una coma o una letra:

archivo index.js

const express = require('express');
const app = express();
const expressJsx = require('./express-jsx');

app.engine("jsx", expressJsx);
app.set('views', './views');
app.set('view engine', 'jsx');

app.get('/', function (req, res) {
    res.render('index', {hello: "hola", world: "mundo"});
})

const server = app.listen(8000, function() {
    console.log('Listening http://localhost: ' + server.address().port);
})

archivo express-jsx.js

const fs = require('fs');

function getKeysFromOptions(options) {
    const { settings, _locals, ...objectKeys } = options;

    return Object.keys(objectKeys);
}

function getRenderedContent(content, options) {
    const keys = getKeysFromOptions(options);
    let contentString = content.toString();

    for (let key of keys) {
        contentString = contentString.replace(
            new RegExp(`\{${key}\}`, "gi"),
            options[key]
        );
    }

    return contentString;
}

function expressJsx(filePath, options, callback) {
    fs.readFile(filePath, function (err, content) {
        if (err) {
            callback(err);
        }

        const rendered = getRenderedContent(content, options);

        console.log(rendered);
        return callback(null, rendered);
    });
}

module.exports = expressJsx;

Guillermo Rodas

teacher•

En este branch del repo deberia funcionar sin problema: https://github.com/glrodasz/platzi-express/tree/que-es-un-template-engine/template-engine

Carlos Enrique Gonzalez Peña

student•

Como dato, la function RegExp es una Expresión Regular o Regular Expression, Platzi tiene un curso para el que quiera saber un poco mas sobre estas ya que las puedes aplicar en casi cualquier lenguaje de programación moderno y puedes encontrar y filtrar cualquier cadena de texto sin importar que tan grande o complejo sea

Victor Lozada

student•

Genial estas dos clases sobre templates engines, aunque estoy viendo el curso casi tres meses después de que fue lanzado me gustaría ver mas proyectos por parte de Guillermo aquí en platzi ! 👍🏻

German Alfonso

student•

Comparto mi implementacion. en general remplazo el for por reducer y algunos otros refators:

const fs = require('fs');

const getKeysFromOptions = ({ settings, _locals, cache, ...sendOptions }) =>
  Object.keys(sendOptions);

const getRenderedContent = (content, options) => {
  const keys = getKeysFromOptions(options);

  return keys.reduce(
    (contentString, key) =>
      contentString.replace(new RegExp(`\{${key}\}`, 'gi'), options[key]),
    content.toString()
  );
};

module.exports = (filePath, options, callback) => {
  fs.readFile(filePath, (err, content) => {
    if (err) return callback(err);
    const rendered = getRenderedContent(content, options);
    return callback(null, rendered);
  });
};

Carlos Enrique Ramírez Flores

student•

Excelente la forma de usar reduce

Sebastián Arias

student•

Me hubiera gustado que se utilize un template engine mejor mantenido por la comunidad, ya que en npmjs.com se ve que Pug no tiene mantenimiento desde aproximadamente 1 año:

Como opción me hubiera gustado ver algo de handlebars que esta siendo mantenido activamente y tiene mas descargas semanales:

Fuente npmjs.com

Jorge Hernandez

student•

Es lo mismo, con que tengas las bases de como funciona express, lo demás lo podrás implementar

Juan Valero Reyes

student•

Me gustaría conocer Alternativas para las expresiones regulares ya que no las he estudiado todavía. me gustaria que las clases tengan mas detalles que sumen al aprendizaje! PD: Buen profesor.

Carlos Enrique Ramírez Flores

student•

Hay un curso de eso https://platzi.com/clases/expresiones-regulares/

Cristian Camilo Cucunubá

student•

Destructuring es una sintaxis que nos permite extraer datos de objetos o arrays. Ejemplo: test : { a : "hola", b : "mundo" } //Los nombres de las variables tienen que ser las llaves del objeto o el array const {a,b} = test console.log(a +' '+ b)//hola mundo

Carlos Enrique Ramírez Flores

student•

Es correcto, gracias por el ejemplo!

Alfredo Gonzalez

student•

Les comparto una lectura de expresiones regulares en JavaScript.

https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_Expressions

Wilson Castro Gil

student•

Vamos al uso del template

Mauricio Chávez Olea

student•

Les comparto un poco de lo que yo hice. En lugar de usar JSX, usé Jinja 2 (Python) como template engine.

Igual les comparto el enlace a mi repositorio si quieren checarlo, o hacer un fork para hacer su propia versión, incluso un pull request para agregarle más funcionalidad :D

Sebastián Pineda Duque

student•

La clase es interesante, y muy bien por el profesor y Platzi explicarnos lo que hay detrás de estos sistemas. Quizá para alguno de nosotros que no tenemos mucho rodaje en JavaScript se nos dificulte, pero con el paso del tiempo entenderemos a la perfección lo que nos explicó Guillermo :)

Brayan Murcia Sanchez

student•

porque, si estamos usando el node demon, no se actualizo el valor de la variable automaticamente cuando el profe cambio en el json?

Eduardo Hidalgo Díaz Rugama

student•

Nodemon no actualiza el servidor cuando archivos .json cambian. Solo con ciertos tipos de archivos, mayormente un archivo .js es lo que activa el reload de nodemon.

Marcelo Gustavo Baez

student•

Por defecto, como te mencionaron, nodemon no monitorea cambios en archivos que no sean .js (tipicos de Node). De todas maneras puedes indicar con un flag que deseas monitorear otras extensiones asi:

nodemon -e js,jade,json

Santiago Ortiz Ceballos

student•

Hola! tengo una duda:

res.render recibe la ruta al index.jsx y las opciones, que se inyectan en el motor definido, que para este caso es la función expressJsx. Sin embargo, esta función también tiene un callback al cual le pasa el contenido renderizado. Pero quién ejecuta ese callback? quien lo recibe o donde se especifica que se utilice?

Sergio Raúl Olivares Rojas

student•

tengo el siguiente error

Error: Failed to lookup view "index" in views directory "./views"

no logro encontrar el problema, estoy usando la última versión de express

Luis Lira

student•

Hola!

¿Nos podías pasar tu código para revisarlo? Si es posible, también uan captura de tu estructura de archivos, porque ahí lo que dice es que no está encontrando el archivo "index" dentro de la carpeta views. Esto también se puede deber a que hay algún error en la confiiguración del template engine.

Fer Torres

student•

Hola! Logré reproducir el error en mi ejemplo. Fue al mover el nombre del directorio al llamar a la vista en index.js en la carpeta principal. Mi error sale así:

Error: Failed to lookup view "error" in views directory "/Users/fertorresmx/Projects/Platzi-Master/Curso_Express.js/ecommerce/view"

Y fue al quitarle una letra s a "view, cuando debería ser "views" en las dos palabras:

app.set("views", path.join(__dirname, "view")); // con error

app.set("views", path.join(__dirname, "views")); // sin error

¿Puedes revisar que sea algo similar en tu caso? Avísannos si era eso!

Naldo Duran

student•

✌

Cristian Iñiguez

student•

Por si les sale error escriben _locals y cache en la desestructuración de la función getKeysFromOption:

function getKeysFromOption(options) {
  const { settings, _locals, cache, ...objectKeys } = options;
  return Object.keys(objectKeys);
}

Alejandro González Reyes

student•

En un principio sentí innecesario hacer uso de la expresion regular. Sin embargo, al tratar de renderizar la misma variable en distintas partes de mi plantilla, solo renderizaba la primer coincidencia. Investigando un poco, ahora entiendo el porque de la expresión regular. Gracias a sus flags g, le indican que debe buscar el patron a nivel global, y no quedarse solo con la primera coincidencia.