Remix - La Nueva Create React App

Hoy quiero hablar sobre la nueva aplicación Create React. Debería haberla llamado Create React app 2.0. Me gusta eso. Ese también es un buen título. Me voy a quedar con este, la nueva aplicación Create React. Y necesito enfocar las notas clave para poder avanzar.

Mi nombre es Brooks Libran. Puedes encontrarme en Twitter, Discord y GitHub como Brooks Libran. Eso es prácticamente todo. Trabajo en el equipo de Remix como gerente de relaciones con los desarrolladores para React Router, que es del equipo de Remix, que pertenece a Shopify. Solo para dejarlo muy claro. De hecho, intenté actualizar nuestro logotipo. Por favor, no le digas a Ryan Florence que hice esto, porque se enojará mucho conmigo. He arruinado nuestro logotipo muchas veces y él es muy exigente con cómo se ve. Y esto definitivamente está mal por varias razones.

Entonces aquí está mi pregunta. ¿Te ha pasado esto alguna vez? ¿Alguna vez te has encontrado en esta situación en la que quieres probar la nueva biblioteca de interfaz de usuario, React? Has estado escuchando mucho sobre ella. Ha estado ganando popularidad. Pero no quieres pasar una eternidad configurando webpack y Babel y todas estas cosas ridículas. Solo quieres construir algo.

Solo quieres construir tu aplicación. Y quieres un buen conjunto de valores predeterminados para poder comenzar fácilmente. No quieres tener que pensar en todas las cosas diferentes que tienes que configurar. Solo quieres que esté configurado para que puedas comenzar a construir tu aplicación.

Y no quieres estar bloqueado. Quieres tener la opción de expulsar de este mundo agradable y puro si necesitas agregar cosas más complicadas. Tal vez eventualmente aprendas cómo funciona realmente webpack y puedas descifrar la documentación que quieres la capacidad de expulsar. También finge que es 2016, y esta declaración probablemente tenga mucho más sentido. Entonces, si esto es cierto para ti en 2016, tengo buenas noticias.

Presentamos create React app del equipo de Facebook. Esta es la forma predeterminada de construir una aplicación React en 2016 en este momento. La forma en que iniciarías una aplicación React, en su mayor parte, especialmente una nueva, fresca una, un spa puro, donde todo está del lado del cliente y es hermoso y jamstack está llegando y va a solucionar todos los problemas, la forma en que harías esto es copiar y pegar de un kit de inicio de otra persona o tal vez armar un webpack y duplicarte a ti mismo. Y fue una experiencia de inicio muy, muy mala.

Entonces, el equipo meta de Facebook decidió construir create React app como el punto de partida de facto. Y fue muy exitoso. Entonces, Dan Abramov y Chris Bruchardo, dos de los miembros principales del equipo de React, crearon esto y se propusieron con esta visión, esta meta, de que esto sería la experiencia de inicio bendecida para construir spas en React que realmente puedes enviar. Puedes enviar realmente estos spas. No es solo una cosa de demostración. Queremos que create React app sea un punto de partida donde realmente puedas seguir adelante y construir y poner esto en cualquier tipo de servidor estático. Y por lo tanto, el objetivo, como dije, era hacer que fuera muy fácil comenzar con React.

Y la forma en que lo hicieron, tenían tres piezas principales en su filosofía. La primera era cero configuración. No deberías tener que configurar nada. Solo deberías poder empezar. ¿Por qué estoy lidiando con Babel y webpack? Solo quiero aprender React. Solo quiero construir en React.

Luego, solo una dependencia. Scripts de React. Solo esa dependencia, ¿verdad? Quiero decir, ocultemos el hecho de que sí, es Babel y webpack en el fondo, pero así es como funciona la torre de módulos de MPM de todos modos, ¿verdad? Siempre está ocultando otras cosas. Está ocultando esa complejidad detrás de esta única dependencia.

Y finalmente, está esta estrategia de salida de la que hablé. Eventualmente, tu aplicación puede volverse realmente complicada. Tal vez quieras renderizado del lado del servidor. Así es como quieres escapar del mundo Jamstack. Quieres renderizado del lado del servidor. Y por lo tanto, necesitarás exponer tu paquete de webpack y descubrir cómo construirlo tú mismo. Y así necesitas una estrategia de salida o expulsión, como ellos lo llamaron. Y realmente creían que esto no iba a fallar. Que este experimento de Create React App, no solo experimento, proyecto, no iba a fallar. No pensaban que iba a fallar porque intencionalmente estaban ofreciendo este conjunto mínimo de herramientas.

