Charla sobre Remix

Rate this content
Bookmark
28 min
18 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Remix es un proyecto de código abierto con un diseño modular y una excelente historia de mutación. Se beneficia de ser parte de Shopify y tiene un proceso RFC abierto para solicitudes de funciones. Remix está influenciado por el equipo de Hydrogen y planea trabajar en estrecha colaboración con ellos. Las características emocionantes incluyen la capacidad de enviar promesas en las respuestas y el soporte para soluciones de estilo. La versión 2 de Remix tendrá una hoja de ruta y será independiente del marco de trabajo. La colaboración con React en los componentes del servidor es importante. Se fomentan las transmisiones en vivo y las discusiones comunitarias. La filosofía de diseño se centra en los estándares web y en simplificar el código. Remix prioriza el lado del servidor pero también considera la generación estática. En general, Remix simplifica el código y elimina la complejidad.

Available in English

1. Introducción a Remix y sus beneficios

Short description:

Todos estamos bien. Muchas gracias por unirse a nosotros en esta charla junto al fuego. Una de mis cosas favoritas de Remix es su diseño modular. La capacidad de enviar tu aplicación en cualquier tiempo de ejecución es una característica realmente impresionante. La historia de mutación en Remix es excelente. El mayor beneficio de que Remix sea parte de Shopify es la capacidad de probar preguntas e ideas de diseño a través de los grandes sitios de comercio electrónico de Shopify. Aún somos un proyecto de código abierto y estamos enfocados en la historia de código abierto de Remix. Hemos implementado un proceso de RFC abierto para solicitudes de funciones y discusiones.

Muy bien, hola Chance, ¿cómo estás? Hola, Brittany, estoy bien. ¿Cómo estás? ¿Cómo estás, Paul? Hola, genial verte. Increíble. Todos estamos bien. Muchas gracias por unirse a nosotros en esta charla junto al fuego.

Hemos estado preguntando a todos nuestros oradores, sé que no tienes una charla pero también quiero preguntarte, le preguntamos a la audiencia al principio, cuál es su función favorita de Remix. Entonces, ¿cuál es tu función favorita de Remix? Oh, y eso es, ¿cómo respondes a esa pregunta cuando, como, trabajas en todo? Dices todas las cosas.

Todas las cosas, sí. No, en serio, creo que una de mis favoritas – No sé si llamarlo función, pero una de mis cosas favoritas de Remix es simplemente el diseño modulardesign en el que comenzamos. La forma en que está diseñado, creo, es realmente – es realmente útil para algunos de nuestros objetivos a largo plazo de ser – compatible con múltiples frameworks de renderizado. Y nuestros objetivos actuales de admitir cualquier tiempo de ejecución, ¿verdad? Puedes descomponerlo en partes, diferentes niveles de abstracción y enviarlo a cualquier lugar, lo cual creo que es genial. Sí, supongo que la capacidad de enviar tu aplicación en cualquier tiempo de ejecución es una característica realmente impresionante. No tienes que preocuparte demasiado por que no admitamos tu tiempo de ejecución porque estamos construidos sobre web standards, ¿verdad? Mientras tu tiempo de ejecución esté construido sobre web standards, puedes enviar Remix, ¿verdad? Y realmente me encanta eso. En cuanto a características individuales, tengo que decir que la historia de mutación en Remix es excelente, como poder obtener data de tus acciones inmediatamente después de usar interacciones sin tener que gestionar internamente ese estado. Creo que es un superpoder. Realmente disfruto trabajar con eso. Sí, esa es una gran respuesta. Sí, eso es increíble.

