Hablaremos de la historia detrás de Vite, los problemas que soluciona y todas las tecnologías, ideas y conceptos que hubo antes de su llegada.

El ecosistema antes de Vite.js

Cuando la web comenzó, las páginas eran únicamente texto, con algunas imágenes y enlaces (HTML). Después surgieron los navegadores con la característica de procesar CSS, con el tiempo fue necesario agregar nuevas funcionalidades a la web, se necesitaba una web dinámica y como respuesta llego JS.

Módulos y librerías

A partir de este punto el código comenzó a crecer y se llegó a la siguiente pregunta: ¿Cómo hacemos para organizarlo mejor?, a lo que llegaron los módulos y librerías. Inicialmente, solo existía una forma, la cual era una etiqueta de HTML, como la siguiente:

fullscreen
<script src="modulo.js"></script>

Esta etiqueta referenciaba el archivo o este mismo se encontraba dentro de ella. Básicamente, esto era un módulo, se cargaba el archivo y estaba listo para usarse, aunque surgieron los siguientes problemas:

• Siguió creciendo y ya no se tenía un solo módulo, sino muchísimos de estos.
• No se tenía ningún estándar
• Difícil de leer
• Se podían generar errores dependiendo el orden de importación
• Había posibilidades de una colisión entre variables

IIFE

Debido a los problemas anteriores, surgieron las IIFE (Expresión de función ejecutada inmediatamente), las cuales se veían de la siguiente forma:

fullscreen
(function(){
	/*statements*/
})();

Estas consistían en una función normal en JS envuelta en unos paréntesis, para que en el momento en que se declara también se ejecutara. A la hora de usarla se veía de la siguiente forma y esto hacía que las variables se quedaran dentro del módulo, evitando la colisión de variables.

fullscreen
var module = (function(){
	var version = "1.0.0";
})():
// version es inaccesible

Minificacion

El proceso de minificacion surgió debido a la cantidad de código que se necesita para hacer web, este consiste en un tipo de compresión donde se eliminan características del código que el navegador no necesitaba y solo estaban ahí para una mejor legibilidad, por ejemplo, los espacios.

La minificacion ayudaba a la performance de la web en archivos grandes, este es él antes y después de un código minificado:

fullscreen
// Sin minificar
var data = {
	name: "Diana".
	age: 27
};

fullscreen
// Minificado
var data={name:"Diana",age:27};

Bundling

A veces tienes muchos módulos dentro de un mismo sitio web y muchos de estos los consumes al mismo tiempo. Aquí es donde entra el bundling, un proceso donde se toman todos estos módulos y lo conviertes en un solo archivo minificado y listo para utilizar.

Cuando el usuario entra a la página web, el bundling en vez de tener que descargar todos estos archivos, solo debe descargar uno, mejorando el rendimiento.

Primera generación

Node.js trae toda una revolución, permitiendo a las personas usar JS del lado del backend para modificar la forma en la que se comportan las páginas web. Con el diseño de esta, llegan las herramientas de primera generación, como por ejemplo los templates o las tecnologías de desarrollo.

• Templates: Un template o plantilla es cuando tomamos diferentes bloques de HTML, hacer que se junten y crear una página completa (Jade, Pug). Posteriormente, se implementó con CSS (Sass, stylus).

Herramientas para la automatización

Comienzan a surgir la necesidad de herramientas para automatizar estos procesos y se encarguen del orden de ejecutarlos, como por ejemplo Grunt y Gulp.

Yeoman Generator

Surgen herramientas como Yeoman Generator, que te permite generar código por medio de una herramienta de comandos, por ejemplo generar un componente con todo el código base a través de un solo comando.

Frameworks

Aparecen los primeros frameworks (Angular.js, Ember.js, Backbone.js) que traen consigo el concepto de trabajar con el lenguaje y estructura que te proveen. Surge la necesidad de tener múltiples carpetas y archivos, estructurados de una manera muy específica, los cuales tienen que pasar por la transpilacion, es decir, encontrarse en una etapa de desarrollo y luego generar una versión para producción.

ES6 & Babel.js

Aparece ECMAScript 6 y con ello Babel.js, una herramienta que te permite utilizar ES6 (Estándar de JS) en desarrollo y luego convertirlo en una versión más antigua, para de esta manera ordenadores más antiguos poder ejecutar el código. De esta manera teniendo las últimas características de JS y siendo retro compatibles.

Segunda generación de herramientas

Llega una nueva generación de herramientas que trae consigo:

• Frameworks nuevos como React.js, Vue.js y Angular io.
• ESLINT y Prettier, herramientas enfocadas en el desarrollo. Las cuales formatean el código con un código estándar, teniendo ahora un código más organizado.
• Bundlers como Webpack, esbuild o parcel

Webpack

Una de las herramientas que más se emplea hoy en día, la cual te permite hacer todos estos procesos que hemos estado viendo a lo largo del curso. El cual funciona mediante una configuración donde se pasan los archivos de desarrollo a código de producción.

Pero Webpack trae un gran problema, es muy lento y necesita demasiada configuración, surgiendo alternativas a este como esbuild (mucho más rápido), parcel (menos configuración necesaria) o rollup (código más optimizado).

TypeScript (TS)

Aparece TS un lenguaje de programación tipado que se transpila hacia JS bastante útil, pero esto conlleva reescribir todo el ecosistema para que sea compatible con JS, convirtiéndose en otra razón para hacer un cambio en la web.

Tercera generación de herramientas

Finalmente, llegamos a Vite, una respuesta histórica a toda esta serie de procesos y complejidades, el cual trae una mejor experiencia para los desarrolladores, con una mayor velocidad y sin necesidad de una configuración complicada.

En la siguiente clase hablaremos más de acerca de Vite.js y sus características.. Nos vemos allá.

Contribución creada por: Jofay Zhan Segura