¿Qué vamos a hablar en la midu clase de hoy?
Ya os aviso, os aviso, no he estudiado nada de Sbuild,
pueden fallar muchas cosas, pero en la clase de hoy,
en el directo de hoy, lo que vamos a hacer es aprender
sobre este nuevo empaquetador de aplicaciones JavaScript,
que viene a ser una alternativa a Webpack y Rollup
y otras soluciones como Parcel también.
¿Y por qué es tan interesante Sbuild?
Bueno, es interesante por diferentes motivos,
pero hay uno en concreto que lo hace especialmente interesante
y es lo rápido que es.
Es absolutamente mindblowing, es brutalmente rápido,
es muy rápido.
Y cuando hablo de que es muy rápido,
no estamos hablando de que es un segundo, 30 segundos más rápido,
estamos hablando de que puede ser de 10 a 100 veces más rápido
que las alternativas.
Estamos hablando de Webpack, pues a lo mejor ahora lo veremos en la web,
de hecho vamos a pasar aquí a la web.
Esta es la página oficial de Sbuild y este Extremely Fast,
y es que lo Extremely es verdad que puede ser interesante,
empaquetador de JavaScript.
Y cada vez, no sé vosotros, ¿vale?
Pero yo trabajo bastante con Webpack y en mi empresa, pues,
digamos que cuando hacemos despliegues de nuestras aplicaciones,
nos encontramos que un paso en el que se tarda mucho
es en hacer la build de nuestra aplicación.
Puede tardar hasta un minuto.
Y tampoco estamos hablando de que sea una aplicación muy, muy, muy grande.
Es verdad que tiene sus cositas, pero, bueno,
el caso es que tarda casi un minuto.
Y es un minuto que en realidad estás perdiendo, ¿no?
Y cuando estás desarrollando y cosas así,
pues un minuto puede marcar la diferencia.
Yo tengo que decir que soy un gran hater de las instalaciones,
las npm install, cuando van súper lentas y me ponen súper nervioso.
Y entonces, no solo la instalación veremos que es rápida,
sino también el hecho de cuando ejecutas este empaquetador,
cuánto tiempo tarda.
Aquí vemos en la página web, que es esta, es sbuild.github.io,
que donde sbuild tarda, bueno, he entrado en el repositorio,
cuando sbuild tarda 0,37 segundos,
las otras alternativas como rollup, webpack 4, webpack 5,
parcel 2 y parcel 1, cada uno tarda lo suyo,
pero rollup sería el que se le acerca más y son 36 segundos,
webpack 4, 42 segundos, webpack 5, 63,
o sea, ha empeorado la última versión según este benchmark, ¿vale?
Y, bueno, ¿de dónde salen estos datos?
Estos datos, ya lo comenta aquí abajo, ¿no?
Que dice que esto es básicamente hacer un empaquetado,
un paquete a producción de 10 copias de la librería 3.js,
que creo que es para hacer gráficas, si no me equivoco.
Bueno, es para hacer cosas en 3D y supongo que también lo habré visto
utilizándose en gráficas y tal, porque, bueno, será para más una cosa.
El 3.js, esta librería con sus valores por defecto y tal,
haciendo minificado del código y haciendo source maps,
pues 10 copias de esta librería, en cada uno ha tardado lo que se puede ver.
Sbuild ha tardado 0,37 segundos, rollup 36 segundos.
O sea, aquí podemos ver, o sea, estos son 100 veces menos.
O sea, vamos a ver, esto es una brutalidad, 100 veces menos.
Pero, claro, ¿cómo consigue esto, no?
Aquí es donde está el truco, porque alguien puede decir,
¿cómo consigue realmente hacerlo 100 veces más rápido?
O sea, ¿dónde está el truco?
El truco está en que Sbuild está desarrollado con Go y lo compila a código nativo de Node.js.
O sea, está utilizando Go, no está utilizando directamente JavaScript,
lo cual hace que sea muchísimo más rápido a la hora de ser interpretado por Node.js.
No se está compilando a JavaScript puro, sino a código nativo que entiende Node.js,
que me imagino que sea C++ o lo que sea, pero es código nativo para Node.js.
Esto es súper interesante porque es totalmente distinto a lo que habíamos visto con Webpack o Rollup o todo esto,
que no dejan de ser herramientas de JavaScript desarrolladas con JavaScript.
Pero aquí podéis ver, ¿no?
El lenguaje que se está utilizando en este repositorio, el 80% es Go.
Entonces, es una aproximación muy distinta a lo que puede hacer Webpack o puede hacer Rollup o puede hacer Parcel también.
No lo he puesto por, bueno, por no ponerlo, pero por ejemplo aquí podemos ver que el lenguaje que se utiliza en Webpack,
el 99,8% es JavaScript.
Y sí que tiene un poquito de WebAssembly, pero muy poquito.
Entonces, voy a hacer un spoiler, ¿vale?
Sobre cosas que creo de donde nos va a llevar Sville, ¿vale?
Creo que ahora mismo va a ser muy interesante aprenderlo, pero creo que va a abrir una nueva era.
Una nueva era totalmente distinta a lo que entendemos de las herramientas que utilizamos en Node.
¿Por qué digo esto?
Porque creo que cada vez más vamos a ver este tipo de aproximación de intentar construir estas herramientas con un lenguaje que sea mucho más eficiente que JavaScript.
Entonces, vamos a seguir desarrollando con JavaScript, pero a lo mejor nuestras herramientas se empiezan a utilizar, como en este caso, Go, que es muchísimo más rápido.
Y creo que puede ser que Webpack, Rollup y todo esto veamos que se transformen a esta tendencia, ¿no?
Y que empiecen a utilizar Go o otra cosa para conseguir estos tiempos, porque realmente la diferencia es demasiado grande.
Pero bueno, esto es el spoiler, ¿vale?
Este es el spoiler.
Yo creo que lo mejor es que lo probemos y veamos realmente si esto, pues todo lo que dice, todo lo que promete, pues es así de interesante.
Hay que decir que no solo es que sea muy rápido, ¿vale?
O sea, porque puede ser muy rápido y no hacer nada.
Es que el tema es que dice que soporta en más script modus y common.js, por defecto, que tiene tree shaking, ¿vale?
Que esto es básicamente las ramas de nuestro código que no se utilizan, las borra.
También tiene una API para que podamos utilizar Go y también JavaScript, por supuesto, para hacer plugins en Sville.
Pero es que tiene soporte de TypeScript y JSX, o sea, React, por defecto.
Y eso me parece impresionante.
También en Content Types tiene diferentes formas de importar directamente archivos que no son los típicos.
Por ejemplo, podemos importar texto directamente haciendo un import.
Pues lo probaremos también a ver cómo funciona esto.
Y vamos a ir descubriendo, si os parece, a ver hasta dónde nos lleva Sville.
Vamos a hacer la instalación.
Para empezar, voy a crear aquí, si os parece, voy a hacer más grande esto.
Y voy a crear una carpeta que le vamos a llamar Sville app.
Así que entramos a Sville app y voy a hacer un npm init así para que me cree directamente el package.json.
Y vamos a entrar a nuestra aplicación directamente.
Vamos a ver qué nos trae este package.
Vale, ahora, para utilizar Sville primero tenemos que instalarlo.
Así que vamos a ir aquí a la terminal de nuestro Visual Studio Code.
Voy a hacer esto un poquito más grande, ¿vale?
Y voy a hacer install, Sville.
Vamos a poner que es una dependencia de desarrollo.
El menos D mayúscula este significa que es una dependencia de desarrollo.
Y nos lo va a poner en las Depth Dependencies.
Bueno, ha tardado 4 segundos.
La instalación, ¿vale?
Ha tardado 4 segundos.
Si yo, por hacer algo rápido, vamos a poner, tengo aquí un montón de carpetas temporales.
Voy a ir aquí a, voy a crear una carpeta temporal.
Voy a hacer una instalación de webpack.
Y vamos a ver cuánto tarda por curiosidad.
Igual tarda menos, igual tarda más.
No tengo ni idea, ¿eh?
Pero vamos a verlo, más o menos.
Solo la instalación, ¿eh?
No estamos haciendo la build, no estamos haciendo nada de esto.
A ver cuál es la diferencia solo en la instalación.
Ya os digo que yo no utilizo ningún tipo de caché a la hora de hacer los npm installs.
Así que, yo diría que está tardando más ya, ¿eh?
Es que me parece impresionante que haya tardado 4 segundos en hacer la instalación de Sbill.
O sea, estoy como un poco en shock.
Bueno, parece que ya está cerca.
23 segundos.
Bueno, es posible que la instalación, ya la instalación me ha sorprendido, ¿vale?
Y por qué creo que la instalación puede ser algo bastante positivo ya.
Porque, como digo, cuando hacemos integración continua con Travis, con GitHub Actions y cosas así,
y tienes que instalar las dependencias, es verdad que a veces podemos cachearlas, podemos hacer cosas,
pero esto puede marcar la diferencia.
Aquí ya estaríamos ganándole, pues, unos 20 segundos a nuestro despliegue, ¿vale?
De nuestra aplicación.
Bueno, es que me ha llamado mucha atención y tenía que revisarlo a ver si era realmente así.
Vale.
Pues ya tenemos instalado Sbill.
Por ahora no tenemos absolutamente nada.
Sí que podemos probar, ¿no?
A ver si se ha instalado todo correctamente.
Que es importante.
A ver si se ha instalado bien, ¿no?
A ver si yo estoy haciendo esto.
Vale.
Se ha instalado bien.
Perfecto.
Voy a ver qué me comentáis.
Mientras, que yo he estado aquí diciendo cosas y a lo mejor me está diciendo,
no, que esto está mal y que no sé qué.
Vale.
A ver, a ver.
Que me comentabais por aquí.
Y el termo, el termo que me preguntáis, que comentáis por aquí, lo tengo aquí.
Está aquí.
Aquí está mi termo que convierte el agua en vino.
Si no sabes de qué va este termo, ayer hice un live que lo comento, ¿vale?
Midudev, ¿recomiendas Micro Bundle CTLR?
El CTLR no sé qué es.
El Micro Bundle sí que sé que es un empaquetador de, más que de aplicaciones, no está tan pensado
para aplicaciones.
Micro Bundle es un empaquetador que creó Jason Miller, que es el creador de Priak.
Y que se llama, su nick es Developit, por si lo conseguís en Twitter o en GitHub.
Tiene librerías muy interesantes, entre ellas la de Micro Bundle.
Pero Micro Bundle, al final, aunque sí que la recomiendo porque quitan muchas cosas,
está más pensado para hacer un bundle de librerías.
Y además, por dentro utiliza Rollup.
O sea, tiene en realidad su cosa, ¿vale?
¿Qué locura? Mi app más cargada tarda 120-150 segundos.
Ya nosotros, nuestra aplicación, o sea, nuestro build, está súper, súper optimizado
y aún así tarda 60 segundos.
O sea que César dice, ¿qué opinas de Snowpack?
A mí me encanta Snowpack.
De hecho, antes de que se llamaba Snowpack, no me acuerdo cómo se llamaba,
Rat, algo de una ratilla.
Y le hice un vídeo y hablé con el creador y me gusta muchísimo.
O sea, de hecho, creo que te lo recomendé a ti, César,
y que me comentaste en un tuit de que lo viste por un tuit mío.
Pero es que me gusta mucho la idea, ¿no?
Pero aún así, Snowpack, de hecho, está pensando en añadir Sbuild
a la hora de hacer el bundleizado final.
No en el modo desarrollo, que sería totalmente nativo,
pero al hacer la build, está pensando en utilizar Sbuild.
Y es muy interesante, ¿no?
Así que al final podemos encontrar esto, ¿no?
Cómo se van a retroalimentar a lo mejor estos empaquetadores.
Así que puede ser muy interesante.
Sobre la terminal que me estáis comentando,
básicamente utilizo ZSH.
La aplicación de la terminal es ItItem.
Y no me acuerdo ahora cuál es el tema que tengo,
pero básicamente es eso.
¿Vale?
Vale, eso, César, PicaWeb, es como se llamaba.
Efectivamente, PicaWeb.
Y era una ratilla el logo, por eso me gustaba muchísimo.
Y sobre...
Me decía por aquí, no tiene que ver,
pero habla de las nuevas MacBook con M1 para programar, por favor.
Si tuviese uno, hablaría sobre ellas.
Ojalá, ojalá.
Si quiere Apple, si me envía uno,
yo hago un live de ocho horas, si hace falta, hablando de ellas.
Creo que tiene muy buena pinta,
pero hasta que uno le ponga las manitas encima,
es difícil de decir.
¿Vale?
Vale, pues vamos a seguir con nuestra aplicación.
¿Vale?
Vamos a seguir con nuestra aplicación.
Aquí ya dice que nuestro primer bundle lo hagamos con React y ReactDome.
Pues me parece bien,
porque así vamos a poder ver rápidamente si soporta JavaScript.
No, JSX.
JavaScript ya me imagino que sí.
Así que vamos a instalar React y ReactDome.
Estas sí que son dependencias que son de producción,
por lo tanto, no le vamos a poner nada para que se guarden tal cual.
Más o menos ha tardado lo mismo en instalarse esto que el Sbuild.
Vale.
Así que ahora vamos a ver dónde creamos aquí.
Un app.jsx.
Pues venga, un app.jsx.
Y ya veo una diferencia respecto a cómo va a ser la aproximación de Parcel
y la de Webpack y todo esto.
Bueno, y ahora os la comentaré.
Vamos a importar todo desde React.
Vamos a importarlo todo desde ReactDome.
Y bueno, aquí por qué no le...
¡Ay! ¡Ay! ¡Ay!
¡Ay!
Yo también.
Yo también la leche.
Vale.
Lo importamos todos.
En realidad esto se podría hacer así.
Lo que pasa es que esta es la forma más correcta de hacerlo,
aunque últimamente esta parte de aquí ya no es necesaria.
Me imagino que Sbuild todavía no soportará el nuevo JSX Runtime,
pero bueno, ya lo tendríamos así y ya está.
Ahora, el problema que me estoy oliendo es que, claro,
este document.getElementById todavía no tenemos nuestro HTML,
o sea que lo tendremos que crear después, me imagino.
Bueno, pues luego...
¡Ah! ¡Claro!
Aquí lo que está haciendo ahora es solo sacar el JavaScript sin nada de HTML.
Bueno.
Vale, vale.
Pues vamos a hacerlo así.
Ya que lo quieren así, pues...
Render...
¡Eh! ¡Eh! ¡Eh! ¡Eh! ¡Eh! ¡Eh! ¡Claro!
Vamos a pillar el del server,
porque así lo que vamos a hacer, básicamente...
Esto vamos a poner ReactDomeServer.
Vamos a renderizar directamente a algo estático
para que veamos qué es lo que renderiza esto, ¿vale?
Y vamos a poner aquí un hola mundo.
Ahora esto no lo vamos a ver en una página, ¿vale?
Eso lo vamos a hacer después.
Por ahora vamos a ver si esto funciona y cómo funciona.
Vamos a poner esto.
Y ahora me imagino que tenemos que ejecutar Sbuild.
Así que vamos a quitar esto de Sbuild.
Me la voy a jugar, ¿eh?
Vamos a intentar directamente.
Voy a intentar pasarle directamente a .jsx a ver qué hace esto.
Vale.
Vale.
¿Qué es lo que ha hecho?
Pues ya ha hecho cosas.
O sea, realmente ya ha compilado esto.
Los imports los ha dejado tal cual,
pero aquí podemos ver esta línea de aquí,
que es la del ReactDomeRenderToString.
Puedes ver cómo sí que ha hecho ya la transformación
de este h1 y tal a JavaScript.
O sea, que JSX lo ha transpilado a algo que deberíamos entender.
O sea, que esto ya debería funcionar.
Ahora esto se lo podríamos pasar, me imagino, claro, a Node.
Mira, claro.
Esto que ha hecho por ahora ha sido la transpilación,
pero no el empaquetado, porque este módulo de import React
from React no lo tenemos en lo que ha devuelto.
Así que ahora para hacer esto, vamos a mirar un momento el help,
a ver qué cosas nos dice que podemos hacer.
Pero ya veo aquí que podemos hacer el bundle,
que el bundle básicamente, me imagino,
que lo que hará es empaquetar toda la aplicación
y resolver todas las dependencias.
Así que vamos a hacer eso.
Vamos a hacer este bundle.
Y ahora sí, ¿vale?
Ahora lo que ha hecho, por ahora lo está devolviendo ahí a saco
en la terminal, pero ahora sí que lo que ha hecho es
traerse la dependencia de lo que sería React, ReactDome,
todas sus dependencias, las ha resuelto
y las ha empaquetado en un solo archivo.
Si pongo el help, vale, genial, vuelvo otra vez.
Claro, ahora el problema es que veo que el código como tal
no está minificado, o sea, hasta ahí ya saco.
Y entonces lo que sería interesante también sería utilizar
el minify que veo aquí, que tiene.
Así que uno, el minify.
Y otro, también interesante, sería poder sacar esto a un archivo.
Así que vamos a poner el minify primero y luego vamos a utilizar
este outfile que veo aquí, a ver qué hace.
Así que minify, vale.
Ah, mira, muy bien, deja las licencias aparte.
Pero ya podemos ver que el código ahora está minificado,
pero súper rápido, o sea, súper rápido, es inmediato.
Vale, ahora está minificando el código, genial,
pero sigue saliendo en la consola.
Lo que podemos hacer es utilizar el outfile este
y vamos a poner aquí que sea, por ahora, bundle.js,
por decir algo.
Vale, vale.
Me ha dado aquí unos warnings que me imagino,
ah, porque claro, no están las variables de entorno,
no están creadas y entonces cuando hace el bundle
de las dependencias de React, hay algunas dependencias en React
que si detecta que estás en node.env,
el entorno de desarrollo es producción, elimina cierto código.
Vale, y aquí ya nos está diciendo que como no está definido,
cuando hagamos el bundle para el navegador,
pues esto seguramente se va a quedar y deberíamos quitarlo.
Pero bueno, lo importante es que ya hemos hecho el primer bundle.
O sea, con esto ya tenemos nuestro primer bundle,
además cero configuración, que esto no nos gusta,
cero configuración.
Que esto creo que era lo mejor de Parcel
y en este caso, pues aquí también lo vemos.
Vale.
Tenemos nuestro bundle.
Para ver si realmente nuestro bundle hace lo que creemos que hace,
podríamos ejecutarlo con node.
Así que voy a poner node bundle.js, a ver qué hace esto.
Vale, no hace absolutamente nada.
¿Por qué no hace nada?
Porque a lo mejor esto sí que debería...
Render toString.
Ah, porque claro, esto tendría que hacer un eco, ¿verdad?
Esto tendríamos que enseñarlo en la consola.
Claro, o sea, renderizar se renderiza.
O sea, este render toString, esto que estamos haciendo aquí,
esto en realidad se utiliza para el servidor en React, ¿vale?
Entonces esto sería como el output del servidor,
que normalmente es el HTML, ¿no?
Porque aquí le pasamos nuestra aplicación,
se renderiza toda.
Aquí tendríamos el HTML y al final con el HTML.js,
esto se suele utilizar con un servidor,
lo que hace es devolver este HTML que es un string.
Así que vamos a hacer esto.
Tendré que volver a crear el bundle, ¿vale?
Así que lo creo y hago un node bundle.js.
Y ahí lo tenemos.
O sea, ya tenemos la parte, esto sería más solo en Node,
aunque suena en bundle.
Pero esto es interesante, ¿eh?
También, ojo con esto.
Porque muchas veces,
y esto suele pasar en aplicaciones con React
que pueden estar en el servidor,
que digamos que, claro,
tú tienes toda una estructura del servidor con React y tal,
y claro, Node no soporta JSX.
Entonces estoy viendo una posible utilidad
bastante importante de Sbuild
a la hora de al menos hacer el bundle de Node
para que resuelva dependencias y cosas así.
Y además, puedas tener JSX en la parte del servidor
de una forma súper sencilla.
Es algo parecido a algo que está haciendo Dino también, ¿no?
Que tiene soporte tanto para TypeScript,
por supuesto, TypeScript, y JSX.
Así que, bueno, ya lo tendríamos.
Esto sería un bundle que, como os digo,
solo funcionaría en el servidor.
Claro, en realidad hacer que esto funcione
en una página web es bastante,
bueno, o debería ser bastante fácil.
Vamos a hacer algo.
Vamos a poner aquí una carpeta public
y voy a crear aquí un index.html.
Creo aquí este HTML
y lo que vamos a hacer aquí,
voy a poner SbuildApp.
Vamos a probar aquí este SbuildApp.
Vamos a poner que esto sea bundle.js.
¿Vale?
Y este bundle.js,
obviamente todavía no existe,
pero lo vamos a crear.
Y lo que vamos a hacer con este punto de entrada
que utilizamos React y tal,
vamos a quitar esto del React DOM.
Vamos a utilizar React DOM.
Este React DOM lo vamos a poner aquí.
Vamos a hacer que esto haga render.
Y esto ahora le tenemos que decir
dónde se tiene que renderizar.
¿Vale?
Pues aquí vamos a crear un div
que va a tener una id que va a ser app.
No sé si veis bien la letra.
Bueno, no os estáis quejando,
así que la voy a dejar como estaba.
Pero si alguien no ve,
que me lo cuente.
¿Vale?
Vale.
Entonces se crea un elemento div aquí
que es donde vamos a renderizar
nuestra aplicación de React.
Aquí básicamente tenemos dos.
Uno es el elemento a renderizar
y el otro donde lo renderizamos.
Así que ponemos aquí
que esto va a ser la app.
Y ahora esto sí que ya no lo tiene.
¿Vale?
Lo que estoy haciendo básicamente
es que esto ahora ya no sea tan pensado
para servidor,
sino lo que quiero
es que esto funcione también
en navegador.
¿Vale?
Así que voy a guardar esto.
Por aquí.
Bien.
Vamos a volver a hacer el build este.
Vamos.
El outfile.
Ahora en lugar de bundle
voy a hacer public
barra bundle.js.
Parece que ha funcionado.
Me sigue dándole error este
de las variables de entorno.
Vamos a definírselas.
Voy a mirar un momento
la documentación
porque seguro que de alguna forma
si tienen que poder
hacer esto del
enf.
Enf, enf.
Ah, mira.
Esto es súper interesante
que luego lo vamos a comentar.
Pero mira.
Aquí estaría este define.
Wow, es súper raro.
Definir.
Y encima sí.
Hay que escapar esto.
Bueno.
Esto no me ha gustado.
Eso no me ha gustado mucho.
Luego veremos
que tiene una API en JavaScript.
Y ahí podremos hacer cositas.
Pero bueno.
Como se está complicando
esto, ¿no?
Que está quedando como muy largo.
Voy a hacer una cosa ahora.
Voy a probar
que esto funciona primero.
¿Vale?
Sí que funciona
porque ahora no me ha dado
ningún warning.
Pero vamos a pasar
a utilizar esto
en un script de Node.
Bueno, del npm.
Vamos a poner aquí build
y nos vamos a copiar
esto que estoy creando aquí
y lo vamos a poner aquí.
¿Vale?
De esta forma, pues,
ahora haremos un npm run build
y esto, pues,
ha hecho lo que tenga que hacer.
Es un poco raro
que no enseña,
no sé,
es absurdamente rápido.
Teniendo en cuenta
que no solo hace
la minificación,
sino que también hace
resolver las dependencias
y bundleizarlas
y hacer un paquete
es bastante rápido.
Me tiene bastante sorprendido.
Pero, hombre,
no estaría de mal, ¿no?
Que pusiese aquí
algún tipo de mensaje.
He tardado 10 milisegundos.
Bueno, pues,
dámelo a saber.
Chulea.
Dime algo.
No solo cuando tengo
warnings me interesa.
Vale.
El caso es que esto funciona.
Una cosa que podríamos hacer,
yo tengo por aquí
una utilidad,
a ver si funciona,
que se llama S,
que yo le paso
una carpeta,
efectivamente,
y esto es lo que me crea,
me expone
esta carpeta de estáticos
a un servidor.
Si no,
lo que podéis utilizar
es instalar servor,
¿vale?
No sé si lo conocéis,
creo que he hablado
alguna vez de servor.
Si no,
lo presento,
pero es muy interesante.
Básicamente,
lo que hace
es un pequeño servidor
donde puedes,
pues,
nada,
le dices una carpeta
y te crea un servidor
de esa carpeta.
¿Por qué es interesante?
Bueno,
porque te da reload,
también tienes temas
de GECI,
puedes utilizar HTTPS,
bueno,
está muy bien.
Para servir estáticos,
a mí es mi favorito.
También puedes tener fallback,
es bastante completo.
Este es el que estoy utilizando,
solo que,
como me gusta ir ahí
súper rápido,
pues,
muchas veces tengo ya
como un alias,
de hecho,
creo que lo podremos ver
aquí el alias.
Este,
ves,
ese,
¿no?
Deigo servor,
que el dólar 1
básicamente es el primer argumento
que estamos pasando,
busca index.html,
porque es el de siempre,
y lo abre en el 1234
y además hace el reload
cuando detecta cambios,
aunque bueno,
esto no sé si va a funcionar.
Vamos a probarlo,
vamos a probar,
esto puede ser interesante.
Vale,
tengo ese public,
¿vale?
Me crea el 1234
y entro
y no ha funcionado,
pero bueno,
vamos a ver por qué no funciona.
Vale,
production is not defined.
Vale,
a ver,
igual no le ha gustado,
este define,
no sé qué,
no sé cuántos,
vamos a quitárselo por ahora,
a ver,
y claro,
tenemos que crear
otro bundle aquí,
vamos,
uy,
ahora,
vamos a crear otra vez esto
y además vamos a ver,
no,
creo que no lo ha,
process is not defined,
no le está gustando esto,
a ver,
vamos a seguir aquí el tema,
¿no?
Porque como se supone
que tenía
su propia,
¿de qué se quejará esto?
¿vale?
Porque este process,
obviamente,
esto es un tema
del propio,
de React,
que me imagino que sí,
que está bien
tener que poner esto,
lo que me sorprende
es lo de production,
¿no?
Porque al final,
no sé,
o sea,
esto es como que está guardando
esto
como producción,
o sea,
eso es que está encontrando ahí
el string de production
cuando estamos haciendo esto,
¿vale?
Cuando estamos haciendo esto
y ahora,
¿ves?
Ay,
qué grande,
es que además se está actualizando
automáticamente,
pues cuando he hecho esto,
este production
que no encuentra,
es que básicamente
este process,
no sé qué,
no sé cuánto,
¿ves?
Lo ha cambiado por production,
es súper raro,
pero debería cambiar este,
no este,
o sea,
está haciendo algo muy extraño,
no es lo que justamente queríamos.
A ver,
el tema es,
tenemos el bundle,
el minify,
podríamos quitar el minify
por ahora
para ver
si tenemos algún error
y tal,
vamos a poner esto aquí,
ya sabéis que
nada,
igual,
no serán las comillas,
ya,
eso he pensado yo,
pero justamente las comillas
lo que debería hacer
era crear,
¿ves?
porque las estamos escapando,
entonces lo que deberíamos tener
es justamente
que las convierta bien,
¿no?
porque si las estamos escapando aquí,
es raro,
a ver,
si lo pongo aquí a la mano,
como hemos hecho antes,
¿vale?
que tenía lo de las comillas,
vamos a ver si falla
y a lo mejor tiene algo que ver,
bueno,
al menos ahora da otro error,
totalmente distinto,
pero ahora es otro error,
dice hola mundo,
app,
igual no ha sido lo mejor
empezar directamente con React,
que ahora veo que no era tan fácil
esto de React,
vamos a ver aquí,
con JSX,
no,
JSX,
es el punto de entrada,
no sé,
no veo que esté haciendo algo
diferente a lo que están diciendo ellos,
vamos a ver,
por un lado,
si lo hago directamente,
el error ha cambiado,
ya me dice que es esto,
y bueno,
tengo este error,
o sea,
que es como que sí que ha detectado
que es producción,
o sea,
que esto sí que ha funcionado,
vale,
y este error es más normal
porque este
getElementApp,
¿qué está pasando?
pues que este script
deberíamos ponerlo
a lo mejor después,
¿no?
para que encontrase el,
así que esto,
esto sí que funciona,
vale,
genial,
ya tenemos nuestro la mundo,
ya se ha pasado bien,
el problema efectivamente
está en las comillas,
lo que me sorprende
de estas comillas,
¿no?
porque,
vamos a ponerlo así,
a ver,
no sé,
igual sí que es un tema
de ponerle un script aquí
que no le guste,
pero me,
no sé,
me resulta curioso
el hecho de que
se estaban escapando,
¿ves?
ahora sí que funciona bien,
vale,
para asegurarnos que funciona
todo lo que he hecho,
que no me lo estoy inventando,
voy a poner aquí un,
hola,
hola a todas y todos
de la midu clase,
vale,
ay,
claro no,
tengo que hacer,
esto no,
vamos a hacer en pie en run build,
a ver si,
claro,
es que,
vale,
no,
tiene el mismo problema,
y tiene pinta de ser esto,
porque cuando lo hago así,
no le gusta,
cuando lo hago así,
sí que le gusta,
así que,
que será,
está claro que es algún tema
de,
de,
de escapar mal,
¿no?
pero lo que me extraña
es que si aquí lo está escapando así,
¿por qué lo rompe?
Tengo,
no sé,
si a alguien se le ocurra,
mira,
dice,
está escapando mal el string,
dice Simon G,
tienes que entrecomillar production,
tengo que entrecomillar
una vez más production,
pero,
no es raro,
ah,
claro,
porque a lo mejor aquí
no pasa nada,
o sea,
que ahora igual,
vale,
o sea,
igual,
estas comillas
es para el valor
y luego hay que volver
a encomillar production
y eso sería lo que haría
que funcionase bien,
uh,
no sé,
a ver,
no,
no,
de hecho no ha detectado
producción,
o sea,
no,
no basta con comillar
dos veces esto,
así,
así que no,
no sé en mayúscula,
o sea,
en mayúscula seguro que no es,
¿vale?
Eh,
a ver,
vamos,
vamos por partes,
eh,
Ferdinand,
dice,
¿cuántos inverte?
Hola Ferdinand,
bienvenido,
Miguel Hernández,
no sé mayúsculas,
no sé mayúsculas,
eso seguro,
porque,
o sea,
estar bien,
está bien,
porque cuando lo ponemos
en la terminal,
funciona,
eh,
luego por otro lado,
tú,
tú,
tú,
prueba no poner las comillas
y antes de,
antes de sbilt,
no poner las comillas,
¿vale?
Antes de sbilt,
a ver,
claro,
podría,
esto lo he pensado antes,
¿no?
Podríamos intentar hacer esto,
pero me parece a mí
que esto no funciona así,
¿eh?
Porque si lo probamos,
hacemos esto,
¿vale?
Ves,
no lo ha detectado,
y es que,
claro,
para el cómo pone aquí
que se tiene que utilizar sbilt
a la hora de definir
una variable de entorno,
es así,
claro,
podría probar hacerlo así,
directamente,
¿no?
sin comillas,
vamos a ver si esto le gusta,
vale,
gustar le ha gustado,
vamos a ver aquí,
pasa lo mismo,
que dice que producción
no está de finite,
entonces,
lo único que se me ocurre
sería poner estas comillas,
¿vale?
Que eso sería,
que lo haría como un string,
así que probamos otra vez,
y vuelvo a ver el mismo problema,
y es como que no detecta
esas comillas
como que son buenas comillas,
así que,
lo último que se me ocurre
es volver a ponerle unas comillas
dentro de las comillas,
y entonces,
si le damos,
parece,
ahora sí,
ahora,
ah,
no,
has not a plane,
vale,
vale,
vale,
entonces,
ahora sí que está bien,
vale,
vale,
ahora sí que está bien,
este problema ya es,
debe ser otro,
otro problema,
porque no está utilizando
la build de producción,
pero el que no esté utilizando,
claro,
esto normalmente es porque
justamente no ha detectado,
pero,
en el sbilt,
aquí podemos ver
que sí que lo ha detectado,
bueno,
podemos pasar eso de por alto,
parece un poco raro,
ya me lo averiguaré,
y si queréis lo compartiré,
pero al final lo que pasa,
efectivamente,
es que necesitas las dos comillas,
porque una es como pasarle el valor,
y otro es el valor por el que se lo estás cambiando,
entonces,
tiene que ser así,
y aquí ahora sí que está detectando
que se lo estamos pasando,
lo que es raro,
igual de hecho,
incluso podremos hacer así,
aquí,
ahora si hacemos esto,
deberíamos ver la variable de entorno,
¿vale?
Uy,
le da esto,
esta variable de entorno,
la deberíamos ver,
si hacemos un mpn run build,
aquí,
¿ves?
Podemos ver que es production,
o sea,
que está bien,
y si ponemos aquí,
este processenv.nodeenv,
si es production,
ahora,
parece que está bien,
ahora deberíamos ver ahí un true,
¿vale?
O sea,
que estamos poniéndole bien el string,
y además le estamos pasando el true,
o sea,
esto está bien.
Lo raro,
lo raro ha sido cuando lo hemos pasado,
este comando,
desde la terminal,
se lo hemos pasado al package.json,
y entonces,
se ha hecho,
nos hemos hecho un poco un lío,
porque aquí,
podemos ver que solo tiene estas comillas,
y aquí hemos tenido que ponerle unas comillas de más,
es un poco extraño,
pero claro,
como el propio comando,
ya tiene las comillas dobles,
pues igual ahí nos hemos puesto un poco,
pero bueno,
ahí lo tenemos,
arreglado.
Ya veremos,
esto de React is Run,
en production,
o sea,
que sí que está en modo producción,
pero no se ha utilizado el dead code elimination,
y eso,
es porque ahora,
le hemos quitado el minify,
si ahora,
le ponemos el minify,
quiero pensar,
que le va a quitar,
justamente,
todo el código,
que le sobra.
Vamos a hacer la build,
y ahora sí,
ya no tenemos el error,
ya está.
Bueno,
pues tampoco,
a ver,
dentro de lo que cabe,
hemos tenido un momento ahí,
de que no sabíamos de dónde saltaba las cosas,
pero,
ya lo tenemos ahora así,
funcionando,
¿vale?
Entonces,
cosas que me interesa ver,
ahora que ya tengo esto funcionando,
cosas que me interesan ver,
por un lado,
comenta por aquí,
que,
pues,
podemos cargar todo tipo de archivos,
desde JavaScript,
obviamente,
vamos a probar ahora,
importar cosas,
también hace transformaciones totalmente,
de forma automática,
sin utilizar ningún tipo de Babel,
ni nada,
o sea,
en los 5 megas,
en esos 4 segundos,
también venía Babel,
o sea,
ya venía Babel instalado,
así que vamos a probar también,
hacer este tipo de cosas,
vamos a ver si,
vamos a quitar esto,
que ya no vale tanto la pena,
podríamos tener aquí,
pues yo que sé,
persona,
y vamos a ver el mensaje,
y en el mensaje,
vamos a poner,
todas y todos,
y podríamos poner aquí,
que el hola,
todas y todos,
esto sea persona,
pero mirábamos antes,
hacemos un optional chaining,
¿vale?
Esto,
obviamente,
no está soportado en el lenguaje,
así que deberíamos ver,
que esto,
lo está,
bueno,
Chrome sí que lo soporta,
porque Chrome siempre va a saco,
¿vale?
Pero sí que deberíamos ver,
que esto lo ha transformado,
que este código,
lo ha transformado,
así que,
voy a poner esto aquí,
así,
persona,
lo voy a poner aquí,
mensaje,
porque voy a poner aquí un debugger,
y así veremos el código,
¿vale?
De cómo nos ha dejado esto,
lo cual,
realmente esto me parece súper interesante,
el hecho de que,
o sea,
de gratis,
ya tiene todo es build,
de hecho aquí tiene todo es build,
todo va a ver,
a ver,
no va a ver,
no utiliza va a ver esto,
claro,
para ser tan rápido,
se tiene que quitar esa dependencia,
todo esto se lo han currado ellos,
y aquí puedes ver,
todas las transformaciones,
que te están haciendo,
que no tienes que configurar,
absolutamente nada,
está bastante bien,
porque son normalmente,
me imagino que las últimas,
pero estás perdiendo,
por supuesto,
ese grado de configuración,
que te da Babel,
de añadirle algunos plugins,
en concreto y tal,
yo personalmente,
creo que,
si te puedes quitar todo eso,
y además esto te guía,
a utilizar las cosas,
que van a estar en la plataforma,
pues me parece súper interesante,
y así,
no te tienes que meter,
tanto en configuraciones,
y tal,
sí que es verdad,
que puede ser un poco problemático,
si en algún momento,
hay alguna,
que tienes que esperar,
a que actualicen,
para que la soporten,
pero yo creo que,
hombre,
por el tiempo que tarda,
puede valer la pena,
así que,
vamos a poner otra vez,
el Run Build,
esto igual,
podríamos arreglarlo,
con el Chucky Dart,
podríamos hacer algo con esto,
bueno,
ahora lo miraremos,
por ahora,
vamos a volver aquí,
en nuestra página,
he puesto,
ah,
he puesto un debugger,
por ahí justamente,
para ver si me hacía esto,
vale,
vemos que no lo ha transformado,
vale,
¿por qué no lo ha transformado?
y esto sí que,
me lo leí,
porque esto,
una vez me sorprendió,
dije,
pero por qué esto,
no lo está transformando,
claro,
por defecto,
hace las transformaciones mínimas,
para que funcione,
en cualquier navegador,
o sea,
no hace ninguna transformación,
básicamente,
le tienes que decir tú,
cuáles son los navegadores,
que soportas,
para que te haga esas transformaciones,
entonces,
tenemos que pasarle,
este target,
y decirle,
cuáles son los navegadores,
que soportamos,
entonces,
dependiendo de la versión,
hará una transformación,
u otra,
y esto está muy bien,
porque así va a hacer,
un bundle,
que va a estar optimizado,
justamente,
para el navegador,
que estás soportando,
no tiene sentido,
que te haga todas transformaciones,
sin saber,
cuáles son los navegadores,
que soportar,
veo,
que no hay ninguna forma,
de explicitar,
si utilizas internet explorer,
cosa importante,
vale,
pero tenemos safari 11,
así que,
vamos a poner este target,
y vamos a poner safari 11,
para ver si,
esa transformación,
estoy bastante seguro,
que la tendrá que hacer,
vale,
así que vamos al package json,
a ver ahora,
con tanta comilla,
vale,
target,
y vamos a poner safari 11,
ahora que tenemos esto,
igual,
incluso podríamos,
para simplificar esto,
porque si no,
esto es como,
muy complicado,
vamos a poner,
simplemente,
un document,
get element,
porque si no,
así,
nos va a bundleizar todo,
entonces,
puede ser interesante,
pero igual,
más interesante,
ahora que veamos,
que nos hace bien,
la transformación,
además,
tengo interés,
en ver,
el código,
que deja la output,
vale,
sin ningún tipo,
si dejo dependencias,
va a ser ahí como,
una mezcla de todo,
quiero ver,
el output que deja,
porque por ejemplo,
webpack,
tiene que meter muchos,
trocitos suyos por ahí,
para saber resolver,
las diferentes,
dependencias que tiene y tal,
y quiero ver,
un poco esto,
de una forma más limpia,
así que me voy a copiar,
solo esto del mensaje,
para que veamos,
la transformación,
vale,
mensaje,
y vamos a poner aquí,
que esto sea el mensaje,
que el mensaje,
voy a copiar de aquí,
sea,
esto que tenemos aquí,
y esto sea,
hola,
a todas y todos,
vale,
vamos a poner aquí,
un h1,
esto es el mensaje,
bueno,
esto es bastante sencillo,
he puesto ya el target,
he cambiado esto,
para que no me bundle,
hice nada de React,
nada de dependencias,
vamos a ver,
cómo queda esto,
esto debería funcionar,
aquí,
vale,
el debugger,
voy a darle,
hola a todas y a todos,
vale,
y vamos a ver,
cómo ha dejado el código,
a ver,
uy,
no,
ah,
vale,
que tengo aquí escrito,
digo,
¿dónde está el bundle?
está aquí,
vale,
vale,
pues aquí podemos ver,
que me ha hecho la transformación,
¿por qué?
porque el target que le hemos puesto,
que es Safari 11,
Safari 11,
pues no soporta el optional chaining,
si vamos aquí al can I use,
y ponemos optional chaining,
pues seguramente veremos que Safari 11 está aquí,
y por lo tanto no lo soporta,
pues está bastante bien,
¿no?
porque ya ha hecho la transformación que necesitaba en concreto,
pero si pusiésemos,
por ejemplo,
Safari 14,
veríamos que esa transformación ya no la hace,
¿vale?
es justamente este código,
además el código está minificado,
por supuesto,
entonces tenemos este código de aquí,
que era el optional chaining,
que estábamos haciendo aquí,
y con la minificación,
pues le ha hecho algunas optimizaciones,
si le cambiamos el,
ta, ta, ta,
Safari a Safari 14,
por ejemplo,
hacemos la build,
y volvemos aquí,
y volvemos aquí,
aquí podemos ver que nos lo ha dejado,
pues bastante sencillo,
es algo parecido a cómo funciona Babel preset env,
que dependiendo de los navegadores que soportas,
le pasas como un objeto,
le dices soporto esta versión,
esta versión aquí,
aquí se lo decimos directamente,
como un parámetro al comando,
esto,
lo interesante,
es que nos da bastante granularidad,
podríamos hacer una build,
con lo rápido que es,
podríamos hacer una build,
solo para la versión de Node,
y otra que se la podríamos pasar directamente,
solo para navegadores que soporten algo nuevo,
y tal,
podríamos hacer un montón de builds,
así que estaría bastante bien,
una cosa que ya veo que se pierde con Webpack,
es el tema del hashing,
supongo que,
a ver,
no sería muy difícil recuperar,
el hashing,
básicamente es que aquí te pone,
pues una cosa así,
Webpack,
te lo pone,
justamente para poder cachear,
ese archivo lo máximo posible,
el máximo tiempo posible,
pero lo interesante,
es que al final esto,
lo podríamos hacer nosotros manualmente,
podríamos ponerle un nombre en clave,
al bundle.js,
y al detectar esto,
pues crear el hash,
no sé si esto es una cosa que planean añadir,
pero la verdad es que,
es algo bastante importante,
dicho esto,
vamos a ver,
como decían que era compatible,
con enmascrimmodules,
por lo tanto,
deberíamos ser capaces,
de crear otro archivo,
y debería crear un chunk,
debería crear otro archivo aparte,
a la hora de generar el bundle,
así que voy a quitar este bundle,
porque es un poco lioso,
con el otro que sí que queremos,
que es el de public,
entonces tendríamos la app,
esto lo podríamos sacar fuera,
podríamos poner,
module.js,
podríamos ponerlo aquí,
y podríamos,
este mensaje,
todo esto,
podríamos exportar,
por defecto,
say high,
vale,
lo que vamos a hacer,
es exportar una función,
y esta función,
la vamos a llamar,
en el otro archivo,
en este,
así que lo que vamos a hacer,
es importarla,
no,
vamos a importarla,
pero de forma dinámica,
vale,
así que vamos a hacer así,
module.js,
y una vez que tengamos,
este módulo,
vamos a extraer,
vamos a quitarle esto,
vamos a extraer,
el say high,
y lo que vamos a hacer,
es llamarla,
vale,
¿qué estamos haciendo aquí?
aquí básicamente,
lo que estamos haciendo,
es importar,
de forma dinámica,
una dependencia,
esto quiere decir,
que cuando vaya,
al app.jsx,
que es el punto de entrada,
de nuestra aplicación,
lo que hará,
es descargarse,
este módulo,
solo cuando lo necesita,
y podremos ejecutar,
este say high,
que lo hemos definido aquí,
y esto,
pues debería funcionar,
lo que quiero ver,
es como separa el código,
vale,
a ver si lo separa,
si hay que hacer algo,
si no sé,
en public,
vale,
ya veo que no,
no me lo ha separado,
vale,
o sea,
aquí lo ha metido todo,
cuando ha hecho el bundle,
ha hecho un solo archivo,
a eso,
no lo,
no lo ha dividido,
en dos archivos,
lo ideal,
sería que lo dividiese,
en dos archivos,
vale,
así que vamos a ver,
si hay algún tipo,
de parámetro,
o algo,
que,
ah mira,
mira,
aquí nos dice lo del processenv,
cuando es en el package.json,
que interesante,
que aquí le está poniendo,
como un montón de barras,
o sea,
nosotros al final,
lo hemos logrado de otra forma,
pero aquí,
lo ha puesto,
de una forma totalmente distinta,
vale,
format,
el ifi,
claro,
esto será para tener diferentes formatos,
el ifi,
creo que,
que debe ser el que lo está haciendo,
por defecto,
porque he visto que,
en nuestra aplicación,
veis que aquí está creando,
una arrow function,
me imagino que es una arrow function,
porque,
no le hemos puesto un target,
que no soporte,
las arrow functions,
o sea,
todos los targets,
que estamos soportando,
como que,
soportan las arrow functions,
si no,
la cambiarían por otra cosa,
pero,
dicho esto,
vale,
aquí vemos este,
pro and resolve y tal,
pero no lo ha separado,
vale,
o sea,
que por defecto,
el format,
es el ifi,
este que hemos visto aquí,
pero hay tres modos,
el ifi,
cjs,
y esm,
porque es interesante esto,
claro,
me imagino que podríamos utilizar,
el esm,
de hecho,
vamos a hacerlo,
con el formato esm,
pues,
esto está muy bien,
y esto,
no recuerdo que lo tenga,
webpack,
no sé si lo tiene rola,
pero webpack,
diría que no lo tiene,
esto lo que nos va a permitir,
es que de repente,
el bundle,
por defecto,
sea un ifi,
que al final es una función,
que se auto ejecuta,
y esto lo hacen por un tema de,
de que es,
de temas de rendimiento,
vale,
para que se,
se evalúe un poquito más tarde,
y no bloquee el thread principal,
pero,
al poder cambiarle el formato,
a esm,
que significa,
eqmascript modules,
significa que aquí,
podríamos,
claro,
si ahora lo dejo como está,
y hago una build,
y le he cambiado,
el formato,
si vamos a nuestra aplicación,
vale,
veo que funciona exactamente igual,
y no hay ningún problema,
pa, pa, pa,
esto es raro,
porque lo que esperaba,
justamente,
es que me dijese,
no,
esto es un módulo,
y lo tienes que,
que utilizar como tal,
y entonces tendría que haber puesto esto,
pero ya veo que,
que le ha dado igual,
ah,
y bueno,
aquí tendría que hacer esto,
pero no,
funciona exactamente igual,
o sea que no,
no,
no ha pasado nada,
pero bueno,
al menos lo que sí que sabemos,
es que se podría hacer así,
porque,
si esto exportase a su vez,
una función,
sí que entonces,
con este time module,
podríamos utilizar,
justamente,
lo que hemos importado,
y tal,
eso sí que puede ser interesante,
vale,
quería ver lo del chunk,
que me he liado,
me he liado con el formato,
me he liado,
vale,
aquí dice bundle for the browser,
y esto está bien,
vale,
bundle,
esto lo tenemos,
el mini file,
lo tenemos,
source map,
esto justamente es para que,
nos cree otro archivo,
que va a tener,
lo vamos a hacer,
porque esto es un momento,
vale,
en el package json,
pero esto lo que hace,
básicamente,
es que nos debería crear,
otro archivo,
donde tiene,
como la explicación,
de dónde está,
cada una de las líneas,
y de forma,
que cuando vamos al editor,
al navegador,
vamos a nuestro navegador,
y vemos aquí,
este bundle js,
si vamos a sources,
debería detectar,
que tenemos un,
no,
no lo ha detectado,
no sé por qué,
este bundle,
detect,
vale,
pretty print,
vale,
me debería detectar esto,
vale,
sí,
pues enséñame,
no sé por qué,
no me lo enseña automáticamente,
pero me debería enseñar,
el source map,
y decirme,
vale,
pues este es el source map,
y lo puedes ver,
entonces,
debería salirte el código,
como mejor,
porque de esta forma,
lo puedes leer,
aunque esté minificado,
entonces,
tienes como dos archivos,
uno,
el que le das al usuario,
y otro,
el que te sirve,
para ver lo que tienes justamente en el código,
lo cual,
está bastante bien,
si tienes que encontrar errores en producción,
o lo que sea,
vale,
sigamos leyendo eso,
que me interesaba,
porque veo,
vale,
pues no,
no pone absolutamente nada,
o sea,
que no hay forma de hacer chunks,
o no parece que haya forma de hacer chunks,
javascript,
pa,
pa,
igual es algo que no soportan todavía,
lo cual podría tener sentido,
porque,
hombre,
aunque he visto que ha mejorado muchísimo esto,
sí que es verdad que,
ellos mismos dicen que todavía no está pensado al 100% en producción,
porque le faltan algunas cosas,
entonces,
no me extrañaría que los chunks,
chunks,
fuese uno de ellas,
oye,
de ellos,
manual chunk,
configurable chunks,
veo que hay bastante revuelo con esto,
así que,
no me extrañaría que,
no tuviese todavía chunks,
a ver si pone aquí algo que le queda,
tenía un FAQ,
así que,
aquí,
production,
open to scope and expansion,
bueno,
pues todavía no pone nada,
aquí,
mira,
code splitting,
ya está,
ya está,
es que no tienen code splitting,
¿vale?
Son first priority,
pues ya les digo yo que esto es first priority,
¿vale?
Claro,
code splitting es súper importante,
porque,
esto es lo mejor que justamente tiene,
tiene,
webpack,
¿no?
Y es que te separa tu aplicación en diferentes trocitos chiquititos,
¿por qué?
Porque,
si tú tienes una aplicación muy grande,
no vas a querer enviar la aplicación de golpe,
entonces este splitting es súper importante,
ahora lo que está haciendo es justamente tener un solo archivo,
pero lo ideal sería no,
que si hacemos un import dinámico,
esto quiere decir que vamos a querer importar este módulo solo cuando queramos,
y por lo tanto estuviese separado,
veo que pone por aquí,
que sí,
que se puede utilizar,
entonces,
no sé si es que lo tienen a media,
si solo soportan algunas cosas,
vamos a añadir este splitting que pone por aquí,
aunque pone que por ahora solo funciona con el formato XmascriptModus,
lo cual tiene bastante sentido,
porque me imagino que debe ser el más sencillo de hacer,
así que,
porque es nativo de la plataforma,
¿vale?
Ya veo que no le ha gustado.
Claro,
dice que cuando se hace code splitting,
ah,
claro,
cuando,
claro,
cuando utilizas code splitting,
nos está diciendo que tenemos que decirle el directorio de output,
¿por qué?
porque obviamente si es más de un archivo el que tiene que crear,
si nosotros solo le decimos loudfile,
pues no tiene mucho sentido,
vamos a probar a ponerle,
vale,
loudfile por un lado,
y outdir,
y le vamos a poner que esto es public,
y a ver qué,
ahora nos debería crear dos archivos al menos,
vale,
no me ha gustado tampoco,
no se puede utilizar las dos cosas,
vale,
pues nada,
solo le dejamos outdir,
tampoco te pongas tan exquisito,
vamos allí,
venga,
public,
vale,
ahora sí,
ahora de hecho nos ha creado tres,
pensaba que nos iba a crear dos,
nos ha creado tres,
por un lado,
vale,
ya sé por qué nos ha creado tres,
no,
no nos ha creado tres,
nos ha creado dos,
lo que pasa es que el bundle es el de antes,
vale,
mira,
nos ha creado el app.js,
que justamente es muy parecido al que ya tenemos aquí,
o sea que ya está minificado,
obviamente,
el source map,
luego el módulo,
y esto está haciendo justamente pues lo que esperábamos que hiciera,
pues está funcionando súper bien el code splitting,
ya tenemos el code splitting,
fantástico,
pues ahora que ya sabemos todo esto,
vamos a complicar,
si os parece,
nuestra aplicación un poquito,
vamos a ponerle un poco de react,
vamos a hacer que esto importe nuestra aplicación,
de hecho,
vamos a poner aquí nuestro componente,
un mensaje,
.jsx,
es importante,
esto del jsx,
que lo he visto antes en la documentación,
y es que comenta que,
para utilizar jsx,
tiene que tener la extensión jsx,
vale,
entonces,
si pongo js,
no va a detectar que tengamos jsx,
así que,
si pongo esto,
por ejemplo,
y yo pongo aquí mensaje from,
mensaje.js,
y este mensaje,
es el que vamos a utilizar aquí,
tenemos este mensaje,
vale,
y aquí hacemos un export,
default,
de la function,
mensaje,
y hacemos el return,
de justamente lo mismo,
vale,
y este mensaje,
se la pasamos por props,
hola a todas y todos,
desde sbuild,
vale,
vamos a probar con .js,
vale,
pero,
vale,
este es el error,
dice que no lo detecta,
entonces,
aquí hay dos opciones,
una,
cambiamos el mensaje .js,
a jsx,
que bueno,
puede ser buena idea,
tenerlo así,
aunque,
hay,
no sé dónde lo leí,
que ya no era la forma,
que era recomendada y tal,
pero bueno,
sí,
además,
está bien,
porque pone el iconito,
y así queda claro que,
que tiene código de React,
esta puede ser una,
si ahora hacemos la build,
pues ahora funcionará,
ah no,
me ha dejado fatal,
ah claro,
es que aquí,
intento cambiar la extensión también,
ahora sí,
ahora funciona,
y ya está,
esta podría ser una forma,
la otra forma,
es que tiene un loader,
por aquí,
y este loader,
lo puedes configurar,
para que detecte,
JavaScript y jsx,
utilizando .js,
es aquí,
donde lo había visto antes,
a ver,
jsx factory,
no,
igual en el first bundle este,
jsx,
sea aquí,
lo ves,
que le podrías decir,
que el loader,
sea .js,
detecte el jsx,
utilizando esto,
pues ya podrías utilizar,
la extensión .js,
para jsx,
vale,
entonces,
hemos dejado esto funcionando,
vamos a verlo,
en el s,
aquí en nuestra aplicación,
la voy a poner la primera,
vale,
no la he dejado funcionando,
ni mucho menos,
ah,
porque claro,
hemos cambiado el bundle,
y nuestro index html,
antes estaba utilizando el bundle,
así que vamos a poner app.js,
y vamos ahora,
vale,
dice que React no está definido,
vamos a ver por qué,
en el React este,
en el app.jsx,
sí que lo tenemos,
igual esto del code splitting,
no le termina de gustar,
vamos a ver si es que tengo aquí,
el bundle,
tengo que ver el minify,
ah,
claro,
¿qué pasa?
que,
¿sabéis qué pasa?
que ya estoy acostumbrado a utilizar,
el nuevo jsx runtime,
de React,
que lo que hace,
es que ya no necesitas hacer,
el import React from React,
entonces,
que a partir de la versión 17,
es esta,
vale,
ya,
esto no hace falta hacerlo,
directamente,
porque,
cuando haces babel,
lo que hace es importar jsx,
bueno,
un helper de jsx,
de esta forma,
entonces tú escribes esto,
y ya lo tienes,
y como estoy tan acostumbrado,
pues,
entonces yo creo que puede ser que vayan por aquí los tiros,
vamos a verlo,
tenemos aquí nuestra aplicación,
vale,
está funcionando perfectamente,
dicho esto,
una cosa que también comentan,
que tienen,
en estos 5 megas,
o lo que sea que ocupa,
o sea,
estos 4 segundos de instalación,
es que es compatible con TypeScript,
entonces,
podríamos intentar utilizar aquí,
yo que sé,
un,
eh,
constants.tsx,
y lo que vamos a tener aquí,
pues,
sería un mensaje,
que sea un string,
que sea,
hola a todos,
vamos a exportar así,
vale,
fácil,
es tontería,
pero,
lo único que quiero ver,
es si realmente,
eh,
va a entender esta sintaxis de TypeScript,
y que realmente la va,
lo va a poder utilizar,
así que vamos a poner este,
esto que tenemos aquí,
lo vamos a poner aquí,
bueno,
a todos,
y todas,
desde TypeScript,
vale,
así que,
este mensaje,
as,
mensaje,
from,
TypeScript,
y esto,
lo vamos a recuperar,
desde,
constants.tsx,
vale,
que no le gusta,
vale,
porque todavía no utilizamos el mensaje,
que va a ser el valor por defecto,
y así deberíamos verlo,
import path,
no puede ser,
vale,
no puede utilizar,
bueno,
esto es un poco raro,
parece un error más de leitos,
vamos a probarlo,
va,
bueno,
parece que ha funcionado,
si vamos aquí,
pues ya está,
bueno,
he repetido el hola,
vale,
este,
esto lo he repetido,
pero,
está funcionando bien,
o sea,
o sea,
está compilando TypeScript,
está compilando React,
está haciendo el bundle de React,
y ya veis que tarda,
de hecho,
vamos a ver cuánto tarda,
tarda 200 milisegundos,
es brutal,
vale,
me parece impresionante,
o sea,
es,
por muy poco que sea el código,
vale,
es una aplicación que,
que tiene,
ya su,
tiene algo,
¿no?
tiene que bundleizar algunas cosas,
tiene TypeScript por un lado,
tiene transformaciones de Babel,
me parece bastante rápido,
o sea,
es que es inmediato,
directamente,
dicho esto,
otra cosa que tiene muy interesante,
que he visto que tiene por aquí,
y hace tiempo que no leo,
y yo estoy aquí dándole caña,
vale,
aquí,
vamos a hablar,
vamos a hablar,
a ver si soy el único que,
que está alucinando con todo esto,
o no sé,
a ver qué os parece,
os leo,
y comentándome,
a ver qué os parece,
que rico está el vino,
Yellowwing,
comentaste en un vídeo,
que .jsx,
estaba deprecado,
y React recomendaba usar .js,
es verdad,
y,
lo cierto es que,
intenté buscar,
donde lo decía,
o sea,
donde lo leí,
creí haberlo leído,
en los repositorios,
de React y tal,
de que no tenía tanto sentido,
poner .jsx,
pero bueno,
creo que tampoco,
ya hemos visto,
que tenemos las dos opciones,
yo lo que os diría,
es que,
si estáis cómodos,
o cómodas,
utilizando .jsx,
como extensión,
que lo utilicéis,
y que no os preocupéis,
porque no va a desaparecer,
y,
y la transición sería muy larga,
entonces,
yo creo que no,
no va a ocurrir,
aquí ya vemos,
que por,
hacerlo de una forma más automática,
lo da por hecho,
lo cual me parece,
una buena decisión,
justamente,
para evitar configuración,
así que,
utiliza .jsx,
en este caso,
no hay ningún problema,
que utilicéis .js,
pues lo que podéis hacer,
es,
utilizar el loader,
que hemos visto,
y ya está,
vale,
vale,
según las recomendaciones,
sí,
justamente,
lo mismo que he comentado,
papá,
papá,
papá,
¿por qué el asterisco,
al importar react?
vale,
Juan Camilo,
esto es muy interesante,
el tema,
es que si yo hago un import react,
from react,
lo que estoy haciendo,
es importar,
todo,
porque estoy,
estoy importando,
el módulo por defecto,
de react,
que básicamente,
trae,
todos los módulos,
todos los módulos,
entonces,
a ver,
no sé si voy a ser capaz,
de explicártelo aquí,
fácilmente,
vale,
pero voy a intentarlo,
esto,
estas dos líneas,
son diferentes,
from react,
vale,
estas dos líneas,
que parecen iguales,
estas dos,
son diferentes,
¿por qué?
porque la primera,
está importando,
el default,
que el default,
trae,
todos los módulos,
vale,
pero,
está trayendo el default,
¿qué pasa?
que cuando tú importas el default,
todos los módulos que tiene,
digamos que,
ya,
no son visibles,
de la misma forma,
para el empaquetador,
no es capaz,
de discernir,
cuáles de esos módulos,
vas a utilizar,
por lo tanto,
lo que va a hacer el empaquetador,
es,
importarlos todos,
¿qué pasa?
que,
en empaquetadores,
como webpack,
rollup,
o en este caso,
sbuild,
que utilizan,
code,
matar,
el tree shaking,
o sea,
hacer tree shaking,
y matar,
las ramas,
que no se utilizan,
cuando tú haces el import,
todo,
como react,
lo que estás haciendo directamente,
es importar,
todos los módulos,
pero,
¿cuál es la diferencia?
que uno,
o sea,
uno es como si pusieses aquí,
use state,
use reducer,
use no sé qué,
bla,
bla,
bla,
todo esto,
como react,
from react,
¿vale?
de forma que,
cuando tú haces un,
así,
en realidad,
estás utilizando,
uno de estos módulos,
pero,
el empaquetador,
ya tiene la visión,
de cuál es exactamente,
¿vale?
porque,
lo que está haciendo,
es importar,
cada uno de los módulos,
son todos,
pero los está importando,
todos,
cada uno,
de forma,
de uno en uno,
en cambio,
el otro,
lo que está haciendo,
es importar,
el módulo por defecto,
que ya los trae todos,
y no tiene esa visibilidad,
¿vale?
o sea,
no es lo mismo,
importarlos todos,
pero uno a uno,
¿no?
y decir,
vale,
lo importo todo,
y a todo,
lo llamo react,
que digo,
voy a importar el módulo por defecto,
que se llama react,
y le pongo el nombre react,
pero ese módulo por detrás,
está haciendo mil cosas,
son como dos formas diferentes,
aunque en este caso,
funciona exactamente igual,
para importarlo,
lo interesante,
sería utilizar el segundo,
¿por qué?
porque esto,
le da la oportunidad,
de hacer tree shaking,
es cierto,
o sea,
no voy a descubrir aquí,
alguna cosa brutal,
es cierto,
que el tree shaking,
que ahora mismo,
a día de hoy,
podéis conseguir de react,
es bastante poco,
muy chiquitito,
algo es algo,
obviamente,
pero no está muy bien optimizado,
para esto,
pero ¿qué pasa?
que si ya,
te vas preparando,
y vas utilizando este código,
pues el día de mañana,
si hacen mejoras,
en ese aspecto,
pues de golpe,
a lo mejor,
tu aplicación,
ocupa 10k menos,
porque lo estabas haciendo bien,
entonces,
siempre que puedas,
hazlo así,
¿qué pasa?
que ahora,
justamente,
ha habido otra iteración,
en react,
que es,
muy interesante,
¿no?
y es el hecho de,
quitarte estos dos,
directamente,
¿qué pasa?
que lo que hace,
es que,
Babel,
hace la transformación,
de hecho,
es lo que estaba comentando antes,
aquí,
¿vale?
ahora,
lo que dice es,
vale,
ya no importes,
no hagas esto,
¿vale?
esto es lo típico,
como se hace el típico,
que ya te digo,
que es,
la peor forma de hacerlo,
pero es que tampoco,
como react,
no estaba muy bien optimizado,
pero tampoco,
ahora lo que te dice es,
hazlo así directamente,
no hagas un import react from react,
¿por qué?
porque si utilizas Babel,
en el plugin de react de Babel,
le puedes decir,
que importe automáticamente,
una utilidad,
que se llama JSX,
que es esta,
¿vale?
esto sería el código transpilado,
y te dice,
vale,
pues importo JSX de react,
barra JS runtime,
y ¿qué pasa?
que esto,
este JSX,
va a ser un método,
que va a estar súper optimizado,
para este caso de uso,
y además,
ya no haces el import react from react,
de forma,
que te ves obligado,
a ni siquiera utilizar este,
sino que,
lo que hará será,
import use state,
from react,
¿por qué?
porque necesitas el use state,
entonces,
ya tendrá el empaquetador,
la visión,
de qué módulos,
en concreto,
son los que utilizas,
entonces,
de cuál es mejor,
de mejor a peor,
sería,
el mejor es este,
¿vale?
¿por qué?
porque estamos indicándoles siempre,
qué módulos en concreto,
son los que estamos utilizando,
en nuestro archivo,
de forma que podrá hacer,
el tree shaking,
súper fácil,
el segundo,
sería este,
¿vale?
porque le estamos diciendo,
importa lo todo,
por react,
todos los módulos,
y entonces podemos utilizarlos así,
pero bueno,
también es verdad que escribir react,
es un poco,
y el peor sería este,
¿vale?
que es el más típico,
también,
¿vale?
pero que se utiliza import react,
y luego se hace esto,
o esto,
pero,
ya te digo que sería así,
¿vale?
eso sería un poco la explicación,
vaya pedazo de parrafada explicación que te he dado,
espero que te haya servido,
¿vale?
¿actualmente es utilizado,
o el mercado lo tiene Webpack?
el mercado lo tiene Webpack,
Edwin,
o sea,
sin ningún tipo de duda,
el mercado ahora mismo,
lo tiene Webpack,
es verdad que,
hay un mercadillo,
diría,
de roll up,
que es bastante importante,
porque se utiliza bastante,
para librerías,
bibliotecas,
paquetes en concreto,
pero a nivel de aplicaciones,
lo tiene Webpack,
en gran parte,
porque hay frameworks que utilizan,
como Next.js,
que utilizan Webpack,
por detrás,
¿vale?
¿qué más?
ojalá se termine y se estandarice,
¿cómo compilaría ese CSS?
pues,
no tiene compilación de Sass,
por defecto,
lo puedo mirar,
pero estoy bastante seguro que no tiene,
lo que se diga que tiene es CSS,
podemos probar,
ahora quiero probar rápidamente,
el texto y el JSON,
¿vale?
que me quedarían esos dos,
y el data y URL,
no sé si este también puede valer la pena,
bueno,
vamos a probar el CSS y el texto,
y el JSON,
el JSON debe ser un momento,
estos tres,
el CSS,
tengo dudas de cómo,
o sea,
si lo importará directamente,
cómo,
bueno,
no sé,
ahora lo veremos,
porque tengo dudas,
porque no tiene acceso a compilar el index HTML,
por lo tanto,
no lo puedo inyectar,
entonces,
no sé si lo hará bajo demanda,
con JavaScript,
le pondrá un pequeño helper,
ahora lo veremos,
a veces,
a veces,
es mejor,
no,
a veces la configuración suele ser tediosa,
hablando de webpack o rollup,
es verdad,
totalmente,
es verdad que hay veces que es más por desconocimiento nuestro,
que no sabemos configurarlo,
también te digo,
quiero decir que me he encontrado configuraciones muy complejas,
que está haciendo demasiadas cosas que no son necesarias,
eso por un lado,
y la segunda,
es que queremos extraer como se puede,
pues hacemos cosas con webpack que no deberíamos,
por ejemplo,
es que yo quiero que webpack pues coja,
importe los SVG,
me los optimice y entonces me los transforme en componente de React,
claro,
si tú le pides limones a webpack,
pues tendrás que ponerle una máquina de hacer limones,
si nosotros fuésemos lo más cercanos a la plataforma posible,
que es lo que buscan cosas como snowpack,
que es un bundleizador también que me gusta mucho,
porque está basado más en los estándares,
pues veríamos que nuestras configuraciones serían más sencillas,
lo que pasa es que muchas veces se nos va un poco la cabeza,
y pedimos hacer muchísimas cosas en webpack,
así que también tenemos nuestra responsabilidad de intentar hacer lo mínimo posible con estas herramientas,
lo primero para no atarnos a algo que está muy lejos de la plataforma,
de los estándares,
y lo segundo para que sea fácil de mantener,
¿vale?
Al final es mejor usar JS,
al final va a haber convierte JSX a JS,
¿no?
Lo que queráis,
o sea,
utilizar JSX o JS,
el JSX,
el punto,
o sea,
JSX yo lo utilizaría porque es más fácil de leer,
si te refieres a la extensión,
utilizar cualquiera de las dos,
en este caso JSX se ve que es mejor,
en el caso de que queráis utilizar React porque lo hace automáticamente.
¿Qué más?
Llego un poco tarde.
¿La curva de aprendizaje de Sbuild es menor o mayor que la de webpack?
A ver,
en mi opinión,
teniendo en cuenta lo que llevamos aquí una hora y cuarto y tal,
yo creo que es menor,
¿no?
Porque en un momentito hemos hecho bastantes cosas,
así que yo diría que bastante mejor.
Así que,
vale.
¿Cómo te enteraste de Sbuild?
Pues no sé,
por Twitter,
que estoy siempre ahí atento leyendo y lo leí hace tiempo,
hace meses en realidad,
pero bueno,
no sé,
ahora es que he tenido tiempo de echarle un vistazo.
Vale,
pues vamos a hacer rápidamente unas cuantas pruebas,
por ejemplo,
styles.css,
vamos a estilar nuestro mensaje este,
le voy a poner aquí un class name,
que va a ser mensaje también,
súper original,
y vamos a importar los estilos estos,
a ver qué hace con los estilos.
Ponía por ahí,
ay,
que no he puesto la cámara,
perdón.
Básicamente lo que he hecho es importar estos styles.css,
he creado aquí este class name como mensaje,
y he puesto un styles.css,
que vamos a ponerle estos estilos,
voy a poner que sea System UI este,
y vamos a poner esto,
vale,
y ya está,
vale,
vamos a ver cómo queda esto,
vale,
pues esto queda exactamente igual,
o sea,
no ha hecho nada,
ay,
es que,
claro,
tengo que hacer la build,
si no hago la build,
no se ve nada,
vamos a ver,
no puede resolver styles,
ah,
es que he puesto style,
styles.css,
vale,
voy a quitar el time,
vale,
ahora sí que ha hecho esto,
vale,
dice que React is not defined,
esto es porque he cambiado,
aquí,
esto lo he quitado,
con la explicación,
vale,
venga,
pues yo no veo los styles.css,
a ver si es que había que hacer,
aquí cuando hemos puesto los estilos,
el content type,
dice que es un work in progress,
vale,
de default para css files,
vale,
es que parece,
no sé,
o sea,
dice,
puedes importar css desde javascript,
y también generará un app.css,
ya está,
ya está,
ya sé lo que hace entonces,
vale,
entonces lo que hace,
lo que está haciendo básicamente,
es importar,
o sea,
tienes que importarlo tú,
tienes que aquí decirle que tienes el stylesheet,
vale,
y href,
claro,
lo tenemos que importar nosotros,
ahora veo lo que ha hecho,
lo que ha hecho,
es que tiene aquí,
lo ha creado,
si ha creado un punto de entrada,
app.js,
pues ha creado un app.css,
bueno,
a ver,
no es lo que,
claro,
ya decía yo,
que iba a hacer magia esto,
ahora sí,
ahora ya funciona,
bueno,
igualmente,
sí,
impresionante,
muy impresionante,
lo rápido que es,
vale,
pues ya,
ya lo tendríamos,
eso se da con los estilos,
lo que hacemos cuando importamos los estilos,
es que cuando hacemos la build,
automáticamente,
pues nos crea un punto css,
el problema,
pues que esto es lo único que hay,
no hay sas,
no hay nada de esto,
bueno,
es lo esperable,
el json,
me imagino que el json,
mira,
podríamos incluso,
oh,
oh,
oh,
interesante esto,
a ver,
podríamos poner aquí,
ta,
ta,
en el mensaje mismo,
dice aquí,
que podemos hacer un import del package json,
y extraer la versión,
y aquí veríamos un caso,
deberíamos ver un caso,
de code splitting,
si ponemos aquí esto,
a ver,
deberíamos ver un,
de code splitting,
no,
perdón,
de tree shaking,
en este caso,
si hacemos aquí una build,
vale,
vamos a hacer esto de la versión,
de la clase,
y voy a poner aquí,
la versión,
vale,
esto no hace falta,
vale,
vamos a poner la versión del package json,
para que aparezca en nuestra aplicación,
vale,
he puesto un debugger justo antes,
vale,
claro,
no aparece,
porque,
bueno,
pero ahora sí que se ve el source map,
veis aquí,
que se ven bien los estilos,
esto es porque,
está utilizando el source map,
y aquí se puede ver,
source map,
from,
tal,
así que el formap,
el source map,
está funcionando correctamente,
lo que quería ver,
era,
el json,
¿por qué?
1,
0,
0,
1,
0,
0,
se supone,
vale,
aquí lo podemos ver,
bueno,
no sé si lo vamos a poder ver muy bien,
pero lo voy a intentar,
yo lo voy a intentar,
vale,
cuando yo he hecho,
¿ves esta línea de aquí?
esta línea de aquí,
me ha petado,
ah,
bueno,
esta línea de aquí,
es que a veces el debugger ya se vuelve muy loco,
esta línea de aquí,
la línea 8309,
que pone 1,
0,
0,
eso,
eso,
es justamente este import que estoy haciendo aquí,
esto lo que ha hecho,
esto es brutal,
porque está haciendo un tree shaking de un json,
o sea,
lo que está haciendo es,
ha ido al json,
ha leído todo el archivo,
ha dicho,
vale,
pero solo necesitas esto,
vale,
pues esto es lo que voy a traer,
y se ha traído el string,
ni siquiera la key,
o sea,
el string,
1, 0,
0,
y aquí lo tenemos,
y al hacer el import,
cuando lo ha transformado,
me parece muy brutal,
y esto hasta hace poco,
Webpack no lo tenía,
y la verdad es que daba muchos problemas,
pues está muy bien,
lo que ha conseguido esto,
es decir,
vale,
pues solo importa la versión,
pues no te preocupes,
que tú aquí en este archivo,
vas a traer la versión,
y entonces se trae lo mínimo que necesita,
y ahí lo tiene,
1, 0,
y para que veáis que es eso,
pues cuando ha hecho este import,
este import del mensaje es este,
y luego ha hecho esto,
y luego pues ya lo podemos utilizar,
pues ahí lo tenemos,
con la versión,
vale,
pues ya también hemos probado el JSON,
y texto,
me imagino,
esto también está bastante bien,
a ver,
texto.txt,
está bien porque fuera de la caja,
te vienen muchos loaders,
que no tiene Webpack,
o sea,
por ejemplo,
en Webpack,
el hecho de configurar JSX,
ya tiene una curva de aprendizaje,
porque ya te obliga,
a utilizar Babel,
y con Babel,
meterle el plugin de React,
o sea,
ya tienes que,
tendrías que hacer esto,
install Webpack,
vamos a hacer esto,
sería,
npm install Webpack,
tendrías que poner,
Babel Core,
tendrías que poner Babel,
preset React,
esto seguro,
o sea,
estas no te las,
vamos,
no tienen forma de,
de no,
ah,
no,
no,
perdón,
y tendrías,
otra,
otra,
Babel Loader,
tendrías que instalar cuatro dependencias,
para hacer esto,
hombre,
yo creo que esto demuestra que la curva de aprendizaje,
sobre todo para ciertos proyectos,
es bastante más pequeña,
también con TypeScript,
si no hemos tenido que configurar nada,
para hacer TypeScript,
eso también me parece importante,
y ahora con el caso este,
de archivos de texto,
¿no?
Pues si ponemos,
esto es un archivo de texto,
vale,
pues si queremos,
el archivo de texto también,
bueno,
esto como lo importaríamos,
texto from,
texto.txt,
venga,
vamos a ver,
vamos a poner un div aquí,
aquí vamos a poner el texto,
ya vamos a poner aquí el div,
a ver qué,
esto no le gusta nada al editor,
está alucinando,
qué haces,
por tanto,
¿estás loco?
¿qué te pasa?
Vale,
esto ya ha funcionado,
con la build,
vale,
es absolutamente rápido,
vamos a ver,
o sea,
200 milisegundos,
esto no ha subido nada,
todavía,
vale,
vale,
la app que había reventado,
voy a quitar el debugger ese,
no le gusta nada el app dev tools,
que tenga eso abierto,
vale,
pues ya está,
vale,
pues ya está,
esto es un archivo de texto,
y esto es un archivo de texto,
y es un archivo de texto,
o sea,
estamos importando un archivo de texto,
te que esté así,
tal cual,
pam,
hombre,
esto está bien,
decía Rodrigo por aquí,
os voy a leer un ratito,
un momentito,
y ahora seguimos,
instalaste la cámara que te llegó ayer,
no la he instalado todavía,
alguien preguntaba si era,
bueno,
es que alguien preguntaba por aquí,
si la curva de aprendizaje era más pequeña,
¿no?
Y Rodrigo Rodríguez dice,
pues tiene plugins,
loader,
más la configuración básica,
incluso el hot reloading,
lo puedes hacer,
pero no sé,
no sé,
bueno,
es verdad que el hot reloading,
aquí no lo hemos configurado,
no tiene un servidor de pruebas,
pero,
el otro día vi un proyecto,
que os va a encantar,
que no lo he llegado a probar,
¿vale?
Pero voy a ver si lo encuentro,
lo debo tener a lo mejor en mis estrellitas,
¿debo haber puesto estrellitas?
Ah,
este,
estrella,
el caso es que han creado ya un grapper,
sobre Sbuild,
que se llama estrella,
que te trae un montón de cosas,
te trae las reveal automáticas,
que nos hubiera venido bastante bien,
puedes hacer un montón de builds a la vez,
en paralelo,
los diagnósticos de TypeScript,
que como veis,
claro,
hacemos la build de TypeScript,
pero no los diagnósticos,
también,
los podría hacer en paralelo,
o sea,
hace un montón de cosas,
¿vale?
Este ya,
además,
eso,
está basado en Sbuild,
tiene esta API en JavaScript,
que es bastante interesante,
y parece ser que,
claro,
como está basado en Sbuild,
tiene que ser bastante rápido,
bueno,
ahora mismo,
lo veo bastante verde,
porque esta sería un poco la API,
y no veo que tenga una página web,
bastante bien presentada,
y tal,
pero ya veis,
que se están creando,
se están empezando a crear ya herramientas,
sobre Sbuild,
por ejemplo,
Snowpack,
el que os enseñaba antes,
lo que os comentaba,
que también,
parece ser que va a utilizar Sbuild,
en,
a la hora de hacer la build,
porque es demasiado rápido,
creo que también hay,
Vite,
Build,
ah,
no me acuerdo si es,
o Vite,
este,
Vite,
creo que Vite,
creo que también,
está utilizando Sbuild,
si no me equivoco,
vamos a verlo,
aquí,
sí,
aquí tenemos Sbuild,
o sea,
Sbuild,
poco a poco,
se va utilizando cada vez más,
en más proyectos,
este de Vite,
es del creador de Vue.js,
o sea,
y básicamente,
lo que tiene también,
es algo parecido a Estrella,
que tienes Hot Module,
Reloading,
de hecho,
si,
si,
si este vídeo,
si este vídeo,
llega a 200 likes,
hacemos un vídeo de Vite,
e incluso utilizamos Vue,
y todo,
y aprendemos Vue,
vamos a saco,
vamos con Vue,
madre mía,
o sea,
200,
no sé si 200 likes,
son muy poco,
que luego llegáis muy rápido,
venga,
200 likes,
venga,
que lo logremos,
y hacemos un live con Vite,
y lo vemos,
lo trasteamos,
a ver qué hace Vite,
ya hemos visto lo que hace Sbuild,
pues vamos a ver lo que hace Vite también,
vale,
pues eso,
entonces,
sobre la curva,
Andrés comentaba,
que la curva es menor,
porque está el proyecto muy virgen,
el momento que empiezan a salir features,
y loaders,
se complicará,
es un muy buen momento,
para tenerlo de reojo,
la verdad que sí,
estoy de acuerdo con Andrés,
ahora es bastante pronto,
lo que está haciendo este proyecto,
está todavía por,
por seguir creciendo,
aunque ya se le van viendo,
bastante cosas interesantes,
creo que todavía tiene que mejorar,
pero lo veo pronto ya,
no ve,
no sé,
no lo veo muy lejos,
de poder utilizarlo,
en algunos casos,
como por ejemplo,
lo que os comentaba,
proyectos en Node,
que necesitamos hacer,
builds,
bundles,
de ese proyecto de Node,
que también funciona en el cliente,
porque por ejemplo,
necesitamos transformar JSX,
pues es que esto,
me parece brutal,
de hecho,
es que el lunes,
voy a probarlo ya,
para ver,
cómo funcionaría,
en nuestros proyectos,
en la parte de Node,
porque nos podríamos quitar,
algún minutillo,
de despliegue,
y bueno,
los minutos,
son,
son dinero,
así que,
son,
son cosas que,
que siempre valen la pena,
pero,
aunque estoy de acuerdo,
de que a lo mejor,
ahora es muy pronto,
y por eso la curva de aprendizaje,
es chiquitita,
creo que ya tiene,
muchas cosas,
de,
por defecto,
muy interesantes,
como en su día,
pasó con Vercel,
con Vercel,
no,
con Parcel,
¿no?
y ahora lo veo con,
con Sbill,
el soporte de JSX nativo,
nativo,
ni siquiera es que utilizaba Bel,
es nativo,
o TypeScript,
y no tener que instalarlo,
no sé,
me parece que eso,
le da una ventaja brutal,
me parece que hará bien,
que será interesante,
y funcionará muy bien,
si se mantiene,
en la línea de utilizar,
cosas más cercanas,
a la plataforma,
si empieza,
a intentar hacer un webpack,
pues ahí,
yo creo que la podría liar,
porque,
¿cuál es el problema,
de webpack?
el problema de webpack,
yo creo,
es que hace demasiadas cosas,
y cada vez,
es más difícil mantenerlo,
y sobre todo,
mantenerlo pequeñito,
porque,
claro,
hace,
intenta darle soporte,
a demasiadas cosas,
por ejemplo,
webpack trae,
por sí,
ya,
todo el tema,
de la configuración,
de los chunks,
si todo eso,
se pudiese,
abstraer totalmente,
o el hecho de,
dar soporte nativo,
a JSX,
o a JavaScript,
claro,
webpack,
hay que pensar,
que es un empaquetador,
de aplicaciones,
pero,
busca ser,
agnóstica,
a lo que,
realmente,
vas a hacer,
o sea,
no te viene nada,
con Babel,
o sea,
es como,
un bundelizador,
de módulos,
pero módulos,
que pueden ser,
podríamos utilizar,
webpack sin JavaScript,
podríamos hacer,
que webpack,
nos empaquetase cosas,
que no utilizan JavaScript,
¿no?
Y entonces,
al final,
es algo,
que abarca tantas cosas,
que,
claro,
es más difícil,
hay que pensar,
que Sbill,
parte con ventaja,
porque su objetivo,
único,
es el de hacer,
las builds,
de proyectos JavaScript,
¿no?
Así que,
creo que ahí,
tiene una ventaja,
bastante,
bastante importante,
¿qué más?
Que me pone,
apenas dijiste los 200,
ya empezaron a subir los likes,
bueno,
pero si aún quedan,
para que lleguemos a los 200,
y vamos por 118,
buah,
yo creo que no,
no lo haremos,
el problema de webpack,
es café para todos,
efectivamente,
y yo creo que esto,
es lo que espero,
que no le pase a Sbill,
espero que Sbill,
se sepa,
mantener,
en lo que tiene que hacer,
y hacerlo bien,
y mantenerse cerquita,
de la plataforma,
hay una cosa,
que no hemos comentado,
que me parece,
muy,
muy,
muy,
muy interesante,
y seguramente,
lo que lo hace todavía,
más potente,
de la misma forma,
que tenemos a webpack,
que por supuesto,
tienes un archivo de configuración,
súper complejo,
y tal,
también,
en Sbill,
podríamos crear,
no voy a decir,
un archivo de configuración,
pero casi,
porque tiene su API,
vale,
tiene una API,
en JavaScript,
y aquí podemos ver,
por ejemplo,
todo lo que hemos hecho aquí,
esto que hemos hecho aquí,
vamos a hacerlo,
este package,
vamos a ver el script,
que hemos hecho,
todo esto que hemos hecho aquí,
al final,
podríamos crear,
por ejemplo,
un,
vamos a crear,
bueno,
aquí mismo,
build.js,
o bundle,
create bundle.js,
vale,
entonces,
podemos ver,
que tiene su propia,
JavaScript API,
y todo lo que habíamos hecho aquí,
que me lo voy a copiar,
más o menos,
para que veamos lo que había,
vale,
el entry point,
teníamos a pjsx,
exactamente lo mismo,
el bundle,
lo mismo,
minify,
true,
además tiene TypeScript,
y esto está muy bien,
porque,
de forma que,
conforme vamos escribiendo,
vale,
aquí,
puedo hacer control,
espacio,
y aquí podemos ver,
todas las opciones que tiene,
así que,
outdir,
vale,
pues esto sería public,
define,
esto no sé,
qué espera,
qué espera este define,
este define,
espera,
vale,
o sea,
un objeto,
lo que no sé,
no sé si esto,
podremos hacer,
esto,
no creo,
no creo,
ojalá,
lo vamos a probar,
que no perdemos nada,
el target,
vale,
que esto sería un array,
Safari 14,
hemos dicho,
el formato,
que hemos dicho,
SM,
qué más,
qué más,
source map,
que esto sería un true,
y splitting,
que hemos dicho que era un true,
y esto más,
se supone,
se supone,
vamos a ver ahora,
vamos a cambiarle el mensaje,
para ver si esto funciona,
el mensaje este,
del amigo clase,
es brutal,
habla todas,
que hemos hecho,
TypeScript,
React y tal,
y esto va volado,
desde JavaScript,
API,
vale,
así veremos si cambia bastante el mensaje,
esto sería,
no de create module,
vale,
create,
module no,
bundle,
a ver,
bundle.js,
bueno,
ha hecho algo,
no sé el qué,
pero algo ha hecho,
petar no ha petado,
bueno,
vale,
ya veo aquí que el production este,
no le ha gustado,
como lo hemos hecho aquí,
vale,
qué puede ser esto,
no sé,
podríamos buscar aquí,
el process,
no sé cómo puede ser esto,
a ver,
define dice,
define key string,
esto es lo que nos va a fastidiar,
el define este,
que no sé cómo lo crea,
cuando hemos visto este antes,
aquí no viene el ejemplo,
si alguien tiene por ahí el ejemplo,
si alguien encuentra cómo hacerlo,
que lo diga,
que seguro que en algún sitio lo debe poner,
porque esto debe ser el típico error que tiene de,
vale,
esto es como lo hacemos nosotros,
el process,
inject,
no,
esto es lo que queremos hacer,
venga,
que estamos cerca,
ay,
mira,
mira,
no,
es que aquí tiene el auto import,
este de JSX,
you can use the inject feature,
bla,
bla,
bla,
interesante,
vale,
vamos a ver,
esto,
como es,
build API,
define,
define,
define,
esto sería aquí,
define,
pero no sale un ejemplo,
me gustaría ver un ejemplo del define,
pero con el código,
con el de la API de JavaScript,
compile erosion,
esto no,
que no se me ocurre como,
a ver,
se me ocurre que pueda ser un objeto dentro de un objeto dentro de un objeto,
pero no creo que sea así,
o sea,
yo me imagino que sería así,
otra cosa es que sean dos comillas,
ojo,
ojo,
claro,
ay,
claro,
ojo,
que va a ser esto,
no sé si alguien le ha puesto ahí la solución,
pero creo que puede ser esto,
y ahora,
vamos a hacer aquí el node este,
vale,
claro,
las dos comillas,
las dos comillas,
¿qué pasa?
ah,
pero bueno,
queda mucho más limpio,
mira,
queda bastante más limpio,
¿qué pasa con esto?
claro,
esto es definir variables de entorno,
y lo que le está diciendo es,
cámbiame esto,
por esto,
pero cuando hace el cambio,
si yo dejo esto,
me lo está metiendo sin comillas,
y yo creo que en el código sea un string,
y por lo tanto tengo que añadirle las comillas,
¿vale?
entonces ya lo tendríamos,
pero esto sería un poco la,
con la configuración,
para sacarla de este package.json,
de forma que ahora,
pues ya podríamos hacer este node.createvundle.js,
cuando hacemos npm run build,
ahora tiramos de ese,
¿vale?
y ya lo tendríamos,
funcionando perfectamente.
¿qué os ha parecido?
¿qué os ha parecido esto?
¿qué os ha parecido Sbuild?
contadme qué os ha parecido,
a ver si os gusta,
si os ha gustado,
si os ha sorprendido,
si no te,
si no nos llama,
creéis que ya con webpack tenemos suficiente,
si creéis que esto es por donde va,
a ver yo,
mi opinión es,
es brutal,
o sea,
es brutal,
es brutal lo rápido que va,
me gusta mucho que no utilice javascript,
para que justamente vaya volando,
para poder hacer más rápido mi javascript,
creo que es una línea,
o sea,
no creo que sea,
lo que ahora vaya a reventar webpack,
ahora,
pero creo que puede ser lo que,
dentro de no sé cuánto,
quizás menos tiempo de lo que pensamos,
sí que sea lo que revienta webpack,
¿y por qué?
pensad que esto lo utilizase,
lo utilizase NextGS,
por ejemplo,
que encontrasen la forma de utilizarlo en NextGS,
es que NextGS volaría,
y NextGS,
una de las cosas que tiene,
como hemos ido viendo en el curso este,
que hacíamos en directo,
es que le encanta,
el que vayan las cosas rápido,
si son capaces de utilizar esto,
eso le daría muchísima comunidad a Sbill,
le daría muchas manos de desarrollo,
le daría más popularidad,
y entonces de repente,
tendríamos un contrincante bastante serio,
respecto a webpack,
y cosas que en NextGS tardan 60 segundos,
pasarían a lo mejor a tardar 5,
con soporte a TypeScript,
con soporte a React,
que justamente encaja perfectamente,
¿no?
Entonces,
creo que,
no sé si al final será Sbill,
lo que lo reviente,
aunque tengo que decir que,
me lo esperaba con más problemas,
o no me lo esperaba tan bueno,
y a lo mejor,
lo que hace esto es abrir,
un nuevo campo de batalla,
vamos a llamarla así,
aunque no es una batalla,
pero un campo de exploración,
en el que webpack,
rollup,
parcel,
o otras herramientas,
empiezan a ver,
que la posibilidad de hacer cosas,
no en JavaScript,
en otros lenguajes,
para ir más rápido,
hace que el desarrollo,
pues vaya volado,
y ya no solo hablo de,
no hablo solo de empaquetador,
alguien me preguntaba por ahí,
y no lo he dicho,
me preguntaba de,
oye,
¿cómo lo puedo utilizar esto con Sbill?
¿Y si no utilizamos Sbill?
¿Y si utilizamos el próximo Sbill,
que esté basado,
en lo que nos está trayendo Sbill,
y está utilizando Go,
pues para ser más rápido,
y entonces el linter,
en lugar de ocupar como ocupa ahora,
vamos a ponerlo rápidamente,
pero Sbill,
solo Sbill,
porque luego,
pues tenemos,
son 11 megas,
o sea,
es Lint,
solo es Lint,
sin ningún tipo de,
sin ningún tipo de,
de reglas,
plugins,
presets y tal,
solo es Lint,
son 11 megas,
estamos hablando que son,
11 megas,
es el doble que lo que ocupa Sbill,
y ya habéis visto todo lo que trae Sbill,
y la rapidez que tiene,
pues quién sabe,
si esta idea,
pues va más allá de los empaquetadores,
y va con otras herramientas,
que damos por hecho en nuestro día a día,
TypeScript,
¿cómo mejoraría el tiempo,
si TypeScript fuese así de rápido?
Bueno,
no sé,
no sé,
una pasada,
una pasada,
dice por aquí Joaquín,
dice que una pasada,
¿se podría ya usar Sbill ahora mismo para producción?
Yo creo que sí,
pero tendrías que tener en cuenta,
pues las cosas que hemos comentado,
el tema del hashing,
tener que poner manualmente,
el script en el index HTML,
mirar que no eches en falta ningún plugin,
ningún loader,
pero yo creo,
yo lo veo bien,
de hecho,
es lo que decía,
que cada vez veo más gente,
que lo está utilizando,
a ver,
lo de siempre,
si es un proyecto de mi empresa,
muy grande y tal,
seguramente seguiría apostando por Webpack,
o NextDS,
que está de sobras probados,
y tal,
pero bueno,
que para algún proyectillo,
yo lo probaría,
y me parece interesante,
como dice José Domingo Pérez,
muy bueno para cuando tu aplicación,
es orientada a JavaScript 100%,
pero bastante verde,
pero tiene mucho futuro,
yo creo que si es 100% JavaScript,
y tenéis claras las dependencias,
no sé,
me ha sorprendido mucho,
está mucho mejor,
de cuando la primera vez,
que utilice Webpack,
ya os lo digo yo,
puede ser que coja lo mejor,
de cada bundler,
no sé David,
yo veo que lo mejor de sí mismo,
es lo rápido que es,
la instalación ha sido rapidísima,
todo ha sido rapidísimo,
me parece espectacular,
así que,
no creo que reviente Webpack,
en todo caso,
saldrá un loader,
para utilizarlo con 0 config,
Webpack,
se puede utilizar ya,
con 0 config,
hay un montón de,
hay un montón de starters,
creo que va más allá,
de eso Andrés,
yo no creo que sea tan fácil,
como sale un loader,
y ya,
esto estamos hablando,
de cosas muy,
de las raíces,
del proyecto,
y el poder conseguir esta velocidad,
va a ser difícil,
para Webpack,
ya hemos visto,
que es de 10 a 100 veces,
más rápido,
y es que hay trabajo,
para el watch,
que utilizarías,
Chokidar,
Chokidar parece una buena elección,
podríamos hacer Chokidar,
a ver,
es el que más me suena,
pero mira,
aquí en Chokidar,
podríamos hacer,
a ver ahora,
porque,
vamos a hacerlo rápido,
pero podríamos hacerlo un,
molaría Chokidar,
que también fuese nativo,
y todas estas cosas,
uy,
¿dónde he hecho esto?
vale,
vale,
lo estaba haciendo,
¿dónde era?
vale,
podríamos utilizar el Chokidar,
en la propia configuración esta,
que obviamente,
podríamos tener una,
una configuración de desarrollo,
otra de tal,
pero bueno,
para que veamos que se puede hacer,
y entiendo que ya con esto,
nos lo copiamos,
aquí podríamos hacer,
bueno,
vamos a poner todo,
es un poco raro,
no sé si esto mira,
sus directorios,
pero al final,
esto,
lo pondríamos aquí,
y ya está,
y ahora entiendo que,
poniendo esto,
vale,
se queda así,
ahora,
si hacemos un cambio,
bueno,
ostras,
igual no debería haberlo puesto,
no sé,
es que creo que no,
no ignora,
los node modules,
me parece,
así que deberíamos a lo mejor,
poner aquí,
ignored,
node modules,
es que he notado,
que iba un poco lento,
el ordena,
bueno,
sigue yendo lento,
igual le está pillando más,
de lo que debería,
pero bueno,
vamos a hacer,
al menos una prueba,
si no ya veremos,
del amido,
choquidar,
vale,
vamos aquí,
a ver,
mira,
ahí lo tienes,
lo que pasa es,
que también tendría que ignorar el public,
si no,
esto me va a hacer un loop infinito,
pero bueno,
que sigue,
que se podría sin ningún problema,
teníamos aquí el public,
también,
porque si no,
cada vez que generas uno,
pensaba que no iba a pillar las,
los,
subdirectorios,
pero sí que los pilla,
entonces,
podríamos ignorar estos,
entonces,
ahora sí,
se haría el build cada vez,
y ya está,
súper fácil,
súper fácil,
ese sería el watch,
simon g,
que además ya que lo pedías,
el problema es,
que quieren usar javascript para todo,
y de verdad,
eso está mal,
aunque se use en back,
no es necesario usarlo en todo,
dice Rodrigo,
sí,
a ver,
justamente Rodrigo,
lo más interesante que me parece,
es que creo,
que hay mucho potencial,
en no utilizar javascript,
para herramientas de javascript,
y eso es lo que me parece interesante,
porque creo que javascript,
es rápido,
cuando hablamos,
de crear,
microservicios,
incluso,
aunque son lo suficientemente,
normales,
como hacer una petición,
una API,
cosas así,
o el hacer navegador,
cosas del navegador y tal,
por supuesto,
es lo que tiene javascript,
solo se puede utilizar javascript,
entonces,
pero para hacer las pruebas,
herramientas para desarrollar javascript,
creo que es interesante,
¿no?
mirar eso,
eh,
mi dev,
¿tienes un curso de webpack?
tengo un vídeo de webpack,
tengo un vídeo de webpack,
no es un curso,
pero creo que es,
creo que no está nada mal,
es este,
aprende a,
uy,
aprende a webpack,
paso a paso,
y bueno,
no tenía una webcam buena,
en condiciones,
y salía con esa cara,
pero bueno,
mirad,
qué contento salía,
más o menos,
pues eso,
aprende webpack paso a paso,
eh,
¿saldrá un webpack,
ah,
¿saldrá un webpack que uses build por debajo?
me refiero,
bueno,
claro,
que utilice,
pero qué fuerte,
¿no?
que utilices build por debajo,
sería,
sería interesante,
¿dónde encuentro config de webpack preestablecida?
bueno,
Rodrigo,
tienes un montón de loaders,
starters,
de webpack que te configuran un montón de cosas,
pon el webpack starter,
y te van a salir 10.000 millones con todo lo que necesites y más,
¿vale?
no me imagino hacer tooling con C++ o Java,
debe ser volar,
bueno,
en este caso lo he hecho con Go,
que entiendo que Go lo compila en a C++,
o utilizan algo,
la verdad es que no lo he leído,
compiles to,
no sé con qué,
it's great in Go,
and compiles to native code,
bueno,
no sé a qué se refiere exactamente con native code,
it's Rust and Go,
pero obviamente no estás compilando a JavaScript,
estás compilando a un lenguaje que sea que hace que vuele,
¿vale?
así que,
bueno,
pues nada,
amigos y amigas,
muchísimas gracias por estar aquí todo este ratito,
hemos aprendido un poco de Sbuild,
si te ha gustado la clase,
ya sabes,
dale like,
suscríbete,
dale a la campanita,
ya sabemos que si llegamos a los 200,
pues,
si llegamos a los 200,
pues miraremos el Vite este,
probaremos un poco de Vue,
miraremos este,
del creador de Vue.js,
ese bundleizador basado en Sbuild,
a ver todas las cosas que trae,
y nada,
pues deja en los comentarios que te ha parecido Sbuild,
si crees que vale la pena,
si te ha sorprendido tanto como a mí,
yo todavía estoy en shock,
no os voy a engañar,
y quiero seguir toqueteando y jugando con ello,
porque la verdad es que promete muchísimo,
promete un montón,
el futuro del frontend,
con este tipo de herramientas,
la cosa va a volar,
va a volar,
pues nada,
muchas gracias a todos los que habéis estado,
muchas gracias,
a Georgi Duarte,
que dice que ya ha llegado tarde,
no ha llegado tarde,
siempre se llega cuando se llega,
Mr. Swin,
que se haga un like con Electron,
muchas gracias,
Santiago Sanromán,
Román Yatiba,
gracias,
a esperar al siguiente,
cuidaros mucho,
pues ya sabéis,
like,
like,
y nos vemos en el siguiente,
cuidaos mucho,
¿vale?
Cuidaos,
hasta luego,
adiós.
Gracias.
Gracias.
Gracias.
Gracias.
Gracias.
Gracias.
Gracias.