million.js. ¿Qué es lo que hace esta biblioteca? Esta biblioteca lo que hace es que tu React vaya un 70% más rápido, ¿vale?
¿Y cómo lo hace? Pues el virtual DOM que tiene React se lo carga y lo reemplaza por otra implementación mucho más rápida.
Y lo que hace es que, fíjate, million.js es mucho más rápido que priack, que ya es una alternativa rápida de React,
y que el propio React, y ocupa muy poquito. Pero ¿cuál es el problema que teníamos con million hasta ahora?
El problema de million es que para utilizarlo, tú tenías que utilizar su API. O sea, tú tenías que importar el bloque
y tenías que envolver el componente que querías optimizar. O tenías que utilizar para las listas, por ejemplo,
tenías que utilizar el componente for, que no utilizaba keys y además, pues fíjate que esto lo que hace es optimizar el for
y no importaba el número de elementos, sino que al final lo mejoraba. Vale, también podías utilizar macro.
O sea, lo malo que tenías que utilizar su API. Y era un rollo, esto es un rollo. Pero, ojo, lo que han anunciado.
Han introducido million.js automatic mode. Esto lo que hace es que puedes migrar automáticamente sin que tú hagas nada
para optimizar tu aplicación de React simplemente importando la biblioteca. Y funciona con Bit, con Webpack, con Next.js y con Astro.
O sea, tremendo. ¿Por qué? Porque todas nuestras aplicaciones con Next.js, Astro, con lo que sea que utilicen React,
vamos a tener optimizaciones. Va a hacer que vaya mucho más rápido gratis. Sin tener que preocuparte absolutamente de nada.
De nada. Y fíjate que lo único que tienes que hacer, este es el ejemplo de Bit. ¿Ves? En el plugin tú importas
import million from million barra compiler. Y aquí en plugins haces million punto bit, auto true y ya está. ¡Pum!
Y esto lo que hace es que automáticamente detecta dónde está utilizando el virtual DOM y te lo está cambiando.
Es importante que chequees que tu aplicación sigue funcionando como esperas. ¿Vale?
Pero esto también, ¿ves? Que pone aquí automatic mode is enabled. Está en beta todavía. ¿Vale? Hay que ir probando.
Pero, ojo, ¿eh? Porque esto lo que puede hacer es que tu aplicación, sobre todo el cómo se renderiza y tal,
funcione desde un 30 a un 70% más rápido. Sin tú tener que hacer absolutamente nada.
Esto es, como lo estamos viendo ahora, yo creo que en el futuro lo que va a pasar es que Next.js esto lo va a hacer gratis.
O sea, totalmente automático. Que vamos a tener que activar un flag experimental y ya estará.
Y no me extrañaría que en el futuro, en el futuro, lo que veamos es que React lo incorpora.
Para que lo entendamos, million es una biblioteca que cambia la arquitectura interna,
parte de la arquitectura interna de React.
Pero, ¿es base o de verdad? Es de verdad. Es de verdad. Y os voy a explicar por qué es de verdad por dos cosas.
Lo primero, porque mira quién está haciendo de sponsor. ¿Quién lo utiliza o quién está siendo de sponsor?
Pero sé que Vercell está poniendo dinero en este proyecto. O sea, Vercell es... Vercell que es lo que quiere.
Que tu página sea lo más rápido del mundo. ¿Vale?
Entonces, lo que está haciendo es optimizar el compilador, el framework y ahora también la biblioteca.
Todo eso lo está haciendo. No tendrá más vulnerabilidades. No va a tener ningún tipo de impacto en vulnerabilidad.
Y también debería mejorar el tiempo también en desarrollo.
Pero no es tanto el tiempo de compilación, sino que es más de renderizado.
¿Vale? Esa sería la mejora. Sería de renderizado.
No de compilación del código. ¿Vale? Eso lo harían otras herramientas.
Muy bien. Pues esta es la de Million. Os voy a explicar dos cositas más.
Una. Una nueva biblioteca muy chula. Una alternativa a Zot.
Es un sistema de validaciones de esquemas. En el que tú le puedes decir, mira, este objeto tiene que ser así.
¿No? Por ejemplo, a ver si encontraba. ¿Ves? Esto tiene que ser un string y como máximo cinco caracteres.
O mínimo cinco caracteres. Zot es muy interesante para utilizar con TypeScript.
Tanto para validar formularios, inputs de usuarios, lo que sea.
Y está muy chulo porque te ayuda a validar datos con TypeScript. Brutal. ¿Vale?
Pero ha salido este que está, tiene bastante buena pinta, que se llama Valibot.
Valibot. Y que además también tiene mucho, muy buen bundle size. Se parece bastante también la API.
Mira, ¿ves? Aquí tendríamos el de Valibot. Esto sea TypeScript.
Y aquí tenemos la validación del esquema. ¿Vale?
Y está bastante bien. Me gusta el cómo tratas directamente, tiras el object y tal.
Y si no puedes hacer, pues exactamente lo mismo que Zot. O sea, podrías importar Z from Valibot.
Z.Object. Exactamente lo mismo, ¿no?
Y funciona bastante parecido. Tiene cosas interesantes que no había visto yo antes.
Aunque me imagino que también lo debe tener Zot, que es el tema este de los pipelines para tener validaciones como una detrás de otra.
De otra forma, no como en Chain. ¿Sabes? Que eso sí que lo había visto en Zot.
¿No? De poner Z.String y luego Min, no sé qué, no sé cuánto.
Sino como encadenando con un pipeline. Y está bastante bien.
Así que podéis mirar las migraciones de Zot. Ah, pues no. No podéis migrar.
No sé dónde lo he visto, pero en algún sitio.
Pero es una alternativa. Zot, AJV, Joy, Job. Job sería como la más antigua.
Bandelfobia. Vamos a ver lo que ocupa cada una.
Vamos a ver. Zot ocupa... Hostia, que Zot ocupa un cojón, tío.
13k. Que está muy bien en la biblioteca, pero... Hostia, Balibot... Pues no la encuentra.
Ah, 5k. Bueno, ya vemos que ocupa bastante menos.
Y luego tendríamos... 12. Bastante parecido.
Menos mal que ha bajado bastante, porque antes ocupaba bastante más.
Y teníamos también AJV... 35.
Claro, AJV en el back, en el servidor, igual no tiene ningún problema.
Pero bueno, algo a tener en cuenta. A mí es que muchas veces me gusta bastante...
Me gusta bastante el hecho de que, oye, ocupen poco y tal.
Y esta parece ser bastante modular.
Por ejemplo, ¿qué es lo bueno que tiene?
Que aquí en Balibot... Claro, como aquí solo estás importando esto, ¿qué es lo que pasa?
¿Veis que pone aquí 0.74? Aunque yo aquí he visto que ocupa...
Cuando he puesto aquí Balibot, Balibot, ¿no? Balibot.
Aquí he visto que ocupa 5k. ¿Qué es lo que tiene de bueno?
Que si tú lo importas así, lo único que va a hacer es cargar los módulos que necesita.
Y aquí solo necesitaría estos cuatro módulos.
Y por lo tanto, lo que va a hacer es que solo ocupe 0.74.
Los 5k sería toda la biblioteca.
Y que muchas veces, claro, como está Zot...
Si miramos los ejemplos de Zot, vais a ver que lo que haces es utilizar siempre z.
Z. Y esto lo que hace es que lo tengas que importar todo, ¿vale?
Que es un poco rollo.
Y aquí, pues, al ser más modular, la verdad es que queda bastante bien.
Mira, aquí tenemos una comparación con Zot.
Zot requiere 11k cuando Balibot solo 0.74 para validar un formulario.
Una reducción del 94%.
Y esto es porque Zot, todas las funciones, tienes que descargarte toda la biblioteca y no son fácilmente extraíbles.
¿Vale?
El bundle size, aquí vemos la diferencia entre todas.
Aquí tenemos una buena comparación.
Bueno, Joy, GetZipet...
Bueno, aquí podemos ver que IOTS sería la más pequeña.
IOTS junto con esta.
Serían las dos más pequeñas.
Y SuperStrux, que también tiene bastante buena cuenta, ¿no?
SuperStrux.
Esta tampoco la conocía.
Pero bueno, la idea es la misma.
La idea es la misma.