Cargando



Contenido estático en Express.js

En este tutorial veremos cómo trabajar con el contenido estático en Express.js pero no solo desde un punto de vista técnico, sino que buscaremos aprender conceptos que nos ayuden a tomar en cuenta el rendimiento y la posible escalabilidad de nuestra aplicación.


may 15 2015 05:08
Profesional
may 15 2015 15:43
En una aplicación web hecha con Express.js existen cosas que tienen mucha importancia, además del código JavaScript o de la forma en la que implementamos los diferentes controladores y modelos, si nos detenemos a pensar una aplicación es una gran composición donde no solo sus diferentes partes deben funcionar correctamente sino que también debe tener un aspecto adecuado y servir los recursos necesarios.

Para que el aspecto sea adecuado necesitaremos utilizar los contenidos estáticos, es decir, todos aquellos componentes que no cambian con las peticiones, entre estos podemos englobar el CSS, archivos JS, imágenes, videos, etc.

Por supuesto hay excepciones donde una aplicación hecha en Express no necesita archivos estáticos como las API, aunque si la misma debe devolver un recurso descargable probablemente este último sea un archivo estático también.

Tomar en cuenta el rendimiento


Una de las cosas que nos preocupan inicialmente pero que no sabemos hasta que es muy tarde es el rendimiento, todos entendemos que un sitio o aplicación debe ser rápida y consumir solo los recursos necesarios, pero en los ambientes de desarrollo usualmente esto no se toma en cuenta, solo hasta que la aplicación está en producción, donde vemos su desempeño y es allí que nos damos cuenta que podemos optimizar nuestros procesos.

Con el caso del contenido estático esto también aplica, ya que el hecho de tener que servir el contenido con nuestro servidor hace que haya una cantidad importante de recursos dedicados al proceso. Existen dos grandes áreas al momento de mejorar el rendimiento con los archivos y contenidos estáticos en Express, la reducción de las peticiones HTTP y el disminuir o comprimir los archivos o contenidos para que su peso sea menor cuando se haga la descarga de estos por la aplicación.

Reducción de peticiones HTTP


Vamos a empezar a explicar un poco que hay tras la reducción de las peticiones HTTP, este proceso es crítico, sobre todo si tomamos en cuenta a las conexiones móviles que pueden estar visitando nuestra aplicación.

Su importancia radica en que cada vez que se hace una petición HTTP el navegador debe esperar su respuesta y si tenemos muchas peticiones simultáneas, se puede dar el caso que existan límites de cantidad de peticiones simultáneas que se pueden hacer.

Combinación de recursos
Para disminuir las peticiones tenemos un par de técnicas, la primera es la combinación de recursos, por ejemplo si estamos sirviendo los archivos CSS de nuestra aplicación, en vez de tener diferentes archivos por secciones, lo ideal es combinar todos los estilos en un solo archivo donde al final nos estaremos ahorrando un par de peticiones. De igual forma sucede con las imágenes, hay elementos como los botones, iconos, etc., que podemos servir desde un sprite, con ello solo debemos cargar una sola imagen y así evitamos tener que hacer muchas peticiones.

Activar el cache del navegador
La segunda técnica es activar el cache del navegador, a pesar que los navegadores modernos tienen suficiente inteligencia para hacer el cache de muchas cosas por si solos, hay elementos y configuraciones que no entienden, sobre todo cuando hablamos de aplicaciones complejas, es por ello que a través de las cabeceras o headers HTTP le debemos indicar cuales estáticos de nuestra aplicación debe guardar y cuánto tiempo debe pasar antes de verificar si han sido actualizados, esto nos ayuda de forma importante ya que el navegador entonces eliminaría la necesidad de descargar nuevamente el estático.

Reducción del tamaño de los estáticos


Otro aspecto que nos ayuda con el rendimiento al trabajar con estáticos es reducir el tamaño del mismo, esto genera unos efectos interesantes, al ser más ligero el contenido, la petición HTTP llega a su final más rápido por lo que nuestro servidor se libera de esa carga, a nivel del cliente simplemente verá que la aplicación carga más rápido, si a esto le añadimos el uso del cache, tendremos aplicaciones que parece que no tienen que buscar nada en el servidor.