Mi primera pregunta sería cuál dirías que es el mayor beneficio para Remix ahora que es parte de Shopify. Sí, no, esa es una gran pregunta. Y es una pregunta que creo que todos nos estábamos haciendo internamente al comienzo del proceso. Y ahora que hemos tenido algo de tiempo para que se asiente, estoy muy emocionado al respecto. Creo que va a ser muy importante para nosotros poder probar algunas de nuestras preguntas de diseño y nuestras ideas y características iniciales a través de Shopify, que gestiona algunos de los sitios de e-commerce más grandes del mundo, eso va a ser datos invaluables para nosotros, y realmente nos ayudará a hacer muchas de nuestras características y nuestras intenciones y nuestros diseños futuros serán mucho más resistentes y a prueba de balas porque vamos a poder probar esas cosas internamente a través de Shopify y obtener muchos comentarios antes de tener que preocuparnos por hacer públicas estas cosas. Ahora, todavía somos un proyecto de código abierto. De hecho, creo que uno de nuestros mayores objetivos desde que nos unimos a Shopify es enfocarnos mucho más en el lado de código abierto de lo que tal vez lo hayamos hecho en el pasado. Y así, recientemente hemos implementado un proceso de RFC abierto donde las personas pueden ir al repositorio de Remix y enviar RFC, enviar solicitudes de funciones que pasen por un proceso y debatimos eso internamente. Y eso también es cierto para todas nuestras discusiones internas. Cualquier función que queramos introducir en Remix, incluso internamente, ahora estamos aplicando este proceso de RFC y se hace todo de manera abierta. Así que solo porque somos parte de Shopify, realmente seguimos enfocados en la historia de código abierto de Remix. Y creo que va a ser realmente genial poder obtener comentarios y una gran cantidad de uso en producción del equipo de Shopify, pero también poder desarrollar de manera abierta y pública, creo que sigue siendo muy, muy importante para nosotros.

2. Influencia de Hydrogen en Remix

Short description:

Absolutamente. Es increíble que nos permitan seguir trabajando de forma abierta y mantener esa sensación de comunidad que conocemos en Remix y poder contribuir de vuelta a él. Nuestra intención es trabajar muy de cerca con el equipo de Hydrogen para ayudarles a lanzar productos realmente sólidos para sus usuarios. Esa retroalimentación es muy valiosa y sin duda nos influirá a largo plazo. Somos una combinación natural para lo que ya están haciendo.

Absolutamente. Es increíble que nos permitan seguir trabajando de forma abierta y mantener esa comunidad que conocemos en Remix y poder contribuir de vuelta a él. ¿Crees que Hydrogen va a influir en alguna de las características de Remix ahora que estás trabajando junto a él? Sí, creo que absolutamente. En términos de simplemente, una vez más, la capacidad de ese equipo para proporcionar ideas y retroalimentación hacia nosotros, creo que eso en sí mismo es muy valioso. Y sin duda nos influirá. Pero en cuanto a convertirnos en un producto de Hydrogen o Shopify, eso no está en nuestros planes. Eso no es parte del plan. Nunca fue parte de la historia. Y no es así como vamos a seguir adelante con esto. Todavía somos muy Remix. Somos lo que éramos cuando comenzamos y nos unimos a Shopify. Y ellos invirtieron en nosotros porque creen en esa visión. Y creen que Hydrogen se beneficiará de Remix, al igual que Remix se beneficiará del uso en Hydrogen. Así que nuestra intención es trabajar muy de cerca con el equipo de Hydrogen para ayudarles a lanzar productos realmente sólidos para sus usuarios. Y todavía somos una capa separada de eso. Pero sí, esa retroalimentación es muy valiosa y sin duda nos influirá a largo plazo. Pero creo que somos una combinación natural para lo que ya están haciendo. Así que en mi opinión, es realmente una gran combinación.

3. Exciting Features and Future Plans

Short description:

Probé Remix y me enamoré de él. Tiene muchas características increíbles y, literalmente, es un placer trabajar con él. Ahora también tenemos una hoja de ruta pública, lo cual me emociona mucho. Una de las características de las que estoy realmente emocionado es la capacidad de enviar promesas en las respuestas desde los cargadores y acciones, y esperar a que se resuelvan en los componentes. También tenemos mucho trabajo por hacer en el lado del estilo, para admitir soluciones de estilo que requieren integración del compilador, como CSS modules y vanilla extract.

Absolutamente. Sí, eso es genial. Probé Remix y me enamoré de él. Tiene muchas características increíbles y, literalmente, es un placer trabajar con él. Y mi pregunta es, ¿de qué característica estás más emocionado que aún no se ha lanzado?

Oh, tenemos muchas. Tenemos muchas ideas geniales en la hoja de ruta. Ahora también tenemos una hoja de ruta pública, lo cual me emociona mucho. Así que volviendo a enfocarnos más en lo abierto, puedes ir y leer sobre algunas de las características que estamos planeando lanzar en los próximos meses. Estoy realmente emocionado por eso. Pero sí, si echas un vistazo, tenemos algunas cosas. Tenemos, por ejemplo, si alguien ha usado React Router 6.4, acabamos de lanzar React Router 6.4 hace unas semanas, tal vez hace un mes en este momento. Y realmente hemos incorporado muchas características de Remix en React Router. Incluso hemos incorporado algunas características que aún no están en Remix, en React Router. Así que puedes obtener una vista previa yendo a ver React Router 6.4.

