Construyendo Mejores Sitios Web con Remix

Hola a todos, ¿qué tal? Mi nombre es Michael Jackson. Estoy muy emocionado de estar aquí con ustedes hoy en la Cumbre de React. Muchas gracias por sintonizar mi charla. Estoy emocionado de compartir con ustedes lo que he estado trabajando hoy, específicamente, quiero hablar sobre Remix, que es un marco web que he estado construyendo durante el último año más o menos con mi socio comercial, Ryan Florence. Juntos, hemos estado trabajando en el Router de React durante los últimos cinco o seis años, que es un software de código abierto, es bastante grande, es utilizado por muchos personas alrededor del mundo para construir experiencias web increíbles. Remix está construido sobre el Router de React, las cosas increíbles que estamos construyendo para Remix en realidad van a regresar al Router de React. La idea detrás de Remix es que creemos que debería haber una experiencia increíble para desarrollar sitios web con el Router de React, con React, sitios web que están construidos sobre fundamentos web y que son simplemente increíbles para las personas, en términos de accesibilidad, en términos de rendimiento, y en términos de flexibilidad y potencia de las herramientas que tienes a tu disposición para construir cosas realmente geniales. Así que estoy realmente emocionado de compartir Remix con ustedes hoy. Y pensé en hacer una demostración rápida. Solo tengo 20 minutos, así que esto va a ser bastante rápido. Pero quería mostrarles cómo, saben, darles un pequeño recorrido por Remix y algunas de las cosas en las que hemos estado trabajando, y mostrarles cómo es construir una pequeña, saben, solo una pequeña aplicación con Remix. Así que en realidad voy a estar usando nuestra plantilla de inicio Express. Así que tenemos algunas de estas plantillas de inicio. Tenemos algunas, tenemos una ahora mismo para Express, que puedes implementar en cualquier servidor privado virtual antiguo que quieras o cualquier, sabes, muchos diferentes proveedores de nube simplemente ejecutarán aplicaciones Node. También tenemos una para Vercel. También tenemos una para arquitecto, que es, sabes, ejecutándose en AWS lambda. Tenemos soporte en camino para Netlify, para Firebase, y para los trabajadores de Cloudflare. Así que nuestro plan es con Remix simplemente soportar cualquier lugar donde quieras implementar una aplicación web, porque todos tienen sus diferentes, sabes, fortalezas y Remix es un único modelo de programación que puede funcionar en cualquiera de ellos. Así que voy a empezar con nuestro inicio Express. Tengo una pequeña aplicación aquí que en realidad, he estado trabajando en ella solo un poco. Es básicamente el inicio Express, pero he añadido algunos componentes. Tengo Tailwind funcionando aquí, tengo PostCSS funcionando, y ya tengo un par de rutas aquí. Así que vamos a empezar justo en la cima, justo en nuestros puntos de entrada. Así que tenemos dos puntos de entrada aquí en tu carpeta de aplicaciones. Este es el punto de entrada del cliente, así que este es un viejo hidrato de DOM de React normal, y el componente que estamos renderizando es nuestro componente de navegador Remix. Este es el que renderizas cuando llegas al navegador, y así tienes control total sobre tu punto de entrada si quisieras hacer algo globalmente en el navegador, puedes seguir adelante y hacerlo aquí en tu punto de entrada del cliente. En tu punto de entrada del servidor, esto normalmente se ejecuta en Node, pero esta es una función que es básicamente responsable de renderizar el HTML. Así que Remix es completamente aplicaciones de React renderizadas en el servidor, ¿verdad? Vas a obtener toda esa bondad de SEO, todo lo que te gusta, enviando HTML real por el cable, no estamos enviando solo una carcasa, y luego lo llenas más tarde. Este es HTML real. Así que estamos usando un renderizado estándar a cadena aquí

Y esta vez en nuestro cargador, lo que vamos a hacer es obtener la sesión. Y vamos a buscar un mensaje de error. Así que si había un mensaje de error, haremos una sesión.get el error. Y luego los data para esta ruta realmente van a ser algunos datos JSON data. Enviaremos ese mensaje de error. Y también enviaremos algunos encabezados. En este caso queremos confirmar una sesión de nuevo. Porque el caso con estos mensajes flash es que sólo persisten durante una solicitud. Así que si vas y haces un get en una clave que fue establecida con un flash, vas a necesitar ir adelante y confirmar esa sesión de nuevo. Porque el contenido de la sesión en realidad cambió.

Bien, entonces lo sacaremos de aquí. Así que el error es usar la ruta data. Y vamos a añadir una propiedad de error a nuestro componente de formulario de inicio de sesión. Para que podamos ir adelante y podemos mostrar un error. Así que en nuestro componente de formulario de inicio de sesión, añadamos la propiedad de error. Va a ser una cadena opcional. Y digamos que si tenemos un error, lo pondremos aquí. Lo pondremos en un texto rojo. Lo centraremos. Lo pondré justo aquí.

