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ño | Automatizador | Descripción | GitHub |
|---|---|---|---|
| 2012 | Browserify | Automatizador centrado en traducir require() (Node) al navegador. | GitHub |
| 2013 | Gulp | Automatizador Javascript de tareas basado en pipes y flujos. | GitHub |
| 2014 | Webpack | Bundler enfocado en controlar todo y empaquetar aplicaciones JS. | GitHub |
| 2015 | Rollup | Bundler empaquetador de aplicaciones con buen soporte ESM. | GitHub |
| 2016 | Grunt | Automatizador enfocado en gestión de tareas. | GitHub |
| 2017 | Parcel | Bundler de aplicaciones web enfocado en sencillez de uso. | GitHub |
| 2019 | Snowpack | ⚠️ Automatizador enfocado en técnicas modernas con buen soporte ESM. Deprecated | GitHub |
| 2020 | Esbuild | Bundler Javascript ultra rápido, centrado en el rendimiento. | GitHub |
| 2021 | Vite | Automatizador de aplicaciones web basado en Rollup y centrado en ESM. | GitHub |
| 2021 | Turbopack | Automatizador basado en Rust de Vercel (Sólo para Next). | GitHub |
| 2022 | RSPack | Automatizador basado en Rust creado por ByteDance (TikTok). | GitHub |
| 2023 | Farm | Automatizador 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.
