Componentes Full Stack

Rate this content
Bookmark

Remix es un framework web que te brinda el modelo mental simple de una Aplicación de Múltiples Páginas (MPA) pero con el poder y las capacidades de una Aplicación de Página Única (SPA). Uno de los grandes desafíos de las SPAs es la gestión de la red, lo que resulta en una gran cantidad de indirección y código con errores. Esto es especialmente notable en el estado de la aplicación, que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).


En esta charla, Kent demostrará cómo Remix te permite construir componentes de IU complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o cualquier otra cosa que hagas por diversión.

37 min
18 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

RemixConf EU discutió los componentes full stack y sus beneficios, como unir el backend y la IU en el mismo archivo. La charla demostró la implementación de un combo box con funcionalidad de búsqueda utilizando Remix y la biblioteca Downshift. También destacó la facilidad de crear rutas de recursos en Remix y la importancia de la organización del código y la mantenibilidad en los componentes full stack. El orador expresó gratitud hacia el público y discutió el futuro de Remix, incluyendo su adquisición por Shopify y el potencial de colaboración con Hydrogen.

Available in English

1. Introducción a los Componentes Full Stack

Short description:

Estoy emocionado por RemixConf EU y hablar sobre los componentes full stack. Estoy trabajando en Epicweb.dev, mi proyecto a tiempo completo ahora. Esta charla es una demostración de componentes que incluyen código de interfaz de usuario y código del servidor. Hablaremos sobre Remix, nuestro framework full stack favorito.

¿Qué tal amigos de Remix? Estoy muy emocionado por RemixConf EU y estoy realmente emocionado de hablar con todos ustedes sobre los componentes full stack, así que vamos a hablar sobre llevar la colocación al siguiente nivel.

Entonces, una cosa que quería mencionar rápidamente es que estoy trabajando en Epicweb.dev, si aún no lo has visto, definitivamente échale un vistazo. Ahora es mi proyecto a tiempo completo, es increíble. Y todas mis diapositivas y todo para esta charla están en mi GitHub, así que puedes echar un vistazo allí.

Esta charla será una demostración de componentes que incluyen tanto el código de interfaz de usuario como un código del lado del servidor y vamos a hacer mucho código, así que sí, prepárense. Vamos a hablar sobre Remix, por supuesto, nuestro framework de interfaz de usuario favorito. Bueno, framework full stack, no solo de interfaz de usuario, y eso es parte de lo que trata esta charla.

2. Explorando las características de Remix

Short description:

Remix nos permite unir el backend y la interfaz de usuario en el mismo archivo. Podemos construir interfaces de usuario que no se centren en las URL, como el botón de 'Me gusta' de Twitter. Vamos a demostrar un combo box que realiza una búsqueda. Tenemos una aplicación en ejecución con una ruta para obtener clientes. Podemos exportar un componente que consume el cargador. Estamos utilizando la biblioteca Downshift para la experiencia del combo box.

Así que Remix nos permite unir el backend y la interfaz de usuario de una manera que nunca se había hecho antes con el cargador y la acción y nuestra interfaz de usuario, todo en el mismo archivo. Y esta es una demostración bastante simple de cómo funciona desde una perspectiva de ruta. Así que tenemos nuestra ruta de proyectos y aquí tenemos nuestro cargador para cargar esos proyectos y tenemos nuestro formulario para agregar nuevos proyectos y la parte del backend para esa mutación.

Pero a veces tenemos interfaces de usuario que no están tan centradas en las URL, por ejemplo, el botón de 'Me gusta' de Twitter, cuando hago clic en ese botón de 'Me gusta', eso no me llevará a otro lugar, no lo renderizo solo en una página especial que tiene una ruta específica, renderizo el botón de 'Me gusta' para cada uno de los tweets que están en la página y eso no funciona realmente muy bien como algo que quieras colocar en un cargador o una acción para una ruta en particular y aquí hay otro ejemplo de un combo box que realiza una búsqueda y esto es lo que vamos a demostrar hoy.

Entonces, tengo una implementación de esta aplicación aquí mismo, aún no estamos renderizando el combo box porque lo vamos a construir juntos y conectarlo al backend y será genial. Así que eso es todo. Es hora de la demostración. Entonces, lo primero es que tenemos esta aplicación en funcionamiento aquí mismo, estamos en la versión 01.b4 de la aplicación y estamos en el directorio de la aplicación bajo rutas y bajo este directorio de recursos es donde encontraremos los clientes. Entonces, vamos a tener esta ruta para /recursos/clientes y eso es lo que vamos a utilizar para obtener un montón de clientes.

