Curso de Vite.js

Curso de Vite.js

Diana Martínez

Diana Martínez

Historia del Ecosistema de JavaScript

2/19
Recursos

Aportes 15

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

🏛️ 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

HEY!! soy el primero! estaba esperando este curso

Como complemento para la clase: acaba de salir una herramienta que funciona como un Node + Webpack (Runtime + Bundler) pero mucho más rápido que Webpack y Vite (según métricas del autor)

Aún está en Beta, pero luce muy prometedor.

Wow Diana! Que resumen histórico más chevere. Cualquier persona no tech podría pensar que todo esto se dio en un lapso de 50 años o más y apenas han sido 20 años cuanto mucho jajaja.

Excelente, hacía falta algo nuevo en Platzi.

Ahora tiene sentido lo de herramienta de 3ra generacion

Como olvidar a Jade que juego se llamo Pug. Luego los compilaba con Grunt y Gulp. Ahora programo con React y Vite.js. En mi experiencia usando Webpack me sorprendio la velocidad en que Vite.js compila tanto para levantar el server en modo desarrollo como el build para produccion.

Se agradece este contexto histórico 👍

Y pensar en todo lo que ha cambiado el ecosistema de desarrollo web en este tiempo. ⌛️

Excelente introducción o recorrido histórico.

Estas clases que detallan la historia detrás de una herramienta me encantan!

¡¡¡Genial la introducción!!!

Excelente, muy completo.

Vengo de la primera tilogía de cursos de Vue.js con la profe Diana, son sencillamente espectaculares y además los proyectos con Vue lo he realziado con Vite y la experiencia de desarrollo es inigualable, es extremadamente rápido!
.
Muy emocionado por este curso y conocer más de Vite!

Me encanta que se tome el contexto histórico sin las bases no podemos avanzar a entender la actualidad.