Historia del Ecosistema de JavaScript

Contenido del curso

Cursos Empresas Blog Live Conf Eventos Precios

0:0015:19

Historia del Ecosistema de JavaScript

Curso de Vite.js

Clase 2 de 19

Clase 2 / 19

Recursos

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:

<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:

(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.

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:

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

// 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

Fernando Quinteros Gutierrez

Hace 4 años

🏛️ Contexto histórico

Ideas/conceptos claves

IIFE

Viene de expresión de función ejecutada inmediatamente. Son funciones que se ejecutan tan pronto como se definen

Minificación

Es el proceso de eliminar todos los caracteres innecesarios del código fuente de lenguajes de programación interpretados o lenguajes de marcado sin cambiar su funcionalidad.

Bundling

Es un proceso donde se toma varios archivos y se unifican en uno solo aparte que puede estar minificado.

Motor de templates

Es una herramienta que te permite tomar archivos y tratarlos con JavaScript para obtener un resultado como un archivo.

Transpilación

Es convertir los archivos iniciales de un proyecto a archivos distintos para producción distintos de los originales.

TypeScript

Es un superconjunto de JavaScript, que esencialmente añade tipos estáticos y objetos basados en clases

Apuntes

Cuando la web comenzó únicamente eran páginas de texto con algunas imágenes y enlaces
Posteriormente, se implementó CSS para agregar estilos con el fin de organizar los elementos y estilizar los elementos
Con el tiempo fue necesario agregar nuevas características a los sitios con JavaScript
- JavaScript dio un cierto dinamismo a la web
Conforme iba a creciendo el código fue necesario llegar al tema de implementar módulos y librerías de JS para organizar de mejor manera el código
Inicialmente, solo existía esta forma, que era usar una etiqueta de HTML donde se referenciaba al archivo o dentro de la etiqueta

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

Esta era la forma más básica de hacer un módulo, cargando el archivo y ya estaba listo para usarse
Pero con el tiempo de igual manera fue creciendo donde ya no se tenía un solo script sino una serie de etiquetas

<script src="modulo1.js"></script>
<script src="modulo2.js"></script>
<script src="modulo3.js"></script>

El gran problema era que no se tenía ningún estándar para cumplir con este objetivo
Al implementar esta manera se tenía unas reglas como ser:
- Al necesitar algo de un módulo primero se debe cargar para que otros módulos lo implementen
Esto causaba problemas a la experiencia de desarrollo
- Difícil de leer
- Podía realizar muchos errores en caso de una equivocación en el orden de importación
- Había probabilidad de una colisión entre variables sobreescribiendo en cada archivo
Por este motivo se buscó soluciones para este problema, de esta manera surgió IIFE
- Lo que aportaba esta solución era que las variables se quedaban en el contexto de la función, evitando la colisión de variables

Ejemplo de IIFE

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

var module = (function(){
	var version = "1.0.0";
	return { version };
})():

// Salida inmediata:
module.version; // "1.0.0"

Conforme fue avanzando el desarrollo web surgieron conceptos como minificación
- El cual ayudaba a la performance de la web en archivos grandes
- Si bien no cambia el funcionamiento, puede agregar caracteres como el punto y coma para que no haya conflictos al ejecutar el programa

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

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

También surgió el concepto de bundling
- Su ventaja estaba que cuando un usuario ingrese al sitio solo descargue un archivo una sola vez, mejorando el performance
Posteriormente, también apareció node.js
- Permitió que las personas utilicen JavaScript del lado del backend
Con el diseño de node.js llego las herramientas de primera generación
- Node.js permite tiene un motor de templates
- Inicialmente, se utilizó con HTML (Jade, pug)
- Posteriormente, se implementó con CSS (Sass, Stylus) los cuales ayudaron a escribir código de estilos más fácilmente
De estos procesos sale el concepto de transpilación
Además, comienzan a surgir herramientas para que nos ayuden a automatizar estos procesos y también que se encarguen del orden de ejecutarlos
- Entre las herramientas de primera están Grunt o Gulp donde era necesario escribir scripts para automatizar este proceso
También surgen herramientas para generar código como ser yeoman generator acelerando el proceso de desarrollo y teniendo que mantener más herramientas
Comienzan a salir los primeros frameworks (Angular.js, Ember.js, Backbone.js)
- De esta manera el framework te proveía una estructura para trabajar
- Se empieza a tener la necesidad de tener muchas carpetas con múltiples archivos, estructurados de una cierta manera, los cuales se transpilaban para producción
En su momento aparece ECMAScript 6 y con ello Babel
- En primer orden se utilizaba en desarrollo ECMAScript 6 y posteriormente se usaba Babel.js para llevar el código moderno en una versión anterior para que todos los navegadores puedan ejecutarlo sin ningún problema
- De esta forma se tenían las últimas características de la web y tener retro compatibilidad
Posteriormente, comienzan a aparecer las herramientas de segunda generación (React, Angular 2, Eslint, Prettier, etc.)
Con ello aparece Webpack
- Mediante una configuración se pasaban los distintos archivos de desarrollo a código de producción
Entre las mayores desventajas de webpack estan:
- Lento
- Necesita bastante configuración
Por ello surgen alternativas de la comunidad
- Esbuild, el cual es un bundler ****bastante rápido escrito en Go
- Parcel ⇒ Se enfoca en tener poca configuración
- Rollup ⇒ Se enfoca en poder generar una versión para producción bastante especializada cumpliendo estándares de la web
También aparece TypeScript
- Es un lenguaje es de programación tipado el cual hace que varias librerías lo implementen
De esta manera se llega a la tercera generación de herramientas (Vite.js)
- Su objetivo es mejorar la experiencia de desarrollo teniendo una mejor velocidad y menor configuración

Comentarios (38)38 comentarios

Carlos Eduardo Magallon Zepeda

Seba Cardoso

LUZ ADRIANA MARTINEZ RAMIREZ

Róger Antonio Ordóñez Flores

Felipe Molano Corredor

Hace 3 años

Ricardo Portillo

Ezequiel Magi

Victor Hugo Vázquez Gómez

Diana Martinez

Laura Roa

Martín Andrés Gonzalez

Daniel Triana

Vinci Guerra

Axel Enrique Galeed Gutierrez

Blanca Segura Garcia

Carlos Rodríguez

Rigo Carvajal

Fabio Erik Sosa Morinigo

Irving Juárez

César Palma

Christian Armando Consuelo Mayén

Introducción

¿Qué es Vite?

Historia del Ecosistema de JavaScript

Características de Vite

Setup inicial

¿Cómo instalar Vite?

Boilerplate de Vite

Estilos CSS

Importar CSS

Pre-procesadores CSS

CSS Modules

Archivos estáticos

Importar imágenes

Importar JSON

Importación global

Configuración

Uso con TypeScript

Vite Config

Construir para producción

Variables de entorno y modos

Sitios multi-página

Construir librerías

Frameworks

Soporte para React

Soporte para Vue

Cierre del curso

Despedida

Historia del Ecosistema de JavaScript

Progreso del curso

Introducción

Setup inicial

Estilos CSS

Archivos estáticos

Configuración

Construir para producción

Frameworks

Cierre del curso

Recursos

Recursos