Una de las características de las que estoy realmente emocionado es la capacidad de enviar promesas en las respuestas desde los cargadores y acciones, y esperar a que se resuelvan en los componentes. Es algo parecido a la idea de suspense, ¿verdad, hasta cierto punto? Pero poder hacer eso y diferir ciertas respuestas que pueden tardar un poco más en resolverse directamente en tus componentes de una manera muy declarativa, creo que es realmente increíble. Es nuestra respuesta a lo que están intentando hacer con los componentes del servidor, hasta cierto punto. Pero tenemos una perspectiva ligeramente diferente sobre eso. Así que estoy realmente emocionado por esa característica. La llamamos la característica diferida. En realidad, puedes probar eso hoy. Tenemos una etiqueta npm llamada deferred donde puedes experimentar con eso. Publicamos nuevas versiones de experimentos con ese trabajo con bastante frecuencia. Así que sí, es realmente genial. Puedes hacer muchas cosas interesantes con eso, y también tenemos algunos ejemplos en nuestro repositorio de ejemplos que lo utilizan. Así que esa característica va a ser increíble.

También tenemos mucho trabajo por hacer en el lado del estilo, para admitir ciertas soluciones de estilo que requieren integración del compilador, como CSS modules y vanilla extract. Esas son dos tecnologías de las que hemos estado hablando mucho internamente, y poder construir soporte para esas cosas directamente en Remix sin tener que pasar por el primer paso del compilador será realmente valioso, creo. Así que también estoy muy emocionado por eso.

4. Remix Version 2 and Framework Agnosticism

Short description:

Estoy emocionado por las nuevas características que llegarán en la versión 2 de Remix, y tenemos una hoja de ruta disponible en GitHub. Estamos realizando cambios en nuestra API de metadatos de ruta, lo que permitirá a los usuarios optar por nuevas características antes de actualizar a v2. Nuestro objetivo es la estabilidad a largo plazo, pero en esta etapa inicial, es posible que necesitemos realizar cambios disruptivos. Proporcionar un camino de actualización suave e incremental ayudará a los usuarios a mantenerse al día con el progreso y los cambios. También estamos haciendo que Remix sea independiente del marco de trabajo, separando la lógica central de React y permitiendo experimentar con otros marcos como Vue.

Sí, estoy muy emocionado por eso y por lo que dijiste sobre los componentes del servidor. Puede que vuelva a eso en un minuto. ¿Hay alguna de estas nuevas características de las que estés emocionado que lleguen en la versión 2 de Remix?

Sí, quiero decir, todo está ahí en nuestra hoja de ruta. Entonces, si vas a GitHub y haces clic en la pestaña de proyectos en el repositorio de Remix, puedes ver la hoja de ruta. Todo está ahí, abierto al público. Una de las cosas en las que he estado trabajando en estas últimas semanas es que estamos realizando algunos cambios en nuestra API de metadatos de ruta. Tal vez no sea una característica tan emocionante para hablar, pero es algo que creo que nuestra API actual carece un poco. Una de las cosas interesantes que estamos haciendo con esto es agregar la capacidad de optar por estas características antes de actualizar a v2. Entonces, cuando se lance esta nueva API de metadatos, por ejemplo, podrás optar por ello con una bandera en tu configuración de Remix, para que puedas comenzar a actualizar. Cuando llegue v2, podrás actualizar de manera incremental, lo cual será realmente bueno. Creo que estamos planeando hacer eso con prácticamente todas las características que vamos a lanzar en v2 y que sean cambios disruptivos. Creo que será un camino de actualización realmente bueno y ayudará a aliviar algunos de los puntos problemáticos. Porque uno de los desafíos con cualquier software en la etapa v1 es que es v1, ¿verdad? Esta es nuestra primera vez, y vamos a cometer algunos errores. Es posible que no entendamos completamente algunas de las formas en que las personas van a interactuar con estas API. Entonces, a largo plazo, nuestro objetivo es la estabilidad. Pero en esta etapa inicial, tendremos que realizar algunos cambios disruptivos para adaptarnos a algunas cosas que podríamos haber pasado por alto en el camino. Y, por lo tanto, poder hacerlo de una manera suave e incremental, creo que será de gran ayuda para las personas que intentan mantenerse al día con los avances y los cambios.

