Desarrolladores: Trucos semanales

Trabaja con plantillas en un proyecto de Express.js

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
06:30
  Añadir a marcadores

Transcripción

Escribir código HTML es siempre la primer tarea que todo desarrollador o diseñador web debe de hacer. Eso es obligatorio. Pero ¿qué hacer cuando el mundo del desarrollo de software ha crecido a pasos agigantados y esa tarea resulta a veces ser muy trivial o tal vez ya no la primera? Pues antes hay que considerar la lógica y el comportamiento del sitio o aplicación web. Éste es un gran dilema, pues a mayor complejidad, también mejores soluciones. Y para este tipo de soluciones, y no tener que lidiar con HTML, sino al contrario, sacar los mejores beneficios, es recomendable el uso de motores de plantillas que nos permitirán escribir código HTML de una manera simple. La idea es que puedas mezclar la lógica de tu código en JavaScript con tu HTML y que al final, el resultado que obtengas sea un HTML bien construido y definido. En el mercado hay muchos motores de plantillas como Mustache, Underscore, Handlebars, o el también muy popular Jade. Estos motores siguen muchos comportamientos de integración como se hace con otros lenguajes, como PHP o Ruby, pero, en este caso, enfocados completamente en JavaScript. Veamos cómo funcionan este tipo de motores y usemos un par de ellos para que compares su funcionamiento. Una de las mejores maneras que tenemos para probar el uso de plantillas, es cuando nosotros trabajamos con Express. Este es un servidor basado en Node.js y que me va a servir para poder probar este punto. Para instalarlo, vamos a ejecutar el comando npm install express-generator de manera global. Una vez que ya lo tenemos instalado, tenemos que crear la aplicación. Pero antes vamos a revisar un poco la ayuda de express. Vamos a escribir express -h y pulsamos Enter. Aquí nos vamos a centrar en estas opciones. Como vemos, aquí me está indicando que puede trabajar con ejs, con pug y con hbs, que son los handlebars. Éstos son motores de plantillas que podemos utilizar. Incluso también hay otro par más por ahí. Para que nosotros podamos trabajar con jade debemos de indicar la versión pug, ¿Esto por qué? Porque jade ha cambiado su nombre a pug. De hecho, si tú buscas "jade" en internet, ya no encontrarás mucha información relacionada, sino ahora encontrarás toda la información con pug. Para poder hacer la instalación de una nueva aplicación, lo único que tenemos que hacer es indicar el comando express. Después tenemos que indicarle qué es lo que vamos a utilizar como este motor, que en este caso será pug y después viene el nombre de la aplicación, que va a ser myapp. Damos Enter, y esto me genera una carpeta. Vamos a continuar el proceso de instalación antes de revisar el contenido de la carpeta. Primero, me voy a cambiar dentro de esta carpeta myapp y voy a ejecutar el comando npm install. Al ejecutar este comando, va a leer todo lo que hay dentro del archivo package.json y va a instalar todas las dependencias que están descritas. Así, mi proyecto podrá funcionar. Ahora, una vez que ya tenemos lista esta parte, lo único que tendremos que hacer será ejecutarlo. Para ejecutarlo, tendremos el comando npm start. Esto, levanta el proyecto. Si tú no sabes el puerto donde quedó tu proyecto, simplemente tendrás que acceder a Localhost: en el puerto 3000, o puedes averiguarlo en el archivo www de la carpeta bin. Como puedes ver, aquí en la línea 15 te indica cuál es el puerto que está utilizando. Por ahora, vamos a cerrarlo y vamos a probar. Localhost: 3000 y aquí tenemos un texto que dice "Express. Welcome to Express". Listo, ahora sí podemos analizar qué es lo que hay dentro. Vamos a abrir la carpeta views. Y vemos cómo aquí tenemos archivos con extensión .pug. Si abrimos el archivo index.pug, vamos a encontrar algunas cuestiones como, por ejemplo, un extends layout y un bloque, un h1 y una etiqueta p, pero que son etiquetas sin terminar. De esto se tratan las plantillas, que empiezan a conectar datos de cierta manera y con una sintaxis específica. Por ejemplo, en este caso, aquí estamos indicando que lo que va dentro de h1 es un título, y lo que va dentro de la etiqueta p es el mensaje "Welcome to" y el contenido de una variable título. Esa variable título se debe de encontrar en algún lado. ¿Dónde la vamos a averiguar? Simple y sencillo. Vamos a la sección que dice rutas, y tenemos una opción que dice index.js. Cuando lo abrimos vamos a ver cómo tenemos aquí, en la línea número 6, un objeto que regresa, es decir, aquí dentro tenemos el objeto title. Vamos a agregar una propiedad nueva y, en este caso, vamos a ponerle name: y voy a poner mi nombre en este caso, "Sergio". Cuando guardamos, esto se acomoda como si fuera un objeto y, a final de cuentas esto, lo que está ejecutando, es el consumo de un servicio. Dicho servicio se va a consumir a través del archivo app.js, donde simplemente vamos a requerir los elementos que estamos usando, en este caso, el index. Ahora, si yo quiero trabajar con esta variable que se acaba de crear llamada name, tengo que regresar mi archivo index.pug y lo único que tendré que hacer será agregar una nueva etiqueta, en este caso voy a agregar una etiqueta p, y le voy a poner "Hola", y usaré el símbolo de numeral o gatito, y aquí adentro, voy a poner la variable que yo necesitaba utilizar. Vamos a probarlo. Y ahora que lo ejecutamos aparece solamente el texto, pero me falta el contenido de la variable. Para esto, vamos a tirar el servidor y vamos a volverlo a levantar. Ahora sí, vamos a probar nuevamente Y listo, con esto ya tenemos la variable aquí asignada. De esta manera podemos estar incluyendo nosotros distintos tipos de plantillas. Por ejemplo, en este caso, estamos trabajando solamente con errores. Y en este último archivo se está definiendo todo el layout. De hecho, si te das cuenta, aquí se define el título de la página, un link con una referencia a un estilo y todo el contenido que se va a utlizar. Este archivo se llama layout.pug. En index.pug vemos cómo extendemos del layout, de la misma manera en el archivo del error. Así, entonces, todas estas plantillas pueden comunicarse entre ellas para que podamos tener una página web o una aplicación web más rica y muchísimo más fácil de desarrollar, de mantener y de escalar.