Curso de Vite.js

Curso de Vite.js

Diana Mart铆nez

Diana Mart铆nez

Historia del Ecosistema de JavaScript

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:

```

```

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.

vite.png

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

Aportes 29

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃彌锔 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

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.

HEY!! soy el primero! estaba esperando este curso

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.

Excelente clase! Vengo del curso de Introducci贸n a Empaquetadores Web y en esta sola clase aprend铆 10 veces m谩s que en el otro curso entero. Muy bueno el repaso hist贸rico y la explicaci贸n conceptual de cada herramienta y su raz贸n de ser.

Excelente, hac铆a falta algo nuevo en Platzi.

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

Querido diario, llev贸 estudiando 2 a帽os y siento que entre mas estudio m谩s lejos estoy, me voy a enloquecer y ese trabajo de cr铆menes cada vez lo veo mas lejos :(

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 encanto la manera de explicar de Diana! Esta explicacion era super necesaria ya que sigo la ruta de frontend y backend con JS y me estaba perdiendo un poco en todas las herramientas que veia en los cursos anteriores. Ya con esta clase todo queda super claro! Que lindo como han salido proyectos de la comunidad que han mejorado el lenguaje!

De las mejores clases que he visto. La informaci贸n fue s煤per clara y concisa. Literalmente resumiste el curso de introducci贸n a empaquetadores web en 15 minutos. 隆Que buen trabajo!

隆隆隆Genial la introducci贸n!!!

Excelente, muy completo.

Ahora tiene sentido lo de herramienta de 3ra generacion

Se agradece este contexto hist贸rico 馃憤

Y pensar en todo lo que ha cambiado el ecosistema de desarrollo web en este tiempo. 鈱涳笍

No tenia idea. Muy buena clase

Al fin alguien que se toma el tiempo de explicar un poco

gracias por la clase!!

Las herramientas de primer, segundo y tercer nivel son conceptos que se utilizan para describir diferentes capas o niveles de tecnolog铆as y herramientas utilizadas en el desarrollo web. A continuaci贸n, te explico cada uno de estos niveles:
.

  1. Herramientas de primer nivel (First-level tools):
    Las herramientas de primer nivel se refieren a las tecnolog铆as esenciales y fundamentales utilizadas en el desarrollo web. Estas herramientas incluyen los lenguajes de programaci贸n b谩sicos como HTML (HyperText Markup Language), CSS (Cascading Style Sheets) y JavaScript. HTML se utiliza para estructurar y definir el contenido de una p谩gina web, CSS se utiliza para estilizar y dise帽ar la apariencia visual de la p谩gina, y JavaScript se utiliza para agregar interactividad y funcionalidad din谩mica a la p谩gina.
    .
  2. Herramientas de segundo nivel (Second-level tools):
    Las herramientas de segundo nivel son tecnolog铆as y frameworks que se construyen sobre las herramientas de primer nivel para facilitar el desarrollo web. Estas herramientas incluyen frameworks de desarrollo web como React, Angular y Vue.js. Estos frameworks proporcionan una estructura y una serie de funcionalidades adicionales que permiten a los desarrolladores construir aplicaciones web m谩s complejas y eficientes. Adem谩s de los frameworks, las herramientas de segundo nivel tambi茅n pueden incluir herramientas de automatizaci贸n, gesti贸n de paquetes (como npm o yarn) y sistemas de control de versiones (como Git).
    .
  3. Herramientas de tercer nivel (Third-level tools):
    Las herramientas de tercer nivel se refieren a herramientas y tecnolog铆as adicionales que complementan y ampl铆an las capacidades de las herramientas de primer y segundo nivel. Estas herramientas incluyen bibliotecas y plugins espec铆ficos para tareas especializadas, como bibliotecas de gr谩ficos (por ejemplo, D3.js), bibliotecas de manipulaci贸n de fechas y tiempos (por ejemplo, Moment.js) y bibliotecas de validaci贸n de formularios (por ejemplo, Formik). Tambi茅n pueden incluir herramientas de pruebas (por ejemplo, Jest o Mocha) y herramientas de optimizaci贸n de rendimiento (por ejemplo, Webpack o Gulp).

.
Es importante destacar que estos niveles no son estrictamente definidos y algunas herramientas pueden estar presentes en m煤ltiples niveles. Adem谩s, el desarrollo web es un campo en constante evoluci贸n, por lo que las herramientas y tecnolog铆as en cada nivel pueden cambiar y actualizarse con el tiempo.

Excelente clase para aprender un poco m谩s de la historia de js

El mejor resumen por lejos de todo el ecosistema de JavaScript, su historia y empaquetadores.
Me encanta. 馃挌

Muy buena intro Diana!

Realmente bueno, hay informaci贸n aqu铆 que hizo falta en los cursos anteriores de empaquetadores. Disfrutare este curso.

Cheee鈥 muy buena clase! Saludos

Ya he creado un proyecto con vite y lo recomiendo mucho, se nota much铆simo la diferencia de velocidad, lo recomiendo much铆simo.馃樃

Excelente introducci贸n o recorrido hist贸rico.

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