Oh, creo que eso es enorme, que estás proporcionando un camino de migración para que tus usuarios pasen de v1 a v2. Tiene mucho sentido. Sí, eso es genial, eso es genial. Y quiero preguntarte, ¿ha habido alguna noticia más sobre hacer que Remix sea independiente del marco de trabajo junto con React Router?

Sí, me encanta esa pregunta y me encanta hablar de esto porque es algo que me emociona mucho. Volviendo a lo que estaba hablando al principio, donde hemos diseñado nuestras API y los diversos paquetes de manera que todo existe en su propia capa. Y Remix se construyó sobre las ideas fundamentales de React Router, lo que significa que estaba muy vinculado a React. Pero eso ya no es necesariamente el caso porque cuando reestructuramos React Router en 6.4, separamos la parte de React de React Router de la lógica central subyacente, que ahora existe en su paquete independiente del marco de trabajo, Remix run/router. Toda la lógica ahora vive allí, toda la lógica de enrutamiento, todos los superpoderes están ahí en ese paquete, completamente separados de React. Ahora gestionamos toda la navegación fuera de React. Y creo que eso realmente nos permitirá despegar con esta idea. Es algo en lo que hemos experimentado internamente. Uno de nuestros compañeros, Matt Brophy, es un gran fanático de Vue. Vino del mundo de Vue y ha hecho mucho trabajo en ese espacio.

5. Framework Agnostic and Preact Support

Short description:

Estamos trabajando en crear un adaptador para Vue y explorando opciones independientes del marco de trabajo. También estamos emocionados por el soporte de Preact y la capacidad de utilizar APIs más simples con menos peso en el paquete. Está sucediendo y estamos entusiasmados al respecto.

Y él ya, hace meses, creó una prueba de concepto del enrutador de Vue que podemos usar para crear un adaptador de Vue. Y hemos tenido algunos colaboradores realmente increíbles que han experimentado en este espacio también. Creo que, simplemente, algunas personas han desarrollado adaptadores de Svelte. Y creo que alguien ha desarrollado un adaptador de Angular, ¿verdad? Ha habido un trabajo realmente interesante en la exploración de este espacio independiente del marco de trabajo. Y definitivamente es algo que pretendemos hacer. Internamente, ahora trabajamos con Jason Miller en Shopify, quien obviamente es el autor y mantenedor de Preact. Así que estoy muy emocionado por el soporte de Preact porque todavía amo a React, pero a veces no necesitas todo, ¿verdad? Solo necesitas las APIs muy simples que puedes incorporar con mucho menos peso en tu paquete. Así que estaré muy emocionado de comenzar a experimentar con Preact cuando tengamos ese enrutador funcionando. Así que, sí, está sucediendo y estamos muy emocionados al respecto. Estoy muy emocionado al respecto. Estoy súper emocionado por eso. Sí.

6. Remix and React Collaboration on Server Components

Short description:

Austin Krimm dio una charla en Svelte Summit sobre el adaptador de Svelte para Remix. El equipo de Remix ha estado en contacto con el equipo de React, ofreciendo comentarios sobre los componentes del servidor. Tienen enfoques diferentes para resolver problemas similares y actualmente no necesitan componentes del servidor. Sin embargo, ven el potencial de reducir el tamaño del paquete a través de la hidratación parcial. La colaboración entre Remix y React es crucial para el éxito tanto de los componentes del servidor como de Remix. El primer livestream del plan de trabajo ya está planeado y disponible en GitHub.

Hablaste sobre el adaptador de Svelte, y Austin Krimm es quien estaba trabajando en eso. Dio una charla en Svelte Summit sobre eso, y pensé que me encanta Remix desde ya, pero si puedo usar el lenguaje en el que me gusta escribir, así como el marco de trabajo que amo, estoy súper emocionado por el futuro de todo eso.

Y antes dije que volvería a esto con los componentes del servidor de los que estabas hablando. ¿Qué tan de cerca está trabajando el equipo de Remix con el equipo de React y cómo está funcionando eso? Sí, esa es una gran pregunta. Han estado en contacto con nosotros y hemos estado en contacto con ellos para ofrecer comentarios sobre algunos de sus diseños. Sé que esos comentarios fueron cruciales para muchos de los cambios que hicieron en la versión reciente de los componentes del servidor. Si has estado siguiendo la historia de los componentes del servidor, ha habido muchos cambios, ¿verdad? Desde el RFC inicial hasta donde estamos hoy, y aún no ha terminado, ¿verdad? Esa historia no está terminada. Así que estamos muy emocionados de ver a dónde van los componentes del servidor y estamos muy abiertos a brindar comentarios. Sé que algunos de nuestros miembros del equipo están hablando con el equipo de React de manera bastante regular. De hecho, hoy voy a almorzar con uno de los miembros del equipo de React. Sí, resulta que vive aquí en San Diego y lo conocí esta semana. Así que sí, ciertamente hay muchas oportunidades para que colaboremos y estoy realmente emocionado de ver a dónde van los componentes del servidor.

En este momento, muchas personas nos preguntan por qué no admitimos componentes del servidor. Y la respuesta corta es que simplemente tenemos enfoques fundamentales diferentes para algunos de los mismos objetivos, ¿verdad? Eso fue parte de la motivación para Remix mucho antes de que los componentes del servidor fueran una cosa, ¿verdad? Así que simplemente debido a los diferentes enfoques fundamentales que tomamos para resolver algunos de los mismos problemas, simplemente no necesitamos componentes del servidor en este momento. Sin embargo, creo que hay muchas oportunidades en el futuro, dependiendo de cómo avance esa tecnología. Creo que hay mucho potencial en reducir el tamaño del paquete a través de la hidratación parcial si podemos separarlo de algunas de las API de carga de datos que están buscando con los componentes del servidor. Así que sí, estoy deseando mucho esa colaboración y ver a dónde se dirige esa historia y cómo podemos aprovechar algunos de los avances allí.

Sí, ¿es esa historia de hidratación parcial parte de la razón por la que querrías usar componentes del servidor? Porque Remix ya es principalmente del lado del servidor. Entonces, ya estás en el lado del servidor. ¿Cuál es el beneficio de agregar estos componentes del servidor en React? Bueno, eso es algo que tenemos que descubrir, ¿verdad? No lo sabemos porque la historia de los componentes del servidor aún no está terminada. Todavía es un software beta, y estoy emocionado de ver qué sucede con Next.js y su adopción de los componentes del servidor porque, ya sabes, hemos hablado de trabajar muy de cerca con el equipo de Hydrogen. Fueron uno de los primeros en adoptar los componentes del servidor, en las primeras API, realmente asumieron un gran riesgo al adoptar eso. Y tuvieron algunos problemas, y esos comentarios también fueron muy, muy valiosos para el equipo de React al realizar algunos de los cambios que hicieron en los componentes del servidor. Así que sí, veo esto como una saga en curso que, ya sabes, veremos cómo se desarrolla, pero esa colaboración será crucial para asegurar que los componentes del servidor y Remix tengan éxito en alcanzar sus objetivos.

Genial. Sí, veo que mucha gente está emocionada por todas las nuevas características que van a presentar porque la gente ya está preguntando, ¿cuándo está planeado el primer livestream del plan de trabajo? ¿Cuándo sucederá eso? ¿Qué significa eso? ¿Cuándo vamos a transmitir en vivo? Eso es lo que estaban preguntando. Podemos hacerlo ahora mismo. ¿Quieres compartir tu pantalla y lo revisamos? Sí, te digo, es público. Ve a verlo. Está en GitHub.

7. Livestreams, Community Discussions, and Openness

Short description:

Sí, todo está abierto. Me encanta la idea de las transmisiones en vivo y las discusiones comunitarias sobre la construcción de la hoja de ruta y las RFC. Ryan y MJ transmitirán en vivo cada dos semanas. Nuestra hoja de ruta es pública y tenemos una comunidad activa en Discord donde puedes hacer preguntas y compartir tus opiniones. ¡Únete a nosotros y sé parte de la conversación!

Sí, todo está abierto. Si queremos hablar de eso, estoy feliz de hacerlo, pero... supongo que más bien, ¿habrá transmisiones en vivo sobre la construcción de la hoja de ruta o las RFC? ¿O algo como una community discusión que se pueda tener allí? ¿Hay algo para eso?

Claro, sí. Sí, me encanta la idea. Personalmente no he planeado ninguna transmisión en vivo sobre la construcción de características o algo así, pero ciertamente podría hacerlo. Estoy tratando de adoptar eso como mis metas personales de ser más como un creador de contenido para Remix. Esa es una gran idea. No sé. Dáme ideas porque todavía soy nuevo en esto. Aclararon que Ryan y MJ están a punto de transmitir en vivo cada dos semanas. Ryan mencionó eso en algún lugar, supongo. De acuerdo. Sí, los veremos porque son más inteligentes que yo. Pero me gusta esa transparencia. Oye, nuestra hoja de ruta es pública. Puedes ir a verla si tienes alguna pregunta, pero eso es bastante impresionante. En realidad, quiero—

Sí, y además, lo siento, solo quiero decir, no solo vayan a verla, sino que también tenemos un Discord de la comunidad muy activo. Así que si tienes preguntas, puedes hacerlas ahí mismo en GitHub. Puedes venir a hablar con nosotros en Discord. Todos somos muy abiertos. Mis mensajes directos están abiertos en Discord, así que definitivamente podemos organizar una transmisión en vivo para hablar específicamente sobre la hoja de ruta. Creo que sería una idea genial. Pero mientras tanto, todos estamos ahí afuera, abiertos. Ven y acércate a alguno de nosotros y haz preguntas si las tienes. Creo que es algo importante que señalar para estas comunidades open-source. Ir y comentar en estas RFC es muy importante para el ecosistema en general. Necesitas ir y hacer saber tu opinión para que la gente pueda hablar al respecto. Tal vez tengas una perspectiva diferente que no habías pensado antes y que el equipo no había considerado antes, y puedes abrir una discusión al respecto. Eso es un gran punto. Sí, siempre hay personas que usan nuestro software de formas que nunca anticipamos, así que nos encantaría escuchar eso. Así que todos vayan y únanse al Discord de Remix y sean parte de la conversación.

8. Motivación y Filosofía de Diseño

Short description:

Queríamos construir sobre los estándares web en primer lugar. Volviendo a la idea de ser agnósticos en tiempo de ejecución y en marcos de trabajo, eso sería muy difícil de lograr si no nos apoyamos en las API web. React fomenta algunas cosas que han creado experiencias de usuario indeseables a lo largo de los años. En busca de construir mejores experiencias de usuario, queríamos crear diseños que hicieran lo correcto de manera fácil. Ese fue también un gran motivador para Remix, simplemente diseñar algo que facilitara mover la carga de datos donde debe estar a nivel de ruta y paralelizar muchas solicitudes de datos concurrentes cuando sea posible. Así que redujimos el número de solicitudes en curso.

Aquí hay una historia divertida. Me encanta todo acerca de Remix, y estaba haciendo algo. Hice una pregunta en Twitter y una de las respuestas fue: `oye, ¿por qué no te unes al Discord de Remix?`. Obviamente, ¡claro! Hay muchas personas geniales allí, una gran comunicación y muchos lugares excelentes para obtener respuestas. Pero tenía una pregunta sobre qué te motivó a crear Remix en primer lugar. ¿Cómo surgió eso? Bueno, no puedo hablar con un 100 por ciento de autoridad porque no creé Remix. Me uní a Remix. Fui uno de los primeros empleados, pero desafortunadamente no puedo atribuirme el mérito de su creación. Pero puedo decirte algunas de nuestras filosofías que nos motivaron. Todo esto también está disponible públicamente. Tenemos una sección en nuestra documentación que describe nuestra filosofía. En resumen, ninguna otra herramienta en este espacio cumplía con los objetivos de nuestra filosofía. Queríamos construir sobre los estándares web en primer lugar. Muchas herramientas existentes abstraen esos estándares. Y las abstracciones a veces son difíciles de deshacer. Y pueden encerrarte en ciertas tecnologías en las que quizás no estés personalmente invertido. Por lo tanto, volver a la idea de ser agnósticos en tiempo de ejecución y en marcos de trabajo sería muy difícil de lograr si no nos apoyamos en las API web. Por lo tanto, poder apoyarnos en ellas, usarlas y exponerlas directamente a los usuarios, creo que es un diseño muy poderoso. Esa fue una de las mayores motivaciones subyacentes, ya que eso simplemente no existía realmente. Y muchas de las formas en que hemos estado construyendo aplicaciones React a lo largo de los años también evitan... React es genial. Todos amamos React. Obviamente construimos React Router. Así que si no nos gustara React, no estaríamos aquí. Pero React, debido a su naturaleza basada en componentes, fomenta algunas cosas que creo que han creado algunas experiencias de usuario indeseables a lo largo de los años. Esto se ve en muchas aplicaciones React donde entras y ves todos estos spinners de carga que aparecen porque los diferentes componentes están cargando sus propios datos y no están elevando esa carga a nivel de ruta. Y así obtienes todas estas cascadas de datos que realmente ralentizan las cosas y hacen que la experiencia de usuario sea un poco inestable y, desafortunadamente, mucho más lenta. En busca de construir mejores experiencias de usuario, queríamos crear diseños que hicieran lo correcto de manera fácil. Ese fue también un gran motivador para Remix, simplemente diseñar algo que facilitara mover la carga de datos donde debe estar a nivel de ruta y paralelizar muchas solicitudes de datos concurrentes cuando sea posible. Así que redujimos el número de solicitudes en curso.

