porque ha venido y todo esto, ¿vale?
Remix es un Full Stack Web Framework.
Sería algo más parecido a Ruby on Rails que a Next.js, ¿vale?
Pero yo creo que sí que viene a competir con Next.js.
Pero para los que conozcáis Ruby on Rails,
y si no lo conocéis, no os preocupéis,
básicamente será un Full Stack Web Framework.
O sea, es un framework que te viene a solucionar
tanto la parte del backend como la parte del frontend.
Vas a poder crear rutas de API,
pero también vas a poder crear las rutas en las vistas
y vas a poder hacer la UI y todo esto.
Así que esto sería un poco lo que tiene.
Ahora, la idea que tiene, y aquí lo pone ya,
es que está basado mucho en los fundamentos de la web.
Uy, dice, uy, el monolito.
Efectivamente, esto sería Remix, iría más a por un monolito.
Que no tiene por qué ser algo malo.
De hecho, con Next.js puedes crear un monolito.
Y os voy a decir una cosa muy importante sobre los monolitos.
Los monolitos no son malos por sí, ¿vale?
Lo que pasa es que los monolitos que ahora sufrimos
vienen de arquitecturas o decisiones de lenguaje de programación
o bibliotecas anteriores, que a lo mejor no estaban tan bien pensadas.
Pero un monolito no tiene por qué ser malo por sí, ¿vale?
Importante.
Que hay mucha gente que habla de los monolitos de forma despectiva.
Y hablamos de forma despectiva normalmente por culpa,
más que nada, por los monolitos que nos encontramos
en algunas empresas de hace 5, 10, 15 años.
Pero un monolito no tiene por qué ser algo malo.
De hecho, ya os digo, con Next.js, con Remix, podéis montar monolitos.
Y el tema es que podéis montar monolitos que estén bien.
Así que no tengáis esta idea, ¿vale?
De decir monolito o malo.
Porque no sería algo monolito.
Un monolito básicamente sería una aplicación
o una arquitectura que lo tienes todo.
Ahí tienes todo el frontend, tienes todo el backend,
tienes temas incluso de base de datos.
Todo en el mismo sitio.
Entonces no lo estarías separando.
Que sería la diferencia entre hacer microservicios y cosas así.
Bueno, pues la verdad, no sé si habéis podido ver la web,
pero es muy bonita.
Bueno, aquí tenéis esto, lo que os decía, ¿no?
Que web fundamental.
Ya veréis que esto es bastante importante.
Y aquí lo que tendríamos, la página web es muy bonita, ¿eh?
La idea, ya veis, lo que remarca mucho mejor experiencia del usuario.
Bueno, vamos a ver.
Remix has a cheat code.
Nester Roots.
Me encanta esto que es para los fricazos como yo,
que nos gustan los videojuegos.
Las Nester Roots básicamente sería meter una ruta
dentro de otra ruta, dentro de otra ruta, dentro de otra ruta.
¿Qué pasa?
Hay que tener en cuenta que Remix, este framework,
está creado por los que crearon React Router.
Entonces vais a ver esto de Nester Roots.
Muchos de las rutas tienen mucha importancia en Remix
y saben de lo que hablan porque justamente tienen muchísima experiencia.
Y la idea es que con las Nester Roots,
pues lo que puedes hacer es muchos imports dinámicos.
Solo importar cuando necesitas este JavaScript.
¿Vale?
Vamos a seguir bajando.
¿Qué más?
Puedes eliminar, claro, casi cualquier estado de carga.
¿Vale?
Casi todas las web apps se hacen fetch dentro de los componentes.
Esto es muy interesante.
¿Vale?
Vamos a ver que Remix lo que va a intentar es quitar estos fetch
en el useEffect.
¿Vale?
Lo que quiere es como eliminar que hagamos justamente dentro
de nuestros componentes el fetch,
sino que va a querer que lo hagamos fuera.
Porque considera que lo que haces es un waterfall.
Un waterfall sería que tienes un montón de peticiones críticas
y entonces vas, hasta que no tenga esto,
no puedo hacer lo siguiente.
Hasta que no tenga esto, no puedo hacer lo siguiente.
Y esto lo que hace es que la carga parezca mucho más lenta.
¿Vale?
Entonces, nada, cosas en paralelo, gracias al server y tal.
Bueno, aquí ponen un ejemplo que obviamente habría que ver
a cuál sería este y tal.
This is fake, keep scrolling.
Bueno, vale.
Pues vamos scrolleando.
¿Veis?
Aquí según esto, aquí ya estaría cargado
y aquí haríamos un poco esto.
Esto obviamente pone with a remix,
pero con next.js a lo mejor esto sería una página,
una página estática y ya estaría cargado.
Pero bueno, menos de cargar.
Me gusta muchísimo.
Es que os quiero enseñar la web
porque es que la web de verdad es muy bonita.
Muy, muy, muy bonita.
Muy bonita.
Mira, aquí tendríamos un ejemplo de un formulario.
Pone mucho énfasis en el tema del formulario.
Luego veremos por qué.
Y es porque cambian totalmente el hecho
de cómo se gestiona el tema del formulario,
lo cual me parece muy interesante.
Mira, aquí tendríamos la acción que haría el formulario.
Esto funciona un poco así.
Tú tienes páginas
y en las páginas tú vas exportando funciones
y estas funciones automágicamente
son las que se utilizaría.
Por ejemplo, este formulario
utilizaría este método de acción.
Podrías hacer request.formdata
y esto se ejecuta.
Todo esto que ves aquí,
este método se ejecuta en el servidor,
lo cual es muy, muy interesante.
Y ya ves, como puedes ver,
no estás guardando aquí nada en el estado.
¿Sabes?
Que lo típico en React,
si tienes un formulario es guardar cosas en el estado,
pues mira, te quedaría así de simple.
Bueno, esto lo vamos a ver,
a ver también cómo funciona,
porque yo le tengo muchísima, muchísima curiosidad.
Y aquí además tendrías el tema de las transiciones,
que luego veremos esto,
para saber si está haciendo el submit,
pues bueno, hago esto, si no esto.
Esto lo vamos a ver también, ¿vale?
Lo vamos a ver también
porque vamos a intentar hacer el getstart.
Qué grande este detallazo
de cuando te peta Windows, ¿vale?
Se han copiado esto
de cuando te peta Windows.
Qué grande.
Vale, root error boundaries.
Bueno, es que tiene un montón de cositas.
Esto sería básicamente para saber
cuando peta una ruta,
pues a ver qué es lo que hace
y todo esto.
¿Ves?
Pues peta solo esta ruta.
Pues tienes un error boundary
donde solo esta ruta,
que es la que peta,
porque esto es una subruta.
Lo que puedes ver aquí es una subruta.
Si esto peta por X motivo,
en lugar de petarte toda la aplicación,
pues lo que puedes tener son error boundaries
solo de ese trozo de la aplicación.
La verdad es que tiene ideas muy interesantes, ¿ves?
Claro, al final si te arrevienta todo ese trozo,
bueno, aún así este trozo sí que lo tendrías.
Bueno, pues nada,
yo creo que ya podemos empezar con el get started.
Más o menos le hemos dado un repasito.
El get started, por lo que he visto,
un poquito por encima,
es de crear un blog.
Yo creo que lo podríamos hacer.
Háblanos sobre error boundaries.
Bueno, error boundaries, al final,
esto es un concepto que ya existe en React.
Los error boundaries,
tú al final lo que haces es envolver
una parte de tu aplicación
de forma que si esa parte de tu aplicación peta,
el error lo gestiona el error boundary, ¿vale?
Y entonces el error boundary sirve como
una pantalla de protección
respecto al resto de la aplicación.
Solo que aquí lo han llevado a otro nivel
porque al tener los nested roots,
pues cómo lo hacen está muy bien.
Porque claro,
esos error boundaries que estamos viendo
funcionan tanto en servidor como en cliente.
Y por lo tanto,
tu aplicación podría seguir funcionando,
pero a lo mejor un trocito habría reventado
y ya está,
no te tienes que preocupar.
Así que vamos a darle.
Vamos a darle al kickstart.
We are going to be short.
Vale.
Básicamente el kickstart
es como crear un blog
y encima actualizar el blog.
Así que nada,
vamos a verlo.
Para crear un proyecto.
Bueno,
yo voy a ir un poco,
no me lo voy a leer todo
porque me pararé en lo que considero interesante.
Pero bueno,
más o menos yo os iré comentando,
¿vale?
Primero para crear el proyecto.
Ah, por cierto,
que aunque no lo ponen en ningún sitio,
solo para que lo sepáis,
creo,
estoy bastante convencido
que Remix utiliza por debajo Sbuild,
¿vale?
Sbuild.
Si no sabéis qué es Sbuild,
he hablado bastantes veces de Sbuild.
De hecho,
Sbuild,
Sbuild es el que utiliza también Vite.
Sbuild es un empaquetador de aplicaciones web
que es muy rápido,
pero muy rápido.
Es una brutalidad de lo rápido que es.
De hecho,
hace mucho tiempo,
de hecho,
más de un año yo creo,
que hablé de esto en un vídeo.
Mira,
el 22 de noviembre del 2020,
o sea,
hace un año.
El asesino de Webpack,
Sbuild.
Si quieres saber más detalles de Sbuild,
por qué funciona tan rápido,
por qué no sé qué,
hicimos este directo en YouTube,
donde os explico todo,
hicimos una pequeña aplicación
y la verdad es que fue súper interesante.
y ya os avisé aquí en este directo
que os dije,
creo que Sbuild va a ser muy interesante
para justamente otras herramientas.
¿Vale?
O sea,
era muy difícil que Sbuild como empaquetador
lo hiciese todo,
pero sí que parecía interesante
para construir cosas encima.
Pues mirad,
al final se ha construido Vite
y también se ha construido Remix.
O sea,
que os hice un spoiler hace un año
de las cosas que iban a pasar.
Así que,
y se va a preguntar,
¿se usaba Webpack o Sbuild?
Bueno,
yo te diría que uses Vite.
Vite es un envuelve,
Vite es del creador de Vue.js
y al final lo que es Vite
es como,
es más parecido a Webpack
porque ya te viene
con un montón de configuración preparada.
Sbuild es muy de bajo nivel,
entonces yo te recomendaría más Vite,
que,
bueno,
se llama Vite,
no es Vite,
es Vite,
¿vale?
Vite.
Así que te recomendaría Vite
en lugar de Sbuild,
¿vale?
Y Sbuild versus SWC.
Es que SWC es más parecido a Babel,
no es lo mismo a Alejandroid.
Es como SWC sería la alternativa a Babel
y Sbuild sería más la alternativa a Rollup,
para que nos hagamos un poco la idea.
No,
ni siquiera la de Webpack,
¿vale?
Bueno,
pues venga,
vamos a crear el proyectito,
¿vale?
Vale,
pues para empezar,
Create Remix con la última versión.
Venga,
sí,
procedemos.
Espero que no me pete el stream
mientras instalan las dependencias,
que ya sabemos que las dependencias con MPM
no le gusta mucho,
pero si peta el stream,
no te vayas muy lejos,
que en nada,
en 30 segundos se arregla,
¿vale?
¡Hostia!
¡Ojo!
¡Ojo!
Los colorines.
Eso está muy chulo,
¿eh?
Se han puesto y todo a cambiar.
Vale,
bienvenido a Remix.
Venga,
vamos a hacer nuestro proyecto y tal.
Bueno,
pues vamos a hacer el MyRemix.
Le vamos a dejar con el nombre este,
MyRemixApp.
¿Dónde quieres deployar,
desplegar?
Chul Remix,
si no estás seguro.
Podría ser un RemixApp Server,
Express Server,
Architect,
Flyon,
Netlify y Vercel.
Fíjate que Vercel.
¡Oh!
Cloudflare Workers.
¡Qué interesante!
Una cosa muy interesante y muy importante
y que creo que es lo que realmente marca muchas diferencias de Remix
es que al final hay que tratar que Remix es como si fuese una función
y por lo tanto la puedes ejecutar,
fíjate,
en todos estos sitios.
Lo puedes desplegar,
tu aplicación de Remix,
en todos estos sitios.
Y fíjate donde te dice,
en una Lambda directamente.
O sea,
es como si fuese una función.
Por ahora vamos a utilizar RemixApp Server
porque no sabemos dónde lo vamos a desplegar,
así que lo vamos a dejar así.
¿Vale?
Vamos a poner TypeScript
porque al final es bastante fácil,
me imagino,
y ya está.
Y si al final no rayamos,
pues nada,
lo pasamos a JavaScript
y me imagino que en el Ketting Start
también lo hacen en TypeScript
y si lo hacen así,
pues podremos seguirlo mejor.
¿Vale?
Vale,
voy a hacer la instalación.
Si peta la instalación,
ahora vengo.
Porque hay veces que se pone tonto.
No,
TypeScript,
que no pasa nada,
que yo os explico.
Si no sabéis TypeScript,
no te preocupes
porque yo os voy a contar todas las cosas.
¿Sabéis qué pasa?
Que Sbuild también compila TypeScript
y lo hace súper rápido.
Así que no os preocupéis.
Si no entendéis TypeScript,
no te preocupes
que yo os voy a explicar
y os lo voy a comentar y ya está.
O sea,
no os tenéis que preocupar
si no lo sabéis
porque lo vais a entender igual.
Yo os voy a decir,
mira,
seguro que hay cosas
que a mí no me salen
porque tampoco utilizo TypeScript
en mi día a día.
Así que no os preocupéis
y así aprendemos todos juntos.
¿Vale?
Así que venga,
vamos a hacer cd myremixapp
y vamos a abrir este proyecto
a ver qué tal.
Venga,
perfecto.
Pues ya tenemos ya
nuestro proyecto de remix.
Tenemos una carpeta app
que ya tiene unas rutas
con demos incluso.
Bueno,
me ha puesto aquí
un montón de cosas.
Esto me está spoileando ya.
Bueno,
podemos ver que la ruta
dentro de app
este root
sería bastante parecido
a cómo se utiliza
en Next.js
el tema de las rutas
también
que tienes como
aquí tú
o sea,
como que utiliza
el sistema de archivos
para definir
tus rutas
y aquí tendríamos
una ruta
que tendría
un segmento dinámico.
¿Vale?
Aquí tendríamos
el segmento dinámico
con la idea.
Esto sí que es diferente
totalmente
a como lo hace
Next.js
porque lo hace
con corchetes
o bueno,
sí,
no me acuerdo
cómo se le llama eso
pero ya sabéis
son lo de los arrays
vaya
con esto,
¿vale?
Con esto se haría
y en el caso de Remix
lo hace de otra forma
pero bueno,
más o menos
es bastante similar.
Me imagino que otras diferencias
habrá
pero esto es lo importante
que aquí tenemos
un montón de rutas
y aquí las podemos ver.
¿Qué más tenemos aquí?
Bueno,
tenemos dos archivos.
Uno,
bueno,
aparte de los estilos
que los estilos
CSS puro
un aviso para navegadores
para navegantes,
¿vale?
Que es una cosa que es
hay gente que ya le ha puesto
la cruz un poco a Remix
y es por culpa de esto.
¿Cuál?
¿Qué pasa?
Como utiliza Sbuild
por detrás
para no toquetear mucho
el compilador
Remix
no tiene un soporte
muy bestia
con temas de CSS
en JS
y cosas así,
¿vale?
¿Por qué?
Porque mucho de esos
necesita justamente
tocar el compilador
y cosas así.
Así que
sí que se puede utilizar
por ejemplo
Style Components
porque lo puedes hacer
en Runtime.
Todos los que sean CSS
en JS
en Runtime
los vas a poder utilizar
pero los que sean
que tengas que tocar
la configuración de Webpack
o de Babel
y cosas así
esos no te van a funcionar
muy bien, ¿vale?
Por ejemplo,
Sass
pues Sass
lo podrías utilizar
pero no estaría integrado
en la configuración
de Remix
lo podemos mirar
en la documentación
porque ya me extrañaría
a mí que
a ver, Sass
pero yo creo
que no se podría utilizar
así por así, ¿vale?
Es una pena
pero es justamente
lo que mucha gente
ya se está quejando
¿no?
De que, ostras
¿qué es lo que deberías hacer?
Deberías compilar
previamente
estos assets
para poder utilizarlos
después, ¿vale?
Tailwind
lo puedes utilizar
claro
Tailwind lo puedes utilizar
pero para optimizarlo bien
no va a estar
no está
incluido
dentro de Remix
que te haga la compilación
y tal
tú puedes utilizar
Tailwind
importar Tailwind
y ya está
pero
el tema de la optimización
que te hace
pues no es como
algunos sitios
que tú puedes
cuando haces el bundleizado
el empaquetamiento
de tu aplicación
pues ya te lo optimiza
bueno, en este caso
no te lo va a hacer
¿vale?
para que lo tengáis en cuenta
por eso
aquí vemos solo
CSS
y ya está
Next
Entry Client
bueno
el client
fácil
en este caso
es interesante
que ya te pone
fíjate
que pone React DOM
Hydrate
te hidrata directamente
esto quiere decir
que siempre se va a renderizar
en el servidor
y aquí lo que hace
es importar el Remix
Remix Browser
lo renderiza
y lo pone en Document
directamente
aquí ya saco
la verdad es que es un poco raro
que teniendo en cuenta
que es así
no sé para qué
no sé
creo que lo podrían haber hecho
de otra forma
el hecho de
ocultar incluso
lo de React DOM
¿sabes?
y a lo mejor poner
algo así
no sé
render
o Hydrate
no sé
hacerlo así
y directamente
yo que sé
incluso quitar esto
porque sea así
no sé
me ha llamado la atención
que la hayan dejado
pero entiendo
que algo tienen que dejar
por si pones providers
y cosas así
este sería
el punto de entrada
en la parte del cliente
y este
sería el punto de entrada
en la parte del servidor
ya podemos ver aquí
un poquito de
de TypeScript
porque aquí no hemos visto nada
pero aquí sí
que estaría importando
los tipos de
Entry Context
desde el paquete de Remix
es muy parecido
todo esto a JavaScript
solo que aquí
en el Handle Request
pues ¿qué le llegaría
a esta función?
pues la Request
la respuesta
el status code
de la respuesta
los headers
y el contexto
de Remix
al final lo que hace aquí
es un render to string
esto es un método
que es de React DOM
¿vale?
pero de la parte del servidor
de hecho lo tenemos aquí importado
y lo que está haciendo es
utilizar el contexto
que tiene un Remix Context
le pasa a la URL
y esto lo que te renderiza
es el markup
que tiene que renderizar
en el servidor
al final hace un response headers
que esto tiene que ser HTML
y ya está
devuelve la respuesta
y punto pelota
y aquí tendríamos
pues nada
los tipos aquí a la derecha
esto es lo poquito
de TypeScript que tiene
este sería el punto de entrada
del cliente
del servidor
¿vale?
hemos visto el del cliente
el del servidor
y aquí tendríamos finalmente
el root
el root
sería como
la aplicación
que se va a renderizar
tanto en servidor
como en cliente
¿vale?
como donde entra todo
esto tiene cositas
de Ria Router
por ejemplo
el tema del outlet
el outlet
lo que significa
es donde se va
a renderizar
es como dejar
un hueco
donde se va a renderizar
lo que maché
de la ruta
¿vale?
así que esto sería
como el hueco
donde se va a renderizar
pues si vamos
a la ruta
de barra blog
pues esto renderizaría
el blog
¿vale?
por ejemplo
esto sería lo importante
que con que sepas esto
ya está
pero tendrías el documento
el layout
y aquí esto
aquí esto es interesante
porque tú esto
lo puedes cambiar
como tú quieras
¿vale?
pero vamos a ver
un poquito de arriba
abajo
porque es que esto
tiene un montón
de cositas
tiene por ejemplo
link
links
live reload
meta
outlet
que esto lo acabo
de explicar
scripts
scroll restoration
use catch
¿vale?
todo esto de remix
y esto que trae
los tipos de links
function
como veis
aquí está importando
ya los estilos
global y dark style
y para importar
los links
tiene que exportar
una variable
que es links
donde tienes que pasarle
justamente
un array
de todos los links
que vas a importar
en este caso
los css
esto es un poco raro
¿no?
porque normalmente
lo hacemos de otras formas
o sea
normalmente hacemos un import
hacemos este
este import
¿no?
por ejemplo
en next.js
o muchos proyectos
de webpack
y directamente
ya está disponible
pero es que
¿qué es lo que está pasando aquí?
bueno
lo que está intentando
en remix
es como utilizar más
lo de la plataforma
¿sabes?
entonces
lo que están haciendo
es como que seas tú
el que tengas que indicarle
cómo tienes que cargar
y qué tiene que cargar
y esto además
lo utiliza
porque cuando tú cambias
y te vas de esta página
esto lo quita
¿vale?
y entonces
esto es lo que te va a evitar
que no pares de cargar css
que a lo mejor no necesitas
cuando vas a una página
que no tienes estos imposts
los elimina
y de esta forma
ese css
que habías cargado
desaparece
esto te va a evitar
un montón de problemas
con temas de colisiones
y cosas así
mira aquí tenemos el ejemplo
del error boundary
esta sería la función
que envuelve
a esta parte
de la aplicación
para decir
bueno si hay un error
voy a renderizar esto
¿vale?
y esto sería el catch
justamente
para renderizar
lo que nos dé la gana
en el caso
de que falle
¿no?
podemos decirle
bueno si ha sido este fallo
este sea el mensaje
si es un 404
este mensaje
como puedes ver
una cosa que
ya hay gente
que ya he visto
que no le gusta
hay un montón de magia
¿vale?
hay un montón de magia
hay que saberse
un montón de convenciones
¿ves aquí que pone
conventions?
conventions
tiene muchas convenciones
los frameworks
es normal
que tengan convenciones
¿vale?
suele pasar
pero veis que tiene
justamente aquí en la API
hay un montón
de convenciones
y ya te dice aquí
muchas de las APIs
de Remix
no son importadas
desde el paquete Remix
sino que son convenciones
convenciones que tienes
que saber
por ejemplo
¿cuál va a ser
el directorio de la app?
esto pasa lo mismo
con NextDS
¿cómo son las rutas?
pues siempre están
en pages
donde son convenciones
justamente para
simplificar esto
¿vale?
bueno pues aparte
de estas convenciones
también tenemos
filenames conventions
justamente
la ruta de los filenames
y aquí teníamos
los entry files
y también el tema
de exportar cosas
¿vale?
por ejemplo
el export default
bueno pues el export default
va a hacer tal
y esto aquí podéis ver
que esto lo exporta
esto lo exporta
y esto el export default
sería el componente
que tiene que renderizar
pero un export function
llamado error boundary
pues esto va a ser
el error boundary
el catch boundary
bueno pues esto
y todo lo vamos a poder
ir viendo aquí
¿vale?
catch boundary
error boundary
el handle
hay un montón
pero bueno
es al final
acostumbrarse a las convenciones
la idea de esto
justamente es que
estas convenciones
nos van a facilitar
luego la vida
cuando ya te las sepas
bueno
no modules
nada que decir
sobre esto
no modules
bueno aquí esto
el remit logo
public
no tiene nada
veis que no tiene
ni un archivo
index.html
y aquí ya tenemos
el package.json
con todas las dependencias
que no ha instalado
y ya está
perfecto
la configuración
que nos ha creado
por defecto
con el app directory
le podéis cambiar
el app directory
si queréis
lo vamos a dejar
todo como está
browser
build directory
donde deja la build
public path
bla bla bla
aquí el servidor
donde va a iniciarse
el puerto
muy bien
pues ahora que le hemos
hecho un vistazo
lo que vamos a ir
es vamos a volver aquí
al creating project
y vamos a empezar
con el
con el
to first root
aquí
ah bueno
espérate
vamos a iniciarlo
vamos a ver
como es
como es este tema
a ver que tiene
ah vale
que ya está en uso
perdón
ya está en uso
vale
pero fíjate
lo rápido que es
ha sido súper rápido
para
bundleizar todo esto
vale pues aquí tenemos
nuestro
nuestro primer proyectillo
como puedes ver
te sirve también
de demo
aquí tenemos demos
de acciones
demos de
nester roots
aquí a cambio
joder el amarillo este
casi me pega un guantazo
en la boca
esquema para
todo amarillo
pam
el tema
aquí podríamos ver
todo el tema
de nester roots
vale
está bastante
bueno 404
pum
not found
pero este es un ejemplo
aquí lo que están haciendo
es cargar un css
y cuando vuelves aquí
están cargando otro css
esto es para demostrarte
seguramente
como puedes cargar un css
y cuando quitas
esa ruta
elimina el css
de antes
eso es bastante interesante
bueno lo que vamos a hacer
si os parece
vamos a crear
el primer
vamos a ir aquí
y vamos a crear
nuestra primera
una ruta
vale
cualquier ruta
ya nos iría bien
vamos a ver
donde estaría este
remix
docs
vale
este remix
root
esto sería el layout
y el layout
está en todas las páginas
¿por qué?
porque la página aquí
mira
aquí
el componente
que es esta
voy a quitarlo
catch boundary
este también
este es el componente
que estamos renderizando
de hecho aquí
pues yo podría poner aquí
un h1
hola mundo
vale
vamos a poner aquí
el h1
voy a guardar los cambios
y fíjate
lo tengo aquí
vale
y si yo voy cambiando
de página
bueno en este caso no
porque no es una página interna
demos indisapp
vale
pues aquí puedes ver
el hola mundo
vale
¿qué es lo que pasa?
este componente app
digamos que es el que
se renderiza
en todos los sitios
claro
lo que está haciendo aquí
con este layout
es justamente
pues renderizar el logo
este lo que
la navegación
y todo esto
y el contenido
sería realmente
pues lo que
ves aquí
vale
dependiendo de la ruta
lo que cambiaría
solo sería esto
de esta forma
ya tienes un layout
en todas tus páginas
esto seguro
que lo has podido ver
en real router
y todo este tipo
de cosas
vale
así que
aquí he puesto
un hola mundo
pues nada
me lo pone ahí
y se ven todas las páginas
así que
midu
vale
y ahí lo tenemos
es súper rápido
o sea
no está nada mal
lo rápido que es
y ahí lo tendríamos
midu
pues estaría
en todas las páginas
le podemos dejar
el layout
lo voy a
le voy a poner
unas cuantas cosas
porque es un poco
rollo
así que voy a poner aquí
midu demo
vamos a quitar el remix logo
este
este que no lo vamos a usar
para nada
que es un montón de
líneas de código
vale
ya tenemos aquí
el midu demo
vale
aquí tenemos home
remix docs
github
pues todo esto
también nos lo vamos a cargar
al menos estas
las vamos a quitar
y vamos a poner
una nueva
que sea esta de post
fíjate que aquí
se está utilizando
el link
este link
es exactamente igual
que el de real router
vale
si ya sabes real router
pues este sería el link
que vamos a utilizar
y le decimos
donde tiene que ir
pues le decimos
venga
pues vamos a ir
barra post
y aquí lo cerramos también
vale
ahora si volvemos aquí
pues esto ya ha cambiado
obviamente
este sería como la home
podremos ir a la ruta
de la home
y también cambiarla
así que vamos a la reta
a la index
vale
roots
iríamos a index
y aquí podríamos ver
ves
todos los resources
todas las demos
todo esto
todas estas cosas
que estás viendo
no te preocupes
porque la iremos viendo
pero lo interesante
aquí estaría aquí
welcome to remix
where stock
that you are here
eso es todo esto
como puedes ver
pues todo esto
lo podemos eliminar
de hecho
vamos a eliminarlo
vamos a
de hecho lo voy a comentar
para que no aparezca más
vamos a comentarlo
el main
hostia que raro
ah vale
es que es aquí
esto
vamos a ponerlo más arriba
y vamos a comentarlo todo
hasta el div
pam
vale
pum
desapareció
así ya queda mucho más limpio
y nos podemos enfocar
en nuestras cositas
así que
vamos a crear
nuestra primera ruta
yo he puesto aquí
este enlace
de post
que va a barra post
pero
pam
404 not found
fíjate que este error
del 404 not found
esto es una cosa
que también podemos cambiar
esto
si vamos al root
y buscamos el error 404
en el catch boundary
lo que está haciendo
es que el status code
del 404
tiene este mensaje
de hecho
podríamos poner aquí
voy
gritar
ponemos
nada que ver aquí
vale
ves
y ya lo hemos cambiado
esto está súper bien
porque realmente
el control que tienes
de los errores
es
súper sencillo
sabes
o sea
tú tienes este export function
pones el catch boundary
y aquí
básicamente
ya puedes controlar
justamente
como quieres que sea
el 401
el 404
esto
la verdad que
está genial
en el error boundary
además
también podrías llegar
a cambiar todavía más cosas
pero bueno
en este caso
con esto ya tendríamos suficiente
y podrías poner aquí
nada que ver
y puedes hacer
lo que te dé la gana
igual aquí
el h1 este
este not found
no sé qué
esto lo podemos poner aquí
y así
vale
lo podemos poner en 404
puedes hacer lo que quieras
o sea lo puedes
pintar como te dé la gana
vale
ahora que tenemos esto
bueno
voy a quitar en el 404
vamos a crear nuestra primera ruta
para ello
pues nada
nos vamos a roots
aquí veo que tenemos el de demos
pues lo que tenemos que hacer
es crear nuestra primera ruta
posts
index.tsx
si guardo
vale
yo he creado la ruta
fíjate lo que ha pasado
esto es súper interesante
vale
esto es muy interesante
porque
aparte de que toda pantalla
parece que está en blanco
pero fíjate
que algo hay
vale
fíjate que algo hay
está aquí
vale
o sea que tenemos aquí el null
justamente
y esto significa
que aunque ha encontrado el archivo
está devolviendo
un 200
o sea yo no tengo nada aquí
no he puesto un export default
no he hecho absolutamente nada
pero ya
no es un 404
y por qué pasa esto
esto pasa
porque en remix
todas estas rutas
que ves aquí
pueden ser tanto
rutas de API
como de UI
o sea
que tú aquí
podrías hacer algo
para que te devolviese
un JSON
y verlo ahí
por defecto
lo que está haciendo
es devolver un 200
y decir
bueno
esto es una ruta
de API
pero no devuelve nada
no hace nada
y por eso
me aparece aquí un null
pero fíjate que no es un 404
vale
esto luego lo veremos
cómo lo podemos hacer y tal
pero es
es bastante interesante
el hecho de que ya está
devolviendo algo
vale
una vez que ya tienes el fichero
aquí
ya no sería un 404
vamos a crear
nuestro primer componente
export default
function
posts
y aquí
por nada
vamos a poner
dip
con el h1
que estos son los posts
guardo los cambios
y ya está
vale
aquí tendríamos
ya nuestra página
hemos creado
nada
en un momentito
cómo
le decimos
que queremos mostrar aquí
pues información
vamos a crear nuestro pequeño
blog
pues para poder tener
como el get initial props
o el get server side props
que tendríamos en Next.js
o dicho de otra forma
para tener
un método
en el que vamos a recuperar
la información
lo que tenemos que hacer
es exportar
convenciones de nuevo
exportar una función
que sea loader
le podemos llamar
const
vale
y esta función
lo que va a hacer
es devolver
los datos
que vamos a tener
acceso desde el componente
fíjate que lo ponen arriba
lo cual es bastante interesante
¿por qué?
porque está muy pensado
al tema de tener
en un mismo fichero
tanto lo que tendrías
en servidor
como lo que tendrías
en cliente
aquí podríamos devolver ya
pues lo que queremos
que tenga
¿no?
podríamos hacer así
y podríamos devolver
ya nuestros posts
en este caso
vamos a poner aquí
hello world
y vamos a ponerle
podríamos ponerle una idea
también
vamos a ponerle una idea
le podríamos poner
un título
hello world remix
from me to death
y esto mismo
lo vamos a poner aquí
¿vale?
ahora veremos
que este loader
también puede ser así
asíncrono
o sea
lo vamos a ver todo
lo vamos a ver todo
no os preocupéis
¿vale?
hello world
y aquí vamos a poner
second article
¿vale?
this is awesome
vale
hasta aquí el loader
fíjate
exporta
una constante
llamada loader
súper importante
también puedes llamarla
como una función
si quieres
lo importante es el nombre
esto es una convención
perdón
así
esto es una convención
que hay
y hay que llamarle loader
el loader sería
ese método
que es el que va a recuperar
los datos
en el servidor
y que vas a poder
acceder a ellos
en el componente
de aquí abajo
y este componente
se va a renderizar
tanto servidor
como cliente
va a ser este
un componente universal
dicho esto
componente universal
por si no sabes lo que es
significa que se ejecuta
o se renderiza
tanto servidor
como cliente
ahora
¿cómo accedo yo
a estos datos?
que ahora
esto lo estamos haciendo
de prueba
luego veremos
cómo se generan
esto de forma asíncrona
¿cómo podemos acceder
a estos datos
en el componente?
pues nada
lo que tenemos que hacer
es importar
un hook
que se llama
use loader data
¿vale?
y lo importamos
desde remix
y esto
ahora lo que tenemos
que tener aquí
sería
hacemos un const
y vamos a hacer
que utilizamos
directamente los posts
fíjate
que en este caso
son directamente
los posts
que no es
con un objeto
porque nosotros
estamos devolviendo
aquí directamente
los posts
pero tú aquí
puedes devolver
un objeto
puedes devolver
lo que te dé la gana
y puede ser asíncrona
en este caso
pues lo hacemos así
aquí se ha colado
el bueno de
GeekHackoPilot
que no sé por qué
la ha puesto ahí
loader
pero solo haciendo esto
use loader data
aquí ya tendrías los posts
esto es muy interesante
porque normalmente
pues pondrías un use effect
no sé qué
lo bueno de esto
pues que esto ya es
totalmente universal
esto funcionará
tanto en servidor
como en cliente
y tú no tendrías que preocupar
de nada más
con estos posts
pues nada
lo que podríamos hacer
post.map
post
y aquí
pues nada
renderizar el post
vamos a ponerlo así
en este caso
bueno
ya se me está quejando
typescript
esto es un poco rollo
lo que podemos hacer
es ponerle un tipo
pero vas a ver
lo fácil que es
¿vale?
a ver
puedo ignorar el error
de hecho
no sé si lo podría ignorar
creo que sí
sí
de hecho
ya tenemos aquí
lo podría ignorar
vilmente
pero vamos a hacerlo bien
¿vale?
vamos a hacerlo bien
vamos a poner
un tipo de datos
vamos a poner el type
que sea del post
vamos a poner
por ejemplo
id que sea el number
el slack que sea un string
el title que sea un string
¿vale?
así que tendríamos aquí
este array
que sería un array
de este tipo de datos
¿vale?
del post
lo que podemos hacer aquí
al crear los posts
podemos decirle
que posts
son
podemos hacer
bueno
vamos a hacerlo así
y ya está
la constante post
es un array
del tipo post
y vamos a devolverlo aquí
return post
¿vale?
y ahora
que ya tenemos esta parte
ya la tenemos hecha
en el use loader data
le podríamos decir
los datos que va a tener
le puedes pasar aquí
esto es como pasarle
esto es que acepta un genérico
lo que quiere decir
es que el tipo de datos
que tiene el loader data
tú no lo sabes
entonces es como pasarle
un parámetro
pero para indicarle
el tipo de datos que tiene
y aquí lo que queremos
justamente
es el array de post
y con esto ahora sí
ya tendríamos
como tipado todo esto
fíjate casi un momento
ahora ya no nos dice
que esto es un any
porque ahora sí que sabe
que este post
es del tipo post
ahora sí que sabe
que es del tipo post
lo bueno que tiene esto
pues que si ahora
yo aquí escribo post
punto
pues tengo la id
el slack
y el title
esta es una de las grandes ventajas
gente de typescript
que sabe
los tipos de los datos
y por lo tanto
el autocompletado
te va a ayudar bastante
de hecho aquí
podríamos incluso ya poner
el link
to
post barra slack
vale
me gusta
me gusta eso
vamos a ponerlo así
el title este lo quitamos
porque ya tenemos el h2
vamos a utilizar un h3
mejor
vale
y este link
pues nada
lo importamos también
de remix
vale
así estaríamos renderizando
todo esto
guardamos
y ya tendríamos aquí
la lista de post
vale
todo bien
como estáis
la gestión del loading
no haría falta manejarlo
no
porque ahí lo tienes
no
o sea
no hace falta
que gestiones nada
porque esto se está renderizando
en el servidor
de hecho
en el ver código fuente
fíjate que si mirásemos
por aquí
bueno no sé
si estaría
me imagino que sí
hello world
vale
ves
esto ya lo tenemos
en el servidor
entonces
lo que está pasando
es que esto lo está renderizando
en el servidor
y te lo está dando directamente
así que no necesitas
hacer nada más
ya está
no tienes que gestionar el loading
porque es que cuando llega
a la página
ya tiene esta información aquí
no tienes que hacer nada
eso sería el tema
vale
vale
a ver
que más
que más
estoy mirando
estoy mirando
el que tiene starter
para ver las cosas que hace
dice por aquí
que
una
como que una buena práctica
es como que separes
el tema de los
de
de lo que hemos hecho aquí
por ejemplo
esto
este loader
que es una buena práctica
separarlo
entonces lo que dice es
pues crea un archivo
que sea post
dentro de app
que sea el que gestione
este tipo de cosas
al final
esto es muy parecido
a las cosas que muchas veces
comento yo
de hay que separarlo
en servicios
y cosas así
que es lo que dice
que habría que hacer
bueno pues crear aquí
un archivo que sea
aquí dice post.ts
vale
que al final
es el que va a tener
el type este
que me imagino
que lo podríamos exportar
vale
y aquí
en lugar de tener loader
lo que vamos a hacer
es tener
un método
que le vamos a llamar
get posts
vale
esto así
y aquí devolvería
los posts
bueno le podríamos decir
que esto devuelve
bueno vas a ver ya
lo que devuelve
no hace falta eso
digamos
entonces estamos separando
de alguna forma
lo que hace el loader
en un sitio totalmente
ajeno
a lo que sería
la propia página
y aquí ya importaríamos
por un lado
podríamos importar
el get post
vale
alguien me ha preguntado
antes
que significa esto
vale
ahora te lo voy a
te lo voy a explicar
vale
y te voy a explicar
que es lo que hace
que es lo que hace eso
haríamos esto
y ahí tendremos que importar
el tipo
por type
post from post
bueno no sé
si podría importar
las dos cosas
en el mismo
no
o si
si
si que se puede
sin problema
vale
alguien me ha preguntado
antes
bueno pero que significa
esto
porque estaba
en otro archivo
también está
esta tilde
se llama tilde
pues la tilde esta
lo que quiere decir
es cualquier import
que tú hagas
con esta tilde
esto lo que quiere decir
es que lo estás
trayendo de app
fíjate que está en app
pues entonces
si tú estás
en una ruta
por ejemplo
aquí debería ser
punto
punto barra
punto punto barra
tendría que ser así
bueno pues
remix ya te viene
con una configuración
que para evitarte
todo esto
si tú utilizas
la tilde
es que le llaman tilde
no sé por qué
porque yo entiendo
que la tilde es así
pues sería esto
como tu
tu carpeta
dentro de app
es parecido
a lo como
como ocurre
en
en unix
o en mac
y en estos sistemas
que tú haces
cd
tilde
y te lleva justamente
a tu propio directorio
pues sería virguilla
hostia virguilla
es que no sé
en inglés
creo que se llama tilde
no sé por qué
accent mark
no sé por qué
tilde
english
¿ves?
se llama tilde
es
me quedé muy alucinado
con el nombre este
tilde
formate by pleasure
una tilde
a virguilla
en spanish
claro
yo es que cuando
le intentaba explicar
a la gente
en inglés
y le decía
no es que la ñ
¿sabes lo que hay
encima de la n?
que no sé qué
no sé cuánto
y dice
ah
tilde
y yo
what?
¿cómo?
tilde
what?
pues eso
nunca sabía que
claro
en inglés no existe
la tilde
que nosotros
sombrerito
el sombrerito
de la n
claro
lo que está arriba
bueno
pues cuando utilizas
la virguilla
la virguilla
pues
la verdad es que
no sabía
se llama virguilla
cuando utilizáis
la virguilla
esto lo que quiere decir
es la carpeta app
¿vale?
y entonces lo podéis utilizar
tantas veces como queráis
y queda bastante
bastante bien
vale
pues ya hemos separado
vamos a ver que todo funciona
parece que todo funciona
¿vale?
y ya hemos separado esto
perfecto
ahora bien
si yo intento
entrar justamente
a cada una de las rutas
esto no va a funcionar
¿no?
¿ves?
404
esto no funciona
y tal
bueno
antes de seguir con esto
vamos a hacer una cosa
que bueno
que es lo que hace
el artículo
y me parece
muy interesante
que es el hecho
de vamos a llevar
más allá
para que vean la potencia
que tiene el remix
lo que vamos a hacer
es que este método
getPost
lo vamos a transformar
un poquito
para que realmente
lea
el sistema de ficheros
de tu
bueno
de tu ordenador
de tu servidor
y podamos tener
archivos
que va a estar
o sea
en lugar de tenerlo así
lo vamos a tener
en archivos
mdx
bueno
o markdown
donde vamos a tener
la información
el artículo y tal
y lo vamos a poder renderizar
así que
vamos a hacer aquí
una nueva carpeta
le vamos a llamar
posts
aquí
y vamos a tener
los dos posts
hemos dicho
que vamos a tener
el hello world
punto md
vale
y también
y vamos a tener
en post
el
second article
punto md
aquí pues nada
podemos utilizar
from matter
de hecho vais a ver
lo potente
que es esto
a la hora
de poder hacer
este tipo de cosas
hacerte tu propio blog
con esto
es
absurdamente rápido
y absurdamente fácil
y encima
va muy bien
o sea puede
en temas de rendimiento
puede ir súper bien
this is my article
with another title
vamos a poner esto
oh my god
this is code
vamos a ver
si esto funciona
second article
pues vamos a poner
bueno
second article
vamos a ponerle
un nombre más
I am your
father
la virguilla
la virguilla
está en el cielo
vamos a ver
que nos escribe
que nos escribe
Gijacopilot
la virguilla
está en el cielo
y en el cielo
está la estrella
y en la estrella
ah
y en la estrella
que hay
y en la estrella
está la luna
y en la luna
está el murciélago
dormido
vamos a ver
Gijacopilot
debe estar flipando
está flipando tanto
que ya no sé
ni qué poner
¿te gusta el whisky?
el shishi
el murciélago
el whisky
yo también
¿qué es lo que no te gusta?
el whisky
yo también
bueno
vale
hasta aquí ha llegado
Gijacopilot
me imagino que debe estar
alucinando muy fuerte
vamos a poner aquí
I am your father
vale
el título
el subtítulo
I am your father
también
vale
y I am your father
fantástico
Gijacopilot
lo has intentado
está muy bien
vale
ya que vamos a hacer esto
voy a volver a mi carpeta
la que tenemos por aquí
vamos a recuperar
frontend matter
no sé si sabéis
lo que es
front matter
front matter
o como le queráis llamar
que es esta convención
en los archivos markdown
yo por ejemplo
en mi blog lo tengo
y lo utilizo bastante
que
lo que tienes ahí
es información
sobre el artículo
y está bien
porque puedes extraer
información
y así es como funciona
básicamente la magia
de tener toda tu información
en los markdown
puedes tener el título
la imagen
y todo esto
¿ves?
y aquí te lo presenta así
incluso
y en mi caso
aquí teníamos el título
la fecha
la imagen
descripción
category
y toda esta información
utilizando justamente
la dependencia
que vamos a instalar ahora
que es la de
npm install
vamos a ponerla por aquí
npm install
front matter
vale
la instalamos
perfecto
con esta dependencia
justamente
nos vamos a ir aquí
a nuestro post
vamos a ir a nuestro post
aquí habíamos creado
nuestro archivo post
vale
y aquí esto
lo vamos a cambiar bastante
para poder leer
los archivos que hemos creado
vale
vamos a importar aquí
un par de cositas
from fs promises
y vamos a empezar aquí
con este get post
lo vamos a cambiar
para que ahora sea
un poquito más potente
voy a crear aquí
un post path
para tener los paths
ah mira
joder
madre mía
a veces
bueno creo que se ha equivocado
esto
¿no?
porque sería punto
lo ha intentado
lo ha intentado
casi
casi
casi le sale
pero si
esta sería la idea
¿vale?
tendríamos el path
de los post
lo que esto sería
un string
que estaría en el dirname
que es donde está
este mismo archivo
punto punto
sería como
sube un nivel
y luego la carpeta post
que es justamente
donde hemos dejado
¿vale?
está aquí
post
así que tendríamos aquí
los paths
de los post
y ahora lo que tenemos que hacer
en lugar de tener esto
ahí puesta a mano
lo que vamos a hacer
es leer
todo el directorio
const dir
vamos a hacer
que esto sea asíncrono
y así veremos también
que se pueden utilizar
funciones asíncronas
utilizamos el filesystem
de Node.js
utilizamos el método
readdir
para leer el directorio
le pasamos justamente
donde están los posts
y con esto
lo que vamos a tener
serían todos los archivos
lo que podemos hacer
es devolver
una promesa
e ir leyendo
cada uno de los ficheros
pasarle el frontmater
y extraer la información
¿vale?
¿sí?
¿está aquí bien?
vale
en lugar de hacer esto
vamos a hacer
una sync
vale
dir.map
aquí en el dir
en este dir
lo que tendríamos
serían todos los ficheros
que ha leído
en el sitio
¿vale?
así que
vamos a
de hecho
espérate
ahora tengo
voy a mirarlo
pero yo diría que sea
mira espera
me lo va a decir
me lo va a decir esto
en un momento
que leo que
files
¿vale?
o sea
claro
files
es que como lo ha llamado
dir
me estaba haciendo
aquí la picha un río
¿vale?
pues files
¿vale?
files
files.map
file name
¿vale?
y ahora sí
vamos a leer
cada uno de los ficheros
¿cómo lo leemos
cada uno de los ficheros?
bueno
pues hacemos
una wait.readfile
y aquí
le pasamos
donde está
nuestro fichero
que básicamente
joder
es impresionante
hacemos un join
del path
que tenemos aquí
y luego
del nombre del fichero
que tiene que existir seguro
normalmente aquí
se pueden hacer
diferentes cosas
uno
mirar que existe
o hacer un try-catch
porque a lo mejor
intentas hacer un readfile
de algo que no existe
y te revienta tu aplicación
pero en este caso
no es tan importante
porque acabamos de hacer
un readdir
estamos seguros
que ese archivo
tiene que existir
hacemos una wait
justamente para
esperar
porque esto devuelve una promesa
porque he importado
filesystem
barra promises
si no
funcionaría con callbacks
y todo esto
así que aquí
tendríamos el file
y lo que hacemos
con el file
justamente
pues sería
utilizar
el parse from matter
este parse from matter
lo vamos a importar
de from matter
que es la dependencia
que he instalado antes
¿vale?
parse
ah no me acuerdo
parse
from matter
no sé si tiene un módulo
o es el default
yo creo que es el default
ahora lo vamos a ver
desde aquí
sí
es el default
perfecto
parse from matter
hay gente que le llama
fm
¿vale?
si alguna vez ves el fm
y no sabes lo que es
seguramente sería esto
y el file
como esto
lo que hace es devolver
normalmente
un buffer y tal
lo puedes convertir en un string
y aquí ya tendríamos
los atributos
ahí
no le he cambiado el fm aquí
vale
pues le llamamos fm
el fm
ves
estaría bien
que el fm
me dijese
si devuelve
parece que no
no devuelve una promesa
¿vale?
así que aquí tendríamos
los atributos
y ahora verás
lo que tenemos
en los atributos
así que devolvemos
aquí
vamos a devolver
por un lado
el slack
que va a ser
el filename
pero vamos a reemplazarle
claro
le tenemos que quitar
por un lado
el md
del final
porque si no es slack
el slack al final
es lo de la ruta
¿vale?
el slack sería justamente
lo que
lo que se está intentando
cargar aquí
esto sería el slack
slack
que no tiene que ver
con slack
es slug
es que no sé
cómo se pronunciaría
correctamente
slug
bueno
ya me entendéis
eso sería
entonces vamos a quitarle
la extensión del final
y la reemplazamos
para que esta forma
encaje justamente
el nombre del post
que lo tendríamos aquí
con la ruta
que queremos que tenga
y ahora pues
en los atributos
podemos recuperar
el title
lo vamos a por aquí
attributes
attributes
vale
ahora se me queja
por un tema
de tipos otra vez
pero bueno
esto lo podemos arreglar
después
y no pasa nada
luego lo arreglamos
¿ves?
porque me dice
el objeto es del tipo
unknown
bueno
porque lo tendríamos
que tipar
y ya estaría
esto lo tenemos aquí
y espérate
porque algo
no es cerrado
por aquí
esto sí que está cerrado
aquí
esto
esto aquí
esto aquí
ahora sí
vale
y aquí le vamos a poner
un
async
y ya está
vamos a esperar
vamos
con esto
recuperamos
leemos todos los posts
y lo que debería estar haciendo
es justamente
devolvernos
una promesa
al final
cuando se resuelva
con un array
con estos objetos
de aquí
ahora lo veremos
si funciona correctamente
o no funciona correctamente
vale
vámonos
aquí a nuestro post
vale
aquí podemos ver
que ahora me están enseñando
los posts
vale
hello world
I'm your father
si yo cambio
aquí en post
cambio
hello world
hello
from
file
system
y guardo los ficheros
bueno
lo tengo que refrescar
no me lo ha pillado
claro no me ha pillado el cambio
es normal
porque una vez que genera
esos datos
no te los va a refrescar
automáticamente
vale
o sea que es normal
no pasa nada
gracias por la hidratación
Juan
Juanes
vale
entonces
ahora que ya tenemos esto
bueno vamos a arreglar
en un momento
la cosa esta
esto debería ser una tontería
tendríamos que tener aquí
export
type
post
mark
down
attributes
title
string
bueno
podríamos poner más
pero con esto
debería ser suficiente
el attributes
claro lo que podríamos hacer
aquí por lo que veo
hostia aquí lo que hace
es mirar si es válido
o sea aquí lo que mira
para saber si
si es del tipo válido
es
is valid
post attributes
lo que pasa es que
en lugar de hacer esto
que hace aquí
es que tú le puedes pasar
cualquier atributo aquí
y lo que indica
es que
lo que te devuelve
es un attributes
donde es
el
export
post markdown
attributes
que es el que tenemos aquí
vale
y aquí lo que mira
es si realmente
tiene los datos correctos
justamente para asegurarse
que funciona
esto lo tenemos
function
y ya estaría
vale
y aquí lo que haría
sería algo así
y con esto
podría mirar
si el atributo
este es válido
if
es válido
si no es válido
pues podemos
hacer
un error
invalid
post attributes
y ya está
vale
pero esto igualmente
no me lo ha
terminado de funcionar
ay
donde me estoy
perdiendo
claro
es que este es
unknown
attributes
con esto
si que debería ser suficiente
lo que estoy diciendo
es que el tipo de datos
de attributes
es post markdown
attributes
vale
y ahora ya no sería unknown
sino que ahora sabe
que tiene que acceder a title
y ya está
bueno
tampoco pasa nada
porque dejamos los errores
de TypeScript
porque eso va a comer
pero al menos
intentamos no liarla mucho
vale
pues con esto tenemos los post
ahora todavía no funcionan los post
porque nos dan 404
así que vamos a ver
cómo serían las rutas dinámicas
y vamos a arreglar esto
nos vamos a roots
y aquí en post
fíjate que triamos el index
pues tenemos que crear
cómo utilizar una ruta dinámica
las rutas dinámicas
lo que quieren decir
es que la ruta puede cambiar
pero tú quieres capturar
justamente lo que es
lo que nosotros queremos capturar
es justamente el slack
que eso es lo que nos va a indicar
lo que nos va a ayudar
en cada uno
a recuperar el contenido
ves aquí nos dice
ha habido un error
madre mía
root slack
no tiene componente
por favor
no sé qué
no sé cuánto
claro es que todavía
no le he añadido nada a esto
entonces espérate
que tengo que crear cosas
vamos a hacer
el export default
el export default de nuevo
el export default
sería el componente
que tiene que renderizar
así que vamos a poner post
así
a secas
retur
h1
post detail
y ya está
solo con esto
deberíamos tener suficiente
post detail
vale
esto no es el contenido
pero al menos ya vemos
que sí que se está renderizando
lo que podemos hacer con esto
pues otra vez
volver a hacer lo mismo
que hemos hecho antes
importamos
el user loader data
de remix
aquí
hacemos un export
const de loader
vale
y aquí
lo que tenemos que conseguir
de alguna forma
es get
post
así que vamos a tener que crear
un método
que pasándole el slack
vamos a poder recuperar
justamente el artículo
que sea
tener la información
y mostrarla
ahí justamente
para el usuario
¿cómo hacemos esto?
buena pregunta
bueno
lo primero que tenemos que hacer
es recuperar el slack
¿no?
el slack que tenemos en la url
¿cómo recuperamos el slack?
pues aquí en loader
tendríamos aquí
los parámetros
de la url
así que
lo que tenemos que hacer aquí
es tener params
obviamente
se me va a quejar
por un tema de types
de tipos de typescript
lo que podemos hacer
es importar
el tipo
de la loader function
creo
creo que la loader function
¿sí?
y decirle
que este loader
justamente
es de este tipo
¿vale?
así que le decimos loader
que es de loader function
y ya no se me queja
y de hecho
esto nos va a ayudar
porque podemos hacer params
y nos debería decir
todos los parámetros
que tenemos
en este caso
solo tenemos que recuperar
slack
de params
para asegurarnos
que lo hemos hecho bien
podríamos devolver
un objeto con slack
y aquí
lo mismo que antes
recuperamos slack
de use loader data
y aquí
lo vamos a mostrar
pa pa pa pa
slack
slack
y vamos a ir
a nuestra aplicación
y aquí vemos
que ya he recuperado
slack desde el servidor
y que la tengo
y la estoy mostrando aquí
o sea que perfecto
muy bien
ahora que ya tengo el slack
que ya sé que tengo el slack
pues lo que podríamos hacer
es crear nuestra función
en el post
para recuperar un post
ahora hemos recuperado
la lista de post
lo que podríamos hacer
es crear
la de recuperar
un solo post
o lo que podríamos hacer
es
en la de get post
si le pasamos el slack
que eso no nos devuelva
uno en concreto
para reutilizar un poquito
lo que habíamos hecho
por aquí
podríamos hacer las dos cosas
a ver
tú como lo hacen
esta gente
a ver
tú tú tú
bajando por aquí
get post
no
esta gente lo que hace
es crear una nueva
pues creamos una nueva
ahora la vayamos a liar
por si nos quedamos ahí
vale
le vamos a pasar el slack
que es del tipo string
y ya está
ostras
lo intentamos
intent
ojo
ojo
guija copilot
le doy
y lo probamos
va
le doy y lo probamos
le doy y lo probamos
porque tiene buena pinta
eh
tiene buena pinta
yo creo que la
yo creo que la ha clavado
yo creo que la ha clavado
vamos a verlo
vamos a verlo
va
vamos a poner aquí
el get post
le pasamos el slack
vale
is not as enabled
parameter
tal
claro
aquí es que no hemos puesto
que sea del tipo string
y esto dice que puede ser
undefined
el slack
bueno a ver
que le podríamos pasar
un string vacío
por si acaso
bueno
una cosa que podemos hacer aquí
eh
sería mirar
que el slack
sea diferente
and define
y todo esto
por ahora le vamos a poner
un valor vacío
un string vacío
y luego veremos
cómo hacemos esto
esto nos debería devolver
el post
y aquí
pues nada
vamos a devolver
el post directamente
y en el post
deberíamos tener
aquí
el título
así que podríamos
recuperar aquí el post
y aquí post title
post punto title
fíjate
post punto title
vale
vale
pues fíjate
hostia
lo ha hecho bien
la madre que lo parió
que lo ha hecho bien
de primeras
lo ha hecho bien
de primeras
lo ha hecho bien
de primeras
mira mira
I'm your father
lo ha hecho bien
ha hecho el método
perfecto
lo ha hecho perfecto
pero os voy a explicar
por qué lo ha hecho perfecto
vale
para que tengáis un poquito
de conocimiento
de cómo ha sabido
hacerlo exactamente perfecto
lo ha hecho perfecto
básicamente
porque tenía el contexto
de la otra
de la otra función
vale
como tenía el contexto
de la otra función
de básicamente
lo que quería hacer
inteligentemente
ha determinado
vale
tienes el get post
que al final
lo que tienes aquí
un promisor
de toda la red y tal
al final
un get post
debería hacer exactamente
lo mismo
pero para uno solo
y eso es lo que ha hecho
ha utilizado el contexto
del mismo fichero
para esto
o sea
no es que se le ha ocurrido
todo
vale
sino que ha utilizado
lo que ya había
en el mismo fichero
por eso le ha salido también
ghackopilot
cuanto más contexto
tiene
mejor funciona
si intentáis en un archivo
totalmente
es una máquina
no no no
es una máquina
yo eso no lo pongo en duda
de hecho yo he alucinado
y me ha parecido increíble
pero solo para que lo sepáis
vale
que hay gente que a lo mejor
piensa
madre mía esto
que nos va a quitar el trabajo
y tal
bueno puede ser que nos lo quite el trabajo
pero
en este caso ha sido más bien
por un tema de
de contexto
vale
bueno
aquí en este post
que habíamos puesto esto
lo ideal
sería más bien
aquí poner
fslag
es
undefined
throw
new error
what the fuck
vale
así evitamos
y aquí sabemos que
slack
como solo puede ser
string o undefined
si es undefined
salgo por aquí
y si no
pues por acá
a ver
que es un poco raro
porque slack
slug
en esta ruta
no podría ser undefined
pero bueno
si lo dicen así
pues ya está
vale
claro
ahora lo que me faltaría
un poco
para subir un poquito más el nivel
¿no?
para decir
va
vas a ver ahí
todo tu artículo
lo que deberíamos hacer
es instalar mark
mark
es una biblioteca
que lo que te permite
es leer markdown
o sea
tú le pasas un texto
con markdown
y lo que te hace
es convertírtelo
en html
esto lo podríamos hacer
en un momento
así que vamos a instalar
mark
aquí
porque al final
tenemos la información
justamente aquí
vale
importamos
mark
from mark
no puede encontrar
la declaración
pero lo que voy a instalar
bueno
igual es que no tiene
declaración
bueno
claro
si no tiene
cuando tengáis este error
de que no las encuentra
normalmente
lo que podéis hacer
es buscar los types
vale
porque
hay unas librerías
vale
si que las tiene
pues instaláis los types
y ya está
lo que pasa es que hay veces
que hay dependencias
no tienes que hacer siempre
esto de los types
bueno no sé si se ve
porque está muy abajo
pero
si no
si tenéis este problema
que no pueden encontrar
las declaraciones
y tal
eso es que el propio paquete
no tiene los tipos
bueno
es normal
hay un montón de paquetes
que no tienen
typescript
y por lo tanto
no tienen los tipos
si fuese el caso
miráis
si está dentro
de la organización
de types
el mark
y lo instaláis
y ya está
en este caso
lo podéis poner
incluso que sean
de desarrollo
pero bueno
vamos a instalarlas
y ya está
y ahora
si todo va bien
ves
ahora ha desaparecido
y ahora de repente
ya te dan las declaraciones
si vais en github
al barra types
veréis que hay
un montón de definiciones
un montón de proyectos
de hecho creo que
nunca he visto un proyecto
que tenga tantas
y tantas listas
de
por ejemplo
types
vais a ver
ves
es que esta
mira dice
que es tan larga
tiene 6.857 paquetes
con tipos
y aquí solo te muestran
hay un buscador
de la página web oficial
pero bueno
para que lo sepáis
que lo podéis arreglar
así
vale
pues
vamos a volver
para aquí
y lo que vamos a hacer
es que
aquí en el attribute
aparte de los atributos
lo que podemos tener
es el body
vale
el body
al final
lo que es
es el cuerpo
del resto
de la función
así que a lo mejor
lo que podríamos hacer
con este attributes
y todo esto
en lugar del post markdown
attributes
también lo que podríamos hacer
esto a lo mejor
no hace falta ni exportarlo
lo vamos a dejar
por ahora aquí
type
post markdown
donde esto tiene
por un lado
el body
que es un string
y tiene los attributes
que es del post markdown attributes
vale
y así le decimos
que esto
lo que debería devolver
es esto
y este body
lo que vamos a hacer
es pasárselo
al marked
vale
así que
cuando devolvemos
el slack
el title
y tal
le podríamos tener
el html
le pasamos
mark
body
y ya estaría
una coma
y ya está
la verdad es que
no tiene mucha historia
porque ahora
solo tenemos que volver aquí
y de la misma forma
que aquí en post
tenemos esto
aquí podremos hacer
un deep
in el
dangerous sheet
in el html
y en lugar de post content
bueno le he llamado html
vamos a llamarle content
que igual tiene un poquito
más de sentido
ya que me lo ha dicho
yhackopilot
me parece mejor nombre
así que con esto
mira
el
i'm your father
no me
espérate
content
marked body
a ver
igual se me ha olvidado
algo
por aquí
content
past content
post content
vale
pues algo
algo se me ha olvidado
algo se me ha olvidado
bueno espérate
a ver si he escrito
bien el set
dangerously set
claro que me he fiado
totalmente del
dangerous set
en el html
post content
post punto content
undefined
pues sí
undefined
undefined
title
hostia
get post
es que lo he puesto
donde no es
lo he puesto
en el get post
no en el
no en el que quería
en el get post
no tiene sentido
hacerlo el mark
tiene más sentido
hacerlo solo
cuando vas a tomar
el detalle
vale
entonces esto
no tiene tanto sentido
aquí
y sí que tiene más sentido
aquí
vale
así que hacemos el post
markdown
aquí sí que recuperamos
el body
y ya está
ahora sí
vale
pues nada ya lo tenemos
aquí
ya tenemos aquí
el contenido
de nuestro
nuestro post
I'm your father
y fíjate
de hecho
porque no tiene estilos
pero bueno
aquí tendríamos
fíjate que esto es código
esto es código
de hecho si miramos
inspeccionamos
el html
lo teníamos aquí
pre
code
o sea
esto es código
tal cual
ya ha mostrado
el markdown
y lo ha transformado
y ya está
ahora
vamos a seguir con una cosa
todavía más interesante
porque esto sería un poquito
para mostrarlo
hice Maximineto
perdóname Midu
pero que ventaja trae esto
hombre a ver
la verdad
es que la ventaja está
es que es una forma diferente
de hacer lo que ya hace
a lo mejor NextDS
en NextDS
podríamos hacer
exactamente esto
pero es verdad
que si miramos un poco
cómo quedan los componentes
y todo esto
está el hecho
de cómo inyecta
en el use loader data
es algo bastante interesante
es algo bastante diferente
no es como
se hace normalmente
es un poco
como están intentando unificar
ya os digo
que es bastante más parecido
a Ruby on Rails
que lo que sea NextDS
está intentando
que pienses en tu aplicación
de una forma muy universal
en el sentido
de que sea
una aplicación
que funciona
tanto en servidor
como en cliente
pero o sea
que es servidor y cliente
a la vez
eso es lo que están intentando
buscar
con esto
yo creo que la ventaja
la vas a ver igual ahora
mejor cuando hagamos
lo de crear
cuando vamos a crear
justamente
el post
porque hasta ahora
estamos viendo
que estamos leyendo
el file system
pues vamos a ver
cómo podríamos crear
nosotros
justamente post
desde otra ruta
¿vale?
vamos a crear la ruta
y a lo mejor ahí
vais a ver un poco más
de ventajas
y vais a ver
un poco más
la idea esta que tienen
de utilizar
como la plataforma
cosas nativas
para hacer muchas cosas
y quitarte
en el componente
ese trabajo
¿no?
vamos a crear
una ruta
que es la de admin
y vamos a hacerle
export default
ah una cosa
una cosa
que os quería comentar
que os lo estaba enseñando
antes os he dicho
que cada ruta
podía ser
como una API
¿no?
pues si es que
si hacéis un
export const loader
¿vale?
y hacéis esto
y aquí directamente
pues yo que sé
vamos a devolver
un id1
title post 1
¿vale?
y guardo los cambios
y yo me voy
a barra admin
¿habéis visto?
así de fácil
estarías haciendo
un endpoint
de una API
para tu página
o sea
no tienes que hacer
nada más
tú creas una ruta
y lo que haces es
exportar
un loader
que devuelva
y esto puede ser
llamar a una base
de datos
puede ser lo que tú quieras
puede ser lo que te dé la gana
pues tú haces esto
y con esto
lo único que
ya tienes una API
ya estarían montando una API
si tú le pones
un export default
que devuelva
un componente
¿vale?
function
admin
entonces lo que va a hacer
es pintar el componente
¿vale?
admin
si vuelvo
¿ves?
ahora me pinta el componente
que quito el componente
si tiene un loader
me pinta
me lo hace como si fuese
una API
y de nuevo
tú aquí
podrías tener segmentos dinámicos
query params y tal
y los podrías recuperar
justamente por aquí
¿vale?
aquí tendríamos justamente
lo que sería
voy a importar
el loader function
import type
loader function
para tener
aquí la información
loader function
y aquí
tenemos el contexto
el params
params
y la request
y con la request
podrías tener
un montón de información
request punto
¿vale?
podrías tener
el body
form data
que esto lo vamos a ver ahora
los credenciales
los headers
o sea que podrías tener
un montón de información
así que
que lo sepáis
esto al final
como se ejecuta
justamente
en el server
podrías recuperar
toda la información
que quieras
y aquí
pues ya tendrías tu API
y sería una forma
muy diferente
de hacerlo
con bastante menos
no sé
boilerplate
¿no?
que en otros frameworks
igual es un poquito
más complicado
pero si la petición
tarda en resolverse
¿no hace falta
poner spinners?
bueno eso depende
¿no?
porque al final
la server side
tú si lo que quieres
es que la petición tarde
o sea si la petición
sabes que va a tardar
a lo mejor
lo que puedes hacer
es recuperar
en el loader
cierta información
y en el cliente
otra información
pero lo bueno
que tiene en este caso
es el tema
de las nested routes
no sé si nos va a dar
tiempo a verlo hoy
pero al final
lo que tiene
las nested routes
es que
esto que estamos viendo
ahora de loader
claro
esto
lo tendrías
a niveles
muy granulares
porque tú tendrías
una ruta
que tendrías
su propio loader
tendrías otra
subruta
que tendrías
su propio loader
tendrías otra
subruta
que tendrías
su propio loader
lo bueno de esto
es que además
eso pasaría
en paralelo
por detrás
y lo que haría
es que
tú mostrarías
toda esa información
como de golpe
si por lo que fuese
un nested route
dices
bueno
no quiero que esté
en este route
tenga un loader
porque puede tardar mucho
lo que podrías hacer
justamente
es mostrarlo
desde el cliente
así que ya está
se le puede aplicar
seguridad
claro
si tienes aquí
el request
al final
puedes hacer
lo que te dé
la gana
puedes hacer
lo que quieras
o sea
que vas a poder
tener seguridad
y mil millones
de cosas
así que
bueno
vamos a hacer
aquí
nuestra función
esta
lo que vamos a hacer
es un formulario
para crear
para crear
nuestros propios
posts
desde la UI
vale
vamos a hacer eso
que es justamente
por donde van ahora
lo que hacen ahora
en el
getting started
así que hacemos esto
vamos a crear
nuestro componente
admin
vale
admin
este loader
no vamos a utilizar
este loader
utilizaremos
otra cosa
no haremos esto
y aquí
lo importante
de lo que queremos hacer
es
bueno
crear
o sea
lo que queremos
es crear
lo que nos dé la gana
lo que podemos hacer
estoy pensando
como lo podemos hacer
aquí
porque veo aquí
ellos lo que hacen
es mostrarte
los
lo que te hacen
es mostrarte
básicamente
todos los
los
los
los
los posts
vale
vamos a hacer
vamos a bajar
y vamos a ver
el tema de las acciones
ya directamente
para no
no hacer otra página
que es un poco rollo
vamos a hacer ya
el tema del formulario
vale
redax
iba a decir
remix
tiene su propio
componente form
este form
al final
es bastante parecido
solo que
como ves
es
funciona igual
que el form normal
excepto
que la interacción
que se hace
con el servidor
es con fetch
en lugar de hacer
una request
del documento
aunque puedes
recuperar
lo que sería
como funciona
normalmente
esto lo que te va a permitir
lo vamos a ver ahora
es que el form
aunque tú
veas que funciona
como un formulario
normal en html
no va a refrescar
la página
aunque luego puedes hacer
que refresque
si es lo que necesitas
pero bueno
ahora lo veremos
vale
vamos a hacer un return
vamos a utilizar
el form
y ahora en este admin
bueno vamos a poner
h1
de aquí
vamos a poner aquí
h1
h1
vamos a poner aquí
el form
y ahora esto sería
un formulario
normal y corriente
de toda la vida
vale
vamos a poner
label
vamos a poner
title
title
input text
y aquí
lo que podríamos
a poner
post title
y este
labels
vamos a ponerlo
por aquí abajo
pam pam pam
que más tendríamos
tendríamos el post slack
y tendríamos
el post content
esto lo vamos a hacer
con un textarea
vale
textarea
rows
20
10
vale
width
vamos a poner
300
ostia
el width
no le ha molado
columns
50
tampoco le gusta
el columns
pues nada
no me acuerdo ahora
como es la load
el textarea
bueno
no pasa nada
con el rows
vamos a tener suficiente
y luego ya
si no lo estilaremos
y ya está
vamos a ponerle un nombre
a cada uno
esto que
el nombre es importante
porque vamos a recuperar
esta información
en el loader
a través del nombre
vale
así que aquí vamos a poner
que esto es el title
el name
vamos a poner
que esto es el slack
y aquí vamos a poner
que el nombre
esto es el content
bueno
tiene bastante sentido
vamos a ponerle un botón
también
que sería
save post
y ya está
esto sería todo
lo que necesitamos
básicamente
podríamos ponerle
playholder también
playholder del title
playholder
slack
slack
y ya está
venga
yo creo que con esto
ya lo tenemos
si vamos ahora
a la ruta
vamos a quitar esto
vamos a nuestra ruta
no sé dónde
deja ahora mi
vamos a la ruta
barra admin
pam
bueno queda
bastante horrible
pero vamos a
vamos a intentar
arreglarlo esto
en lugar de spans
vamos a utilizar
hd4
vale
un poquito mejor
y aquí
vamos a hacer
que esto esté en un dip
porque es que si no
queda bastante
what
dip
ponemos aquí el button
vale
bueno
más o menos
tampoco es que
tampoco es que sea la
la
la bomba
pero
más o menos
¿no?
más o menos
más o menos
tendríamos aquí
el título del post
el slack
slack
y el contenido
del post
vale
que aquí
tendríamos que poner
el markdown
de hecho
podrías poner ahí
cualquier javascript
que quisieras
para que te enseñase
bien el markdown
ahora
lo que tenemos que hacer
antes de seguir con esto
vamos a crear
en el post
igual que tenemos
el get post
que tenemos el get post
y todo esto
vamos a exportar
eh
get post no
vamos a hacer un
create post
que le pasamos
toda la información
del post
vale
de hecho aquí
tenemos que esto
es post
y esto lo que va a hacer
es que nosotros
le pasamos un objeto
con la información
del post
si hombre
gejaco pilot
acuéstate
que estás amarillo
ahí te has pasado ya
ahí ya se te ha ido
un poco de las manos
lo has intentado
pero se te ha ido
un poco de las manos
no
eso no es lo que
tienes que hacer
lo que tenemos que hacer
es tener aquí
el markdown
vale
vamos a crear
justamente
podríamos hacer aquí
lo podríamos hacer
mira
con un template string
vale
porque lo importante
aquí es esto
aquí tendríamos
el title
y el title
sería post.title
aquí terminaría esto
y aquí tendríamos
post.content
claro
aquí no hemos puesto
el content
que el post puede tener
content
vamos a poner content
bueno
es que claro
yo he puesto post
aquí como si fuese
cualquier cosa
post.content
¿cómo lo hemos utilizado
aquí en slack?
post.title
post.content
vale
pues ya está
post.content
post.content
y ya estaría
a ver
hay una cosa
que aquí
me preocupa
un poco
pues que
el post.content
este en realidad
no se refiere
a lo mismo
este sería
el contenido
en markdown
y el otro
sería el html
o sea
no está
del todo
correcto
los tipos
vale
pero lo vamos a utilizar
porque es un poco
una trampa
pero para que lo tengas
en cuenta
deberíamos diferenciarlo
porque no nos estamos
refiriendo a lo mismo
este content
aunque también es un string
este sería el markdown
y en el get post
cuando estamos recuperando
el content
esto es el html
se puede arreglar
o sea
se podría hacer
tener por un lado
el row content
y otro
el content normal
pero bueno
no pasa nada
vale
ahora sí
ahora sí que me estás entendiendo
el hackopilot
vale
tienes el markdown
y ahora
una cosa muy interesante
de esto
porque alguien puede decir
¿por qué haces esto?
ahora te lo enseñaré
ahora te enseño
por qué hago esto
y lo vas a ver
luego lo arreglo
bueno lo arreglo
lo pongo de otra forma
y te lo enseño
utilizamos el file system
write file
para guardar
en el path
donde están los posts
con el post.slug
.md
el contenido del markdown
vale
o sea que esto
lo haríamos así
vale
esperamos que todo haya ido bien
por supuesto
y al final
lo que podríamos hacer
al hacer el create post
podríamos devolver
el get post
utilizando el slug
y esto nos debería convertir
este markdown
y podríamos tener el objeto
porque si quieres poner
una preview
o lo que sea
de mira como ha quedado
y todo esto
vamos a utilizar
este nuevo método
create post
vale
guardo los cambios
y nos vamos al admin
y aquí
aquí es donde tiene que pasar
la magia
vale
donde tenemos que utilizar
este método
de create post
y tenemos que recuperar
toda esta información
para hacer esto
y esto es una cosa
que está muy chula
que es una de las grandes diferencias
en general
esta es la típica diferencia
o muchas de las diferencias
que vamos a ir viendo
entre next yes
y lo que sería remix
y es que remix
lo que intenta
es siempre basarse
en la plataforma
en la tecnología
que tenemos en la plataforma
así que
lo que vamos a hacer
lo que vamos a hacer
a ver que he perdido mi
aquí
vale
lo que vamos a hacer aquí
aquí
es
utilizar
el form data
vale
que es el form data
esto es una cosa
que es nativa
de la web
y que muy poca gente utiliza
que es lo que haríamos normalmente
en un componente de react
en un componente de react
tú harías esto
name
o title
title
set title
use state
tal
fíjate el código
que nos vamos a evitar
gracias a remix
y esto es una de las cosas
que tiene mucho sentido
en remix
y yo creo que es lo mejor
o sea
tendríamos un estado
controlaríamos todo
pero no
fíjate
como lo vamos a hacer
tenemos esto
que quedas
vamos
palamerlo
super limpio
y lo que hacemos aquí
básicamente es que tenemos
el name
el form data
el form data
que tenemos en la request
aquí
tendríamos
vamos a llamarle data
vale
request
punto
form data
vale
este form data
ya existe en los navegadores
vale
esto que estamos haciendo aquí
es una cosa
que existe en los navegadores
tú cuando haces un submit
tienes la oportunidad
de acceder al form data
y ya está
pues en este caso
lo que están haciendo
es llevarlo incluso
más allá
para que puedas acceder
fácilmente
desde el servidor
puedes hacer un request
punto form data
y aquí en data
vamos a tener
el title
el slack
y también
el contenido
o sea
así tal cual
pim pam
pim pam
así que
que es lo que podemos hacer
ahora que tenemos el data
bueno
pues nada
recuperar de cada uno
aquí
bueno
le he llamado data
vamos a llamarle
form
form data
que tiene bastante sentido
recuperamos el title
form data
punto
get title
vale
ahora
el content
y el slack
vale
form data
punto
get slack
vale
ah
aquí importante
que me falta
la wait
claro
tenemos que esperar
así que esto
hay que convertirlo
en asíncrono
y ya está
aquí tendríamos
el título
el contenido
y el slack
con esto
lo que tenemos que hacer
es crear
nuestro post
pues entonces
hacemos una wait
llamamos al create post
el método
que hemos creado antes
y le pasamos
tanto el título
como el contenido
como el slack
ahora me estoy dando cuenta
que justamente
tiene más sentido
que tengamos aquí en el post
dos tipos de post
ya que lo he hecho
lo vamos a arreglar
vamos a poner
new post
new post
y el nuevo post
claro
no puede tener
una id
es notas
en el front
tipe
teta
vale
create post
new post
y en el create post
este
tendría que ser así
y esto
form data entry
puede ser null
claro
podría ser null
tendríamos que mirar también
si cada uno de los
que va poniendo
claro
deberíamos mirar
tiene el título
o no tiene el título
¿sabes?
tiene esto
o no tiene esto
tiene esto
o no tiene esto
tendríamos que empezar
a mirar todo esto
form data entry value
a ver
type file
to type string
type file
to type string
a ver
string
as string
¿vale?
vamos a forzar
que el título
es un string
content es un string
slack
es un string
porque ya sabemos
que estos son strings
y es lo que estamos
esperando que sean
podríamos hacer un if
¿no?
de mirar
if title
no sé qué
luego lo podemos hacer
pero bueno
ahora lo vamos a forzar
y ya está
¿vale?
hacemos el create post
y aquí en post
pues nada
new post
esto tiene sentido
y así ya no tenemos
el problema que teníamos
antes que comentábamos
de los tipos
¿vale?
pues nos vamos al admin
tenemos lo de create post
esto se supone que termina
pues ahora lo que podemos
hacer además
es decirle al
al navegador
¿vale?
pues cuando esto termine
lo que quiero
es que le lleves
a algún sitio
al usuario
¿no?
¿dónde lo vas a llevar?
pues le voy a redirigir
vamos a importar
redirect
y lo redirigimos
a la página
que nos dé la gana
pues barra admin
¿vale?
a la misma página
hasta aquí esto
debería funcionar
más o menos
así que
si os parece
lo podemos probar
espérate
importante
importante
antes os estaba explicando
lo del loader
pero esto no funciona así
porque esto
lo del loader
es para cargar información
el loader
es como para recuperar
la información
en este caso
no queremos un loader
hostia
menos mal que me he fijado
claro
estaba explicando
lo de la API
y hemos hecho esto
en este caso
no necesitamos un loader
lo que necesitamos
es exportar
un action
¿vale?
los formularios
ya sabéis que
aquí tenemos
el action
¿vale?
entonces por defecto
si tú exportas
si tú tienes un formulario
en un componente
y exportas
una función
action
¿vale?
en lugar de ser
un loader action
esto debería ser
action function
¿vale?
y esto tendríamos que tener
por aquí
¿vale?
tienes que exportar
un action
no un loader
el loader sería
para traer información
y el action
sería como para
el formulario
que tienes
en tu componente
indicarle
qué es lo que
tienes que hacer
cuando tú
hagas el submit
del formulario
así que importante
esto es un action
lo tipamos
aquí también
podemos importar
los tipos
como action function
lo teníamos por aquí
y ya está
¿vale?
que casi se me escapa
y la liamos parda
podríamos hacer aquí
un montón de revisiones
en lugar de hacer
el asString
asString
pues hacer
si no tengo título
devuelvo un error
y todo esto
de hecho
lo podemos mirar ahora
ahora lo miraremos
para que veamos
cómo se validaría
entre comillas
un formulario
vamos a ir a nuestro formulario
vaya
vale
ahora
digo hostia
menos redirect
bueno pues aquí tenemos
nuestro formulario
vamos a crear un título
que sea
article
from
form
new
form
article
this is
awesome
let's
keep playing
espero que vaya todo bien
porque si no va a ser un rollo
save post
vale
y me parece que no
ha hecho lo que debería
me parece que no ha hecho
lo que debería
porque
me ha hecho un get
esto
tiene fácil solución
esto es porque
el formulario
por defecto
no le he dicho
que tenga que hacer un post
y necesito que haga un post
así que aquí le ponemos
action
y le decimos que me haga un post
porque sé que me ha hecho un get
porque cuando tú haces un get
ves que me lo ha puesto aquí
todo
me los ha puesto aquí
como query params
es que ha hecho un get
de justamente
la misma ruta
así que por eso me he enterado
bueno
intento dos
intento dos
intento dos
y
intento
dos
jaja
seis post
vale
me ha vuelto a hacer lo mismo
me ha vuelto a hacer un
a ver
a ver si me ha creado algo
no me lo ha creado
vale
empieza mal
admin
post
creo que
hostia
es que he puesto action
y esto creo que es
method
efectivamente
action
action no es
de hecho es
method
method
ves que me se ha autocomplido aquí
post
ahora
ahora sí
ahora sí
intento tres
intento tres
intento tres
midu
deja de cagarla
que hay que cenar luego
save post
vale
parece que no ha pasado nada
me voy a post
pero sí que ha pasado algo
y aquí tenemos el intento tres
y sí que me ha creado el post
vale
pero
claro
no hemos visto aquí
que ha limpiado nada
no ha pasado
parece que no ha pasado nada
no
o sea parece que en realidad
como que no
ni me he dado cuenta
que se haya creado el post
ni que haya hecho nada
¿qué ha pasado con esto?
bueno
vamos a ver la red
a ver qué es lo que está pasando
vamos a poner intento cuatro
intento cuatro
y deja de cagarla
no sé qué no sé cuánto
si ponemos aquí
el tema de las requests
y le doy a save post
vale
aquí podemos ver
que en realidad
está pasando más cosas
de las que creemos
y es que
está llamando justamente
a esta ruta
vale
le está pasando como payload
fíjate
el title
el slug
el content
y todo esto
esta información
que tenemos en el formdata
justamente le está llegando
aquí
y al final
pues está dejando
toda la información
y tal
que lo esté dejando ahí
aunque parece visualmente
que no ha hecho nada
en realidad se queda hecho
a esto lo podríamos arreglar
y se pueden hacer un montón de cosas
justamente para limpiarlo
y todo esto
pero una cosa que es mala
¿no?
de todo lo que hemos hecho aquí
es que si yo por lo que sea
pues encima
hago esto
y no le pongo un título
y le diga save post
pues bueno
capaz me lo ha creado
sin título
pues no
no me lo ha creado sin título
de hecho
no me ha creado tampoco
el
no sé si
me puede petar
sin el título
no me debería petar
¿no?
sin el título
o no sé si podríamos ver
algún error
por ahí
pero desde luego
no
o sea
al menos
bueno un error
no tiene por qué
poner un error
¿no?
el tema es
que yo quiero
que me falle
o sea yo quiero
que me falle
si no le paso un título
si no le paso un slack
si no le paso nada de esto
yo creo que me dé
algún error
así que
para que me dé
algún error
lo que tendríamos que hacer
sería
justamente donde habíamos hecho
el action
aquí
¿vale?
lo que vamos a hacer
es asegurarnos
que lo estamos controlando
¿vale?
pero antes de controlarlo
os voy a leer un rato
porque
así
sí
¿dónde quedó el intento 4?
también me queda un poco
cuando le pongo un title
y todo esto
¿vale?
si no tengo mark
y si no tenemos slug
también
le decimos que error
slack
no sé qué
no sé cuánto
hostia
el error ya
aquí se me queja
porque property title
no sé qué
no sé cuánto
a ver
vamos a poner
content
false
slug
false
al final también
podría ser de otra forma
pero bueno
coño
este me
me sorprende
claro
porque tenemos que evitar
¿no?
si
object
object
values
ah mira
si igual
me lo había puesto bien
¿no?
si hay algún error
entonces
devolvemos los errores
pues nada
todavía
no le gusta
todavía
no le gusta
vamos a hacerlo
con object
keys
para ver
object
keys
errors
punto
length
mayor
return
errors
pues nada
pues voy a tener que dejar
como el string
ya está
y ya está
vale
esto sería
bueno puedo
al final
podría dejarlo como la
con quitar el error
y tal
o tiparlo
pero bueno
da igual
el tema es
que tengo un objeto aquí
que digo
si no tengo título
pues vale
el title
lo ponemos a true
el contenido a true
solo para saber
si tenemos un error
en el formulario
vale
y lo que hacemos aquí
es que miramos todos los errores
y devolvemos los errores
en el caso que lo tengamos
antes de crear el post
porque si no
podríamos crear un post
sin título
ni ninguna cosa de estas
vale
entonces
uy
he dejado esto por aquí
entonces
lo que podemos hacer aquí
igual que antes
estamos con el loader
recuperando
justamente
la información
con el action
también se puede hacer
hay un
por aquí
que es
use action data
vamos a recuperar
el action data este
y aquí
tendríamos la data
use action data
a ver
normalmente
yo creo que lo ideal
sería que
tener
un objeto
lo que te devolviese
fuese un objeto
y ya está
pero bueno
vamos a pensar
como que lo único
que puedes devolver
son errores
vale
a saco
pues lo que podemos hacer aquí
en el label
por ejemplo
bueno
los labels estos
semi label
que hemos puesto
es que
podríamos hacer
errors
lo vamos a hacer
defensivo
vale
porque
si no nos va a petar
y vamos a poner aquí
small
y title
required
vale
y esto mismo
lo vamos a hacer aquí
errors
vale
es lo que es required
y aquí
errors
content
y required
vale
pero fíjate que la validación
está pasando toda en el servidor
o sea
ni siquiera en el cliente
tenemos absolutamente nada
sino que simplemente
aquí en errores
debería hacer esto
evitar
como esto
lo devolvemos aquí
de hecho vamos a ponerlo así
vale
pues ya
debería evitar
crear el post
y tenemos la redirección
y todo esto
de esta forma
pues mostraríamos
al usuario
si algo mal ha ido
así que vamos a refrescar
esto por aquí
pam pam pam
si le doy a save post
vale
fíjate que pone
title is required
post is locked
si ahora
le pongo aquí
title
y le doy a save post
y todo esta
la validación
está ocurriendo
en el servidor
lo cual
está súper chulo esto
porque
uno
te está quitando
un montón
de código
que tendrías que tener
normalmente en el cliente
lo segundo
las validaciones
en el cliente
son inútiles
básicamente
¿por qué?
porque
tú haces una validación
en el cliente
y a ver
puede ser útil
para enseñarle al usuario
lo que te dé la gana
vale
pero
al final
lo que necesitas
de alguna forma
es asegurarte
que lo que llega
en el servidor
no es algo
que no quieres
que llegue
¿sabes?
porque si no
la gente va a intentar
meterte lo que te dé la gana
entonces
esto es muy
muy interesante
porque
estas validaciones
pasan en el servidor
que es donde te interesa
pero
tienes una forma
muy sencilla
de
en un momento
utilizar esta información
en el cliente
¿no?
entonces
a ver
esto
obviamente
es un poco
es un poco
aquella forma
¿no?
pero al menos
nos está ayudando
justamente
a evitar esto
¿no?
o sea
aquí podrías hacer
lo podrías hacer
con Juve
lo podrías hacer
con lo que te diese la gana
o sea
aquí podrías hacer
lo que tú quisieras
justamente
para validar
mejor los datos
nosotros lo estamos
haciendo así
un poquito
a lo bestia
entonces
una cosa
claro
esto está pasando
muy rápido
¿no?
entonces
vamos a poner
de hecho
en la documentación
lo hacen
de
en el create post
podemos ponerle
por ejemplo
pues
podemos hacer aquí
new promise
resolve
set time out
vamos a hacer que tarde
un segundo
¿no?
si ahora volvemos aquí
y hacemos aquí title
intento 4
intento 4
sí porque el intento 4
nunca apareció después
6 post
¿vale?
de hecho
es que hay una cosa aquí
que me parece
ves
está aquí el intento 4
pero hay una cosa
que me tiene un poco mosqueado
que es el hecho
que no me limpia
el post
y no me lo limpia
y me mosquea
porque no sé
por qué no me lo limpia
¿por qué no me lo limpia?
porque al hacer la redirección
me está llevando
al mismo sitio
pero por qué
no limpia
de hecho
en el formulario
aquí
aquí tienes una cosa
que es
document
reload document
que entiendo
que esto
no es lo que nos interesa
¿vale?
porque se perderán
unas cuantas cosas
pero claro
al darle
fíjate
si te fijas aquí
sí que verías
que sí que se recarga
el documento
entonces aquí
intento 5
intento 5
bla bla bla
y si miras aquí
verás
que aquí sí que vemos
claramente
cuánto tiempo ha tardado
¿no?
en este caso
hemos puesto 5 segundos
y ahí sí que ha tardado
¿no?
y aquí tenemos el intento 5
y sí que está
y perfecto
pero lo
y ahora sí que lo ha limpiado
entonces
no sé si es
o sea
tiene sentido
a lo mejor
que no lo limpies
si no recarga
pero tampoco me gustaría
tener que recargar
¿sabes?
tampoco me
me gustaría
poder limpiarlo
sin necesidad
de tener que
recargar la página
y me resulta extraño
que no lo haga
por defecto
es un poco raro
¿sabes?
o sea
no sé
si es que los inputs
a lo mejor
pueden tener algún tipo de
no sé
pero normalmente
debería
debería hacerlo
automáticamente
al menos en el
es que no
type text
name title
no sé
y creo que en el
getting started
tampoco hablan nada
de esto
creo que no hay
ninguna cosa
a ver
os voy a leer
a ver si alguien
tiene la solución
¿alguien tiene la solución?
no hay un método
en el form data
para limpiar los datos
lo hay
pero claro
es que
o sea
es que debería pasar
automáticamente
es muy raro
es muy raro
hola
midu
hola
gley
glesi
pasaba a decirte
que estoy mirando
el bootcamp
de javascript
y react
y es tremendo
un saludo genio
muchas gracias
hombre
muchas gracias
ese framework
es tremendo
la verdad es que
tiene buena pinta
tiene cosas chulas
tiene cosas chulas
vale
tengo todavía la duda
de por qué pasa esto
y me resulta
ah
espérate
espérate
que creo que
sé lo que puede ser
espérate
no
no es
vale
nada
no porque
el redirect
digo
a ver si no estoy
haciendo un return
del redirect
y entonces
por eso
se le va
la cabeza
vale
pues no
tengo ni idea
bueno
da igual
vamos a hacer otra cosa
para que
al menos
aunque eso no pase
ya me lo miraré
porque
ahora mismo
la verdad
no caigo
vamos a poner esto
a 5 segundos
lo vamos a dejar
sin recargar
y vamos a hacer una cosa
para que veamos
otra cosa
que es muy interesante
para evitar
el estado de loading
porque un problema
que tenemos
he puesto que tarde
5 segundos
en crear el archivo
si aquí ponemos
title
bla bla bla
y esto
y le doy
a save post
mira
voy a abrir aquí
la red
porque como no se limpia
no se porque
voy a limpiar la red
y le voy a dar
a save post
y aquí podemos ver
que aquí está
en pending
pero visualmente
el usuario
no ve nada
o sea
yo como usuario
ves ha tardado
5 segundos
pero como usuario
no he visto
absolutamente nada
de oye
que ha pasado aquí
esto realmente funciona
no funciona
que pasa
bueno
para esto
puedes utilizar
justamente un hook
que se llama también
use transition
que lo que te va a indicar
es la transición
que está ocurriendo
en la página
que significa esto
de transición
esto lo que significa
es bueno
está haciendo un submit
está recargando
que está haciendo
en este momento
sabes
entonces
utilizas el transition
use transition
y solo con esto
en el save post
aquí
podrías decirle
vale
pues la transición
transition
punto
tendrías
state
submission
type
lo que tú quieras
si estás en submission
vale
es porque estás haciendo
justamente
un submit
de un formulario
le podrías decir aquí
creating
y de hecho
también podríamos hacer
que esto fuese
disabled
vale
submision
state defined
hostia
esto es tipo
bolean
esto es tipo bolean
action submission
a ver
pero que devuelve esto
action submission
vale
pues nada
lo ponemos así
y ya está
vale no te quejes
vale
y aquí podríamos poner
create post
y de esta forma
sin ningún estado
ni nada
o sea
todavía no hemos utilizado
un set state
en todo esto
con esto
si yo refresco por aquí
y ponemos
the title
new slack
what
y le doy aquí
fíjate
que ahora
está haciendo el creating
he desactivado
justamente el botón
para que no vuelva a hacer
y cuando han pasado
los 5 segundos
vuelve a ponerse
en create post
y esto
es totalmente
o sea
no ve nada
el usuario
que esté pasando esto
o sea
el usuario
simplemente
o sea
el usuario
el estado
no lo tenemos aquí
con react ni nada
simplemente tenemos aquí
este check
esto es algo
que es totalmente nativo
y ya lo tendría
no se ve la pantalla
no hombre no
no me jodas
joder
joder
menos mal
by jokes
menos mal
esto me pasa cada 2x3
voy a hacer
me voy a comprar algo
me voy a comprar un mini
me voy a comprar una pantalla aquí
para que siempre esté esto aquí
porque es que lo malo
es que cuando pongo chrome
o pongo algo
me cambia la pantalla aquí
a otra cosa
y entonces ya no veo
¿sabes?
me cago en la leche
bueno
vamos a volver a ponerlo
si tengo un segundo monitor
tengo un segundo monitor
bueno
gracias by jokes
hombre
por hacerlo
si no
malca
¿cómo voy a desactivar el inter
si no tengo el inter?
lo volví a hacer
sí sí totalmente
a ver voy a ver
todas las veces
que os habéis estado cajando
que alguien nos salve
por amor de dios
que grande
hostia
midu está sin pantalla
pantalla midu
pantalla
ay que grande
cago en la leche
bueno
os lo explico en un momento
¿vale?
tiro para atrás
con lo interesante que estaba
con lo interesante que estaba
ay
vale
venga
os lo explico otra vez
¿vale?
muchas gracias
entonces cada vez se ocupa
ese m1 pro max
necesito un m1 pro max
o un ipad
¿sabes?
para ponerlo aquí
joder
¿no tienes un ipad?
no tengo un ipad
no tengo un ipad
¿qué hago en la leche?
ay que rabia
bueno
os lo vuelvo a comentar
¿vale?
el tema es
cuando
cuando yo creo aquí un post
¿vale?
vamos a crear aquí
no tienes pantalla
midu
otra vez
te ha pasado
¿vale?
cuando yo creo aquí un post
y le doy aquí a save post
ahora he hecho que
el post
tarde 5 segundos en crearse
¿vale?
le voy a dar
y fíjate
esto está en pendiente
esto está tardando
pero el usuario
no está viendo aquí
nada en la UI
no hay nada en la UI
que le esté indicando
que se está guardando
el post
¿vale?
o sea que se esté guardando
nada
o sea es que
podría volver a darle
oye esto no funciona
para solucionar esto
podemos utilizar aquí
un hook que se llama
use transition
¿vale?
use transition
entonces aquí tendríamos
el transition
transition
use transition
¿vale?
use transition
y este transition
nos va a
proporcionar
la información
de que se está haciendo
un submit
de un formulario
en lugar de tener
el tipo de state
de use loading
set loading
use state
¿vale?
todo esto
que muchas veces
tenemos en un montón
de formularios
a tomar por saco
todo eso
no lo necesitamos
porque ya tenemos
este use transition
que esto nos dice
básicamente
diferente información
el estado
en el que se encuentra
la página
si está haciendo
un submit
nos está dando
un hook
un montón de información
sobre la página
así que
este transition
lo vamos a poder utilizar
aquí
y decirle
vale
si
transition
punto
y de hecho
submisión
entonces
creating
post
¿vale?
y si no
create post
y para mejorarlo
todavía más
podríamos el botón
ponerlo en disable
si transition
submisión
es true
¿vale?
le pongo esto
porque si no
se me queja
porque submisión
no es un booleano
sino que puede ser
undefined
o puede ser
action submisión
y tal
y yo lo único
que necesito saber
es que no es undefined
¿vale?
bueno
otra forma sería
que sea diferente
a undefined
pero bueno
con esto
ya lo tendríamos
¿vale?
porque no lo convierte
a booleano
y con esto
lo que vamos a hacer
es que cuando vayamos aquí
a crear un post
voy a crear
ahora si se ve
la pantalla
oh my god
la pantalla
ya está
para
para lamerla
yeah
le voy a dar
a create post
¿vale?
recordemos
tarda 5 segundos
en guardar el post
le voy a dar
y fíjate ahora
que pone
creating post
está desactivado
el botón
y cuando termine
vuelve a poner
el create post
y todo esto
lo hemos logrado
sin poner ningún estado
en react
simplemente
utilizando este hook
que nos lo proporciona
remix
y que nos va a dar
toda esta información
esto
es justamente
este tipo de cosas
que tiene interesante
remix
¿no?
que es como que
se integra mejor
en la
en como serían
las aplicaciones
es como que
Next.js
está más preparado
a
no
o sea
no acompañarte
en la navegación
sino en que entregues
cuanto antes
la primera navegación
al usuario
¿sabes?
es como que
lo que quieren es que
enseñes cuanto antes algo
cuanto antes enseñes algo
pero le falta
más
el acompañamiento
¿no?
esto está muy pensado
más con la interacción
es una cosa que yo
en Next.js
por ejemplo
veo que le falta
¿no?
esto está pensado más
en la interacción
del usuario
con tu aplicación
esto es una cosa
que es súper interesante
está muy bien pensada
la validación
en el formulario
y una cosa
como más reactivo
no reactivo
sino que
diría eso ¿no?
como que tiene
más utilidades
pensadas en la interacción
del usuario
¿no?
es que reactivo
a lo mejor
a ver si es verdad
que reacciona
como automágicamente
¿no?
con esto de la acción
el tener la transition
Remix
te acompaña más
en todo el ciclo
de tu aplicación
y es como que
Next
está más
enfocado
a que
a que cargue rápidamente
la información
y se la enseñes
al usuario
el cómo haces después
por ejemplo
cómo haces un submit
del formulario
cómo
yo que sé
cómo creas
cosas y tal
es que
no le importa tanto
es verdad que puedes crear
en points
en Vercell
y en NextDS
es verdad
pero no tiene este tipo
de cosas
que la verdad
es que me parecen
súper útiles
que yo me imagino
que en algún momento
a lo mejor
pues empiezan a implementar
justamente porque
está muy potente
entonces
dice Navia
Navia Alcantara
dice diseño centrado
en usuario
diseño centrado
más en usuario
en cómo
el usuario
utiliza la página
en temas nativos
porque estamos viendo
que ofrece cosas
muy nativas
de la página
de la plataforma web
por ejemplo
el form data
es una cosa
que existe
realmente
en los formularios
pero claro
normalmente
solo está disponible
en el cliente
y está bastante bien
el hecho
de que te lo
te lo proporcionan
también en el servidor
y que puedes
ahí acceder
pues a los datos
y no hemos tenido
que
no sé
es como que piensas
la aplicación
como si fuese
una aplicación
universal
sabes
como que dice
es tanto de servidor
como cliente
te facilita
el cómo tienes
que tratar
esa interacción
del usuario
en el cliente
para que tú
no te preocupes
y te acompaña
en toda
en todo ciclo
de tu aplicación
eso es la sensación
que me da
Next te acompaña
solo al inicio
y remix
durante toda la interacción
efectivamente
efectivamente
es lo que a mí
me da la sensación
me da la sensación
me da esa sensación
Next
es que está súper bien
y a mí me encanta
pero
está más pensado
para eso
para que la primera
lo que ve el usuario
sea muy rápido
pues te genero
páginas estáticas
te hago un incremental
static regeneration
get server side props
y todo esto
pero no
no tiene tan
bien pensado
todo el tema de
por ejemplo
formularios
que hemos visto
en este caso
es como una mezcla
entre CSS y JS
hombre
bastante más
yo diría que
es una mezcla
entre
es que
yo diría que es un rubio
en Rails
pero con JavaScript
eso es lo que diría
remix
el loader
solo se ejecuta
en el server
y si quiero hacer lógica
en función de si
el server
se puede
claro
Julio
tú podrías hacer
en el componente
lo que te dé la gana
yo creo que el loader
el loader
siempre solo se ejecuta
en el servidor
siempre se ejecuta
solo en el servidor
pero al final
si solo quieres
que solo sea en el servidor
lo harías en el loader
si quieres que sea
en el cliente
lo podrías hacer
en un use effect
ya está
así de fácil
¿cómo pusiste
los 5 segundos?
bueno
lo que hice
aquí en el slack
hice
ah no perdón
en post
hice esta línea
un await
new promise
resolve
un set timeout
de 5000
milisegundos
y bueno
esta es la forma
de
como
sería como
simular un delay
básicamente
hablando de curva
de aprendizaje
¿cómo lo compararías
con nex?
muy buena pregunta
la verdad
a ver
creo que el remix
puede tener una curva
de aprendizaje
bastante alta
me da la sensación
que tiene muchas convenciones
y lo veo muy potente
esto que hemos visto
me da a mi la sensación
que lo que hemos visto
en estas dos horas
es como
el 10%
o el 20%
de la librería
necesitaríamos
mucho más tiempo
más ejemplos
más cosas
para realmente
no sé
o sea
tiene como un montón
de cositas
mirando un poco
la documentación
por encima
antes
me ha dado
la sensación esa
que tiene
muchas
muchas
muchas
muchas
muchas
muchas
cosas
no sé
tiene tela
bueno
apple roots
ya lo hemos visto
sobre todo
por esto
de exportar
mira
downloaders
outside of navigation
o sea
puedes llamar
a un loader
fuera de la navegación
tienes tema de mutaciones
tienes
ves
data rights
esto
use submit
use fetcher
puedes desactivar
el javascript
el error handling
no lo hemos mirado
casi
no lo van a volver
a poner de pago
no lo van a volver
a poner de pago
nunca
ya te lo digo yo
mira
tiene soporte
nativo
a mdx
esto está muy chulo
que nosotros
claro
esto ni lo hemos visto
ni de cerca
pero claro
esto es
interesantísimo
muchas de las cosas
que hemos hecho
en este ejemplo
en este
a modo demo
es que al final
se puede hacer
un import
directamente
de
de
de
markdown
o sea
tiene cosas
muy potentes
tener mdx
ui
optimística
y venga
estrategias
de cómo hacerlo
es que
tiene
tiene
muchas cosas
muy interesantes
y creo que
esto es solo
el principio
me da la sensación
que esto va a ir
va a ir para adelante
yo creo que
cuando tengamos
un montón de ejemplos
de cómo hacer
autentificación
cómo hacer este tipo
de cosas
es verdad que hay
dos tutoriales
a ver
veo que tampoco
ha triunfado mucho
el remix
entonces
no sé si haremos
este segundo tutorial
igual lo hago yo
por mi parte
pero
pero no sé
creo que tiene un montón
de cosas
y este
este segundo tutorial
es bastante más tocho
que ya tiene
base de datos
tiene un montón
de cosas más potentes
pero claro
es bastante más largo
tiene estilos
tiene todo esto
para hacer
con
con prisma
conectarlo a la base
de datos
o ver
cómo evitar el overfetching
bueno
tiene un montón de cosas
el deployment
no sé
igual lo podemos mirar
no sé si
si os gusta
¿qué le haría falta
a remix
para que el mercado
le preste más atención?
bueno
que empiece a utilizar
lo gente importante
¿se puede hacer un loader
en componentes
o solo es para páginas?
se puede hacer solo
para páginas
pero
con el nested roots
tú puedes tener
una ruta
dentro de otra ruta
dentro de otra ruta
entonces
al final
no habría ningún problema
en
tener más de un loader
en una ruta
¿no?
porque puedes tener
los nested roots
y eso es súper interesante
Chavito dice
que no le veo
no le veo amigos
bueno
al final
cada uno
puede ver
que le guste
o no le guste
¿necesita
un apocaide developer?
bueno
les escribiría
a ver
¿basáis la parte 2
de remix
en midudev?
sí
a ver
creo que no os ha gustado
o sea
en general
creo que no triunfa mucho
porque
si os ha gustado
no sé
igual
lo retomamos
creo que remix
puede ser algo interesante
de cara al futuro
no sé
me da la sensación
que
teniendo en cuenta
que tiene a
Kenzie Dodds
tiene a Michael Jackson
no el Michael Jackson
sino Michael Jackson
el de Ria Ruter
teniendo en cuenta
que
Jason Miller
ha colaborado
con ellos
no sé
creo que puede tener
buena pinta
y puede ser una alternativa
interesante a Next DS
en algunas cositas
no sé
yo no le perdería
la vista
yo lo voy a estar
trasteándolo más
voy a intentar
hacer alguna cosa
con ello
así que
no sé
seguro que lo vemos
en otro directo
si os gusta
si no
nada
si no
haremos otra cosa
puedes hablar con ellos
tiene muchos seguidores
y por ahí sale promo
pues igual
quería hablar con ellos
a ver qué pasa
quería hablar con ellos
a ver
de hacer alguna cosita
con tu voz de profeta
seguro que el siguiente año
la rompe
hombre a ver
no profetizo
que llegue al nivel
de Next DS
no os voy a engañar
solo profetizo
que creo que va a ser
una alternativa interesante
pero no va a llegar
al nivel de Next DS
Next DS ya está
en otro nivel
Next DS
hay que tener en cuenta
que Vercell tiene
150 empleados
por lo menos
la gente de Remix
son 3
entonces
es que
no sé
ha pillado mucho
un acelerón ya
que es muy difícil
de parar
Next DS
y no va a ser Remix
lo siento
de verdad
pero no va a ser Remix
así que
eso es lo que creo
pero creo que es interesante
de aprender
creo que tiene su uso
y yo lo voy a trastear más
eso creo