la versión 2.0 del
catálogo de componentes NextUI.
Ya sabéis que NextUI es un catálogo
de componentes que además había
hecho alguien que era parte de la comunidad, aunque
creo que hace tiempo que no está por aquí. Ya no se
pasa, claro, se hizo famoso con NextUI,
pues ya no se pasa por aquí, ya no quieres saber
nada de nosotros, pues no pasa nada, ¿eh?
Que lo sepas, no pasa nada, te queremos igual.
Entonces, como nosotros sigue J.R. García,
ya no está entre nosotros, pero
las estrellas se van, se van, se van,
pero bueno, vosotros estáis aquí, que es lo importante.
Entonces, NextUI,
la verdad es que siempre ha sido un catálogo de componentes
súper bonito, ¿eh? Que me
encanta. Ah, sí, mira, J.R. García está por acá,
está por acá porque lo ha visto en el título, dime la verdad,
J.R. García. Has visto en el título que
íbamos a hablar de tu catálogo de componentes y estás
pasado a ver qué decíamos. Pero bueno, eres
bienvenido, siempre eres bienvenido.
Total, el catálogo de componentes, ya vamos a decirle
la verdad, ya que estamos, ya que está por aquí conectado, vamos a
decir la verdad. La verdad es que a mí la versión 1.0
me gustaba mucho en diseño,
me gustaba mucho visualmente, pero nunca
me había convencido del todo la API.
No sé, nunca había terminado
de encajarme a mí mucho la API.
Y además, el hecho de que no utilizase Tailwind
para mí era un poco, ah, cago
en la leche. Pero tengo
buenas noticias. NextUI 2
viene con cositas buenas y cosas interesantes.
La primera es que
se han pasado a Tailwind.
Han dejado de utilizar Stitches, porque
Stitches es un proyecto que ha muerto,
y entonces han dicho, bueno, pues ya aprovechamos y se han
pasado a Tailwind. Lo cual es
una noticia buenísima. ¿Por qué?
Uno, porque ahora han eliminado
todos los estilos de runtime y
lo hacen mucho más flexible, más fácil
de personalizar toda la librería de UI
y además es que
claro, ya no tienes que saberte una
API que no sé cuánto, sino que ya pues puedes
pasarle el classname y personalizarlo todo.
O sea que, buenísimo. A mí me encanta ese
cambio. Soporte para
los React Server Components. Podéis
utilizar todos los componentes
de NextUI en vuestro React
Server Components, NextDS y todo
esto. Así que ya importáis el
botón, vuestro React Server Component e
internamente ya utiliza el
UseClient. No os tenéis que
preocupar. Perfecto.
Podéis customizar, claro, gracias a la
potencia de Tailwind, pues
tenéis un plugin que han creado que se
llama NextUI, donde podéis
personalizarlo todo dentro de la
configuración de Tailwind.
La documentación la han mejorado
bastante. Muy bien. Felicidades
por esto, que me parece
me parece muy bien. Fijaos aquí.
Fijaos aquí. Podéis ver en
Storybook el
componente. Lo podéis ver en Storybook.
Además aquí tenéis pues todas las
props y tal. Podéis ir
directamente al paquete de
NPM para instalarlo, porque ahora
todos los paquetes son, o sea, todos
los componentes son instalables de
forma totalmente independiente. O sea,
si tú solo quieres utilizar el
botón, haces NPM install del
botón y ya está. Ya lo tienes.
¿Vale? Luego tendríamos también para
ver el Reactaria, el source y
los style source. Y aquí tenéis el
ejemplo, ¿vale? La preview y además
aquí el código, ¿vale? Con el código
para copiar y pegar perfectamente,
¿ves? Lo podéis copiar, pegar y
utilizar. Muy bien. O sea, creo que
han mejorado un montón, un montón la
documentación. Yo al menos
antiguamente le he echado en falta
algunas cositas y creo que ahora
está muy bien. Muy, muy, muy bien.
Así que nada, y fijaos que esto es el
botón, pero es que tienen un montón, un
montón. Me gusta mucho el diseño, muy
limpio, muy fácil. Sigue teniendo las
props, pero además ahora los podéis
personalizar un montón muy fácilmente.
Así que, y nada, es que mira, por
ejemplo, nuevo componente, en este caso
el componente para poner teclas, tenéis
el de skeleton, también nuevo de esta
versión, para crear esqueletos, snippets,
para poner este tipo de snippet, ¿vale?
Incluso con el botón este de copiar.
Tenéis tabs, también nuevo, con los
tabs. Tenéis el chip, que sería una
pequeña etiqueta, ¿veis? Esta sea
desactivada, con colores, diferentes
tamaños. Nada, muy bien, muy bien. A
ver cuál, no me he dejado ninguno más.
Pues ahí lo tenéis. Ah, y también tenéis
el Figma. El Figma tenéis también. O sea,
aparte de todo esto, que bueno, ya veis,
animaciones optimizadas.
De hecho, estamos utilizando ahora Framer
Motion, se nota, porque en la del
drop-down, vais a ver, el drop-down es
para lamerlo, ¿eh? Mirad el drop-down.
El drop-down. Oh, oh yeah. Oh yeah.
Qué bonito, ¿eh? Qué bonito. Pues el
drop-down, además, fijaos el click, cómo
se propaga. ¿Habéis visto? Qué chulo. Pues el
drop-down, este, está hecho gracias a
Framer Motion. Muy bonito. La verdad es
que les ha quedado muy bien, muy, muy,
muy bien, y está súper bien. Dice,
Savitar, lo malo de JavaScript es que no
sirve para nada. Qué pesado eres,
Savitar, tío. O sea, búscate, no sé,
tío, aparte de tocar el piano, ¿por qué no
te tocas los cojones y te estás quieto ya,
tío? Que está todo el día, todo el día en
Twitter. Es que JavaScript no sirve para
nada. No sirve para nada. Pues, tío, bien
que sirve para que des por culo, que es
más pesado, tío. Búscate un amigo o algo,
ráscate la espalda. Madre mía, tío, con
el JavaScript no sirve para nada. Es
broma. En el fondo, Savitar sabe que le
quiero mucho. Y él sabe que el
JavaScript sirve, aunque sea para darle
trabajo. Aunque sea para darle trabajo,
sabe, sabe que sirve. Pues eso, os lo
recomiendo un montón. La guía de
componentes está súper chula. Me gusta
hasta el componente de imagen, tío. Esta
imagen, este Blur, ¿ves? Puedes utilizar
Is Blur para duplicar la imagen y
veis, la imagen queda duplicada detrás y
queda muy bien este efecto. Está súper
chulo. En fin, y tenéis el Figma, que no
os lo he comentado. Sí, el Figma, ¿ves?
Tenéis el Figma Kit para utilizarlo en
vuestros proyectos. No está del todo
terminado, ¿ves? Que está en desarrollo,
pero está muy chulo. Su academia está
hecha con JavaScript. Sí, sí, no. O sea,
Hack You Academy, ¿no? Era, a ver. Vamos a
ver esto. Ah, no, Hack Academy. ¿Cómo se
llama la academia de...? Academia
Savitar. Ah, Hack For You, Hack For You.
Que no te voy a hackear, no te
preocupes. Bueno, un loader. Empieza
bien, empieza bien. Vamos a ver. Para no
servir para nada, vamos a ver. Vamos a
ver esto. Tu web a juicio, Savitar. Tu web
a juicio. Hombre, no, claro. Pues para no
servir para nada, bien que cargas hasta
los scripts dos veces. ¿Esto qué es? Lo
cargas por si acaso dos veces. Como no
sirve para nada, igual si lo cargas dos
veces sí que sirve para algo. ¿O cómo va esto?
Hombre, para no servir para nada, digo
yo, si cargas tres megas de JavaScript,
¿esto qué es? ¿Para qué cargas tres
megas? ¿Cuanto más cargan, más sirve? ¿O
cómo va esto? Yo creo, yo creo que puedes
cargar más, ¿eh? Sí, mira, Vue, jQuery,
React, también puedes cargar. Puedes cargar
Vue, puedes jQuery, porque no los cargas
todos, tío. Cárgalos todos. Igual pasa
algo. Si cargas React, jQuery, Vue, se
juntan todos, tío, y explosiona. No sé,
o sea, por probar, quién sabe, tío. Igual
Angular estaría bien, ¿sabes? Para
añadir un mega más, Angular. Ya,
perfecto. Bootstrap, claro, Busta
también. JQuery más veces. Vue 2, Vue 2,
Vue 3. No, carga más, tío, a ver si
así revienta, tío. Igual, mira, Webpack
también, claro. Y carruseles también 4 o 5.
No, está bien, está bien. A ver si
alguno... Yo creo que cargan mucho, a ver
si alguno sirve para algo, ¿no? Está
bien, está bien. Así, así se tensa la
cosa. Sí, está bien.
Qué broma, hombre. Está muy chula su
academia, ¿eh? Si queréis saber de
hacking y tal, os recomiendo mucho.
Sabita del tío es muy crack, explica
muy bien y sabe, sabe, sabe de lo
bueno. De JavaScript no sabe, claro, es
que el tío no puede saber de todo. ¿Qué,
qué, qué le vamos a hacer? Pero, pero
sabe, sabe lo suyo, ¿eh? Sabe lo suyo. Si un
día quiere, le puedo ayudar a... Si un día... Te lo
digo en serio, ¿eh, Sabi? Si quieres un
día nos miramos la web y le echamos un
vistazo a ver si la podemos optimizar un
poquito. Más que nada para que no
cargue 15 megas, que a lo mejor cargar
15 megas, yo qué sé, tío. Que tampoco
hace falta... Que está bien hackear, pero
tampoco hace falta reventarle los
dispositivos a la gente, ¿vale? Que
seguro que a más de uno ya le ha
reventado el dispositivo.