9. Server-side First and Static Generation

Short description:

Podemos acelerar toda la experiencia y reducir el número de spinners de carga en la pantalla. El enfoque en los fundamentos web es de donde surge el deseo de crear Remix. Server-side first es la historia de Remix, pero no se descarta la generación estática. Tus datos están separados de tu código y la generación estática es posible en el futuro. Si no has probado Remix, vale la pena intentarlo.

Podemos acelerar toda la experiencia y reducir el número de spinners de carga en la pantalla. Así que esos son dos puntos. Pero sí, echa un vistazo a nuestra - no leeré cada punto de nuestra filosofía, pero también está en nuestra documentación. Así que si tienes curiosidad por profundizar allí, mucha de nuestra motivación se describe en esa sección.

Esa era también mi comprensión, que el enfoque en los fundamentos web es realmente de donde surge el deseo de crear Remix. Y me encanta que lo esté abrazando y se esté convirtiendo en algo más como un estándar.

Tengo un comentario al respecto. ¿Existe alguna historia - el server-side first será la única historia para Remix, o tal vez hay - Sé que se puede hacer algo de almacenamiento en caché, pero ¿hay alguna posibilidad de hacer generación estática u otro tipo de renderizado en el futuro? Sí, eso no está en la hoja de ruta actualmente. Nos enfocamos mucho en que tus datos a menudo sean dinámicos. Se ejecutan en un servidor, y sí, hoy en día necesitas un servidor para construir Remix. Obviamente, tenemos adaptadores para cosas como Netlify. No necesitas cargar activamente datos desde un servidor. Obviamente, puedes crear contenido estático si quieres. Pero la generación estática no está en nuestra hoja de ruta actualmente. Dicho esto, no creo que ninguno de nosotros lo haya descartado necesariamente. Actualmente tenemos algunas soluciones alternativas para aquellos que realmente desean generar contenido estático. Hemos estado experimentando con esto internamente y creo que hay potencial. Pero tenemos que hacerlo de una manera que aún se ajuste a nuestros objetivos generales. Uno de los otros puntos en nuestra filosofía es que tus datos están fundamentalmente separados de tu código. Y creemos que eso es generalmente un mejor diseño. Así que si podemos lograr eso de manera pragmática y darnos cuenta de que, en algunos casos, algunas personas pueden querer o necesitar o preferir la generación estática, es posible. No lo hemos descartado, pero no está en nuestra hoja de ruta inmediata.

Sí, tiene sentido. Había algo más que iba a decir, pero lo olvidé, pero tenía que ver con la plataforma web y la forma en que, sí, mi mente se fue. ¿Tienes otra pregunta, Paul? No, solo iba a decir, sabes, para mí, me sorprende cuando alguien me dice que no ha probado Remix, pero en realidad hay personas que no han probado Remix. Si tuvieras que darles una razón para probarlo, ¿cuál sería? Bueno, aquí está la cosa que debo admitir. Yo mismo no soy un adoptante temprano. Me gusta hacer las cosas y lanzar software que se basa en otras cosas que sé que han sido probadas en batalla, así que lo entiendo. Todavía estoy usando módulos de CSS porque eso es lo que me gusta usar, y han estado aquí desde siempre, y la idea simplemente tiene sentido, ¿verdad? Así que no me subo a todas estas cosas nuevas solo porque alguien en Twitter está hablando de ello, así que lo entiendo completamente. Pero creo que vale la pena intentarlo, sinceramente.

10. Simplificando el Código con Remix

Short description:

Remix simplifica el código y elimina la complejidad al manejar problemas difíciles. Es un gran punto de venta ver cómo se reduce la cantidad de código. Pruébalo y experimenta la alegría de eliminar código.

Cuando lo usé por primera vez, realmente simplificó muchas cosas, y para mí, ese fue el mayor punto de venta, sinceramente. En los primeros días antes de que realmente trabajara para Remix, y solo era uno de los suscriptores cuando éramos un producto de pago. Contribuí con algo de dinero y realmente compré Remix en los primeros días y lo probé, y lo primero que me llamó la atención fue lo mucho que simplificó muchos problemas realmente difíciles. Así que si estás realmente interesado en simplificar gran parte del código que escribes en tu aplicación y eliminar mucha de la lógica que te ha vuelto loco en el pasado, para mí, el gran punto de venta desde el principio es ver cuánto de tu código simplemente desaparece y Remix maneja gran parte de esa complejidad por ti. Es bastante impresionante. Sí, si quieres probarlo y necesitas una razón, eliminar código es una buena razón para hacer cualquier cosa. Sí. Iba a decir que esta idea de simplificar el código es enorme porque la forma en que me presentaron Remix, alguien me mostró un proyecto que hicieron para su cliente donde usaron, sé que Remix puede hacer todo full stack al 100%, pero crearon un proyecto donde Remix era el front-end y usaron un CMS sin cabeza como el back-end. Y él dijo: construí este sitio web literalmente en una semana. Y yo estaba como, wow, podrías llegar al mercado tan rápido porque la experiencia de desarrollo es simplemente tan agradable. Y eso es algo que noté. Y no podía dejar de usar Remix ahora. Así que para todos, si tengo una opción, estoy usando Remix. Y muchas veces, cuando muestro las cosas que estoy construyendo, dicen: Oh, cuéntame sobre esto. Cuéntame sobre esto. Y déjenme decirles, todos están haciendo un gran trabajo. Así que estoy realmente emocionado de ver y seguir avanzando en el futuro. ¿Qué otras cosas geniales van a hacer? Sí, me encantaría escucharlo. Y todos ustedes han sido unos grandes evangelistas en los últimos 30 minutos. Así que sigan con nosotros. Sigan adelante. Remix es increíble. Escucharte hablar de ello hace que mi trabajo sea más fácil. Eso es todo lo que hago. También estoy emocionado por el futuro. Sí, quiero empezar a usar más Remix. Y he estado esperando ese sistema agnóstico de frameworks. Así que me alegra que realmente esté empezando a tomar forma y que espero poder usarlo más a menudo y participar más en la comunidad. Y asegúrate de ir allí y revisar el discord de remix, involucrarte en esas RFC. Y muchas gracias por unirte a nosotros en esta charla junto al fuego. Chance. Fue increíble hablar contigo y descubrir más sobre Shopify, comprar Remix y unirse a la asociación allí. Pero aún permitiendo que sea esta comunidad de código abierto. Así que muchas gracias. Sí, por supuesto. Gracias por hablar conmigo.

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.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Remix Architecture Patterns
Top Content
Remix provides amazing flexibility and can be deployed anywhere where JavaScript is running. But how does Remix fit into the bigger application landscape of an organization? Remix provides great utility, but how to best take advantage of it? What things should be handled inside of Remix, and what things are better off done elsewhere? Should we use the express adapter to add a WebSocket server or should that be a standalone microservice? How will enterprise organizations integrate Remix into their current stacks? Let’s talk architecture patterns! In this talk, I want to share my thoughts about how to best integrate Remix into a greater (enterprise) stack.

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
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
React Advanced Conference 2023React Advanced Conference 2023
104 min
Building High-Performance Online Stores with Shopify Hydrogen and Remix
WorkshopFree
I. Introduction- Overview of Shopify Hydrogen and Remix- Importance of headless e-commerce and its impact on the industry
II. Setting up Shopify Hydrogen- Installing and setting up Hydrogen with Remix- Setting up the project structure and components
III. Creating Collections and Products- Creating collections and products using Hydrogen’s React components- Implementing a Shopping Cart- Building a shopping cart using Hydrogen’s built-in components
VI. Building the home page with Storyblok- Cloning the space and explaining how it works- Implementing Storyblok in the repo- Creating the Blok components- Creating the Shopify components- Implementing personalisation
React Summit 2023React Summit 2023
154 min
Localizing Your Remix Website
WorkshopFree
Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website.
Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps