¿Qué es un automatizador?

Empaquetadores Javascript para automatizar tareas


Antiguamente, cuando teníamos que crear un nuevo sitio web, debíamos crear manualmente una carpeta para el proyecto, las diferentes subcarpetas de las secciones de la web (imágenes, css, js, etc...), configurar un servidor web (se solía usar XAMPP o similares), colocar y enlazar las diferentes librerías CSS y/o Javascript que queríamos utilizar, etc...

Aunque eso todavía se puede hacer hoy en día, los automatizadores nos ayudan a simplificar este proceso con el que podemos gastar mucho tiempo realizando transpilaciones.

¿Qué es transpilar?

Una transpilación es la tarea de transformar el código fuente de un lenguaje a otro código fuente diferente. En nuestro caso, los automatizadores leen nuestro código Javascript y lo modifican, realizando cambios para que no tengamos que hacerlo nosotros manualmente y sea mucho más cómodo utilizarlo.

Con la evolución del desarrollo web, hemos pasado a trabajar transpilando código. Habitualmente, trabajamos en una carpeta src/ donde tenemos nuestro código fuente. Ese código se preprocesa y se traduce a otro código (en la carpeta dist/) que es el código que finalmente leerá nuestro navegador. Mantener actualizado el código fuente que escribimos con el que lee el navegador sin automatizarlo, es una tarea muy tediosa. De ahí surgen los automatizadores.

¿Por qué transpilar?

Actualmente, en el ecosistema Javascript (o en el mundo del desarrollo web en general), es muy común utilizar estos automatizadores para, entre otras cosas, agilizar el proceso de creación de una aplicación web con unos pocos comandos, realizando de forma automática todas esas tareas tediosas y repetitivas, alcanzando nuestro objetivo de forma más rápida y con una mejor experiencia de desarrollador.

Algunas de esas tareas podrían ser las siguientes:

  • 1️⃣ Creación del proyecto y su gestión (generalmente, con NPM)
  • 2️⃣ Actualización y mantenimiento de dependencias (generalmente, con NPM)
  • 3️⃣ Servidor web local de desarrollo
  • 4️⃣ Minificación de código
  • 5️⃣ Optimización de imágenes
  • 6️⃣ Preprocesar o transpilar código fuente
  • 7️⃣ Despliegue o subida del código final al servidor

Todas estas tareas pueden ser realizadas de forma manual, pero con el uso de un automatizador, lo hacemos automáticamente, de forma más rápida y, muy probablemente, con menos errores.

Automatizadores populares

Existen multitud de automatizadores hoy en día, algunos con una filosofía más de automatización de tareas (como Gulp) y otros con una filosofía más guiada como Vite, Webpack o Rollup.

Aquí tienes una lista de los automatizadores mas relevantes:

AñoAutomatizadorDescripciónGitHub
2012BrowserifyAutomatizador centrado en traducir require() (Node) al navegador.GitHub
2013GulpAutomatizador Javascript de tareas basado en pipes y flujos.GitHub
2014WebpackBundler enfocado en controlar todo y empaquetar aplicaciones JS.GitHub
2015RollupBundler empaquetador de aplicaciones con buen soporte ESM.GitHub
2016GruntAutomatizador enfocado en gestión de tareas.GitHub
2017ParcelBundler de aplicaciones web enfocado en sencillez de uso.GitHub
2019Snowpack⚠️ Automatizador enfocado en técnicas modernas con buen soporte ESM. DeprecatedGitHub
2020EsbuildBundler Javascript ultra rápido, centrado en el rendimiento.GitHub
2021ViteAutomatizador de aplicaciones web basado en Rollup y centrado en ESM.GitHub
2021TurbopackAutomatizador basado en Rust de Vercel (Sólo para Next).GitHub
2022RSPackAutomatizador basado en Rust creado por ByteDance (TikTok).GitHub
2023FarmAutomatizador extremadamente rápido escrito en Rust.GitHub

Existen muchos otros automatizadores que no están en esta lista, quizás menos populares en fama, pero que pueden tener su caso de uso particular y adecuado, como por ejemplo FuseBox, Brunch, WMR, microbundle, SWC, PAX, Bundl, etc.

Hoy en día, los automatizadores más populares son Vite y Webpack. Si estás comenzando un desarrollo te recomiendo encarecidamente que pruebes Vite, ya que es el más rápido y moderno, y el que tiene más futuro.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev