Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Implementando un template engine

6/42

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

Además de PUG obviamente.

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.

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

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;

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

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 ! 👍🏻

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);
  });
};

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:

Screenshot from 2019-02-12 21-14-48.png

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

Screenshot from 2019-02-12 21-17-57.png

Fuente npmjs.com

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.

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

Les comparto una lectura de expresiones regulares en JavaScript.

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

Vamos al uso del template

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 😄

Captura de pantalla 2019-02-22 a la(s) 0.59.04.png
Captura de pantalla 2019-02-22 a la(s) 1.02.25.png

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 😃

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

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);
}

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.

Muy buena explicación

Por mi parte, me aventuré en el desarrollo del vue-engine-template para trabajar con SFC (Single File Components).
Para ello se necesita:

  • Configurar Webpack como un pre-script-
  • Asignar la carpeta de las vistas
  • Determinar que el resultado de webpack, sea accesible como un contenido estático express.static(resolve('./views'))
  • Responder ante el contenido como petición al Home.

Con ello, podemos denotar un proceso llamado SSR (Server Side Rendering).

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

Además de PUG obviamente.

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.

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

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;

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

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 ! 👍🏻

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);
  });
};

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:

Screenshot from 2019-02-12 21-14-48.png

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

Screenshot from 2019-02-12 21-17-57.png

Fuente npmjs.com

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.

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

Les comparto una lectura de expresiones regulares en JavaScript.

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

Vamos al uso del template

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 😄

Captura de pantalla 2019-02-22 a la(s) 0.59.04.png
Captura de pantalla 2019-02-22 a la(s) 1.02.25.png

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 😃

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

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);
}

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.

Muy buena explicación

Por mi parte, me aventuré en el desarrollo del vue-engine-template para trabajar con SFC (Single File Components).
Para ello se necesita:

  • Configurar Webpack como un pre-script-
  • Asignar la carpeta de las vistas
  • Determinar que el resultado de webpack, sea accesible como un contenido estático express.static(resolve('./views'))
  • Responder ante el contenido como petición al Home.

Con ello, podemos denotar un proceso llamado SSR (Server Side Rendering).