Tienes la capacidad de salir, de expulsar la experiencia de inicio. Y lo iban a promocionar mucho en el sitio web. Esta es la solución del equipo de React. Y realmente creo que funcionó muy bien. Realmente no falló. Pero por supuesto, como dijo una vez el periodista y autor estadounidense Gene Fowler, los proyectos de código abierto nunca están terminados. Simplemente son abandonados. Y desafortunadamente eso es lo que le sucedió a Create React App.

Esta diapositiva la robé de Ryan. Así que está desactualizada. Pero hoy es el cumpleaños del último commit de Create React App. Así que feliz cumpleaños. Esto no es para avergonzar a nadie. El proyecto Create React App realmente fue exitoso. Y vivió mucho tiempo. Y ha estado en este lento camino hacia la depreciación. Si miras todos esos puntos, es 2023, luego 2022, 2022. No es un proyecto en el que se haya trabajado activamente y no es un proyecto que debas usar para comenzar tus aplicaciones de React hoy. No hay vergüenza en eso. Creo que realmente ha llegado a un punto en el que está depreciado.

De hecho, incluso el sitio web de React, los propios docs, no recomiendan crear React como punto de partida para tu próxima aplicación React. Así que creo que fue en su mayoría exitoso.

Hay una pequeña queja que tengo sobre Create React App, en realidad. Así que cuando lo inicias, esto es lo que obtienes. Esperemos que sí, ese es un buen tamaño. Obtienes una configuración bastante simple, ¿verdad? Un archivo de lectura, un archivo de registro de paquetes, cosas estándar, una carpeta pública con cosas muy estándar, tienes un con, todo eso.

Y luego tu código fuente es realmente muy fácil. Tienes configuración de pruebas. Así que tiene algunas pruebas para ti, eso es agradable, y una aplicación única y demás. Solían incluir un trabajador de servicio con él, lo cual era muy molesto. Así que, desafortunadamente, se deshicieron de eso. Hombre, todos aprendimos rápidamente cómo funcionaban. Y no fue bueno. Pero la cosa es que esa salida de escape, esa expulsión terminaría haciendo esto. Lo convertiría en esta configuración de Babel y Webpack y todas estas cosas con las que te enfrentas de inmediato, oh, sí, quería escapar. Quería expulsar. Quería algo un poco más complicado. Pero hombre, me diste todo. Así que, sí, un poco difícil.

También me pareció interesante que cuando te expulsas, compartieron un formulario de Google donde podías dar comentarios.

Puedes completar esto si quieres. No tengo idea si alguien lo leerá alguna vez. De nuevo, no tengo idea a dónde va esto. Pero aún existe. En realidad, me gusta eso. Me gusta que quisieran recibir comentarios. Pero básicamente, el formulario de Google preguntaría cosas como, ¿por qué te expulsaste? Tal vez no. Eso sonó un poco agresivo. Solo como, ¿por qué te expulsaste? ¿Por qué querías... ¿Qué nos faltaba? ¿Qué podría haber sido mejor en Create React App? Y eso fue más o menos lo que tuvieron que hacer con Create React App.

Continuaron agregando nuevas características. Si, por ejemplo, styled components salía, tenían que agregarlo y brindarle soporte. Y eventualmente, solo tenían esta gigante configuración de Webpack que podía hacer de todo bajo el sol por ti. Y simplemente se infló. Se infló de una manera que no era súper sostenible. Entonces, ¿qué sucedió después? ¿Cómo están construyendo las personas sus aplicaciones React, especialmente como una spa como Create React App si realmente no puedes usar Create React App? Bueno, llega Vite. ¿Quién aquí ha usado Vite antes? Ok. Eso, quiero decir, básicamente toda la sala. Tal vez 80%, 90%. Vite es un proyecto muy interesante.

Surgió del ecosistema de Vue. Ha sido adoptado por muchos otros frameworks más allá de Vue. Y más recientemente, ha ganado popularidad en la comunidad de React a través de Redwood, creo, fue antes que nosotros. Astro, por supuesto, lo utiliza. Y luego, Remix más recientemente. Así que es este proyecto muy interesante en el que todos nos hemos centrado.