OK, volvamos al navegador y probémoslo para ver si realmente funciona. Así que si intentamos iniciar sesión con algunas credenciales basura, deberíamos ver el mensaje de error aquí. Genial. Así que enviamos credenciales inválidas. Establecimos el error en la sesión. Lo enviamos de vuelta al navegador, el navegador envió la cookie de vuelta con la sesión, sacamos el mensaje de error, y dijimos, Oye, puedes mostrarlo en el componente del formulario de inicio de sesión. Y luego volvimos a renderizar la página para el formulario de inicio de sesión.

¿Quieres saber algo que es realmente genial? Mira la console del navegador aquí. No estamos usando ningún JavaScript en esta aplicación en absoluto. Esta es una aplicación completamente renderizada en el servidor. No hay ningún JavaScript ejecutándose en el cliente. Si quisiéramos que JavaScript se ejecutara en el cliente, todo lo que tendríamos que hacer es volver a nuestra ruta raíz. ¿Y ves este elemento de scripts aquí? Podríamos simplemente volcar esto en la página. Y vamos a refrescar. Así que ahora míralo, ahora tenemos React en la página, React router está en la página. Nuestro componente está hidratado. Realmente pasamos por el paso completo de hidratación allí. Pero no necesitábamos ninguno de ese JavaScript para code el flujo que ya hicimos, ese simple flujo de inicio de sesión. Esto es lo que queremos decir cuando hablamos de volver a los fundamentos de la web. JavaScript debería ser usado para mejorar tu sitio, para mejorar progresivamente tu sitio.

Para aquellos de ustedes que han estado aquí por un tiempo, saben, están familiarizados con ese término. No necesitamos JavaScript para hacer todo. No necesitamos cargar cientos de kilobytes de JavaScript o incluso megabytes de JavaScript solo para un simple formulario de inicio de sesión. Entonces, estos son los tipos de cosas que nos interesan.

Hay mucho más que me encantaría contarles sobre Remix, pero solo me dieron unos minutos en esta charla. Nos encantaría contarles más sobre ello en Remix.run. Todavía estamos en una vista previa para desarrolladores. Esperamos lanzar una beta más adelante este mes. Si estás interesado, puedes registrarte en Remix.run. O si estás interesado en seguir lo que estamos haciendo, síguenos en Twitter en Remix_run. Si estás interesado en seguirme personalmente, soy MJackson en Twitter y GitHub y en todas partes. Así que gracias de nuevo por ver la masterclass y esperamos verte por aquí.

Muchas gracias, Michael. Quiero decir, todos ustedes que están escuchando en casa, vayan al chat de P&A y denle a Michael un gran aplauso por esa increíble charla. Realmente la disfruté. Además, quedé muy impresionado por la codificación que hizo. Me resulta muy difícil code cuando hay una cámara o alguien grabándolo. Definitivamente le voy a pedir algunos tips para mí mismo.

Pero tenemos muchas preguntas que nos llegan de ustedes. No dejen de enviar sus preguntas. Se las voy a pasar a Michael. Pero primero, veamos los resultados de la pregunta que Michael les hizo. Michael preguntó si usan o han usado alguna vez Remix y redoble de tambores. Los resultados son que el 98% de ustedes aún no lo han usado. Bueno, eso no es una sorpresa considerando que aún no es público. Pero tal vez podrán usarlo pronto. Estoy bastante seguro de que muchos de ustedes están emocionados por ello.

Pero estoy súper emocionado de invitar al escenario conmigo ahora a Michael, ¿cómo estás, Michael? Hola, me alegra estar aquí. Gracias por invitarme. Muchas gracias. Realmente aprecio la charla detallada que diste. Voy a verla de nuevo. No puedo esperar porque fue muy agradable verte construir rápidamente ese flujo. Gracias, hombre. He tenido mucha práctica. Hemos estado haciendo esto de la formación en React durante unos cinco o seis años. Y por mucho que me gustaría ser alguien que hace diapositivas bonitas y ordenadas, encuentro que estoy más cómodo simplemente hackeando algo de code en mi editor. Así que eso es siempre a lo que recurro cuando doy una presentación.

No, es impresionante. Ahora tenemos tantas preguntas, así que voy a entrar directamente. La primera pregunta que tenemos de Vasilis dice, ¿cuál dirías que es la mayor razón por la que deberían elegir usar Remix en lugar de Nuxt.js o Gatsby u otro framework que soporte el lado del servidor? Sí, entonces la idea principal detrás de Remix es que deberías poder usar tus tecnologías web favoritas o tu pila favorita. No es muy dogmático. Entonces, por ejemplo, ponemos Remix y lo tomamos y lo ejecutamos en AWS Lambda o tomamos Remix y lo ejecutamos en Cloudflare Workers o simplemente lo ejecutamos en una aplicación Express. Puedes usar Tailwind con él. Puedes usar CSS y JS con él. Así que es súper flexible. Y por supuesto, todo está construido sobre React Router, que si estás familiarizado con el concepto de enrutamiento anidado es en realidad un concepto muy poderoso que nos permite poner solo el code que necesitas en la página. Así que solo el JavaScript, solo los estilos, solo los data para esa ruta en particular o el conjunto de rutas activas están en la página a la vez. Así que es muy divertido y es, honestamente, más como arraigado en los fundamentos web, ¿verdad? Así que cosas como el soporte para el botón de retroceso, soporte para forms para mutaciones de data, cosas como esas, en lugar de cargar un montón de JavaScript para hacer tus mutaciones de data, simplemente usa un formulario HTML, cosas así. Así que nos hemos divertido mucho construyéndolo y con la retroalimentación que hemos recibido de la gente hasta ahora es que ellos también se están divirtiendo mucho. Así que tenemos un excelente servidor Discord en funcionamiento donde estamos todo el tiempo, respondiendo preguntas sobre él. Así que sí, definitivamente deberías venir a verlo si estás interesado en construir sitios impresionantes. Nos estamos divirtiendo mucho con esto. Genial. Sé que tenemos tantas preguntas, voy a volar a través de ellas. Pero me encanta lo que dijiste sobre la construcción en donde la gente puede usar las tecnologías web que ya aman y creo que eso es tan bueno para poder atender a todas esas personas. Una pregunta que realmente me gusta es, de George B, ¿tienes algunos ejemplos de casos de uso específicos donde remix realmente brilla? Um sí creo que realmente brilla en el caso en que tú... Bueno, como el caso de estilo por ejemplo, ¿verdad? CSS es por defecto global, ¿verdad? Tienes un espacio de nombres donde tienes que poner todos tus nombres de clase, todos tus IDs, etc. Y así que típicamente lo que sucede cuando la gente quiere desplegar su CSS o su estilo es que tienen que ir y sabes que tomarán sus nombres de clase CSS y los desfigurarán solo para asegurarse de que todos son únicos que no entran en conflicto con los nombres de clase CSS de otros componentes u otras cosas que pueden estar en la página y la verdad es que simplemente no saben lo que va a estar en la página así que desfigúralos todos y entonces no habrá conflictos. Uno de los casos donde este es un caso donde Remix realmente brilla y las rutas anidadas de las que te hablaba porque con React router en realidad tienes dos o tres rutas en la página y automáticamente añadiremos y quitaremos el CSS de y para la página solo para las rutas que están activas en la página. Así que podrías tener dos rutas hermanas que tienen nombres de clase idénticos pero eso está bien porque nunca van a estar en la página al mismo tiempo y así que por cierto no vamos a desfigurarlos simplemente no estarán allí así que no tendrás los conflictos. Así que ese es uno de los casos en los que creo que donde Remix realmente brilla es en evitar algunos de los aros por los que hemos estado saltando con CSS. Definitivamente hago todo lo posible para evitar aros. Nos estamos quedando sin tiempo y hay tantas preguntas entrando pero gente, aquellos de ustedes si no respondemos a su pregunta quiero que sepan que pueden unirse a Michael en su sala de discussion sobre Remix con Kent C Dodds y la sala de discussion estará en el discord así que vayan y encuentren ese canal y el enlace está en la línea de tiempo en el sitio web. Pero justo antes de irnos hagamos un fuego rápido de algunas más de estas preguntas solo tres rápidas. ¿Estamos volviendo a la era de PHP? ¿Sí o no? Oh absolutamente espero que sí. Así que la cosa es, sabes, PHP se usaba para generar HTML. HTML es lo que nos importa, ¿verdad? Ese es el lenguaje de la web ese es el lenguaje que los navegadores entienden. Sí, es agradable renderizar en el lado del cliente tus cosas y construimos React router que es un router framework renderizado en el lado del cliente así que sabes que absolutamente pensamos que puedes mejorar la web con cosas renderizadas en el lado del cliente pero el núcleo es HTML así que puedes pensar en Remix como un framework para crear documentos de calidad impulsados por HTML mucho como lo era PHP. Sí, HTML de calidad eso es a lo que siempre queremos llegar como desarrolladores. Muchas gracias, realmente aprecio que hayas venido hoy. Hey gracias Nathaniel, ha sido un placer. Nos vemos, adiós.