Ahora, una cosa realmente genial de Remix es que si no tienes una exportación predeterminada de tu módulo, Remix tratará tu módulo como un recurso. Y lo que queremos decir con eso específicamente es que puedo decir exportar una función asíncrona, ups, una función, vamos, ahí, llamada cargador y aquí voy a devolver JSON y eso JSON en realidad vendrá de Remix run node y diremos hola mundo. Y si guardo eso y vengo aquí, puedo ir a recursos, clientes y voy a obtener hola mundo. Ahora, no hay nada especial en el directorio de recursos aparte del hecho de que a mi editor parece gustarle darle un icono especial, pero no hay nada especial en esto. Podemos llamarlo como queramos y resulta que me gusta la URL para que esto funcione es tener un /recursos y eso es todo. Entonces, donde queremos que esté esa URL, ahí es donde estará el archivo. Así que al tener una exportación de cargador pero sin una exportación predeterminada, esto es solo una solicitud regular para como una solicitud de API. Entonces, con eso en su lugar, ahora podemos construir una interfaz de usuario que interactúe directamente con este cargador que realiza solicitudes fetch. Pero lo que es realmente genial de Remix es que en realidad podemos agregar un montón de otras exportaciones también. Podemos exportar const koala equals Kodi, como si no importara. Podemos hacer lo que queramos aquí y Remix simplemente lo ignorará en sus compilaciones. Entonces, lo que eso significa es que en realidad podemos exportar un componente aquí que consuma este cargador y eso es exactamente lo que vamos a hacer. Y como sé que probablemente no te importa verme escribir un montón de JSX, en realidad he escrito todo el JSX allí. Así que aquí está nuestro cargador, es exactamente lo que teníamos antes, pero luego tenemos un montón de otro JSX en aquí que, como dije, probablemente no te importa verme hacer todo eso. Así que saltando sobre la parte de JSX, la parte más importante e interesante aquí es que estamos usando este use combo box, que es un hook de Downshift. Downshift es una biblioteca que construí hace años cuando estaba en PayPal, y es para hacer esta experiencia de combo box para nosotros. Y todo lo que necesitamos hacer es proporcionarle los elementos y podemos responder a los cambios de valor de entrada a medida que el usuario escribe. Así que eso es perfecto. Eso es exactamente lo que necesitamos. Y con eso estamos exportando este combo box, pero todavía es solo una ruta de recurso. No hay nada especial pasando aquí.

3. Implementando el punto final y consultando clientes

Short description:

Esto es simplemente llamar a un punto final y obtener la respuesta. Ampliaremos el cargador y requeriremos autenticación. Obtendremos la URL y la consulta de la solicitud. Buscaremos clientes utilizando Prisma y SQLite. Enviaremos los clientes coincidentes en la respuesta.

Esto es literalmente simplemente llamar a un punto final y obtener cualquier respuesta que hayamos enviado. Así que hagamos algunas cosas con este punto final. Ampliaremos este cargador.

Por un lado, personalmente no quiero que las personas puedan acceder a este punto final si no están autenticadas. Entonces vamos a decir, Require User. Y pasaremos la solicitud. Ahora obtenemos esa solicitud en nuestro cargador, por supuesto, así que pasaremos esa solicitud. Usaremos LoaderArgs. Ahí vamos.

Y con eso, ahora todavía puedo hacer una solicitud a esto, pero si voy en modo incógnito, voy a ser redirigido al inicio de sesión. Así que eso es bueno. Recuerda, todos tus cargadores son básicamente puntos finales de API de todos modos. Cualquiera podría hacer una solicitud curl a esa URL y acceder a todo lo que tienes en esa URL. Así que necesitas proteger tu cargador y así es como lo vamos a hacer aquí.

Lo siguiente es obtener la URL de la solicitud.URL. Convertir esto en un objeto URL para poder obtener la consulta de URL search-params.get. Y simplemente haremos la consulta completa aquí. Y queremos que la consulta sea o bien una cadena o nula en este caso. Vamos a establecer eso como una cadena por defecto. Así que siempre será una cadena. Ahora puedo buscar clientes.

Y esto se implementa utilizando Prisma y SQLite es cómo está configurado esto. Pero esta búsqueda de clientes podría ser una implementación que realiza una solicitud fetch a otro servicio aguas abajo o a un backend de Rails o PHP, o lo que sea. Esa parte no es importante. Solo el hecho de que tenemos algún mecanismo para enviar esta consulta a donde realmente vamos a buscar los clientes. Así que pasaremos esta consulta y obtendremos nuestros clientes. Estos son los clientes coincidentes. Y luego, con eso, lo enviaremos en nuestra respuesta. Así que ahora, si hago esa solicitud, no obtendré nada. Si digo, consulta S, aún no obtendré nada porque algo salió mal.

4. Implementando el Fetcher de Búsqueda de Clientes

Short description:

Esta es la consulta correcta. Vamos a usar los parámetros de búsqueda de URL. Olvidamos esperar, pero ahora podemos obtener los clientes y buscar los específicos. La clave especial es nuestro useFetcher, que nos conecta con la interfaz de usuario. Implementamos el Fetcher de Búsqueda de Clientes con seguridad de tipos.

Así que no, esa es la consulta correcta y consulta aquí y consulta allá. Oh, esto no es bueno. Así que vamos a usar los parámetros de búsqueda de URL. Oh, maldición. Tendré que empezar de nuevo. Oh, ya sé qué es. No voy a empezar de nuevo. Olvidé esperar. Qué tonto de mi parte.

Ahora vamos a obtener los clientes. Ahí vamos. De acuerdo. Así que tenemos todos nuestros clientes allí, luego podemos buscar los específicos. Y podemos obtener una matriz de todos los clientes que coinciden. Así que eso es exactamente lo que estamos buscando para la ruta de la API.

Ahora aquí está la clave especial. Esto es lo que realmente nos conectará con la parte de la interfaz de usuario, es nuestro useFetcher. Así que Cody el Koala, hola. Aquí está Cody. Cody nos dirá que necesitamos implementar Fetcher aquí. Así que vamos a decir Fetcher, o lo llamaremos Fetcher de Búsqueda de Clientes. Puedes llamarlo como quieras. Realmente no importa. Y diremos useFetcher justo aquí. Y luego, para que los datos con los que este Fetcher va a interactuar estén completamente tipados, voy a decir typeof loader. Ahí está mi cargador justo aquí. Obtengo seguridad de tipos para mi Fetcher de Búsqueda de Clientes. Y ese Fetcher de Búsqueda de Clientes tendrá una propiedad de datos en él. Y si esa propiedad de datos existe, puede que no. Porque en la renderización inicial, no estamos llamando a este cargador desde el principio.