Y es realmente... Está diseñado para frameworks es realmente la forma en que está construido. Y también, cuando lo usas para React App, también facilita mucho comenzar con React. Y es una filosofía similar. Al menos, esto es lo que he podido entender. Es una configuración realmente fácil. No es de configuración cero, pero es bastante fácil. De hecho, si quieres crear un nuevo proyecto de Vite, simplemente haces npm create vite, le dices, ya sabes, React, y obtienes estas cinco opciones. La quinta es realmente interesante. Volveremos a eso. Y luego solo tienes esta dependencia, o tal vez dos, dependiendo de cómo lo veas. Nuevamente, las dependencias son un poco extrañas porque de todos modos ocultan cosas. Solo tienes esta dependencia del complemento de React. Así que ya te has comprometido con Vite, ya lo estás usando.

Eso es esencialmente el reemplazo de la pieza webpack. Y está haciendo toda tu construcción y todo. Y sí, solo tienes este complemento de React. Muy simple. Solo una dependencia. Es realmente agradable.

Y finalmente, tienes una estrategia de salida. Entonces, ¿cuál es la estrategia de salida en Vite? Bueno, es un poco diferente. Y cada vez que hay comillas alrededor de una palabra, no debes ser sospechoso. La estrategia de salida es el hecho de que realmente no tiene una estrategia de salida. Tiene una estrategia de comillas. Tiene este sistema de complementos realmente agradable que en realidad es muy fácil de crear complementos y hacer que todos funcionen juntos de una manera en la que webpack es un poco más difícil. Y no creo que tenga que convencer a nadie aquí de que webpack tal vez sea un poco más difícil de crear complementos. Y si tengo que convencerte, no sé, podemos hablar de eso más tarde. Así que esa fue la escapatoria.

No fue una inyección y aquí está toda la basura con la que ahora tienes que lidiar. Fue, no, simplemente comienza con el complemento de React y luego construye a medida que necesites más cosas.

Entonces, ¿cómo ha funcionado esto? Bueno, aquí están las buenas y viejas tendencias de npm de React Scripts, que es cómo funciona create React app. Esa es esa única dependencia versus Vite. Y como puedes ver, a principios de 2023, Vite despegó y simplemente, supongo que no meteoricamente, una tendencia mucho, mucho mejor que la de React Scripts, que está bien porque React Script, nuevamente, está muerto en este punto. Está obsoleto. Esa línea debería estar bajando. Me gustaría que bajara un poco más rápido, pero esa es la realidad.

También las tendencias de npm son, es una tendencia. Eso es todo. No nos preocupamos por los números en bruto aquí necesariamente. Pero la realidad es que Vite se está utilizando mucho más que React Scripts. Por supuesto, eso incluye cosas como Vue y todo tipo de otras cosas que están usando Vite. Entonces no es necesariamente una comparación uno a uno, pero el punto es que está ganando en este punto, lo cual es realmente bueno.

Y una tendencia más interesante que creo que Evan View compartió ayer en su charla en JS Nation, pero que vi por primera vez por Patak, que está en el equipo principal de Vite, mencionó que Vite acaba de superar los 13 millones de descargas semanales de npm. Pero lo más importante es que en este momento es como la mitad de las descargas de Webpack. Así que Vite realmente está ganando terreno. Está en un buen lugar. E incluso Webpack está teniendo un pequeño tropiezo. Voy a mencionarlo porque siempre hay alguien que se pregunta, ¿qué diablos son esas caídas? Así que en las tendencias de npm, cuando ves esas caídas, eso es simplemente por las vacaciones porque todos desactivan su CI, CD y todos dejamos de trabajar por un rato.

Voy a mencionarlo porque siempre hay alguien que se pregunta, ¿qué diablos son esas caídas? Así que en las tendencias de npm, cuando ves esas caídas, eso es simplemente por las vacaciones porque todos desactivan su CI, CD, y todos dejamos de trabajar por un rato. Así que si alguna vez estás confundido y piensas que las tendencias de npm no son confiables, es diciembre. Eso es todo.

De acuerdo. Así que titulé esto Remix, el nuevo Create React app. Y Pierre fue muy, muy amable al señalarme que eso no tenía sentido. Dije, ¿qué? Espacio, signo de interrogación. No estoy diciendo que Remix no sea bueno, no es una buena herramienta, pero ViteJS es sin duda el reemplazo de Create React app. Y por cierto, en caso de que no lo sepas, comparé un framework con un builder, dos puntos D. Así que le dije, supongo que tienes que ir a la charla. En realidad estoy de acuerdo con Pierre. Espero que esté aquí. No tengo idea. Pero estoy 100% de acuerdo. Vite es el reemplazo de Create React app. Estaba hablando con un colega, Mark Douglas, y él incluso, él tenía una mejor manera de expresarlo. Dijo, realmente, Vite es el Create JavaScript app en este punto. Es mucho más que solo Create React app, pero definitivamente reemplaza la experiencia que tuvimos con Create React app. No titulé mi charla Remix, el reemplazo de Create React app, sin embargo. Eso no es muy interesante, y además no voy a competir con Vite.