¿Cómo se logra?
La reducción se logra dependiendo del tipo de archivo que estamos sirviendo, por ejemplo para los archivos CSS y JS es muy popular la técnica llamada minify que consiste en eliminar los espacios, saltos de línea y comentarios del código, esto puede llegar a reducir entre el 40 y el 75 por ciento de su peso, aunque la desventaja es que ya el código deja de ser legible para el desarrollador.

En otros recursos como videos o imágenes hay que aplicar filtros y compresión sin perdidas que lo que hacen es reducir la resolución y eliminar los detalles no visibles para el humano, también consiguiendo hasta 70% de reducción de tamaño de los archivos. Si tomamos en cuenta estos métodos podremos asegurar un mejor rendimiento de nuestra aplicación al servir estáticos.

El futuro es ahora, utilizando CDN


El tema de los archivos estáticos es tan importante que ha generado un nuevo nicho en el mercado y estos son las CDN, redes de entrega de contenido por sus siglas en inglés Content Delivery Network y no son más que servidores especializados y optimizados para almacenar nuestros archivos estáticos.

Lo interesante es que al solo servir archivos estáticos estos servidores responden muy rápido e incluso tienen muchas veces regiones geográficas, esto significa que según la ubicación de quien abra nuestra aplicación el CDN va a buscar el servidor más cercano para que sirva el archivo y así bajar aún más el tiempo de respuesta.

El reto está en hacer nuestra aplicación lo suficientemente robusta y adaptable para incorporar un CDN en el momento en el que sea necesario, para ello podemos utilizar técnicas como el mapeo de recursos. Veamos la siguiente imagen con un código que hace esto:

contenido-estatico-express.jpg


Si nos fijamos en este código cada vez que llamamos a nuestro método helper static, este va a buscar en una librería y hace un mapeo del recurso, esto tiene por objetivo que su aplicación en el Front-End o lado del cliente sea una sola, y así al momento de movernos al CDN solo debamos cambiar el contenido del helper.

Variables globales
También existen implementaciones en el lado cliente para este tipo de cambios, donde creamos variables globales con los nombres de los recursos estáticos que deseamos, de esta forma la lógica de cual recurso es el que se va a utilizar recae únicamente en la lógica que se desarrolla en el lado cliente, pero el mapeo sigue siendo hecho por Express al recibir la petición.

Veamos la siguiente imagen con un código que nos permite demostrar esto que acabamos de explicar.

contenido-estatico-express-2.jpg


Notamos que en el primer bloque lo que se hace es indicar que hay dos variables que corresponden a la ruta mapeada con nuestras funciones de servidor, esto hace que traigamos las rutas de esos recursos, luego en el segundo bloque lo que tenemos es un proceso de toma de decisiones en el lado cliente, donde podemos preguntar por funciones de nuestra aplicación y en caso de obtener una respuesta u otra podremos seleccionar cual archivo cargar, evitándonos así tener que llamar a una petición HTTP de forma innecesaria.

Ayuda del servidor web


Ya que hemos entendido lo básico del rendimiento y del proceso de servir estáticos, debemos entonces hablar de otra herramienta que muchas veces se subestima y es el uso de un servidor web para los estáticos, si bien un CDN se encarga de eso por nosotros, no siempre podremos acudir a este tipo de servicios por muchas razones.

Una de las formas más rápidas de resolver este problema es creando un subdominio y con un servidor al estilo de NGINX crear nuestro repositorio de recursos y archivos estáticos, gracias a ello podremos descargar trabajo de nuestro servidor de aplicaciones y así poder mejorar el rendimiento para los usuarios.

Pero más allá de esto también se nos facilita habilitar la compresión de manera rápida para los archivos, estableciendo las cabeceras de cache para los navegadores. Por supuesto el tener que configurar este servidor va a requerir de nuevas habilidades pero si lo tomamos como un reto seguramente no tendremos inconvenientes.

Así finalizamos este tutorial, donde hemos aprendido muchos conceptos del proceso para servir archivos y contenidos estáticos en nuestras aplicaciones hechas con Express, es muy importante no descuidar el aspecto del rendimiento ya que en la actualidad los buscadores como Google también toman en cuenta este aspecto a la hora de mostrar los resultados de las búsquedas, por lo que una aplicación lenta puede perjudicarnos también.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X