5. Manejo de Datos Indefinidos en TypeScript

Short description:

Lo llamamos cuando el usuario está buscando, ¿verdad? Si no hay datos, entonces eso es indefinido. Si los hay, tendremos clientes. Así que nuestros clientes serán un array. Ahora TypeScript está contento y nuestro cliente seleccionado tiene el tipo correcto.

Lo llamamos cuando el usuario está buscando, ¿verdad? Y si no hay data, entonces eso será indefinido. Pero si los hay, entonces tendremos clientes. Así que tendremos data Operador Elvis Customers. Y si eso no existe, entonces esos clientes serán un array vacío. Y con solo ese cambio, ahora TypeScript está mucho más contento. Porque esta definición de tipo aquí, nuestros clientes van a ser un array de clientes. Y ahora este tipo es correcto. Y así nuestro cliente seleccionado tendrá un tipo correcto. Y el tipo que pasamos a lo largo de use combo box.

6. Realización de la solicitud Fetch

Short description:

Necesitamos realizar una solicitud fetch cada vez que cambie el valor de entrada. Downshift proporciona una API para detectar estos cambios. El buscador de clientes de búsqueda tiene opciones para realizar la solicitud. Utilizaremos la opción de envío, que facilita la serialización de los parámetros de consulta. Manejaremos el caso en el que la consulta sea indefinida asignando una cadena vacía.

Así que es realmente genial poder tener una seguridad de tipo completa en toda la red para un componente que se utilizará en toda la aplicación. ¿Quién sabe dónde se usa? Entonces, la última parte de esto es hacer realmente la solicitud. Y para hacer esta solicitud fetch, simplemente queremos hacer una solicitud cada vez que cambie el valor de entrada y downshift nos proporciona esta API para saber cuándo cambia el valor de entrada. Y lo que dirá es el buscador de clientes de búsqueda. Y hay un par de opciones aquí. Tenemos .form, que podríamos usar si esto fuera un envío explícito en el que el usuario hace clic en un botón de envío. Ese no es nuestro caso. Esta es una mutación imperativa o una consulta imperativa que debemos hacer como resultado de algunas otras interacciones del usuario. Entonces no podemos usar form. También está load, que podemos usar para hacer una solicitud GET con parámetros de consulta, pero tenemos que serializarlos nosotros mismos. Así que no quiero usar load, voy a usar submit porque esto hace que sea mucho más fácil serializar esos parámetros de consulta. Y en realidad, GitHub Copilot está bastante cerca aquí. Esto está quejándose aquí porque la consulta solo puede ser una cadena, no se puede asignar indefinido, un valor de entrada en los cambios que se dieron es opcional. Puede que no esté ahí. Así que simplemente agregaremos, olvidé cómo se llama esa sintaxis, coerción o algo así, algo así. Si el valor de entrada es nulo o indefinido, entonces terminaremos con una cadena vacía.

7. Adding the Get Method and Rendering the Component

Short description:

Implementamos el método como un get, pero podría ser una acción. La URL de acción es para el cargador dentro de resources/customers.tsx. Podemos usar este componente en cualquier lugar de nuestra aplicación y seguirá conectado al cargador. Lo usaremos en la ruta de nuevas facturas de ventas para elegir un cliente para una nueva factura. Importar desde el directorio de rutas generalmente no se recomienda, pero esta es una excepción. La funcionalidad funciona actualmente y podemos solucionar el spinner.

Ahora la última pieza que necesitamos agregar es un método de get, o minúscula get aquí. Y eso es así porque hemos implementado esto como un cargador. Podríamos implementarlo como una acción y tener nuestro método como cualquier cosa excepto get, como un post o un put o algo así, pero estoy contento con que sea un get. Y luego, um, y para los puntos finales de consulta, generalmente tiene más sentido que sea un get, pero sí, hazlo como quieras.

Lo genial es que no tienes que meterte en 30 archivos diferentes o múltiples repositorios para hacer este cambio, simplemente un día decides, sabes qué, quiero hacer esto como una acción en su lugar y simplemente lo cambias aquí mismo en el mismo archivo, lo cual creo que es genial.

De acuerdo. Y luego lo último es la acción. Esta acción es la URL a la que se va a acceder con esta consulta. Y la URL es la URL de este cargador, que ya hemos establecido que está dentro de resources, customers, TSX. Así que vamos a decir slash resources, slash customers. De acuerdo. Y eso es todo, hemos terminado esta característica. Y funciona perfectamente. Pero necesitamos renderizar realmente este componente. Y esta es la parte realmente genial. Hasta ahora, esto se siente un poco como tu ruta típica de remix y todo porque tienes tu cargador, tienes tu tipo de cargador, como todo se siente muy similar a lo que estás acostumbrado a construir en una ruta de remix. Pero la parte genial es que en realidad podemos usar este componente en cualquier lugar de nuestra aplicación y seguirá conectado a este cargador. En particular, la parte de la aplicación en la que queremos usarlo está dentro de nuestras ventas facturas nuevas cuando creamos una nueva factura para que podamos elegir qué cliente queremos. Y si bajamos aquí, ya tenemos a Cody ayudándonos con las props que necesitamos pasar y todo. Así que tenemos nuestro combo box de clientes, que vamos a importar desde rutas, resources, customers. Por lo general, no recomiendo hacer ninguna importación desde el directorio de rutas. En general, solo pienso que no es una forma segura de hacer las cosas. Pero esta es una excepción que creo que es totalmente legítima y es totalmente increíble. Así que eso es todo lo que vamos a hacer en la pieza del combo box de clientes aquí en la nueva ruta. Y con eso en su lugar, si vuelvo aquí y creo una nueva factura, entonces tengo mi combo box de clientes. Ahora, actualmente lo tenemos configurado en true y podemos solucionarlo en un segundo. Pero lo genial es que esta funcionalidad actualmente funciona perfectamente mientras hago cambios y puedo seleccionar un cliente y todas esas cosas. Así que eso es bastante genial. Tenemos un componente que está conectado a su backend y todo en un solo archivo. Lo último que quiero hacer es solucionar el spinner porque eso me molesta.

8. Implementación del Spinner y Conexión con el Backend

Short description:

El estado pendiente se determina mediante SearchCustomerFetcher.state. Si el estado no está inactivo, se muestra el spinner. Para evitar un destello del estado de carga, se agrega un retraso utilizando el paquete useSpinDelay. Esto garantiza una transición suave y proporciona un agradable estado pendiente para los usuarios. El componente se puede renderizar en toda la aplicación, conectado al backend. También se puede empaquetar como un paquete npm para una fácil integración con otros proyectos.

Y si bajamos aquí, tenemos nuestro mostrar spinner, y nuestro estado pendiente va a venir de nuestro fetcher. Así que tendremos nuestro SearchCustomerFetcher.state. Y el estado puede ser inactivo, cargando o enviando. Básicamente, si está cargando o enviando, sabemos que estamos en un estado pendiente. Normalmente, determino si estamos en un estado pendiente diciendo, ¿el estado no está inactivo? Si no está inactivo, entonces estamos pendientes.

Hay una diferencia sutil entre enviar y cargar, donde cargar va a obtener algunos datos, enviar es cuando el usuario está enviando datos. Pero en nuestro caso, creo que es razonable decir que si el estado no está inactivo, entonces podemos mostrar el spinner.

Entonces, con eso en su lugar ahora, podemos ver que no hay estado de carga. Pero si observas con atención, es posible que veas un destello del estado de carga, y eso no es genial. Hay un par de opciones aquí. Puedes agregar un retraso de transición o algo así. Pero el problema es que si la solicitud se realiza en los 50 milisegundos del retraso de transición que pongas allí, obtendrás un destello del estado de carga. Es prácticamente imposible evitarlo sin un poco de ayuda adicional.

Básicamente, lo que necesitamos hacer es decir que no muestre el estado de carga a menos que sepas... bueno, pongamos un retraso porque eso tiene sentido. Si está dentro de los 100 milisegundos, no muestres ningún estado de carga en absoluto. Pero si muestro algún estado de carga, entonces debemos mantener el spinner durante otros 300 milisegundos aproximadamente, solo para evitar un destello, porque es mucho mejor mostrarlo durante más tiempo del necesario que mostrar un destello del estado de carga. Hay un paquete creado específicamente para resolver este problema. En realidad, fue creado para mi sitio web por Stefan Meyer, quien me ayudó a implementar mi sitio web. Se llama useSpinDelay. Y lo pasaremos allí. Tiene algunos valores predeterminados buenos, simplemente los mantendremos. Y con useSpinDelay del módulo de retraso de giro, ahora evitaremos ese destello del estado de carga. Y si tenemos una red 3G lenta, entonces obtendremos un agradable estado pendiente, que es exactamente lo que esperarían nuestros usuarios. Con eso en su lugar, estamos listos. Esto es realmente genial. Puedes renderizar este componente en toda la aplicación y estar seguro de que está conectado a su backend. Además, también podrías empaquetarlo en un paquete npm y luego exponer solo un par de cosas para que las personas ingresen a la configuración de Remix, agreguen su opción de rutas aquí y llamen a tus cosas para que puedas conectar la ruta para la ruta de la API. Y luego pueden comenzar a usar tu componente y todo está mágicamente conectado al backend, lo cual es bastante interesante. Me encantaría ver a alguien intentar hacer eso.

9. Wrapping Up and Resource Routes

Short description:

Remix nos permite crear rutas de recursos simplemente teniendo una ruta sin una exportación predeterminada. Podemos exportar cualquier cosa que queramos siempre y cuando no sea una exportación predeterminada. Esta colocación de código facilita el mantenimiento del software a largo plazo.

Entonces, con todo eso dicho, permítanme concluir con un par de pensamientos finales. En resumen, Remix nos permite crear rutas de recursos simplemente teniendo una ruta sin una exportación predeterminada. Eso es lo que hace una ruta de recurso. Podemos exportar cualquier cosa que queramos siempre y cuando no sea una exportación predeterminada. Por lo tanto, otros componentes y utilidades se integran directamente con la ruta de recurso. Y no solo son componentes. Puedes hacer hooks, puedes hacer realmente cualquier cosa como un botón que enlace a un generador de PDF y el cargador genera el PDF, lo que sea. Cualquier cosa que esté específicamente relacionada con este recurso. Y mantener esa colocación de código facilita el mantenimiento del software a largo plazo. Es realmente genial y emocionante. Me encanta esto.

QnA

Speaker's Gratitude and Favorite Remix Feature

Short description:

El orador expresa gratitud hacia el público y les agradece. El orador menciona estar emocionado de estar en RemixConf EU y ser parte de la comunidad. Discuten su función favorita de Remix, Mutations, y cómo simplifica la gestión del estado de la aplicación. El orador se refiere a una encuesta donde una de las funciones favoritas fue Kent. Luego, el orador pasa a la primera pregunta sobre si los componentes de pila completa rompen la separación.

Lo último que quiero decirles a todos es que son inspiradores. Muchas gracias. ¡Hasta luego!

Hola, muchas gracias por recibirme. Estoy súper emocionado de estar aquí. ¡RemixConf EU es genial! Eso es triste. Estoy súper feliz de ser parte de esta comunidad.

Sí, es genial tenerte aquí y esa presentación fue excelente. Entonces, la primera pregunta antes de comenzar es para ti. Y quería preguntarte, ¿cuál es tu función favorita de Remix? ¿Mi función favorita de Remix? Elegí Mutations. Creo que la gestión del estado de la aplicación es la parte más difícil de construir una aplicación web en estos días. Y Remix hace que eso no sea un problema en absoluto. Así que esa es mi función favorita sin duda. Eso es genial. Cuando hicimos la encuesta en Slido, una de las funciones favoritas fue Kent. Así que pensé que era bastante apropiado. Fue bastante impresionante. Así que comenzaremos con las preguntas. Comenzaremos con la primera. ¿Los componentes de pila completa rompen la separación? Oh, sí. Oh, Dios mío. Te hice tu pregunta. Olvidé por completo que hicimos eso. Hicimos la pregunta de antemano que proporcionaste. ¿Ves lo emocionado que estoy de hablar contigo, Kent? Mejor recuerdo que también hay otras personas que también quieren hacer preguntas. Pero antes de hacer eso, hiciste la pregunta, que era cuál de estos no es una exportación aceptada de Remix? Y tenías un par de opciones diferentes. Y parece que la mayoría de las personas eligieron should revalidate. Fue como un 78%. Algunas personas pensaron que era handles. Algunas personas pensaron que era headers.

Componentes Full Stack y Separación de Responsabilidades

Short description:

En Remix, should revalidate se llama una API inestable y se llama should reload. El equipo de Remix está moviendo actualmente las APIs de React router de vuelta a Remix. Y eventualmente, se llamará should revalidate. Pero por ahora, es inestable should reload. Los componentes de pila completa rompen la separación tradicional de responsabilidades. JSX comenzó a romper la idea de no mezclar lógica con marcado. Las interfaces de usuario requieren lógica y diseño, por lo que la preocupación es la combinación de todas estas tecnologías. CSS y JS, Tailwind y el backend son parte de la preocupación.

Y algunas personas pensaron que era links. Entonces, ¿cuál es la respuesta correcta, Kent? Sí. La mayoría de las personas lo respondieron correctamente. Esta es una pregunta un poco engañosa porque should revalidate en Remix se llama una API inestable y se llama should reload. Inestable should reload. Pero en la versión 6.4 de react router, se llama should revalidate. Y actualmente, el equipo de Remix está moviendo las APIs de React router de vuelta a Remix. Y eventualmente, se llamará should revalidate. Pero por ahora, es inestable should reload.

Eso es genial. Y nuevamente, recuerden ir a Slido para participar en estas preguntas que vamos a hacer durante el show. Y eso fue un recordatorio para mí, por cierto. Y volvamos a las preguntas con Kent. Y pasemos a la primera. ¿Los componentes de pila completa rompen la separación de responsabilidades? Sí, sí. Esa es una buena pregunta. Entonces, hemos estado rompiendo la idea de las personas sobre lo que significa la separación de responsabilidades durante años. Comenzando principalmente, o al menos en la era moderna, comenzó con JSX. Y las personas vieron JSX y dijeron: no debería mezclar mi lógica con mi marcado. Simplemente no tiene sentido. Bueno, el hecho es que estamos trabajando en interfaces de usuario, y la lógica es una parte muy importante de lo que estás tratando de lograr. Entonces, para mí, esa es la preocupación. La preocupación es el botón de `Me gusta` de Twitter, o lo que sea que estés construyendo. El botón de `Me gusta` de Twitter es un buen ejemplo, porque no es solo la lógica detrás de si está activado o desactivado y qué hacer cuando se hace clic en el botón, sino que también es cómo se ve la cosa. Entonces, tenemos CSS. Eso también es parte de eso. Entonces, ahora la preocupación incluye las tres tecnologías. Ese fue mi argumento para CSS y JS, y ahora estoy en Tailwind, que es una especie de enfoque diferente. Pero solo la colocación de las preocupaciones de ese caso de uso. Pero incluso eso no cubre completamente el caso de uso, ¿verdad? También está la parte del backend.

Componentes Full Stack y Arquitectura de Islas

Short description:

Los componentes Full Stack abrazan el hecho de que las cosas que cambian juntas deben permanecer juntas, redefiniendo las preocupaciones de separación. La idea surgió durante el taller avanzado de Remix para RemixConf. Ryan inicialmente le gustó la idea y ha ganado popularidad. Los componentes de pila completa no son lo mismo que la arquitectura de islas, ya que se centran en la organización del código y la mantenibilidad en lugar de la optimización del rendimiento. Proporcionan un entorno cohesivo para colocar el código que debe vivir junto.

Entonces, los componentes Full Stack llevan esa idea más allá, y realmente, mi estrategia óptima de organización de código es que las cosas que cambian juntas deben permanecer juntas. Y así, si estás cambiando el código del backend cada vez que cambias el código del frontend, y viceversa, bueno, tal vez puedas juntar esas cosas. Y si estás cambiando dos cosas juntas con frecuencia, entonces tal vez sean la misma preocupación. Sí, no rompe las preocupaciones de separación. Abraza el hecho y tal vez redefine lo que significa la separación de preocupaciones en tu mente. Sí, no, genial. Y Michael Broomly se preguntaba si esto era un patrón que el equipo de Remix específicamente pretendía o más bien algo emergente, oh, vamos a probarlo tipo de cosa. Sí. De donde vino para mí fue que estaba trabajando en el taller avanzado de Remix para RemixConf en los Estados Unidos y estaba construyendo un combo box mostrando cómo usar Fetcher y todo. De hecho, como el que hicimos hoy, el mismo ejemplo exacto. Y los tenía en varios... Así que tenía un recurso aquí y luego tenía mi componente allá y pensé, me pregunto si podría simplemente... y luego, seguro, supongo, ¿por qué no? Y se lo mostré a Ryan porque iba a co-presentar ese taller conmigo. Él dijo, no lo odio. Y déjame pensarlo un poco. Y eventualmente decidió que le gustaba mucho. Me encanta. Y sí, definitivamente no es algo en lo que el equipo de Remix haya pensado realmente. Pero estoy viendo esto y me encanta. Ahora, eso es genial. Eso es genial.

Otra pregunta que tenemos, KB dice, he estado escuchando el término arquitectura de islas recientemente en otros frameworks de JS. ¿Son estos componentes de pila completa la versión de Remix de eso? No exactamente. La arquitectura de islas se trata más de qué se hidrata y dónde. Y en las aplicaciones de Remix, todo sigue siendo hidratado. Y así que es un poco diferente. Tal vez puedas implementar una especie de arquitectura de islas de esta manera. Sí, la gente hace cosas locas con las rutas de recursos. Pero sí, esto es más, es menos sobre pensar en una optimización de rendimiento, y más sobre una optimización de mantenibilidad y colocar el código que debe vivir junto.

Componentes Full Stack y Publicación en NPM

Short description:

Los componentes Full Stack permiten desarrollar componentes que pueden aceptar props, hacer referencia al contexto y combinar código backend y frontend. Pueden ser publicados en NPM creando un archivo de ruta y llamando a funciones en un módulo de NPM o publicando una función para ser llamada en la configuración de REMIX. Hidratar rutas específicas en REMIX puede crear islas, pero puede no alinearse completamente con el concepto de arquitectura de islas.

Definitivamente se siente como si estuvieras en una isla, porque quiero decir, tu componente puede aceptar props y todo. Puede hacer referencia al contexto y demás. Pero realmente se siente como si estuviera en su propia isla pequeña. Y tiene su backend y frontend y todo junto. Es una forma realmente genial de desarrollar ese tipo de componentes.

Bien, bien. Y otra pregunta. ¿Se pueden publicar los componentes Full Stack en NPM? Esa también es una gran pregunta. Sí, se puede. El desafío es que tienes un solo archivo. Y con REMIX, hay una convención de archivos. Entonces, ¿cómo harías eso si quisieras hacer un botón similar a Twitter que las personas puedan usar en todos sus diferentes sitios web como un componente de archivo único? Porque necesitamos tener un archivo en el directorio de rutas para una ruta de recurso. Bueno, eso no es completamente cierto porque en realidad puedes crear rutas de forma imperativa en el momento de la compilación en la configuración de REMIX. Hay una opción de rutas allí. Y así tienes dos opciones. Podrías crear un archivo de ruta y luego llamar a funciones en un módulo de NPM que maneje todo por ti y solo le dices cuál es la URL de la ruta de recurso. O podrías publicar una pequeña función que se supone que las personas deben llamar en su configuración de REMIX. Y así, en la configuración de REMIX, decimos algo como configurar mi ruta de botón similar a Twitter. Y de esa manera, el módulo de NPM de Twitter podría saber cuál es la URL de la ruta de recurso, porque es responsable de crear esa ruta de recurso. Y luego puede comunicarse de esa manera. No he visto a nadie hacer esto, pero creo que sería genial si alguien lo hiciera.

No, genial. Genial. Para seguir con la pregunta de la arquitectura de islas, ¿no podrías simplemente hidratar rutas específicas en REMIX para crear islas? Sí, no lo haría. Sí, estoy seguro de que eso es posible. No es algo que haya intentado. Pero no llamaría a eso... Para mí, las islas son como muchas cosas en una sola página. Tenemos la idea de rutas anidadas, y tal vez puedas tener una ruta anidada que sea la única parte que se hidrata. No voy a decir que la arquitectura de islas no esté alineada con lo que REMIX está tratando de hacer. No estoy completamente convencido de eso... Aunque técnicamente, desde un punto de vista teórico técnico, es mejor ejecutar menos código.

Arquitectura de Islas y Adecuación de REMIX

Short description:

No estoy convencido de que la arquitectura de islas sea siempre lo correcto. Uso REMIX para todo. Hay muy pocos proyectos para los que REMIX no sea adecuado. REMIX aún no tiene HMR, pero el equipo está trabajando en ello. Comenzar con REMIX te permite adaptarte a los cambios de requisitos mejor que cualquier otra cosa. El hecho de que REMIX forme parte de Shopify es emocionante, ya que proporciona estabilidad y financiamiento para el framework.

Pero en términos prácticos, no estoy convencido de que la arquitectura de islas sea siempre lo correcto y incluso necesario para la mayoría de las aplicaciones. Por eso no he dedicado mucho tiempo a pensar o trabajar en eso. Pero estoy convencido de que podrías implementar una arquitectura de islas con REMIX, pero sí, no me he molestado en intentarlo.

Sí, gracias por eso. Esta es una pregunta que quiero hacer porque sé que hay mucha gente que aún no ha probado REMIX. ¿Hay algún proyecto para el que no usarías REMIX o cuál es tu opinión al respecto?

No, no hay proyectos para los que no usaría REMIX. Uso REMIX para todo. Hay muy pocos proyectos para los que REMIX no sea adecuado. He hablado con algunos equipos que dicen que no pueden vivir sin HMR. Bueno, está bien, REMIX aún no tiene HMR. Eventualmente lo tendremos, pero por ahora no. Las cosas son un poco diferentes porque REMIX se centra tanto en el servidor, ¿cómo haces HMR con el servidor y todo eso? Pero estoy convencido de que el equipo eventualmente encontrará una solución para eso. Pero en casi cualquier otro caso que pueda pensar, si tienes una sola página, un juego que utiliza almacenamiento local para todo, ¿por qué usarías REMIX para eso? Quiero decir, sí, no aprovecharás el enrutamiento anidado, ese tipo de cosas. No aprovecharás los cargadores necesariamente. Pero, ¿qué más vas a usar que sea mejor? ¿Veep te servirá mejor? No realmente. Es como si todos estuviéramos en el mismo campo de juego. Y lo bueno de comenzar con REMIX es que eventualmente, cuando decidas que este juego es wordle y estás a punto de venderlo a una gran empresa o algo así, y necesitamos persistencia de datos y todo eso... Bueno, simplemente actualizas eso porque lo construiste con REMIX desde el principio. Y por eso me cuesta ver situaciones en las que REMIX no sea un excelente punto de partida porque te permite adaptarte a los cambios de requisitos mejor que cualquier otra cosa que haya visto.

Genial. Y aquí hay otra gran pregunta. ¿Cómo crees que el hecho de que REMIX forme parte de Shopify afectará al framework? Oh, Dios mío. Estoy tan emocionado por esta cosa de Shopify. Imagina por un momento que REMIX no hubiera sido adquirido por Shopify, REMIX está, sigue funcionando bien. Hubiéramos seguido trabajando bien durante aproximadamente otro año y medio con el financiamiento que recibimos originalmente y con la cantidad de empleados que teníamos. Así que estaría bien, pero el problema es que eventualmente el equipo de REMIX tendría que encontrar una forma de ganar dinero.

La adquisición de Shopify y el futuro de REMIX

Short description:

La adquisición de REMIX por parte de Shopify permite a los desarrolladores centrarse únicamente en el desarrollo del framework sin distracciones. Esta asociación garantiza que la versión dos de REMIX se lanzará más pronto, beneficiando a la comunidad. Los requisitos únicos de Shopify los convierten en una empresa ideal para la adquisición, proporcionando una base sólida para un framework. Su colaboración promete casos de uso emocionantes y un futuro positivo para REMIX.

Y lo que todo eso significa es que estos increíbles desarrolladores que están desarrollando este framework para nosotros estarían distraídos por otras cosas que no están relacionadas con lo que es el framework. Y así que Shopify llega y simplemente dice, hey, sigue trabajando en lo que estás haciendo, estás haciendo un gran trabajo con eso y nosotros nos encargaremos del tema del dinero. Y así que estoy emocionado de que Ryan y Michael en particular no tengan que preocuparse por el tema de hacer dinero y simplemente sigan trabajando en este framework para nosotros. Creo que estoy convencido de que vamos a obtener la versión dos de REMIX mucho antes de lo que lo haríamos si tuvieran que empezar a pensar en hacer dinero. Así que estoy emocionado y de todas las empresas que adquirieron REMIX, creo que Shopify es simplemente tan buena como empresa de adquisición porque tienen algunos de los requisitos más interesantes que no creo que sean generalmente aplicables a todos pero definitivamente es una buena referencia o un denominador común para lo que la gente necesita de un framework. Así que estoy realmente emocionado por los casos de uso que Shopify aportará a REMIX. Y creo, y también han sido realmente increíbles como empresa. Así que creo que serán realmente grandes guardianes de la web y un lugar realmente genial para que REMIX se encuentre.

El amor del orador por REMIX y el apoyo de Shopify

Short description:

Me enamoré de REMIX al instante. El apoyo de Shopify aumenta la confianza y la adopción. REMIX es mi elección para proyectos personales, permitiendo un desarrollo más rápido.

Sí, no, eso es realmente genial. Tan pronto como probé REMIX, me enamoré de él al instante. Y muchas veces, cuando muestro REMIX a otros, dicen: wow, esta es una forma realmente genial de hacerlo. Y creo que tener una empresa como Shopify respaldando a REMIX es enorme porque brinda más confianza a alguien para decir: hey, esto está respaldado por Shopify, déjame probar esto y aumentará la tasa de adopción. Pero para mí, como dije, para todos mis proyectos personales, REMIX ha sido mi forma de hacer las cosas. Y me encuentro desarrollando cosas más rápido, lo cual es bastante impresionante.

Influencias de Hydrogen en REMIX

Short description:

El equipo de REMIX discutió las influencias de Hydrogen en REMIX con Shopify. Compararon los componentes del servidor con las capacidades actuales de Remix y encontraron que Remix era un enfoque mejor. Shopify decidió incorporar al equipo de Remix. El papel de Hydrogen probablemente implicará más componentes de pila completa, como un carrito de compras configurable. El objetivo final aún no está claro, pero puede haber una pila de Hydrogen o una CLI especial. No se espera que los conceptos de Hydrogen se integren en Remix, ya que Remix ya tiene funcionalidades similares. Sin embargo, los ingenieros de Shopify contribuirán al desarrollo de Remix.