Eso no es muy interesante, y además no voy a competir con Vite. Vite es el ganador allí, y de hecho estamos usando Vite. Lo titulé el nuevo Create React app. Uso esa palabra específicamente porque la documentación de React misma habla sobre cómo, al comenzar un nuevo proyecto de React, si estás comenzando una nueva aplicación, un nuevo sitio web completo construido en React, realmente recomiendan usar un framework. Enumeran algunos frameworks populares en la biblioteca, Next.js, Remix y algunos otros, Expo, si estás usando nativo.

La mayoría de las personas tienen esta pregunta, oye, ¿qué pasa si simplemente no quiero usar un framework? ¿Puedo usar React sin un framework? Por supuesto, su respuesta es no, no puedes usarlo sin un framework. Esto es una broma. No es lo que dice. Pero sí dice que si estás construyendo una nueva aplicación o un sitio completo de React, recomendamos usar un framework. La razón es que hemos descubierto, el equipo de React ha descubierto que la mayoría de las aplicaciones y sitios eventualmente crean soluciones para problemas comunes como la división de código, el enrutamiento, la obtención de datos y la generación de HTML. Esto es algo que Create React app nunca admitió completamente de forma predeterminada. Todas estas eran decisiones que tenías que tomar eventualmente mientras construías tu Create React app de todos modos. En realidad, no existe tal cosa como un Create React app, por mucho que haya estado diciendo eso, porque terminas construyendo tu propia solución personalizada.

De hecho, cuando vas y tratas de averiguar si vas a usar Bootstrap y Flow y Relay y todas estas tecnologías realmente relevantes que todos estamos usando hoy en día, si vas a la sección de agregar un enrutador, dice, hey, puedes usar cualquier enrutador que quieras. React Router, ese es uno muy popular. Incluso en ese entonces, en ¿qué año fue esto, 2018? Genial, hace cinco años y medio, incluso recomendaban React Router como tu solución de enrutamiento en ese momento. Recientemente, Rick Hanlon, en un panel en React Conf, cuando hablaba sobre esta pregunta específica en la documentación de React, hizo una declaración muy buena que realmente resuena conmigo. Dijo que estás usando un framework o construyendo un framework. Y construir un framework es realmente difícil. Sé esto porque trabajo en un equipo con muchas personas que construyen un framework para ganarse la vida y ni siquiera me dejan tocarlo porque es tan difícil.

Puedo usarlo, solo que no puedo comprometer el code real, ya sabes. Y también tengo experiencia con esto en mi trabajo anterior. Estaba en una tienda de comestibles en Texas llamada H-E-B y construimos nuestro propio framework. Fue incluso antes de mi tiempo, tenía alrededor de cuatro años en ese momento y tenía renderizado del lado del servidor y obtención de datos y todo ese tipo de cosas. Y era un poco anticuado, sinceramente.

Y aunque en ese momento era un defensor de Remix, ni siquiera trabajaba para Shopify, no era el defensor más grande de deshacernos de él. El creador era el defensor más grande de deshacerse de este framework que había construido y adoptar algo que realmente tiene un equipo central como Remix o XJS. Entonces, ¿dónde podrías obtener todo esto? ¿Dónde podrías obtener la división de code, el enrutamiento y la obtención de data y la generación de HTML todo integrado cuando creas esta nueva aplicación React 2.0? Oh, espera, lo siento, esa diapositiva está equivocada. Ahí vamos. React Router, por supuesto. Esa es la solución, ¿verdad?

Una pieza importante de esta conversación para mí es que necesito hablar un poco sobre el modo spawn. Entonces, si no estás siguiendo a Remix y lo que hemos estado haciendo allí, en octubre pasado o fin de año, cuando estábamos trabajando en el complemento de Vite, cuando estábamos cambiando a usar Vite como la herramienta de compilación y haciendo de Remix solo un complemento, también lanzamos el modo spawn. Es un nombre equivocado, sinceramente, porque Remix siempre ha sido un spawn. Siempre ha sido renderizado del lado del servidor, pero luego se mejora como un spawn. Puedes optar por no hacerlo y convertirlo en una aplicación de varias páginas completa, pero debes tener el renderizado del lado del servidor, y luego todo tiene estas navegaciones del lado del cliente. Y luego lanzamos esta cosa llamada modo spawn, que en realidad funciona exactamente como Create React App. Es un spawn puro, como dicen las personas. No sé por qué un spawn renderizado del lado del servidor es un spawn impuro, pero lo es. Entonces, un spawn puro, totalmente renderizado del lado del cliente. Eso es todo.

