Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

2 Días
14 Hrs
25 Min
13 Seg
Curso de Vite.js

Curso de Vite.js

Diana Martínez

Diana Martínez

Historia del Ecosistema de JavaScript

2/19
Resources

We will talk about the history behind Vite, the problems it solves and all the technologies, ideas and concepts that came before its arrival.

The ecosystem before Vite.js

When the web started, pages were only text, with some images and links (HTML). Then came the browsers with the feature of processing CSS, with time it was necessary to add new functionalities to the web, a dynamic web was needed and JS came as an answer.

Modules and libraries

From this point on, the code began to grow and the following question arose: How can we organize it better, and so came the modules and libraries. Initially, there was only one way, which was an HTML tag, like the following:

```

```

This tag referenced the file or the file itself was inside it. Basically, this was a module, you loaded the file and it was ready to use, but the following problems arose:

  • It continued to grow and you no longer had just one module, you had many, many modules.
  • There was no standard
  • Difficult to read
  • Errors could be generated depending on the import order
  • There were possibilities of a collision between variables

IIFE

Due to the above problems, IIFE (Immediately Executed Function Expression) came into existence, which looked as follows:

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

These consisted of a normal JS function wrapped in parentheses, so that at the moment it was declared it was also executed. At the time of use it looked like this and this made the variables stay inside the module, avoiding the collision of variables.

var module = (function(){ var version = "1.0.0"; })(): // version is inaccessible

Minification

The process of minification arose due to the amount of code that is needed to make web, this consists of a type of compression where features of the code are removed that the browser did not need and were only there for better readability, for example, spaces.

The minification helped the performance of the web in big files, this is the before and after of a minified code:

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

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

Bundling

Sometimes you have many modules within the same website and you consume many of them at the same time. This is where bundling comes in, a process where you take all these modules and convert them into a single minified file ready to use.

vite.png

When the user enters the web page, the bundling instead of having to download all these files, the user only has to download one, improving performance.

First generation

Node.js brings a whole revolution, allowing people to use JS on the backend side to modify the way web pages behave. With the design of this, comes the first generation tools, such as templates or development technologies.

  • Templates: A template is when we take different blocks of HTML, make them come together and create a complete page (Jade, Pug). Later, it was implemented with CSS (Sass, stylus).

Tools for automation

The need for tools to automate these processes and take care of the order of executing them, such as Grunt and Gulp, began to emerge.

Yeoman Generator

Tools such as Yeoman Generator, which allows you to generate code through a command tool, for example to generate a component with all the code base through a single command.

Frameworks

The first frameworks appear (Angular.js, Ember.js, Backbone.js) that bring with them the concept of working with the language and structure they provide. The need arises to have multiple folders and files, structured in a very specific way, which have to go through transpilation, that is, to be in a development stage and then generate a version for production.

ES6 & Babel.js

ECMAScript 6 appears and with it Babel.js, a tool that allows you to use ES6 (JS Standard) in development and then convert it to an older version, so that older computers can run the code. This way having the latest JS features and being backwards compatible.

Second generation of tools

A new generation of tools arrives and brings with it:

  • Newframeworks such as React.js, Vue.js and Angular io.
  • ESLINT and Prettier, tools focused on development. Which format the code with a standard code, having now a more organized code.
  • Bundlers such as Webpack, esbuild or parcel.

Webpack

One of the most used tools today, which allows you to do all these processes that we have been seeing throughout the course. It works through a configuration where the development files are passed to production code.

But Webpack brings a big problem, it is very slow and needs too much configuration, arising alternatives to this as esbuild (much faster), parcel (less configuration needed) or rollup (more optimized code).

TypeScript (TS)

TS appears a typed programming language that transpiles to JS quite useful, but this entails rewriting the entire ecosystem to be compatible with JS, becoming another reason to make a change on the web.

Third generation of tools

Finally, we come to Vite, a historical answer to this whole series of processes and complexities, which brings a better experience for developers, with increased speed and no need for complicated configuration.

We'll talk more about Vite.js and its features in the next class. See you there.

Contributed by: Jofay Zhan Segura

Contributions 31

Questions 2

Sort by:

Want to see more contributions, questions and answers from the community?

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

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

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

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.

HEY!! soy el primero! estaba esperando este curso

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!

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.

Excelente introducción o recorrido histórico.

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!

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. ⌛️

Gran resumen, excelente forma de poner en contexto lo que viene a continuación.
\*Me encantó esta clase\*, el ver desde donde viene y en donde estamos en el desarrollo web me pareció sumamente interesante, mi visión se amplio a como es que realmente se hace el desarrollo web actualmente y también me deja ver el largo camino que tengo por delante en el mundo del desarrollo de software.
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.😸

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