Hola, hola, hola a todos. Vamos empezando por aquí.
Sabéis un montón que estáis ahí en el chat ahora mismo.
Muchísimas gracias a todos por estar por aquí.
¿Qué puedo decir? Gracias a Adriano Chiliseo, que ha venido una hora antes,
Nicolás Ticona, Adriano Chiliseo otra vez, Francisco Maldonado,
Emanuel Molinas, Andrés Lucas, Sergio Domínguez, Miguel Duarte,
Fran Gallardo, Nacho Torrella, Club de Tecnología, CDT,
Carlos Sánchez, Frank Aspar, Mauri, Pachi Vadilla,
además creo que alguien ha dicho, Mauri, es tu cumpleaños, muchas felicidades.
¿Qué más? ¿Qué más? Saludos desde Argentina, dice Anzoni Obregón,
Germán Rodríguez dice que le debo algo con Viu, pues ya veremos, ya me dirán lo que es,
Carlos Chaucanes, hola, gente desde Argentina, de Buenos Aires,
de Buenos Aires, Pablo Ezequiel Aguirre, Cristian Albarán, hola, Albarán,
Gonzalo Mendoza desde México, Mago, dice, saludos desde Perú, mi nombre es Marcos,
hola Marcos, Juan Carlos Ruiz nos pone unos emojis, hola, hola, Manuel Cerezo, buenas,
y nada, muchas gracias a todos, desde Brasil también, Moicis777, saludos desde Brasil,
Samuel Gómez, buenas, César Hernández desde Barcelona,
Lautauro nos dice que si sé algo de Amplify, sabemos de Amplify, a ver si lo metemos un poquito en el canal,
Juanjo Ortiz, hola, Midu, Nelson Hernández, hola, Miguel Ángel, saludos desde El Salvador,
saludos de Barcelona, desde España, con muchísimo cariño a todos vosotros,
muchísimas, muchas gracias a todos los que os habéis apuntado, os lo agradezco,
tengo que deciros que no me he preparado absolutamente nada, así que espero que, bueno, salga bien,
y si no sale bien que me vayáis ayudando para ver en qué me he equivocado, en qué estoy haciendo mal y tal,
así que espero que entre todos lo saquemos, sigue llegando gente por aquí,
Wilson Guanto, Daniel Aguilera, Judith Gongora, hola desde el Prat,
ostras, desde el Prat, el Prat de Llobregate en mi pueblo, así que imagínate, muy bien, Judith,
Carlos de Antonio Alonso, Hello World by Carlos de Antonio desde Madrid, un abrazo, Carlos,
José J. Pérez Rivas desde Sevilla, Franger, Rangel desde Venezuela, madre mía, si estáis en,
o sea, viene de todo el mundo, de todos los lados, os mando a todos un abrazo enorme,
muchísimas gracias por estar hoy aquí, me llena, vamos, de orgullo y de cariño, vamos a ver,
¿qué es lo que vamos a hacer hoy? Intentar hacer hoy, hoy lo que quiero hacer es una aplicación,
os voy a enseñar, os voy a compartir aquí mi pantalla, ¿vale?
es una aplicación como esta, bastante más simple, más sencilla, porque no vamos a tener tiempo de hacerlo todo,
no vamos a poder hacerlo de los votos, y es la de Hacker News, no sé si la conocéis,
pero esta aplicación, básicamente, la gente vota para ver cuáles son los artículos más famosos.
Es la típica aplicación que todo el mundo hace, de hecho, hay una página, os la voy a buscar y os la voy a compartir por aquí,
Hacker News Progressive Web App, que es esta, ¿no? Que todo el mundo hace una Progressive Web App para ver cómo funciona,
pues, un framework, por ejemplo, aquí tienes el de React, ¿no? Y es esta aplicación hecha con React,
pues, vas bajando, hay otra de React, otra con Preact, que es parecida a la que vamos a hacer hoy, ¿no?
Con Preact, en este caso lo hace con Webpack, ya veremos que nosotros no vamos a utilizar Webpack,
y creo que esto es interesante también, hay una con Svelte, que para los que no sepáis,
tengo un curso gratuito en este mismo canal de Svelte, que os recomiendo, que poco a poco lo esté actualizando,
y que me parece un framework muy interesante.
Hay también con Vue, hay con Angular, están todos, ¿vale?
Hay una lista enorme, o sea, podrían pasarme aquí todo el día, pero bueno, los más famosos, pues, están más arriba.
Vale, más gente por aquí, desde La Rioja, Argentina, Leo Morales, Saludes de Colombia, Pocho,
primero, primera vez por aquí, pues, bienvenido, vas a ver que somos gente muy maja, muy simpática.
Yandy Castillo, buenas tardes, noches desde Buenos Aires, gracias a todos los que os vais metiendo,
qué buen ambiente, Midu, gracias, Nicolás, nos vamos poco a poco metiendo, para los que os vayan metiendo ahora,
vamos a hacer una pequeña aplicación de Hacker News, y la idea es hacerlo con Preact, ¿vale?
Mucha gente ya me ha ido escribiendo y me ha dicho, bueno, pero ¿qué es esto de Preact?
Esto es un, no sé, es una librería totalmente diferente a React, o es menor, o es, ¿qué significa, no?
En realidad, Preact es, aquí lo dice en la página web, es una alternativa a React que tiene la misma API,
casi toda la misma, dice la misma, pero no es exactamente la misma, tiene algunas diferencias,
y de hecho tiene una página donde indica las diferencias que tiene.
Pero, si ya conoces React, pues utilizar Preact es muy sencillo, es exactamente lo mismo,
lo que ya conocéis con los componentes, con los hooks, que ya sabéis, utilizando los mismos conceptos.
Así que, al final, es muy interesante, porque Preact lo que nos ofrece es un tamaño mucho más pequeño,
son solo 3Ks, aquí lo pone, 3Ks.
3Ks no es nada.
En cambio, podemos ver en Bundelfobia, vamos a buscar cuánto ocupa cada una,
pero en Bundelfobia podemos ver que el paquete de Preact, pues, a ver cuánto ocupa,
minificado y con GZIP son 3.7 kilobytes.
Luego, si buscamos React, claro, React parece que es menos, ¿no?
Porque pone 2.6 kilobytes, pero lo cierto es que React no puede funcionar sin React DOM.
Así que, si juntamos React DOM, son 36Ks, o sea, 36 más los 2.5, pues, son unos 38, pongamos unos 40.
Así que React en total sería 40, fuera de la caja ya son 40,
En cambio, Preact son, pues, lo que hemos visto, poco más de 3, deben ser 3.7.
La diferencia, pues, es bastante enorme.
Voy a ver también si me dejo a gente por aquí.
Bueno, no What the Front, pero de esto en YouTube, puede valer.
Muy bien, muchas gracias a los que os vais metiendo, desde Castellefels, otro pueblo de aquí al lado,
pero también desde otra gente de la punta del mundo, Barranquilla, desde Colombia.
Está bien perrón.
Saludos desde Guatemala, Marvin, Cristian, Sanabria, saludos desde Costa Rica.
Gracias a todos los que os vais apuntando.
Danilo Orlando Ortiz.
Pues, lo que os estaba comentando,
Priak es una alternativa que es mucho más pequeña que React,
y por eso es muy interesante ver que nos ofrece lo mismo.
No exactamente lo mismo, porque hay cosas que no son compatibles por APIs internas,
y a lo mejor lo malo que tiene Priak es que tardan un poquito las cosas más en venir,
como, no sé, los hooks, a lo mejor en React, estuvieron seis meses antes que el tiempo que cuando estuvo en Priak.
Eso le da una pequeña ventaja.
Al final, Priak no deja de ser, pues, una librería que esté inspirada en React,
y por lo tanto siempre va a ir con esa latencia, ¿no?, a la hora de poner nuevas características.
Pero, al final, si quieres hacer una aplicación que sea pequeñita y te importe mucho la performance,
pues, puede ser una alternativa muy buena.
Ya lo pone aquí, ¿no?, que es muy pequeña, que tiene una buena performance,
y hay veces, y esto puede ser muy interesante, pues, que tienes que hacer una aplicación a un dispositivo,
a dispositivos que son muy antiguos, ¿no?
O, por ejemplo, incluso tienes que hacerlo en algún, esto del web de las cosas,
lo tienes que hacer en un dispositivo que no tiene mucha memoria, por lo que sea,
y necesitas que la aplicación sea rápida.
Bueno, pues, Priak puede ser una buena alternativa.
Además, tiene un ecosistema bastante grande, y si no, lo que te ofrece es este Priak Compact,
que este Priak Compact lo que hace al final es como intentar mantener al 100% la compatibilidad con React,
porque así, si utilizas Priak como viene, no es del 100% compatible,
porque le faltan algunas APIs que ya han sido deprecadas,
pero con esta Priak Compact, que son 2K más, pues, ya tendrías una compatibilidad bastante mayor.
Aquí te pone lo que te viene, el Pure Component, el Memo, Forward Red, Portales y Suspense,
que es experimental, y por eso no viene en Priak, digamos, así por defecto, ¿vale?
Pero, aún así, si no vas a utilizar ninguna de estas cosas, pues, no hace falta que cargues estos 2Ks de más.
Así que, perfecto.
Muy bien, lo que vamos a hacer, más gente, wow, más gente está.
Kenzox, hola guapo, tú sí que eres guapo, y no te he visto.
Arnau Rius, hello, te oigo mientras hago mi tarea de programación, dice Mero Tsukiyomi, desde México.
Muy bien, pues, espero acompañarte y ayudarte a hacerla todavía mejor.
Bueno, entonces, sobre esto, recuerdo, vamos a intentar hacer esta aplicación.
El tema es que me gustaría hacer la aplicación con Priak y sin utilizar ningún tipo de herramienta
como Webpack o Parcel o Babel o nada de eso.
Bueno, entonces, sé que mucha gente se queja de que Webpack es muy complicado configurarlo y tal,
pero es que muchas veces ni siquiera necesitamos Webpack hoy en día.
Ya no es tan, tan, tan necesario, dependiendo de la aplicación que quieras hacer, claro.
Pero ahora hay alternativas que si vas a utilizarlo en navegadores modernos,
igual puedes hacerlo sin ningún tipo de herramienta como esa.
Así que hoy me gustaría enseñarte cómo lo puedes lograr.
Y lo vamos a ver gracias a este paquete que es del mismo creador de Priak, que se llama HTM.
HTM lo que te permite es utilizar una especie de JSX en tu aplicación.
Aquí puedes ver un poco la sintaxis.
Es un poco, parece un poco rara, pero luego lo vamos a ver cuando me ponga a picar código.
Lo que te permite es que en el navegador sin ningún tipo de transformación
puedas tener una especie de JSX.
Tanto con los eventos o un clic o haciendo las cosas que harías normalmente con JSX.
Y lo mejor es que ocupa muy poquito, medio K.
Así que con esto vas a ver que es muy interesante lo que vamos a conseguir con tan poquito espacio.
Por otro lado, os quiero comentar, porque esto es una cosa que siempre me preguntan
y la gente no sé si es que no le gusta.
A mí me gusta mucho Standard.js.
Yo voy a utilizar Standard.js en mi proyecto, que básicamente es un linter que ya viene con un montón de reglas.
Y una de ellas es que no vienen puntos y coma.
Los puntos y comas en JavaScript son opcionales y el linter este favorece el no utilizarlos.
Así que si parece raro que ya sepas que voy a utilizar Standard.js, que a mí me encanta y vas a ver que quedan muy limpios.
Y para el entorno de desarrollo, lo que sí voy a utilizar para poder levantar el servidor, voy a utilizar Servor.
No lo he utilizado mucho, así que pueden fallar muchas cosas, pero creo que es muy interesante porque además hace un watch de los cambios
y así nos va a ir levantando el servidor cada vez que hagamos algún cambio.
Y otra cosa, vamos a utilizar esta API de Hacker News, la que utilizan las Progressive Web Apps, que es la que nos da estas noticias.
Por ejemplo, esta de Zoom Needs to Clean Up es esta primera, o sea que nos da la información que tenemos aquí.
Así que vamos a intentar utilizar esta API y vamos a empezar ya.
No sé si hay dudas, si alguien tiene alguna pregunta, porque me voy a empezar a poner a picar ya.
Si nadie tiene preguntas, empiezo, que arranco, que arranco.
Muchas gracias a todos los que os habéis apuntado.
Vamos a empezar a darle.
Esto desde cero, todo puede salir mal o todo puede salir bien.
Espero que me vayáis ayudando si encontramos algún problema o algo.
Lo primero, pues, ay, decidme si veis bien las letras, si se ve muy chiquitito, si se ve muy grande, me avisáis, ¿vale?
Y así pues lo voy ajustando o si algo no ha quedado claro, pues lo vuelvo a hacer.
Lo primero que voy a hacer es inicializar el proyecto.
Voy a hacer npm init y le pongo el guión y, pues, para que vaya directo.
Esto ya lo que te crea, lo que hace es crearte la estructura del package.json con el nombre del directorio y ya está.
Así ya, pues, podemos empezar a instalar dependencias.
Entonces, las primeras dependencias que voy a instalar van a ser las de desarrollo.
La primera va a ser la de estándar.
Estándar, que si no me equivoco, será así.
O si no, vamos a mirarlo rápidamente en estándar como aquí está.
Vale, lo vamos a guardar como desarrollo.
Vale, aquí.
Tamaño de tipo, ok.
Muchas gracias por avisar.
Espero que todos lo veáis tan bien como José J. Pérez Rivas.
Vale, pues, vamos a instalarlo.
Mientras instalo, que esto puede tardar un poquito, pues, os explico un poco lo que voy a intentar hacer con estándar.
Estándar es lo que os decía, un linter que me va a ayudar a no cometer errores en mi código.
Y, además, tal y como tengo configurado el editor, seguramente me va a hacer los fixes nada más guardar y todo esto.
Así que ya es bastante interesante.
Voy a ver si me acuerdo de la sintaxis porque vamos a meter directamente la configuración del package.json.
Hay gente que, mira, ya tengo aquí la dependencia.
Nos ha estado la 14.3.3.
Hay gente que aquí crea un archivo que es sling.rc.
A mí, personalmente, me gusta más hacerlo así.
Poniendo aquí sling, creo que era sling.
A ver, vamos a buscarlo en la documentación.
Ya empiezo bien.
Vale.
Bueno, si no me la voy a jugar, no pasa nada.
Pero yo creo que es sling.
Ah, sling.config.
Creo que era sling.config.
Y aquí vamos a poner extends.
Y le decimos que queremos utilizar estándar.
Vamos a ver si esto vuela.
Vamos a crear ya nuestra carpeta de source.
Y aquí voy a meter un archivo que va a ser, primero, el index.html.
Y el index.html va a ser esto por ahora.
Vale.
Vamos a poner un título.
Hackernews con priack y sin webpack.
Parece que está bastante bien.
Empezamos.
Vale.
Eso por aquí.
Y voy a crear otro archivo que sea, pues, a.js.
Y vamos a poner...
Vale.
Perfecto.
Ya me lo ha cogido.
Ya lo tengo aquí.
Ya lo ha tomado.
Ya tengo este sling.config.
Le he dicho que es tienda estándar.
Básicamente esto es que va a utilizar toda la configuración de estándar.
Y al parecer aquí, cuando se le pongo un punto y coma, ya me dice extra semicolon.
Y esto es porque ya tengo el linter configurado.
Qué maravilla lo sencillo que es.
Si a veces, si no os queréis complicar, yo creo que es lo mejor.
Vale.
Pues, mi app.
Por ahora hacemos esto.
Y en el index.html, pues, ya vamos a cargar este script.
Vamos a decir que esto está en app.js.
Y ahí tenemos el lscript.
Perfecto.
Ahora, vamos a instalar servor.
Servor, que lo tenemos por aquí.
Pa, pa, pa.
Servor.
Este es.
Este es el entorno de desarrollo que os decía.
Básicamente lo que hace es servir los archivos estáticos que tengamos.
Ya pone aquí un poco cómo sería con npx.
Yo me prefiero instalar.
Me lo voy a instalar aquí en las dependencias.
Como npm install servor.
Y lo voy a poner aquí.
Y mientras esto está así, vamos a ver, es súper rápido encima.
O sea, es que no ocupa nada esta dependencia.
Ya verás que esto es maravilloso.
Vamos a poner un modo dev.
Y en el modo dev no me acuerdo exactamente de todos los parámetros.
Pero creo, bueno, vamos a copiarlos también.
Servor, esto debe ser la carpeta primero.
Sí, el path para servir.
Ahora puede ser source o total.
Luego el fallback.
Bueno, esto es index.html vale.
El fallback, esto es porque si tenemos una navegación SPA, vayamos a la ruta y vayamos, queremos que siempre vaya al index.html.
Y este es el puerto en el que deberá servir, bueno, 8080, pues tiene sentido.
Vamos a probarlo así con eso, server source, a ver qué.
Y vamos a ver si esto ya funciona.
Y hacemos en pie un run dev.
Y esto nos lo ha dejado en el puerto 8080.
Pues nos copiamos esto.
Vamos al navegador.
Ya está, ahí pone empezamos.
Vamos a ver si quitamos esto.
Otra cosa, guardamos.
Y eso no lo ha pillado.
Vamos a ver.
Mi app.
Igual es que solo hace lo de mirar los cambios en el caso que...
A ver.
Puede que solo lo haga con los archivos JavaScript.
Voy a probarlo ahora.
Si ponemos esto, no cambia.
Voy a abrir las herramientas de desarrollo y voy a cambiar en lugar del app.
Yes, este que pone en my app.
Voy a poner aquí nos...
Pues no, tampoco, tampoco me está haciendo el watch.
Igual es que hay que hacer algo.
Vamos a ver si hay alguna cosa.
File watcher.
Ya no empieza bien.
No me está haciendo esto.
Ah, mira.
Reload y browse.
Claro, reload, causes de browse when the file change.
Bueno, pues eso ya es lo que queremos.
Justamente.
Lo que queremos es que nos haga el reload porque si no, no va a hacer los cambios.
Perfecto.
Vale, pues vamos a quitar esto.
Lo volvemos a ejecutar.
Otra vez.
Intentamos.
Empezamos.
Cambio.
Ahora sí.
Ahora sí.
Esto está mucho mejor.
Muy bien.
Bueno, pues esto lo vamos a dejar vacío porque no queremos que tenga absolutamente nada nuestro HTML.
Lo que queremos en el app junto a JS.
Vamos a asegurarnos que esto recarga.
Vale.
Funciona.
Funciona.
Perfecto.
Vale.
Os habéis quedado muy callados.
No sé si de repente he aburrido a todo el mundo y se ha ido todo el mundo corriendo.
O si es que estáis muy concentrados, más concentrados que yo y estáis ahí, vamos, apuntando o algo.
Bueno, cualquier cosa, me comentáis que tengo un ojo aquí, tengo el chat aquí en el monitor de la izquierda
y le voy echando un vistazo, ¿vale?
Puto amo.
No sé qué es el puto amo.
Uy, no sé si se pueden decir palabrotas.
Espero que no me baneen ahora el canal.
Vale.
Ya tenemos el primer paso.
Bueno, esto es bastante sencillo.
Os dejaré los enlaces luego, ¿vale?
En el comentario del vídeo para que, pues si os interesa cualquiera de estos proyectos,
así que no os preocupéis que lo tendréis todo por ahí.
Vale.
HTM.
HTM.
Uf, es que HTM es raro.
Es cuando la constante hay...
Bueno, HTM, perdón.
El caso, vamos a utilizar HTM.
Sé que al principio es un poco raro HTM y seguramente voy a cometer errores porque estoy demasiado acostumbrado a JSX.
Pero, de verdad, creo que vale la pena.
Así que vamos con calma y no nos preocupemos, ¿vale?
Si cometemos cualquier problema.
Ahora, lo que podría hacer es instalar HTM.
Esa podría ser una.
O podría importarlo porque, como os decía antes, lo que quiero hacerlo es sin webpack, sin ningún tipo de bundleizado, sin Babel ni nada.
Y para ello vamos a utilizar Xmascript Modules en nuestro proyecto.
Así que lo que podríamos hacer es esto, ¿no?
Import y hacer un import directamente de una URL.
Esto funcionaría, lo cual me parece brutal, ¿vale?
Y lo vamos a hacer para que lo veamos porque es que, de verdad, es tan potente esto.
Un problema que, vale, lo he pegado aquí y ya he dicho a ver si funciona.
Esto no funciona.
Y no funciona.
Ya me dice aquí que no podemos utilizar import fuera de un módulo.
Lo que tenemos que hacer en index.html, voy a hacer esto más chiquitito y esto también yo creo que lo podemos, para que salga un poco más grande y salga más, vale.
Lo primero que tenemos que hacer aquí es decirle que este archivo que estamos cargando es un módulo.
Entonces decimos type module y directamente este archivo ya se convierte en un módulo.
Así que si vamos al app.js ya podemos utilizar import y aquí pues voy a poner app, ya funciona correctamente.
Ahora, podemos importar cosas como estamos haciendo aquí y estamos importando HTML y render.
Por ahora voy a ejecutar solo render.
Que render, básicamente, lo que recibe es lo que queremos renderizar y dónde lo queremos renderizar.
Vamos a poner que quiero renderizar hola y que lo quiero renderizar en el document.body.
Ya tenemos aquí el hola.
Sale aquí, ¿eh?
Por fin, hola, hola, hola.
Vale, pues ahí está.
O sea, que ya está funcionando el render porque le decimos lo que queremos renderizar y dónde.
En el document.body.
Ahora, en JSX yo sé que esto debería ser algo así, ¿no?
Debería ser algo así y esto funcionaría de maravilla y tal.
Aquí puedes ver que ya me está diciendo que me acueste que esto no funciona, ¿no?
Que este token no lo entiende y tal.
Lo que podemos hacer es utilizar este HTML, ¿vale?
Que esto en realidad viene del paquete HTML, ¿vale?
Y es que lo que podemos decirle es que este HTML no renderice el JSX.
Le podemos decir HTML.
Utilizamos un template string y le decimos lo que queremos renderizar.
Guardamos los cambios y ahí tenemos un H1.
Tal cual.
O sea, ya está, ya está.
Ya lo hemos terminado.
Bueno, hasta luego.
No, hombre, lo hemos terminado.
Pero que me parece que es bastante potente.
Ya con esto, si miramos aquí, esto es un H1 y ya lo está renderizando perfectamente.
Tal cual.
Así de sencillo.
A mí, esto es una forma que podríamos utilizar utilizando este, pues, desde un package, este módulo y todo esto.
Voy a intentar, que no lo he intentado antes, pero lo voy a intentar porque yo me imagino que lo que podríamos hacer es instalar directamente como dependencia HTML.
Yo creo que esto debería funcionar.
Entonces, lo que vamos a mirar es si esta dependencia que nos ha debido instalar en NodeModules también tiene ese paquete.
Porque así no tiramos de un CDN que no controlamos nosotros y al final esto lo vamos a subir en algún sitio que ya tendrá su propio CDN y me parece que mejor.
Así que, vale, en principio, mini, dist, no sé si alguno tendrá, a ver, este mini, no sé si alguno tendrá, seguro que la documentación aparece.
De, si instalamos HTML directamente, claro, aquí dice HTML, HTML, React, es que además este HTML lo podéis utilizar con React, si queréis.
Aquí tenéis un ejemplo y lo podríais utilizar para dejar de utilizar JSX.
No pone que con el módulo se pueda, podríamos hacer esto, esto sí, que es instalar los dos.
Bueno, pues lo hacemos así, instalamos los dos y copiamos ese snippet que ponía y así pues no tiramos directamente esto.
Es lo que tendríamos que hacer.
Vale, muy bien, vamos a cerrar esto, que no se ve nada.
Cerramos esto, básicamente sería esto, ¿no?
Tiramos de priac y del htm barra priac, ¿vale?
Ahora lo que pasa es que no va a funcionar porque no encuentra el archivo, o sea, nos va a decir esto no existe y tal.
Vale, aquí lo que podríamos hacer es, una de dos, una de dos, a lo mejor para hacerlo más fácil y no ponernos a instalar,
lo que podríamos hacer básicamente es copiarnos este archivo y dejarnos de install, ¿vale?
Por ahora vamos a hacer esto porque si no me voy a liar a instalar cosas y da igual.
Al final podemos hacer esto, htm más priac.js, al final esto ya está solucionado, lo copiamos aquí, ¿vale?
Y ahora aquí lo que vamos a hacer, uy, uy, uy, uy, se ha vuelto loco, es importarlo.
Así tenemos el html y el render y lo cargamos desde nuestro propio proyecto que es html más priac.js.
Y en el render, pues lo que habíamos hecho antes.
Lo que habíamos hecho antes que era renderizar el h1 con el hola, a ver si así funciona bien y ya está.
Y el html lo ejecutábamos aquí.
Vale, esto es un template string y ya está, guardamos los cambios, ya tenemos otra vez el hola.
Bueno, lo vamos a dejar así porque es más sencillo, porque si me pongo a coger el nodo modules tendría que coger el path relativo,
luego hacer un script que me copie el archivo y es un poco lío, así que mejor así.
Vale, ya tenemos hasta aquí, ya lo tenemos en nuestro sincdn externo, lo tenemos en el nuestro, ya hemos empezado.
Ahora lo que podríamos hacer es empezar a crear, pues aquí, un archivo que sea, ¿cómo le podemos llamar a esto?
Hacker News App.js.
Entonces, aquí lo bueno es que cada vez que importemos, podemos importar en todos nuestros archivos, podemos importar las librerías.
Por ejemplo, aquí pues podemos importar html, que siempre va a ser lo que vamos a necesitar.
Y esto lo hacemos desde priack html más priack.
Vale, es un nombre un poco raro con el más, pero bueno, espero que no sea muy complejo.
Vamos a hacer un componente, vamos a hacer un componente, por ahora no le voy a poner, bueno, vamos a poner hacker news app.
Y esto, vamos a hacer que renderice el html con el main, main y aquí la app.
Vale, hasta aquí, bien.
A este hacker news app, vamos a volver a la app y lo vamos a importar.
From hacker news app que hemos creado.
Y ahora, este hacker news app lo vamos a renderizar.
Esto es un poco especial.
¿Cómo lo renderizamos?
Porque, claro, ¿cómo le pasamos aquí que esto es un componente que queremos renderizar?
Vale, pues utilizando el template string, lo que hacemos es un dólar y aquí poner lo que queremos renderizar.
Que básicamente es el hacker news app.
Guardamos los cambios y esto no me está renderizando nada.
Vale, vamos a ver por qué no me está renderizando nada.
Este hacker news app está haciendo un return de la app y vamos a ver aquí en inspector.
No me está renderizando nada.
Ah, esto es un problema que es verdad que es un poco rollo.
Es lo que os decía de estar acostumbrado un poco a JSX.
Y es que, claro, ¿qué está pasando aquí?
Lo primero es que a lo mejor podríamos utilizar directamente esto.
No, no, tenemos que hacerlo con HTML.
Aquí, cuando tenemos un componente...
A ver, a ver, a ver, que ya la he liado de primeras.
No, pues esta sí, está bien.
O sea, este es el render.
Tenemos el app.
A ver si...
Ahí voy a cerrar esta que siempre paso por aquí en medio.
Y es un poco raro.
Ajá.
Vale.
Estamos importando bien, ¿no?
Vamos a ver que aquí tengamos el hacker news app.
Ah, buah.
Esto, vale, vale, ya he encontrado el error.
Esto no tiene nada que ver con HTML.
Esto es con los módulos.
Este error es muy tricky.
Y es muy tricky porque, además, no dice nada de nada el navegador.
Y, claro, no dice nada por culpa de Servor.
Esto es súper interesante por si os pasa en algún momento.
El tema.
Si vemos el network es que tenemos un 301 que nos dice que ha sido movido permanentemente.
Claro, como le hemos dicho al entorno de desarrollo que si no encuentra ningún path,
bueno, lo hace por defecto.
Si no encuentra un path, se va al index.html.
¿Qué pasa?
Que no está encontrando el hacker news app.
Esto es un problema de que estamos acostumbrados a webpack que, por arte de magia,
nos pone las extensiones.
Pero ya está bien que nos vayamos acostumbrando a que es estas extensiones.
Eso es una magia negra que hace webpack o cualquier empaquetador.
Porque, en realidad, tendríamos que poner .js.
Con esto, y ahora, si guardamos los cambios, sí que nos va a encontrar el fichero.
Ahora sí que, al menos, tenemos este fichero aquí, porque si no, no nos lo encuentra.
Y, no, todavía, claro.
Y esto, lo mismo para todos los que hagamos.
Ay, ay, ay.
Es que esto hay que estar bastante atento.
Esto es un problema porque, además, el editor, cuando pones el path relativo,
tampoco te pone la extensión porque también está acostumbrado.
Esto es un problema que no vamos a tener que trabajar un montón en acostumbrarnos a poner el .js.
Porque, si no, no encuentra el archivo.
Y, en este caso, en específico, pues, está este error que, claro,
él hace un redirect directamente al index.html.
Lo podemos ver aquí.
Si le quito el .js, aquí, ¿veis?
Ha intentado hacer un fetch de html más priac.
Ha hecho un 301.
Y esto, lo que ha devuelto, es el index.html.
¿Vale?
Así que lo que faltaba era el .js.
Ahora, ahora sí.
Ahora todo tiene sentido.
Está bien.
Bueno, así me estoy acostumbrando yo también a empezar a trabajar de que no se me olvide el .js.
Perfecto.
Vale.
Ahora que ya tenemos esto.
Ahora sí que se está renderizando la app.
Lo tenemos así.
Voy a ver si podemos utilizar un hook rápidamente.
Vamos a poner un useState aquí.
Ponemos aquí cualquier cosa.
State, setState.
Y esto, useState.
No.
Vamos a ver si podemos utilizar estados.
Vamos a poner por aquí, por ahora.
Perfecto.
Por ahora no estamos utilizando nada.
Solo lo único que quiero es ver si podemos utilizar el setState.
¿Vale?
Podemos utilizar el useState.
Podemos utilizar hooks sin ningún problema.
Así que volvemos aquí y ya podemos ver cómo podemos hacer un fetching de datos de todo esto.
Así que vamos a añadir un useEffect.
UseEffect.
Y es que esto es una maravilla.
Poder utilizar hooks y todo.
Pues ya me dirás.
En 3K con hooks.
Vale.
Pues el useEffect lo vamos a hacer aquí.
Este efecto, este hook, va a hacer que ejecute esta función cada vez que se renderiza nuestro componente.
Le vamos a poner aquí las dependencias y le vamos a poner un array vacío para decirle que este efecto solo se tiene que ejecutar cuando se monte el componente.
Y aquí podríamos hacer directamente el fetch.
Hacemos aquí el fetch y lo pasamos a JSON porque esto es un JSON.
Y aquí ya tenemos los datos que la verdad ni siquiera he mirado exactamente cómo están los datos.
Voy a poner un momento console.lock.
A ver.
Aquí ya tengo los datos.
Hemos hecho el fetch.
Vale.
Tenemos id.
Title points.
Bla, bla, bla.
Vale.
Esto luego será interesante.
Me lo voy a poner por aquí.
A ver.
Id.
Title.
Points.
User.
Time ago.
Ah, mira.
Ya tengo un time ago.
Y URL y domain.
Esto me parece interesante.
Luego los tocamos.
Vale.
Set.
Hacker.
Bueno.
Set data.
Ya está bien.
Y data.
Set data.
Data.
Y aquí vamos a tener el response y le vamos a decir un set data.
Y dentro guardamos el response.
Voy a guardar por algún lado.
Que si no estaré mirando todo el rato la consola.
A ver.
Guardamos aquí.
Pongo aquí el...
Perfecto.
Vale.
State is not defined.
Porque he puesto aquí el data.
Bueno.
Esto no sé qué va a renderizar.
Ya veo que no necesita nada.
Set data.
Set data.
Y...
Vamos a poner un punto length.
Lens aquí.
A ver qué.
Si tenemos los...
Vale.
30.
Tenemos 30 resultados.
O sea que está funcionando bien.
Vale.
Bueno.
Hasta aquí vamos.
Por ahora tenemos un número 30 en la pantalla.
No está mal.
Vale.
Vamos a crear componentes.
Voy a crear uno que sea...
Article.
O...
Sí.
Article.
Vamos a ponerle Article.
Y aquí pues un poco lo mismo.
Vamos a tener todo este import.
Lo ponemos aquí.
Por ahora yo creo que no hará falta nada de estado.
Y hacemos un export default function article.
Y esto...
Ah.
Voy a quitar esto.
No puedo tirar esto más para la derecha.
Esto me iría bien.
Pero no puedo.
Vale.
Entonces.
Por ahora lo mismo.
Vamos a poner aquí un anchor con esto así.
Por ahora.
Y dentro le vamos a pasar...
Aquí vendrían las props.
¿Por qué no renderiza si se utilizan arrow functions?
Me pregunta Sergio Domínguez.
¿Por qué no renderiza si se utilizan arrow functions?
Se puede utilizar arrow functions.
Por ejemplo, utilizamos aquí una arrow function.
En lugar de...
Y así vemos el ejemplo.
Vemos que esto es una constante.
Que se llame article.
Y aquí tenemos una arrow function.
Y hacemos un export default de article.
¿Vale?
Así vemos si funciona con arrow functions.
Entonces.
A article le van a llegar props.
Y entre estas props.
Pues vamos a tener aquí...
Por ahora voy a poner props.title.
Buenas tardes.
Noches a todos.
Hola, Iván López Hernández.
Has venido en el momento justo.
En el que he dejado de cagarla.
Y empiezan a funcionar las cosas.
Vale.
Entonces.
Aquí vamos a importar nuestro componente article.
Article from punto article.
Que no se me olvide.
Punto JS.
¿Vale?
Y la extensión.
Que esto es un Xmascript Modules.
Y son un poquito más pijos.
Vale.
Pues aquí en article.
Y lo que vamos a hacer.
A ver si me sale de primeras.
Esto.
Vale.
Voy a guardar aquí primero los cambios.
Tenemos las props.
Title.
Va.
A ver si me sale de primeras.
¿Cómo hacer aquí un renderizado de una lista con htm?
¿Vale?
Vamos a ver.
Vamos a ver.
Tenemos data.
Data punto map.
Entonces en cada uno tenemos un article.
Data hemos dicho que era un array.
Entonces en cada elemento del array era uno de esos artículos donde
teníamos el id, title, points, bla, bla, bla.
Y ahora aquí tenemos que hacer un return del html.
¿Vale?
Que si alguien se lía con lo html, le podría llamar jsx, por ejemplo.
Le podría cambiar aquí el nombre.
Y utilizarlo como jsx, por si le cuesta.
Pero, bueno, html.
Html.
Y aquí vamos a renderizar el article.
¿Vale?
Importante.
Empezamos el template string y decimos lo que queremos renderizar
dentro.
Y como es un componente que se autocierra, ¿vale?
Que no se nos olvide cerrar el tag.
Y le pasamos.
Es súper interesante.
Esto está muy bien.
Vale.
Podríamos pasar.
Vamos a hacerlo primero así.
Le pasamos title y aquí le pasamos el valor de article.title.
Esto debería funcionar.
Uy, me lo ha gustado.
Me lo ha gustado porque algo he hecho aquí.
Vamos a ver.
Envalid regular expression.
Es que lo mejor es que todo esto, como está hecho a base de regular expressions.
Ah, mira.
Es que se me había olvidado aquí.
Pero, ¿cómo no me dice nadie en el chat?
Pero, por favor, ayuda.
No me dejéis aquí solo.
Mirad las cosas que hago.
Se me había olvidado cerrar.
Se me había olvidado cerrar aquí la llave.
Vale.
Ahora entiendo.
Entiendo por qué.
¿De dónde venía el error?
Si ahora guardo esto.
Vale.
Estoy bien.
Vale.
Le pasamos una prop que le vamos a llamar title, que el valor va a ser article.title.
¡Guau!
Ya está.
¡Guau, guau, guau!
Vale.
Ya tenemos aquí, ahora mismo, claro, esto es un montón de anchors, que es lo que está renderizando el article.
Que ahora mismo está renderizando un montón de articles.
Bueno, de anchors, perdón.
Es que article es lo que quería poner y estaba pensando en article.
Un poquito para que haya algo de separación, que supongo que harán eso.
Es un display block.
Perfecto.
Ya tenemos, pues, todos los links.
Hasta aquí, ¿todo bien?
Bueno, primero, ha funcionado el error function sin ningún tipo de problema.
Si alguien tiene curiosidad de cómo, por qué, he hecho esto de guardarlo en una constante, pues, hay algo más increíble todavía.
Podríais hacer un export default directamente de la función y ya está.
¡Pum!
Y funcionaría perfectamente.
No hace falta crear una const para el error function.
Dice export default, ¡pum!
Toda la error function y se lo come con patatas.
Y, obviamente, esto podría ir más allá y quitáis esto aquí y esto de aquí y, ¡uy!
Y lo dejáis aquí así y esto funcionaría.
Un poquito menos legible.
Pero, bueno, está igual de interesante.
De hecho, igual, mira, así queda bonito.
Podríamos poner esto así.
Esta así.
Porque ya sabéis que un error function, cuando solo tiene un parámetro, los paréntesis son opcionales.
Luego, el error function, lo primero que, si lo dejas en una sola línea, eso es lo que devuelve.
O sea, lo que le estaríamos diciendo que devuelva al HTML este.
Y la verdad es que aquí no queda mal del todo.
Bueno, no sé.
Si queréis lo dejo...
Vamos a ver.
¿Cómo queréis que lo deje?
Lo dejo con el const, con el export default o directamente así, todo en una línea.
Nunca default.
Muy bien.
Eso es interesante.
Yo, la verdad, se enfada Dan.
Oliver Careaga dice que nunca default.
Vale.
Ya que estamos con esto de nunca default, os voy a comentar por qué habla de que nunca default.
Nunca default porque, claro, ahora, al hacerte un export default, haces aquí un export default,
aquí haces un import y le hemos llamado article, que como le podíamos llamar, pues, pepito.
Y, claro, pepito.
Podríamos utilizarlo como pepito.
Cuando haces un export default lo puedes llamar como tú quieras.
Ahora, la verdad es que en este caso, pues, era un ejemplo bastante rápido y tampoco quería hacer nada muy raro.
Pero, para hacerlo rápidamente sin que tenga export default, pues, podéis hacer el export const del article y hacer esto.
Hacéis esto, export const article igual a la arrow function y de esta forma lo que está haciendo es un export nombrado.
Y aquí, pues, ya podríamos ir en lugar de pepito.
Si ahora guardamos y aquí guardamos también, pues, esto peta, ¿no?
Y nos da un error porque nos dice, oye, no tiene esto un export default.
Entonces, tenemos que llamarle obligatoriamente article.
Cuando es nombrado te obliga a llamarle article.
Y está bien, ¿no?
Porque es como un contrato en el que te obliga a mantenerle el nombre.
Entonces, hay un, no es un problema, pero tiene una cosita.
A mí me gusta, normalmente me gusta más así, con un export const article porque te deja el nombre.
Pero sí que si eres muy pejiguero tiene un tema.
Y el tema es que esto no lo puede minificar, no se puede minificar porque es un nombre y tiene que ser ese nombre.
Tú cuando haces un export default y aquí pones article, esto cuando se minifica, pues, a lo mejor te lo deja en la constante A.
Y se llama A y donde ponga article en lugar de article, pues, será, bueno, esto es a gustos, como veáis.
Por ahora ya hemos visto que va export default y también va el export const, que van los dos.
Así que todos contentos.
Bueno, ¿por dónde estábamos?
Bueno, creo que le voy a poner un poco de estilo, algo rápido.
No soy ningún artista, ya os aviso, ¿vale?
Esto es link, rel, stylesheet, href, esto está en style.css y lo guardamos.
Vamos a ver, vamos a poner en el body, font, family y esto es un system.
Bueno.
Voy a hacer los estilos un poco a cañón, pero si, no sé, si os animáis a decirme colores y cosas, pues, me los comentáis y tal.
Claro, pensad que esto, que salga un estilo más o menos así de la nada, va a ser un poco complicado, ¿vale?
Estoy haciendo un reset, así un poco a, el font size ya está a 16, perfecto.
Vamos a ponerle un background con algún colorcillo, no sé, si os, bueno, por ahora voy a poner un 8,
tengo aquí un color, bueno, es como un gris, perfecto.
Y el linehaze, que pille un poquito de respiración, perfecto.
Y entonces, cada anchor, mira, como esto no lo he hecho antes, ahora se hubiera simplificado un poco.
Que tenga un margen de 16 y le quitamos este, o le podríamos quitar, bueno, se lo vamos a quitar por ahora.
Ya tenemos un poquito los estilos, ¿qué podríamos hacer?
Bueno, vamos a enseñar un poquito más de datos, porque esto si no queda un poquito raro.
A ver, rojo, box sizing, muy bien, Jordi Muñoz, ahí ha estado, ha estado rápido.
Sí, esto es interesante, el box sizing, box sizing, box sizing, border box.
Tengo un vídeo muy bueno que os explica por qué es interesante utilizar esto.
Ahora, ¿cómo era esto? Era, siempre se me olvida, box sizing, border box.
Siempre tengo que mirar el artículo este de Paul Irish, este, que tiene, que es maravilloso.
Ahora le pongo sombra. Eso, era HTML. Yo también, es que soy la leche.
Vale, lo que hace este snippet de código, básicamente, es que a todos los elementos de tu página le pone el border box.
Entonces, está bien porque está bastante optimizado, ya que solo se lo pone a un elemento y al resto lo que hace es heredar del HTML.
Así, todos los elementos que tendrás en los estilos tendrá el border box.
Y es una forma bastante elegante de hacerlo.
¿Vale? Así que esa es la forma correcta y no lo que he hecho yo aquí.
¿Vale? Muy bien, gracias Jordi Muñoz.
¡Ey! ¿Qué se ha colado ahí? Se ha colado una cosa extraña.
¿Eso dónde sale?
A ver, no será que...
No, esto es del...
Esto es del server, no sé.
A ver, se ha quedado. Esto está enseñándolo ahí como si fuese HTML y no, no sé.
No sé, ahí se le ha ido un poco.
Vamos a ver.
Vamos a volver aquí y vamos a quitarlo.
A ver.
Sí, a lo mejor es que en el CSS he colado alguna cosilla, ¿no?
¡Pim!
Y no era esto.
Lo que tenía que...
Está el CSS...
¡Ay! Esto.
Yo creo que es esto, ¿no?
Sí, vale.
Sí, sí, no.
Es que se estaba alucinando seguramente.
Vale.
Vamos a enseñar más cosas, ¿vale?
Ah, mira, me lo decían por aquí.
Joan León. Muchas gracias.
Enlaces, Joan León decía, ¿te sobra?
Exacto, eso es lo que he borrado.
Del server node, 10 minutos, 10 mini puntos para Jordi.
Muy bien.
ID también me ha avisado.
Es verdad, me estáis avisando, me estáis avisando.
Muy bien, muchas gracias.
Los enlaces no están permitidos, es verdad.
Es una cosa de YouTube.
Pero si me vais poniendo colores, pues intento...
O si me vais poniendo estilos o lo que sea,
yo los voy a intentar...
Los voy intentando meter, ¿vale?
Mientras, pues vamos a poner un poco...
Aquí un poquito de orden.
Y os enseño una cosa que me parece súper interesante.
Esto no es lo que quiero enseñar.
Esto.
Vale.
Aquí.
Teníamos nuestro componente article, ¿vale?
Que le estamos pasando una prop llamada title.
Y es la que estamos ahora mismo solo estamos pintando.
No es que estamos pintando muchas cosas.
Tenemos unas cuantas como id, title, points, bla, bla, bla.
Poco a poco.
El tema de title es que, bueno, queremos pasarleslas todas.
Las queremos pasar todas.
Ahora podría estar aquí, pues coger el time ago.
Voy a hacerlo así en cada línea una.
¿Vale?
Imaginemos que quiero pasarle el time ago.
Digo time ago.
Y esto es article.time ago.
Sí, es con...
Vale.
Time ago.
Vamos a ponerlo así.
Podría hacer esto.
Esto es un poco de cuñazo.
Bueno, porque tendría que hacerlo con todos y tal.
Pues htm tiene una cosa que es una maravilla.
Que puedes hacerte un bien, un spread de todas las props que le quieres pasar.
Igual que en JSX.
Así que podríamos hacer algo así, si no me equivoco.
Vamos a ver.
No, no es así exactamente.
Vale.
Es que creo que es así.
Se pondrían los tres puntos fuera.
Y dentro se le pondría el objeto que le queremos pasar.
Así que si guardamos los cambios, puedes ver que el title se sigue mostrando.
Y aquí en props, si ahora...
Claro, ahora, porque he hecho esto, que lo he hecho...
¿Eh?
¿Quién me manda a mí?
Quitarle todo esto.
Pero si pongo aquí un console.log de las props, vamos a ver que le llegan todas.
¡Guau!
Es que me parece alucinante.
Aquí tenemos ya todas las props.
Ya se han pasado todas las props.
Y aquí, lo único que hemos tenido que hacer es esto.
Hemos dicho, vale, pásame todo este objeto al componente article.
Nada.
Sin JSX, nada.
Así que ahora que hemos visto que esto queda un poquito más sencillo, pues vamos a hacerlo
aquí en una línea.
Creo que si hacemos esto así para que se lea mejor, debería funcionar.
Sí, funciona perfectamente.
Así que, maravilloso.
A ver qué dice aquí.
Un poco de padding al body.
Sí, ahora voy.
Sobre el estirado.
¿Se puede hacer servir style components?
¿Cómo sería para el HTM?
La verdad es que no tengo ni idea, pero me lo apunto para hacer otro vídeo más adelante.
Que me parece interesante.
Vale.
Entonces, ahora que ya tenemos esto, aquí ya tenemos todo lo que queríamos mostrar.
O sea, que ya tenemos aquí todo el componente que tenía que tener, pues, la lista de artículos
y todo esto.
Vamos a hacer una cosa, además.
Aquí vamos a poner un estado de loading, set loading, que al principio el estado sea false.
Y lo que os quiero enseñar es que, además, se puede hacer un renderizado condicional con
HTM.
No sé si voy a ser capaz, pero lo vamos a intentar.
Vale.
Tenemos aquí el estado de loading, que es false.
Lo que podemos hacer es que, antes de hacer el fetch, pasamos el estado a true.
Y cuando tengamos los datos, aquí, lo que hacemos es pasarlo a false.
Ya habrá dejado de actualizarse.
Entonces, lo que podríamos hacer es, ajá, loading es false y entonces vamos a renderizar todos los artículos.
Y si loading es true, o aquí directamente ya podríamos hacer esto, lo que podemos hacer es, pues, vamos a pintar aquí una cosa tal que, como estoy acostumbrado al, a ver, spinner o viento, ¿cómo es esto?
Hay uno que es una espiral, espiral, este.
Mira, vamos a poner este.
Vale.
Y nos acordamos, HTML, que es lo único que podemos renderizar, ¿eh?
No podemos utilizar JSX.
¿Qué sería?
Vamos.
Vale.
Pues, bueno, claro, esto a lo mejor es que va muy rápido.
Vamos a intentar a ver si se ve algo.
Es solo para asegurarme que no he hecho ninguna tontería.
A ver, slow, slow, slow, slow suficiente.
Uh, ¿y tan slow?
Tan, tan, tan.
A ver si se ve algo.
¿Se verá algo?
No sé si se ha visto.
No sé si se ha visto.
False, loading a true.
El loading.
Entonces renderizamos esto.
Claro.
Es que también vamos a hacer una cosa con esto.
Vamos a renderizarlo.
A ver cómo se ve así de a saco.
Porque tengo dudas.
Que esto esté...
Le voy a quitar ya el slow3b.
Y voy a ver lo que me estáis contando mientras.
Vale.
Sí que sale, pero sale muy chiquitito.
Eh, está muy bien, pero la página se ve como 1997.
Eh, set loading y set data deberían ser dependencias del use effect.
Eh, bueno, eso sería un poco raro porque no hace falta que esto sea una dependencia porque ya...
O sea, sería una dependencia si fuese algo como, por ejemplo, lo que le viene de props y tal.
Pero los set loading y set data no deberían cambiar porque ya son hooks que deberían estar memorizados.
O sea, o sea, que no esperemos que se vuelva a renderizar ese aspecto.
Alguien me pedía un poco de espacio en el body con razón.
Un poco de margen.
Vale.
Ya está.
Para que les estaba poniendo...
Bueno, lo que quería hacer también era esto.
De nuevo, es absolute.
Esto es bastante horrible, pero bueno, quiero que avancemos.
120 píxeles.
Ahí a saco.
Vale.
Margin.
Top 50.
Más o menos.
Eh, te, te, te.
Position absolute.
A este le...
Nombre del plugin para los iconos.
Esto no es ningún plugin.
Esto es control, comando, control, comando, espacio.
Pum.
Y ya sale.
Eso lo tiene el Mac.
El que tengo, que es una aplicación, es Rocket.
Que puedes poner dos puntos y entonces te busca.
Pero no lo utilizo mucho, la verdad.
Vale.
Pues eso.
Bueno, vamos a poner esto.
Y lo que podríamos hacer, ya por poner algo muy loco y muy rápido,
sería hacer un rotating, ¿no?
A ver si soy capaz.
Rotating.
Desde transformamos el rotate de cero grados.
Y vamos al rotate de cero grados.
Esto es muy creepy para hacer el loading, ¿eh?
Pero bueno.
¿Dónde?
¿Dónde tengo esto?
Vale.
Aquí.
Animation.
Rotating.
Dos ss.
Linear.
Finito.
Vale.
¡Uh!
Dios.
Vale.
Font style normal y ya está.
Vale.
Es solo para que veamos por ahí como que está cargando, ¿vale?
Y ahora empezaremos a darle aquí a las props también.
Por ejemplo, en las props nos está llegando todo esto.
Una de ellas es la URL.
Así que aquí vamos a poner el title, el time ago,
que vamos a renombrar.
Title, time ago.
Y vamos a pintar todas estas cosas que nos llegan.
La URL.
¿Qué más nos llega interesante?
Es un tipo title.
Bueno, por ahora parece que esto sería suficiente.
Así que lo que podemos hacer aquí es ponerle la URL.
La URL.
A ver, a ver, que no la leí aquí.
Y en el alt, para ser un poco más accesibles,
le vamos a poner el title también.
Y en el time ago, el time ago este,
se lo vamos a poner en, pues aquí debajo, ¿no?
Vamos a ponerle un reloj.
Watch.
Y vamos a poner, habría que ponerlo dentro.
H3, para el título, ¿vale?
H3.
Y vamos a enseñar el tiempo.
Le ponemos un span.
Bueno, un span.
Venga.
Un span.
Cerramos aquí el span.
Y aquí vamos a poner el time ago.
Time ago.
Perfecto.
Bueno, ya va pillando un poquito más de...
Esto lo vamos a dejar así.
El title, la URL.
Vale.
Algo me he cargado.
Vale, porque esto ya no tiene sentido.
Vamos a poner rest of props aquí,
para dejarlo en el console.log,
para ir viendo lo que venía.
Se ha quedado este ahí girando, vamos,
como si nada.
Vale.
Este, le habíamos puesto que saliese siempre.
Vamos a ver qué me contáis.
¿Qué me contáis?
Nombre del plugin, pavos y conos.
Vale, lo he dicho.
¿Cómo se llama la extensión que te muestra los errores en real time?
La extensión que me muestra los errores en real time,
básicamente, es el linter.
Es este...
Tengo el slint.
El slint.
Y lo único que he tenido que hacer para configurarlo,
aparte de instalarlo,
es ponerle esto.
Slint config con el extends.
Y ya está.
Fácil.
Vale.
Al menos ya estamos enseñando más cositas.
Creo que el domain también es interesante que lo enseñemos.
Así que vamos a poner aquí también...
Va a ser un...
Section.
Vamos a dejar aquí una section.
Vamos a poner aquí el domain.
Vamos a pasar esto a strong.
Porque voy a estirarlo directamente con elementos HTML.
Sé que esto no está bien,
pero es lo que vamos a hacer.
Y esto...
Aquí creo que venía el domain.
¿Vale?
Entonces así podremos ver de dónde viene el...
El anuncio.
Vale.
Ahí está.
Bueno.
Vamos con los estilos.
Venga.
Al final la he desanimado.
A ponerme ni un colorcillo ni nada.
O si hubiera estado bien, hombre.
He puesto que esto sea H3.
Vale.
Pues vamos con el H3.
H3, color, pu, pu, pu.
Un font size 18 píxeles.
Vamos a hacer que esto sea como una negrita.
95.
Y le quitamos ese margen que tiene.
Vale.
Se ha quedado aquí un article.
Se ha quedado como...
Este article de dónde sale.
Que pone siempre article, article.
Esto, todo lo he liado aquí.
¿De dónde sale esto?
¿De dónde sale esto?
Justo antes del anchor.
Si está aquí.
Pero esto es el article, pero es nuestro article.
Bueno, igual también sobra ahora.
Pero...
A ver.
¿De dónde sale ese article?
Ah, ahora me pintará.
Está bien, está bien.
Como que me está pintando el primer elemento.
Está...
¿Y ahora dónde sale?
¿De dónde sale esa...?
Esto que me está pintando...
Es como que no me está pintando bien esto.
Algo me está haciendo aquí raro.
Que esto que he puesto aquí está...
No está pintando el...
No está pintando el componente.
Bueno, esta sección sobra.
Alá, por si es por el section que salía después.
Hay que ver.
Bueno.
Raro, ¿no?
Bueno, puede ser, porque claro, si no lo encuentra...
Bueno, sí, ya se va viendo un pelín, un pelín mejor.
Un poquito mejor.
Ah, sí, muchas gracias.
Yo...
Mira el chat.
Vale.
Yo a León.
ID.
Sí, faltaba el close del section.
Muchas gracias.
Muchas gracias por avisar.
Efectivamente, faltaba el close.
Vale.
Bien, entonces, vamos a poner aquí en el over que vamos a poner un borde de radius de 4, un padding, y que al hacer over, pues no sé, que sea un pelín perceptible, pero tampoco algo muy bestia.
Transition, real background.es... ¿Podemos utilizar fragmentos? Muy buena pregunta. La verdad es que no lo sé.
No lo sé, pero lo vamos a probar ahora.
Vamos a ver. A ver si se puede utilizar fragmentos.
Vale.
Tenemos esto aquí.
Se ha quedado... Bueno, pero al menos tenemos el loading.
No se puede utilizar fragmentos, pero...
Igual no hace falta.
Vamos a verlo.
Si yo pongo aquí un strong whatever...
No hace falta.
No hace falta utilizar fragmentos en esto, porque al final, como es un HTML...
Claro, no está utilizando como tal el create element de React.
Entonces, esto al final es todo el HTML y lo está metiendo ahí.
Así que no hace falta utilizar ni siquiera fragments.
Puedes tener dos hijos, dos elementos que estén al mismo nivel, como en este caso, ¿no?
Que tendríamos, por un lado, el anchor y el strong, y va a funcionar perfectamente.
Así que parece bastante interesante.
Una cosa que puede ser interesante es el hecho de pensar, bueno, esto está muy bien, pero, claro, a lo mejor cuando le doy a un click, o sea, cómo podría hacer el onclick, ¿no?
O todos los eventos.
Eso no va a funcionar.
Entonces, sí que va a funcionar.
Y eso es lo interesante.
Vamos a poner un método que sea handleFab.
Va a ser muy rápido.
O sea, que puede ser que localStorage, setItem...
No sé.
Por ahora vamos a poner article y aquí le tenemos que pasar...
Bueno, antes de liarme con localStorage, es que al final, si no, no puedo enseñar todo lo que os quiero enseñar.
Voy a poner aquí Fab, solo.
Lo interesante de esto es que...
No es muy agradable esto, pero vamos a ponerlo aquí, entonces.
Vamos a poner que esto sea un botón con un corazón.
¿Y qué color?
Rojo.
Bueno, no se ve muy rojo ese color.
Y aquí ponemos un onclick, ¿vale?
Ahora, ¿qué hacemos para que nos ejecute lo que queremos que ejecute?
Pues le pasamos otra vez la función.
En principio, con esto debería ser suficiente.
Así que ahora en la consola le damos y ¡pum!
Ha reventado.
No ha sido tan fácil como esto, ¿no?
Vamos a ver.
Esto me imagino que a lo mejor es...
Porque en la documentación lo hemos visto antes.
Que se pueden pasar...
A ver, un clic.
Aquí está.
O sea, que sí que es esta.
O sea, lo que a lo mejor no se puede pasar directamente la referencia.
Como estaba haciendo aquí.
No podemos pasar directamente un handlefab, sino que a lo mejor tenemos que hacer que sea una función y decirle que handlefab, pues, ejecuta handlefab.
¿Qué es esto?
¿Qué es esto?
It's not a function.
Handelfab is not a function.
Vamos a ver.
Cómo...
Si esto es así, no parece que tengamos mucha historia que nos falte.
Ta, ta, ta...
A ver.
Handelfab.
Es que lo grupo estoy bien, ¿no?
Handelfab.
Handelfab.
It's not a function.
Vale.
¿Qué es lo que le pasa?
¿Qué es lo que no le gusta?
Vaya, pues esto debería funcionar tal cual y haber quedado súper bien, pero no me funciona.
Vamos a ver por qué.
Porque sobran...
Claro, es que...
Muy bien, Adrián.
Madre mía.
Es que ves cómo estamos...
Menos mal que os tengo aquí, ¿eh?
Exacto.
Estos brackets sobran.
Porque estos brackets...
Es que estos brackets es la costumbre de utilizar JSX.
Muy bien.
Muchas gracias a la gente del chat.
No hace falta usar this.
Es lo que faltan.
Lo que sobraba son los brackets.
Ya está.
Ya tenemos ahí el fab.
Gracias, Adrián.
Gracias.
Juan Carlos, gracias.
Por estar tan atentos.
Muchas gracias.
Pues, vale.
Ya lo tenemos ahí.
Entonces, bueno, obviamente podríamos hacer que el botón no se vea tan...
Podríamos hacer que el background sea transparent y el borde que no tenga.
Y darle al fab.
Fab.
Vale.
Y al final sí que esto sería interesante meterlo mejor en un article para que quede más separado.
Article.
Vale.
Bien.
A mí me funcionó si los primeros paréntesis.
Sí, sí, sí.
He sido yo que la he liado.
Que he puesto ahí cosas que no hacían falta.
Vale.
Entonces, bueno, sí.
Tiene ahí un efecto horrible porque esto tendría que venir aquí.
Y esto al final un poquito más suave, ¿no?
Bueno, pues, a ver.
Dentro de lo que cabe, pues, aparte de que tenemos ahí ese fab que no funciona.
Cursor, pointer.
Tenemos nuestros estilitos estos aquí bastante bien.
No sé si nos faltaría un poco darle aquí a este section que tenemos en el article un poquito de separación.
En el section, en el section, en el section, en el section, dentro habíamos puesto, ah, no, al final no había puesto aquí nada.
Pues, solo el strong y el span.
Vamos a poner que no sea de este color.
El strong, el span, vamos a ponerlo un poquito más gris.
Y el span, un poquito más, claro.
Y ahora lo vamos a separar un poco.
Que todo esto es separarlo al cholor, ¿eh?
O sea, no, esto tendría que tener unos estilos en condiciones que os animo un montón a que lo hagáis y os animáis.
Vale, show our side go.
Pues, tampoco hace falta que el strong sea tan strong.
Vamos a ponerle 500.
Y esto, al final, lo que estaría bien también es que tuviese, no sé si podríamos ponerle aquí una cosa así.
Sí, pero no le va a gustar.
Bueno, se lo dejamos así.
Bueno, al final, pues, ya tenemos un poco aquí los estilos.
Sé que no son los estilos más bonitos del planeta, ¿vale?
Pero creo que está bien y que queda interesante.
Luego aquí el target.
Le podemos poner el blank.
¡Ah!
¡Ay!
Eso se ha vuelto loco.
Que se me ha vuelto una comilla.
Bueno, y aquí ahora si le damos a uno, pues, vamos a la página.
No sé si tenemos los votos, que creo que es interesante.
Rest of props.
A ver si tenemos los votos.
Comments count, time count, points.
Vale, tenemos los points.
Pues, los points también los podemos poner strong.
Tenemos aquí una estrellita y le ponemos los puntos.
¿Vale?
¿Vale?
Bueno, not bad.
¿Vale?
Así que ya tenemos, por ejemplo, esto.
Al final, lo interesante de esto es que si miramos aquí,
voy a hacer esto un poco más grande.
Fijaos un poco lo que es nuestra aplicación.
Y esto es sin Gzip, ¿vale?
Esto es sin comprimir de ningún tipo.
Y hemos tenido, pues, acceso a utilizar hooks, hacer todo lo que queríamos hacer.
No es el mejor diseño del mundo, pero, bueno, no está mal.
Entonces, tenemos el más grande es el de HTM más PRIAC, pero, claro, esto es sin comprimir, sin decir, 12K.
Luego los estilos y luego nuestros ficheros, que además es que están tal cual, con el import y tal.
No hemos utilizado nada de webpack, absolutamente nada.
Estamos renderizando nuestra aplicación ahí directamente, sin ningún tipo de problema.
Y funcionando con un estado, haciendo los eventos, el handle de los eventos, con un non-click, le decimos la constante y ya lo tenemos aquí.
Que hubiera sido interesante, pues, ya hacer un poquito más de lógica.
No sé si tenéis dudas, no sé si os ha quedado bastante claro, si os ha gustado, si la habéis visto interesante.
A ver, voy a abrir vuestro, voy a abriros en el, porque no sé, no, es que ahora he cerrado esto y no sé si estáis comentando algo.
Así que, mientras voy a abrir, os voy a ir comentando un poco.
Esto, la verdad es que no, no lo recomiendo, obviamente, para una aplicación que sea muy grande.
Vale, entonces, mira, me dice Diego Bernal, ¿por qué no usaste JSX?
Vale, no utilicé JSX porque la idea era ver una aplicación solo con webpack y sin ningún tipo de bundelizado, ni ninguna conversión de código.
O sea, no estamos utilizando Babel, no estamos utilizando Webpack, ni Parcel, ni nada.
Si queremos JSX, vamos a necesitar tener Babel.
No pasa nada, no estoy en contra absolutamente, pero me parece que esto nos da un poco la idea hacia dónde va el futuro del desarrollo web.
Esto es a lo que tenemos que aspirar todos, esto es hacia dónde vamos, a tener herramientas que rápidamente podamos hacer algo que sea productivo,
que funcione, que además tenga un impacto en performance muy pequeño, o sea, que el rendimiento de nuestras webs sea muy grande.
De hecho, aquí hay un montón de mejoras incluso que podríamos hacer, como hacer preloads para que se cargasen antes,
porque esto es algo que pasa, que si nos fijamos a la hora de cargar los módulos,
claro, el problema es, voy a ponerlo en el waterfall, que primero, el primero que carga es el index HTML,
luego los estilos, luego la app y la app, como lo que carga es un módulo, ¿vale?
Si volvemos aquí a la app, tiene el import de PRIAC y luego de Hacker News, que es nuestro componente.
Entonces, la app carga HTML PRIAC, luego Hacker News y Hacker News Article, y entonces aquí puedes ver,
uy, no lo puedes ver porque esto se ha quedado un poco así, ¿vale?
Pero lo que puedes ver es que hay una cascada, ¿verdad?
Hay como una cascada en la que cada elemento, cada recurso carga el siguiente, porque claro, tiene el import,
entonces es cuando lo descubre.
Para arreglar esto, lo que podríamos hacer es utilizar un preload de los módulos,
y le podríamos decir que haga un preload del type, ah, no, esto es preload module,
creo que es preload module, ahora se me ha olvidado, preload y modules.
Se puede hacer un preload del módulo, lo que pasa es que no funciona esto del preload,
no se pueden hacer así el preload de los módulos.
Para hacer un preload de los módulos, tienes que hacer module preload, es un poquito más especial.
Y luego sí, le puedes indicar lo que quieres precargar, por ejemplo, el app lo podríamos precargar,
.js, y a partir de aquí, le decimos además también que esto es un script,
y a partir de aquí podríamos hacerlos todos.
Entonces, nos fijamos un poco aquí cómo era la cascada, y al final sí decimos, bueno, tenemos el app.js,
luego también vamos a cargar el htm más priac, solo un .js, no volvamos a cometer ese error.
Luego tenemos el hacker news app, que, hacker news app, hacker news app, vale,
y luego hacemos un preload también del article, article.js, guardamos los cambios, y ahora fíjate,
o sea, fíjate, no hay, hay un poquito, pero mucho menos, ¿no?
Porque ya lo que se está viendo aquí es que está haciendo un preload de cada uno de los que necesita.
Entonces, lo que hemos hecho es que sean paralelo, que se los descargue ya de una,
que los precargue, porque los va a necesitar sí o sí.
Le estamos haciendo como un consejo a nuestro navegador de decirle, oye, estos scripts los vamos a necesitar.
Vamos a ver un poco otra vez la diferencia para que veas un poco cómo está pasando aquí,
como en cascada, y si ponemos aquí los preloads, pues ya hay menos cascada.
Es como que lo hacen más comprimido, lo hacen más rápido, ¿vale?
Si se puede ver que lo que son los javascripts, lo vamos a hacer aquí, son casi en paralelo.
Ni siquiera tarda tanto.
Entonces, esto da una ventaja bastante interesante.
¿Qué más?
Se invita muy bien para generar aplicaciones gadget pequeñas como las que necesitan los fronts de los bots.
Sí, para hacer gadgets y además que sean en navegadores modernos,
porque es verdad que esto no funciona, por ejemplo, en Internet Explorer 11,
pues es bastante interesante.
Me ha gustado, muy interesante, dice Mauri, muchas gracias.
Súper interesante, Adrián, Andrés Lucas, Joan León, muchas gracias a todos.
Vale, dice Pachi Vadilla.
Entonces, tema test, Redux, Axios, no recomendable con Priak y sin Webpack.
Es que lo de, yo es que Redux ni siquiera, no sé.
Podéis utilizar el contexto también en esta solución que hemos visto sin ningún tipo de problema.
Y podemos hacer test y podríamos hacer themes y podríamos utilizar variables, o sea, variables de estilos.
Pero es verdad que, bueno, al final es todo lo complicado que queramos hacer o que necesitemos que sea nuestro entorno.
Si estamos hablando de una aplicación que tiene que llegar a millones de personas y que tiene que tener soporte a Internet Explorer 11 y tal,
pues obviamente a lo mejor no es la mejor solución.
Si es una aplicación pequeña que sabemos que eso lo va a utilizar gente que tiene el Chrome de la última versión,
pues me parece que es una buena solución para ir súper rápido.
En una hora hemos montado esto con la aplicación y todo y creo que está bastante bien.
Más preguntas por aquí.
Estoy aprendiendo un montón gracias a ti, primo.
Ken Zox, muchas gracias.
Muy buen live.
Moiz, muchas gracias.
Genial, Midu.
Genial, genial.
¿Recomiendas alguna librería de componentes para Priak?
Es verdad, mira, esto es un tema interesante.
Es verdad que Priak, por ejemplo, sé que están trabajando en una librería como la de Material Design.
Pero, claro, lo bueno que tiene React es que tiene un soporte, o tiene una comunidad mucho más grande y tiene herramientas, pues, mucho, mucho, mucho más grandes.
Voy a poneros mi pantalla, mi persona en grande para que me veáis mejor, porque ahora estoy ahí.
Pero, básicamente, es verdad que no hay tantas soluciones como hay en React, pero, bueno, se puede hacer alguna.
Sí que hay, ¿eh?
De hecho, estoy seguro que podemos encontrar la de InDesign no hay, por ejemplo.
Pero es que muchas veces el problema es que esas librerías, además, son muy grandes.
Entonces, es verdad que te permiten prototipar muy rápido, pero el problema es que también el coste que tienen es demasiado heavy.
Y a veces hay que tener cuidado porque hay algunas que para tener el tema del theme te obliga ahí a acoplarte a cosas que a lo mejor no te quieres acoplar.
Así que, a ver, yo para una aplicación de producción con millones de usuarios seguiría recomendando React.
Sé que es más lento, pero obviamente tiene más soporte y muchas más cosas.
Pero, aún así, creo que es algo a considerar React.
¿Qué más? ¿Qué más?
Pues, nada, muchas gracias. Genial.
David Pick, sale por aquí.
Muchas gracias, crack.
Muchas gracias a todos.
Espero que os haya gustado el live.
Lo hemos dejado aquí con nuestro Hacker News.
Voy a...
¿Qué voy a hacer con esto?
Lo voy a subir a un repositorio por si alguien le quiere dar una vuelta.
¿Queréis que haga un segundo live dándole más caña a esto?
¿O esto ya no da más de sí y queréis ver otra cosa?
No sé, contadme un poco por el chat a ver lo que queráis ver.
Y así, pues, como estas semanas estamos en casa, pues, igual me animo a hacer otro live.
Si no estás suscrito al canal y lo estás viendo, pues, ya sabes, te suscribes, que seguiré haciendo más contenido de este.
Compártelo, que me ayuda un montón que lo vea más gente.
Dale like, sobre todo, deja comentarios, me ha encantado, que esas cosas siempre le suben el ánimo a uno.
A mí me encanta hacer cosas de frontend y sobre todo del frontend que está por venir,
para que todo el mundo sepa de lo que nos tenemos que preparar, ¿no?
Que esto es súper interesante y que no me parece que sea dentro de muchísimos años que trabajemos así
o que al menos simplifiquemos todas nuestras herramientas, ¿vale?
Así que, ¿qué más?
Gracias por el live, nada, gracias a ti.
Sí, por favor, para la segunda parte.
Jorge dice otra cosa, no le ha gustado mucho el PRIAC.
Bueno, pues, a ver otra cosa.
Uno de p5.js.
La verdad, la verdad es que no soy muy crack, ¿eh?
De p5.js.
Tengo por ahí, no sé, os lo voy a vender un poco para que lo veáis.
Pero tengo por aquí simulator, mi duda, dice lo de p5.js porque hice un repositorio en el que hice un spread simulator del coronavirus
que está basado básicamente en un artículo del Washington Post que muestra un poco cómo se aplana la curva cuando la gente se queda en casa, ¿no?
Este sería el ejemplo de la gente sin quedarse en casa, ¿no?
Y se ve, pues, la curva como bastante pronunciada y cómo ha habido 113 personas enfermas en ese momento.
Y si la gente se queda en casa, tanta gente no se mueve, aunque si hay alguna que se mueve, pues, porque tiene que sacar el perro o porque tiene que ir a hacer la compra o porque lo que sea.
Pero al menos, pues, la curva se aplana, no hay menos gente que se mueve y tal.
Y todo esto que veis aquí, pues, está hecho con p5.js.
Y no soy ningún experto, lo tengo que reconocer, no soy ningún experto de p5.js, pero, bueno, me sirvió para hacer esta animación rápidamente,
esta simulación de las bolitas y, bueno, aprendí lo justo y necesario para poderlo hacer.
Si queréis, os dejaré el enlace en los comentarios de abajo del vídeo, por si le queréis echar un vistazo.
Hay gente que ha hecho pull requests y todo y se lo agradezco un montón.
Pues, otros cuantos de Priak y después más sobre Svelte.
Este fin de semana va a haber otro vídeo de Svelte para renderizar listas de elementos.
Si os gustan los de Svelte, dadle like, compartidlos por ahí, dadme feedback, porque yo no sé si es a mí el único que le interesa a lo de Svelte o qué.
Microfrontends, que bueno, gracias por tu tiempo, ha estado genial, aprovecha estos días y dale caña con mis directos.
Pues, sí, dadme ideas, dadme ideas, pedidme lo que queráis y así, pues, tendré más ideas.
Y, pues, lo dejamos aquí, que seguro que tenéis que cenar y hacer cosas productivas.
Muchísimas gracias a todas y a todos por haberos pasado por aquí, acompañarme un ratito.
Ha sido un poquito nuevo, he preparado nada, creo que ha salido bastante guay, sobre todo gracias a vuestra ayuda,
que habéis visto los errores y las cositas que no había hecho bien.
Bueno, no ha quedado mal, sé que los estilos no son aquello, pero bueno, creo que para las pocas líneas de código y lo que hemos hecho, ha estado bastante bien.
Muchas gracias, de verdad, me ha gustado muchísimo compartir esto con todos vosotros.
Nos vemos en el siguiente vídeo, en el siguiente directo, nos vemos por Twitter, nos vemos por Facebook, nos vemos por la calle,
bueno, por la calle no creo que nos lo veamos, pero ya está bien, que nos tenemos que quedar en casa y portarnos bien.
Cuidado mucho y tened muchísimo cuidado y seguid disfrutando del frontend.
Hasta luego a todos, muchas gracias, adiós Judith, adiós Aarón, adiós Jordi, adiós Jan León, Kenzox, José J, Maury,
muchas gracias a todos. Muchas gracias.
Gracias, Adia, ha estado genial, tú también has estado genial por ayudarme.
Muchas gracias a todos.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.
Chao.