Solo puedes renderizar la carcasa inicial de tu HTML, alguna carcasa inicial. Y esto también fue realmente útil, porque creó esa migración para las personas que solo quieren un spawn puro. Incluso en Shopify, en realidad teníamos casos de uso muy buenos para personas que no necesitaban renderizado del lado del servidor, aunque creemos que para la mayoría de aplicaciones y sitios web, se benefician del renderizado del lado del servidor. Simplemente no es el caso para todo.

Entonces, esto fue una pieza realmente importante en conjunto con el complemento Vite. De hecho, Patak, del equipo de Vite, dijo una vez que lanzamos el modo spawn, él señaló que había una alta probabilidad de que Remix terminara llenando ese vacío de create React app que quedó. Entonces, esto lo dice el equipo de Vite, no lo digo yo, también hacen este punto. Y continuó diciendo que la gente quería que convirtiéramos los inicios de Vite React en el equivalente de create React. Incluso el equipo de Vite está diciendo que eso no es realmente lo que queremos. Ese no es el camino correcto.

El nuevo create React app, el nuevo, no el reemplazo, el nuevo create React app tiene que surgir desde lo más profundo de la comunidad de React. Y es por eso que en realidad tenemos esa pequeña opción de Remix en la parte inferior, porque una vez que lanzamos el modo spawn, él siguió adelante y pudimos poner esa opción allí.

Recientemente he estado bromeando al respecto, tal vez no te hayas dado cuenta exactamente, pero tenemos este pequeño problema de marca, lo cual es realmente divertido como persona en el rol de desarrollo, ¿verdad? En realidad estamos fusionando Remix en React Router. La razón por la que estamos haciendo esto es porque React Router siempre ha sido, más bien Remix ha sido siempre React Router, el framework. Eso es realmente lo que podríamos haberle llamado y habría sido igual de cierto. Hemos estado construyendo rutas de migración para que las personas en React Router puedan llegar a Remix muy, muy fácilmente.

Hicimos esa ruta de migración demasiado buena y ahora son el mismo proyecto, en esencia. Especialmente con los complementos de Vite. Llegamos a este punto en el que es el mismo proyecto, en esencia. Tenemos dos versiones y eso realmente no tiene sentido. Además, para todos los usuarios de React Router, queremos que puedan migrar más fácilmente. Migrar es una conversación muy diferente. Más bien, lo dije mal. Queremos que puedan actualizar fácilmente a una nueva versión principal. Actualizar a una versión principal es una conversación muy diferente a migrar a un framework. Si quieres saber más sobre esto, te recomendaría leer este blog, Fusionando Remix y React Router. Y luego Ryan Florence dio una charla realmente buena hablando sobre la motivación aquí, así que no voy a entrar en todos los detalles. Más bien, solo quiero decir que React Router 7 es nuestra visión completa de todo lo que queríamos que Remix fuera y más. Entonces, ¿qué debería hacer este nuevo Create React app? Démonos un paso atrás. Olvidemos Remix y React Router y todo eso por un segundo.

Solo quiero decir lo que creo que debería tener un nuevo Create React app. No creo que Remix esté al 100% ahí. Puse un título ingenioso, pero en realidad creo que también estaba equivocado. Entonces, ¿qué debería tener el nuevo Create React app? Creo que el nuevo Create React app debería facilitar el inicio con React. No podemos perder eso. Eso todavía tiene que ser cierto, ¿verdad? ¿Qué estamos haciendo si hemos perdido esa parte? Debería tener soluciones para la división de código, enrutamiento, obtención de datos y generación de HTML directamente desde la documentación de React. Esas son las cuatro cosas importantes que deberías tener de forma predeterminada que tu framework está haciendo. De lo contrario, tendrás que construirlo tú mismo. Sería bueno si pudieras hacerlo fácilmente. Muchas cosas están relacionadas con el enrutamiento de todos modos. Debería estar actualizado con las últimas características de React. React Scripts no está actualizado con las últimas características de React. Bien. Me estoy quedando sin tiempo. Voy a repasar esto rápidamente. Debe tener una buena aceptación por parte de la comunidad y también tener un futuro definido. Entonces, ¿qué tan fácil es esto? Estamos hablando de comenzar con la experiencia de inicio. Ya hablamos de que esto es increíblemente fácil. Esto no es muy diferente. Es lo mismo.

Es solo un poco más largo en esa primera línea. Esta es la experiencia con Remix. Comenzar con la aplicación Remix es esto en sintonía. Y cuando vamos a React Router, se verá así. No es diferente. La API no es definitiva. Esa barra diagonal dev podría llamarse de otra manera. No lo sé. Eso es todo. Queremos que sea un complemento. Experiencia de inicio increíblemente simple. ¿Qué pasa con la división de código y el enrutamiento y la obtención de datos y la generación de HTML? Tenemos todas esas cosas. Tenemos todo eso integrado en React Router. Remix con este complemento lo hará mucho más fácil. Y con V7, que llegará muy pronto, también admitiremos no solo SSR y representación del lado del cliente, sino también RSEs.

Es un tema muy interesante. Acciones del servidor, por supuesto. Representación sin estática, generación de sitios estáticos es como se escucha eso. No nos gusta ese término.

Nos gusta la representación sin estática porque tiene más sentido. Y seguridad en tipos. Solo para mencionarlo. La gente ha estado quejándose desde siempre de que React Router no es seguro en cuanto a tipos y amenazando con dejar de usarlo. Lo cual está bien. No es necesario usar nuestras cosas. Creo que es bueno.

Así que estamos avanzando con todo esto. Y nos mantendremos actualizados con las últimas características de React. Tendremos soporte para React 18 y también para React 19 y los componentes de React y el compilador. Y la pieza de aceptación de la comunidad, esto es. Esta es la razón. Remix está en la parte inferior allí. Es solo que el eje Y está tan desordenado que ni siquiera se puede ver. Hemos estado ganando tracción.

Remix está funcionando bien. Ha sido influyente, más que solo números o lo que sea. Pero el verdadero héroe desconocido es React Router. Aproximadamente, si estos números son confiables, aproximadamente la mitad de los sitios web de React, por lo tanto, el uso de React DOM tiene acoplado React Router. Eso es muchas aplicaciones.

Ahí es donde queremos enfocar nuestra energía. Esto ha sido realmente divertido y realmente influyente. Pero simplemente creemos que React Router es realmente en lo que deberíamos enfocarnos. Porque es mucho más fácil. Es más básico. Es más como que ya no estás limitado a un framework. Estás usando esta biblioteca. Y si quieres el framework en partes, entonces usa este vplugin. Eso es todo. Eso para mí es mucho más simple que tratar de elegir tribalmente soy un fanático de remix, soy un fanático de esta otra cosa, todas esas cosas.

Entonces React Router es el nuevo create React app, ¿verdad? Al menos eso creo... No pasó. Creo que React Router es el nuevo create React app. Esta es mi opinión. Y lo bueno de las opiniones es que puedes decirme que estoy equivocado. De hecho, realmente quiero que vengas a intentar cambiar mi opinión. Más específicamente que eso, no quiero que cambies mi opinión. En realidad solo quiero que me digas qué falta.

Entonces este código QR tiene un formulario genuino. Puedes venir a hablar conmigo después, por supuesto.

Pero si estás en línea, me encantaría que completes este formulario. Traté de hacerlo muy simple y rápido solo para decir, hey, si estás de acuerdo con todo lo que dije, genial. Pero si no estás de acuerdo, por favor dame detalles específicos. ¿Qué crees que nos falta para que puedas decir, sí, no, estoy de acuerdo. Es una nueva aplicación de create React. Es un remix. Muchas gracias por tu tiempo.

Voy a mostrar ese código QR una vez más para que lo tengas. Pasemos a las preguntas del público. La primera pregunta es de Chris Brooks. ¿Qué obstáculos ha enfrentado Shopify... Perdón, error común. Yo también lo hago. ¿Qué obstáculos ha enfrentado Shopify al ejecutar remix en producción a gran escala? ¿Se utiliza remix para el panel de administración de Shopify? Esa es una excelente pregunta. Así que responderé al final. No, remix no se utiliza para el panel de administración de Shopify. El panel de administración de Shopify es una aplicación de enrutador de React de aproximadamente cinco millones de líneas. Está construida sobre el enrutador de React seis algo algo. Está utilizando esas API de data que tenemos.