Y supongo que otra pregunta que tengo, ¿crees que habrá influencias de hydrogen en REMIX? Sí, de hecho, el equipo de REMIX, hablamos con Shopify hace meses, incluso antes de REMIXconf. Vinieron a Salt Lake, estábamos hablando de, potencialmente hacer lo que están haciendo ahora antes de lanzar hydrogen con los componentes del servidor. Y solo estábamos tratando de decir, oye, escucha, los componentes del servidor aún no se han lanzado realmente. No es una API estable ni nada. Vas a lanzar sobre algo que no está terminado. Pero mira lo que tenemos ahora. Así que compara lo que los componentes del servidor te ofrecen tal vez en el futuro con lo que Remix te ofrece hoy. Ahora, absolutamente. Y simplemente creemos que este es un enfoque mejor. Y eventualmente Shopify tomó eso en cuenta y decidió que realmente querían al equipo de Remix y nos trajeron o ya no estoy allí. Solo para aclarar. Estoy a tiempo completo en Epic web, pero decidieron traer al equipo de Remix. Y creo que el papel de hydrogen será más de componentes de pila completa. Tipo de situaciones, tendrán un carrito de compras que puedes incorporar y configurar. Podría ser como, tuvieron la publicación del blog donde aún usas hydrogen, pero importas cosas de Remix. Así que hay como una mezcla ahí. No estoy seguro cuál es el objetivo final de eso. ¿Instalas Remix? Y luego, o tal vez hay una pila de hydrogen o algo así. Creo que probablemente tiene mucho sentido tener una pila de hydrogen. Espero que eso sea algo que saldrá de eso, ya sea técnicamente una pila o tal vez una CLI especial que el equipo de hydrogen desarrolle. Pero en cuanto a los conceptos de hydrogen que se integran en Remix, no veo nada así. No parece haber nada que hydrogen tuviera específicamente que Remix ya tuviera fuera de cosas que son específicas de Shopify, como el carrito de compras y demás, que por supuesto no estarían bien ubicadas dentro de un marco genérico como Remix. Pero ciertamente, hay muchos ingenieros muy inteligentes en Shopify que sin duda ayudarán a Remix de muchas maneras. Así que también espero esa colaboración.

Componentes de pila completa y gestión de estado

Short description:

En Remix, no es necesario utilizar bibliotecas de gestión de estado como Redux. El marco funciona sin JavaScript y adopta el concepto de mejora progresiva. El uso de la gestión de estado de la aplicación dificultaría la mejora progresiva. Aunque técnicamente es posible utilizar Redux con Remix, no se recomienda, ya que el marco no lo requiere.

No, eso es genial. Eso es genial. Y tenemos una pregunta de Peter Horn, ella, ella pregunta, ¿los componentes de pila completa están destinados a reemplazar a las bibliotecas de gestión de estado, como Redux o complementarlas? Sí, en realidad, en Remix, no se necesitan realmente bibliotecas de gestión de estado, bibliotecas de gestión de estado de la aplicación. No hay gestión de estado de la aplicación. Eso se evidencia por el hecho de que funciona sin JavaScript, pero también es requerido por la idea de mejora progresiva. Por lo tanto, si te enfocas en la mejora progresiva, no puedes utilizar la gestión de estado de la aplicación. Si lo haces, entonces tu aplicación no se mejora progresivamente, eso lo considero un error. Y así, aunque técnicamente puedes utilizar Redux y esas cosas con Remix, te aconsejo firmemente que no lo hagas por esa razón. Y los componentes de pila completa no son un reemplazo. Ciertamente podrían funcionar con esas cosas, pero sí, no me molestaría usarlos porque no los necesitas con Remix. Sí, no, eso tiene sentido. Veamos si tenemos alguna pregunta final aquí, que viene. Y otra pregunta, ¿cómo puedo crear un componente similar al que mostraste, pero si quiero usar el cargador porque no debe haber interacción con el usuario y para beneficiarme del renderizado en el servidor. Tengo un componente, adelante. Sí, esa es una excelente pregunta. Si quieres renderizar en el servidor los data porque lo que estaba haciendo era después de la hidratación y todo. Entonces, lo que puedes hacer es similar a lo que dicen los documentos de Remix sobre los enlaces para componentes donde el archivo del componente exporta los enlaces y luego cualquier ruta que lo use incluirá esos enlaces en su propia definición de enlaces. Haz lo mismo para el cargador. No lo he hecho yo mismo, pero sí, si necesitas algo que se renderice en el servidor, pero lo renderizas en muchos lugares diferentes, entonces sí, la única forma de obtener datos renderizados en el servidor es a través de un cargador en una ruta, no en una ruta de recurso. Debe ser un cargador en una ruta y sí. Esa es probablemente la forma en que abordaría eso si quiero hacer eso. Muchas gracias, Kent. Creo que ese fue todo el tiempo que teníamos. Fue una charla increíble. Muchas gracias por estar aquí y hablaré contigo más tarde y de vuelta a Brittany. Gracias, nos vemos.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
React Advanced Conference 2022React Advanced Conference 2022
29 min
Understanding React’s Fiber Architecture
Top Content
We've heard a lot about React's Fiber Architecture, but it feels like few of us understand it in depth (or have the time to). In this talk, Tejas will go over his best attempt at understanding Fiber (reviewed by other experts), and present it in an 'explain-like-I'm-five years old' way.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Featured WorkshopFree
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts