Crear una aplicación web con Node.js, MongoDB, Mongoose, Express y EJS - Parte IV

Continuando con nuestra serie de artículos sobre cómo crear un sistema de registro simple en Node.js, utilizando MongoDB y ExpressJS, desarrollando el CRUD.

En esta cuarta y última parte, veremos un concepto importante en la construcción de interfaces: la modularización de la página. Utilizaremos un recurso llamado partial views del EJS, que es el motor de vistas que estamos usando con el framework Express js.

Para darle un toque de estilo, usaremos el framework Bootstrap, ampliamente utilizado para crear aplicaciones web más responsivas y ofrecer una mejor experiencia a los usuarios.

¿Qué es Bootstrap?

En resumen, Bootstrap es un framework front-end que nos proporciona estructuras de CSS para crear sitios y aplicaciones responsivas de manera rápida y sencilla. Funciona muy bien tanto en sitios de escritorio como en páginas para dispositivos móviles.

¿Cómo se distribuye Bootstrap?

Las dos formas más comunes de distribución son a través del sitio oficial y de npm. También tienes la opción de crear tu propia distribución utilizando el código fuente, o bien, usar la red de distribución conocida como CDN de Bootstrap. Básicamente, un CDN permite que un sitio web recupere archivos distribuidos públicamente desde servidores globalmente distribuidos.

Más adelante en este artículo, haremos la instalación para mejorar el aspecto visual de nuestra aplicación.

¿Qué son las Partial Views?

Después de este breve resumen sobre Bootstrap, volvemos al tema inicial: ¿Qué son las Partial Views? Es bastante común que, al desarrollar una aplicación, haya ciertas partes de las vistas que se repiten. Con esto en mente, todas las tecnologías de programación web cuentan con recursos de Partial Views, que permiten la modularización de la interfaz al separar en “partes” la pantalla. Estas partes se construyen por separado y luego se ensamblan para que el usuario vea solo el resultado final.

Nuestra aplicación es bastante simple y solo tiene 3 vistas: index, new y error, como se muestra a continuación:

La estructura anterior es bastante básica, por lo que no sería necesario utilizar Partial Views. Sin embargo, lo abordaremos aquí para fines de aprendizaje y para mostrar que es un concepto poderoso. Además de hacer que tu frontend sea más legible y elegante, también acelera el desarrollo de nuevas páginas, ya que puedes reutilizar elementos genéricos creados una sola vez en otras vistas.

Si miramos nuestras vistas index.ejs y new.ejs, notaremos que ambas tienen muchas etiquetas comunes al inicio y al final.

Index:

New:

Vamos a comenzar por estas.

Partial View con EJS

EJS permite crear Partial Views de manera muy sencilla. Comenzaremos creando un archivo top.ejs en la carpeta views. El archivo top corresponderá a la parte superior de nuestra página, donde agregaremos toda la estructura común que tendremos en todas las vistas de nuestra aplicación. En el archivo creado, añadimos la siguiente estructura:

En el código anterior, en el archivo top.ejs, ppodemos notar algunas variables JS que provendrán de nuestro backend a través del modelo que se pasa en nuestra función render de Node.js.

A continuación, crearemos un segundo archivo dentro de la carpeta views, llamado bottom.ejs, Este archivo bottom corresponderá al pie de página y, por el momento, solo añadiremos dos líneas:

Ahora te estarás preguntando cómo hacer que una vista utilice estas Partial Views que acabamos de crear. Vamos a comenzar con nuestra index.ejs. En la parte superior del archivo, eliminamos la sección repetida que colocamos en top.ejs y en su lugar, usamos la instrucción include como se muestra a continuación, para incluir nuestra Partial View en la primera línea del archivo:

En la parte inferior, haremos lo mismo con el archivo bottom.ejs:

Después de este proceso, cuando el archivo HTML se construya para ser enviado al navegador y renderizado, EJS leerá la primera línea y entenderá que el código HTML de esa línea proviene de otro archivo. Entonces, buscará ese archivo, copiará su contenido y lo usará en ese lugar.

Observa que, con solo estos dos includes, hemos modularizado nuestra aplicación en tres partes: top (parte superior), center (centro) y bottom (pie de página), lo que facilita el mantenimiento y la reutilización del código.

Teniendo en cuenta que ahora podemos reutilizar nuestro código, haremos las mismas sustituciones en los archivos new.ejs y error.ejs para evitar repetir bloques de código al inicio y al final de nuestros archivos HTML. Como nuestra aplicación es simple, no se nota mucho el beneficio, pero en aplicaciones más grandes, las mejoras en el mantenimiento del código son significativas.

Vamos a comenzar con el archivo error.ejs:

Y new.ejs:

Después de realizar los cambios anteriores, ejecuta nuevamente tu aplicación Node.js como lo hacemos habitualmente. Recuerda también iniciar tu base de datos de MongoDB. Verás que todo funciona correctamente, aunque para el usuario nada haya cambiado. Todo se renderiza como antes, pero las modificaciones que hicimos están enfocadas en hacer nuestra vida como desarrolladores más fácil.

Nuestro próximo paso será agregar el framework de frontend que mencionamos brevemente al principio del artículo. También notarás lo fácil que será mantener nuestro código después de esta modularización.

Añadiendo Bootstrap al proyecto

Vamos empezar agregando las dos dependencias de Bootstrap que se pueden obtener en este link del sitio oficial. La primera es la de CSS, que debe añadirse en la parte superior de nuestro archivo top.ejs, sustituyendo el enlace antiguo de CSS que estaba en el archivo:

Al añadir el código anterior en top.ejs, ahora todas las pantallas que utilizan esta partial view tendrán el CSS de Bootstrap aplicado. Nota la productividad que logramos: si pensamos en una aplicación con 12 pantallas, tener que modificar cada una de ellas individualmente sería mucho más tedioso.

Observa que añadí dos meta-etiquetas como sugiere la página de Bootstrap en el enlace anterior. Esto asegura una mayor compatibilidad con los recursos que ofrece el framework y mejora la responsividad en dispositivos móviles.

El siguiente archivo que modificaremos será bottom.ejs. Ahora añadiremos el script JS necesario para el funcionamiento de Bootstrap, justo antes de la etiqueta </body>. De la siguiente manera:

Con solo estos pequeños cambios, ejecuta la aplicación y verás los nuevos efectos visuales que Bootstrap aporta.

Pero siempre podemos mejorar de alguna manera nuestra aplicación. Vamos ahora a utilizar algunos de los “poderes” de Bootstrap para realizar ajustes en nuestra estructura, así como utilizar algunas clases CSS definidas por Bootstrap.

Nuestro primer paso será definir una div class container que envolverá todo el contenido del cuerpo de nuestras pantallas. Para hacerlo, simplemente debemos añadir el conjunto de etiquetas div que te mostraré a continuación. Básicamente, tienes que abrir la div en top.ejs y cerrarla en bottom.ejs dde modo que ambas queden dentro del cuerpo body.

top.ejs:

Nota que solo cambiamos una línea, justo encima de la etiqueta H1, al final del archivo top.ejs.

bottom.ejs:

Y en bottom.ejs también cambiamos solo una línea, al principio del archivo.

Después de este cambio en los archivos, verás un cambio más perceptible en las páginas ya existentes, que ahora tendrán un mayor margen y estarán mejor centradas.

La div container que creamos hace que tu página funcione en un sistema de cuadrícula (grid-system) de 12 columnas, lo que significa que Bootstrap permite organizar el contenido de las páginas en 12 bloques de igual tamaño. Si organizas correctamente el espacio disponible, tu aplicación web será responsiva, ajustando su contenido según la pantalla del dispositivo que la esté accediendo.

Espero que esta serie de artículos te haya ayudado a comprender mejor cómo construir una aplicación web básica utilizando Node.js, MongoDB, ExpressJS y EJS. Teniendo en cuenta que esta aplicación puede usarse para diversos tipos de servicios, te aconsejo profundizar un poco más en Bootstrap, ya que el frontend no fue desarrollado en su totalidad en este artículo. Solo presenté una introducción y mostré cómo agregar Bootstrap a tu aplicación.

En un próximo artículo, me enfocaré en la parte de estilización de nuestra aplicación para abrir un abanico mayor de posibilidades y explicar mejor cómo Bootstrap puede ser realmente útil. También crearé un repositorio con el código fuente de esta serie que hemos finalizado aquí y compartiré el enlace para facilitar el seguimiento del contenido.

Además, traeré este contenido sobre CRUD en otro lenguaje en nuestra próxima serie de artículos: el lenguaje Java.