Hay razones específicas por las que no han podido pasar a Remix y cosas en las que hemos trabajado activamente. Pero en este momento, el camino a seguir es llegar a React Router 7 y están completamente alineados en eso. Lo hemos utilizado en shop.app, que es un sitio web de comercio electrónico completamente construido que utiliza por completo Remix de Shopify. Tenemos aplicaciones integradas de Shopify, tanto de primera como de terceros, que puedes construir con Remix. Hydrogen utiliza por completo Remix. Así que hay muchas tiendas de comercio electrónico excelentes construidas en Hydrogen que utilizan Remix. Por lo tanto, lo utilizamos en muchos lugares en Shopify. Y sí, cada vez que nos encontramos con un problema o una limitación, se soluciona bastante rápidamente. Un ejemplo de esto es el `fog of war` en lo que estamos trabajando ahora mismo para solucionar shopify.com. Tiene un gran problema con el manifiesto y es algo muy reciente que estamos a punto de lanzar.

Muy bien, gracias. Si te retiras, por favor intenta hablar en voz baja para que podamos entendernos aquí. Gracias.

La siguiente pregunta es de, es un nombre difícil, Metin Parzinski. Entonces, ¿la marca remix va a desaparecer ahora?

Sí. No, para nada. Excelente pregunta. Sí, hemos tratado de aclarar esto varias veces. Y tenía la intención de decir algo en la charla, pero nuevamente, esta charla no se trataba realmente de la fusión de remix y React. La marca no está muriendo. Lo que estamos haciendo es tratar de decir que todo lo que hemos estado construyendo, creemos que encaja mejor en React Router. Y así estamos completando el arco de React Router siete, ya sabes, número de finalización. Estamos tratando de llegar a ese final. Y con remix, lo que estamos tratando de hacer es reservarlo para una primera construcción de RSC de cómo podría ser un framework. Así que se verá bastante diferente a lo que hemos estado haciendo con React Router. Y no queríamos hacer esta cosa donde tendríamos remix v3 y luego remix v4 es simplemente una cosa completamente diferente. Que simplemente estás como... Ni siquiera son el mismo proyecto. Así que en lugar de pretender que son el mismo proyecto, simplemente estamos diciendo que no son el mismo proyecto. Esto es lo que es React Router.

Y tenemos otro proyecto en camino. Pero no, no nos estamos deshaciendo de él. De hecho, tengo un montón de regalos promocionales. Por favor, ven a recoger los regalos después, porque no quiero llevarlos de vuelta a Estados Unidos.

De acuerdo. Bien, bien. Gracias. Siguiente pregunta. Los cambios disruptivos de React Router dificultan la migración de una versión a otra. ¿Qué tan bueno es el nuevo remix para manejar esos problemas? La migración es el factor de detención.

Sí, esa es una gran pregunta. Así que estamos bastante obsesionados con los cambios disruptivos. Y definitivamente... Sí. Me encantaría escuchar... Cuando la gente dice esto, sería realmente útil cuando estás dando esta retroalimentación que nos digas específicamente cuáles son los problemas que has tenido. Porque estoy de acuerdo. El cambio disruptivo de React Router v4 a v5 fue terrible. La realidad es que ni siquiera era ingeniero cuando eso sucedió. O apenas estaba comenzando.

La mayoría de las personas en esta sala honestamente no pasaron por eso en realidad. Si solo escuchaste eso en Reddit, te pediría que dejes de repetir cosas que escuchas en Reddit.

Ahora, si realmente has pasado por cambios disruptivos difíciles con el enrutador de React, me encantaría escuchar eso.

Pero lo que hemos hecho es que de la versión 5 a la 6, hay un completo... Tuvimos que reconstruirlo con hooks. Cada una de las principales bibliotecas de React hizo exactamente lo mismo en ese momento.

Y lo que hicimos fue intentar crear APIs y APIs de puente en ese momento. Y cuando digo `nosotros`, esto fue mucho antes de que yo estuviera en el equipo.

El enrutador de React v6 ha estado presente durante varios años en este punto. Sin cambios disruptivos. Agregamos capas para obtener los datos desde los enrutadores. Así que siempre hemos tenido esa ruta de migración.

Estamos hablando de Remix, la actualización de Remix v1 a v2. Usamos estas cosas llamadas future flags.

Y para todos con los que hablamos, cuando actualizaron de v1 a v2, la palabra que usaron fue aburrido. Fue solo una actualización aburrida. Cuando todos estén en las flags v3 o v2, una vez que estén listos, será una actualización muy fácil.

Así que eso es exactamente lo que vamos a hacer ahora. Vamos a proporcionar APIs que sean APIs de puente. Tendremos excelentes guías de migración.

Vamos a code modificar tanto como sea posible. Si estás utilizando remix en este momento, pasar de remix a React Router 7 sería increíblemente sencillo. Si estás utilizando React Router, es una historia más matizada, porque depende de dónde te encuentres con React Router, ya que tiene una historia de 10 años. Así que tendríamos que hablar de dónde te encuentras. Pero si estás en React Router y has estado utilizando lo último y lo mejor, también será increíblemente sencillo actualizar.

