Las siglas HMR han aparecido últimamente en los trends de twitter, donde se reúnen muchos de los developers Sr de la industria. Es bueno ir y echar un ojo de vez en cuando para mantenerse al día. 🤓

Este término es usado para describir una técnica usada por los llamados “builders” o static module bundlers que sería el termino correcto.

Estos empaquetadores toman todo tu código fuente y lo convierten en código compatible para el navegador, los archivos que puedes incluir son variados, desde archivos CSS o Typescript, hasta imágenes, todo procesado y optimizado para correr nativa y maravillosamente en el navegador.

Algunos ejemplos

Algunos de los exponentes más importantes de estas herramientas son: Gulp y Grunt que fueron de los preferidos en la era del legendario jQuery. Pero actualmente es necesario mencionar a Webpack y Rollup. La principal diferencia entre los dos es que Rollup te deja hacer polyfills import/export.

Pero, estas herramientas no son tan simples, ambas necesitan un archivo de configuración donde debes indicar entradas, salidas, plugins, transformaciones, etc.

Por eso existen programadores web que no quieren lidiar con estas configuraciones en cada proyecto, y prefieren utilizar algún framework o entorno de desarrollo, como create-react-app, que es un entorno de desarrollo pre-definido (opinionated) que te permite concentrarte en tu código React y oculta las configuraciones de Webpack, Babel, Esbuild, Rollup o cualquier otra herramienta que use por debajo.

Vite es la recomendación

Vite es justamente el ganador de la temporada, pues es muy popular por su implementación del Hot Module Replacement, actualiza los módulos de JavaScript en tiempo real, mientras desarrollas con tu aplicación corriendo, lo que hace que los cambios se reflejen de forma instantánea en el navegador, sin la necesidad de hacer una carga completa de la página, evitándote perder datos y estados; ahorrando mucho tiempo de desarrollo. Si alguna vez has construido una app que utilice muchos formularios: conoces bien este dolor.

Vite logra esto gracias a la compatibilidad que ya tiene el navegador con los es-modules o ECMAScript modules

Esta compatibilidad te permite previsualizar los cambios en el navegador igual de rápido que cuando haces un cambio dentro de las devTools del propio navegador.

Buena esa Evan you!

Abrazo. Bliss.