Sí, cuanto menor sea la diferencia, más fácil será la actualización, por supuesto. Sí.

Bien, siguiente pregunta de Lucas. ¿React Router 7 tendrá soporte para middlewares? Sí, con un asterisco. No lo haremos en la versión 7.0. Estoy muy triste. Realmente desearía que lo hiciéramos. Creo que será en la versión 7.1. Básicamente, estamos en este punto donde ya tenemos muchas nuevas características que estamos tratando de agregar y cualquier otra cosa. Estamos creando más complejidad, más oportunidades para que el camino de migración sea difícil. Así que lo que estamos haciendo es tratar de lanzar la versión 7.0 lo antes posible. Y lo bueno es que todo está construido para que el middleware funcione de manera muy sencilla. Ya tenemos los patterns en su lugar y todo, así que debería ser bastante fácil. Y cuando hemos estado en un lugar estable con una nueva versión, ha sido aproximadamente un ciclo de lanzamiento de dos semanas para llegar a una nueva versión. Así que me siento muy seguro de que una vez que estemos en la versión 7.0, será muy fácil llegar al middleware en esa siguiente versión menor.

¿Recomendarías a Lucas esperar a la versión 7.1 entonces? Realmente necesitaría saber para qué necesita middleware Lucas específicamente. Porque si estás utilizando algo como Express, ya tienes middleware. Estoy de acuerdo, no es tan ergonómico como lo que tenemos. También hay una solución de middleware personalizada que Killamon, quien es muy importante en nuestra community, ha creado. Tal vez recomendaría investigar eso y ver si soluciona tus problemas. Estoy de acuerdo, el middleware es algo muy útil, pero hay mucha gente que no ha dejado de usar Remix porque no tiene soporte de middleware, porque hay soporte de middleware en, nuevamente, Express y otros lugares donde tal vez deberías comenzar primero. Pero estoy de acuerdo, el middleware debería estar disponible. Pero, sí. Si es la razón por la que no estás usando Remix, explícame por favor por qué, porque aún no he entendido esa parte. Lo puedes hacer justo después de esta sesión de preguntas y respuestas en la sesión privada de preguntas y respuestas o buscarlo en línea. Porque su trabajo es ayudarte. Le pagan para ayudarte, ¿verdad? Sí.

Muy bien. ¿Qué tan fácil será migrar de Remix en modo SPA a SSR? Sí, es una excelente pregunta. Es un cambio de un booleano. Es decir, solo se cambia una línea, sí. Por supuesto, tienes que implementarlo en un servidor, así que estoy siendo un poco sarcástico. Pero sí, simplemente lo cambias y de inmediato estás renderizando todo en el lado del servidor. Sin embargo, debes verificar si dependes de cosas como window y todas esas cosas. Debes revisar eso y comprobarlo.

Esa parte es normal, pero no tienes que hacer nada desde el lado de la configuración excepto activar el booleano de usar el modo SPA o lo que sea falso. Fue tan fácil. Tu respuesta fue tan rápida que pensé que no había terminado todavía. Sí. Muy bien.

Siguiente pregunta. Creo que es la última pregunta. ¿Es Remix un buen punto de partida para encontrar mejores prácticas con Remix? Sí, es una excelente pregunta. Depende de lo que entiendas por mejores prácticas, pero los documentos son lo mejor que tenemos. Si tienes problemas con los documentos, avísanos porque siempre estamos tratando de mejorarlos. También estamos en proceso de... La razón por la que las migraciones llevan tiempo o esta actualización lleva tiempo es porque estamos tratando de combinar dos documentaciones. Ese fue otro problema que tuvimos, ReactRouter tenía buena información, luego Remix tenía otra buena información. Estamos tratando de combinar y simplificar para que mejore. Si sientes que nos falta algo, por favor contáctanos. Pero en su mayoría, los documentos de React deberían ayudarte a comenzar. Y luego nuestros... Perdón, los documentos de Remix, vaya. Y luego, el Remix, nuestro canal de YouTube también tiene buen contenido si eres más un video, un aprendiz visual. Un tipo de video. Muy bien. Luego, la última pregunta para mí. ¿Quién aquí está utilizando Remix en producción? Genial. ¿Quién está utilizando ReactRouter en producción? Sí. ¿Qué esperabas? Sí, sí. Más del lado de Remix, en realidad.

Eso es todo el tiempo que tenemos. Así que, muchas gracias.