¿Alguna vez has deseado tener un enfoque flexible para localizar tu contenido y escalar fácilmente? Únete a mi charla y te mostraré múltiples estrategias para traducir y localizar tu contenido con Remix. Compartiré contigo opciones flexibles de rutas dinámicas desde Remix para generar contenido localizado de manera práctica, incluyendo una demostración de enfoque sin cabeza y cómo escalar tu solución en el futuro. ¡Vamos a "Remix" para localizar tu contenido!
This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.
FAQ
Remix es un marco de desarrollo que, junto con paquetes como Remix IAT Next, permite implementar la internacionalización de aplicaciones web. Esto facilita la adaptación de contenido en diferentes idiomas y regiones, mejorando el alcance global de las aplicaciones.
Los métodos incluyen la ubicación por dirección IP, el uso de encabezados de idioma aceptado de HTTP y los idiomas del navegador, además de identificadores en la URL para determinar y ajustar el idioma y regiones de los usuarios.
Aproximadamente el 41.97% de los desarrolladores encuentran que la internacionalización no es un proceso preferido, calificándolo como algo molesto y no prioritario frente a otros aspectos como el rendimiento y la accesibilidad.
Storyblock, siendo un sistema de gestión de contenido, ofrece opciones para configurar cómo se localiza el contenido, facilitando la internacionalización de aplicaciones desarrolladas con Remix a través de la gestión de contenido localizado.
La internacionalización es crucial dado que más del 74.1% de los usuarios de Internet acceden a contenido en idiomas distintos al inglés. Esto subraya la necesidad de adaptar las aplicaciones web para servir a una audiencia global diversa.
Se mencionan estrategias como la utilización de subdirectorios para localizar URLs, la configuración de archivos de traducción y la integración de APIs y paquetes especializados como IAT Next para gestionar la traducción de contenido.
Esta charla explora Remix e internacionalización, discutiendo el impacto y la lógica de la internacionalización y los desafíos que enfrentan los desarrolladores. Destaca el uso global de Internet y la importancia de localizar el contenido. Se explica la lógica fundamental de la internacionalización, incluyendo enfoques basados en ubicación, encabezado y URL. Se demuestra la implementación de la internacionalización en Remix utilizando el paquete Remix IAT Next y un Sistema de Gestión de Contenido. La charla también cubre la configuración del lado del cliente y del servidor, la importación y envoltura de archivos de traducción, y la implementación de rutas dinámicas con Remix.
Hola a todos. Estoy muy emocionada de verlos a todos y hablar sobre Remix e internacionalización. Soy Arisa, una ingeniera de relaciones de desarrollo en Storyblock y embajadora en Girl Code y GDE. Exploraremos el impacto y la lógica fundamental de la internacionalización, y cómo funciona con Remix. Todavía hay discusiones activas sobre Remix e internacionalización, así que siéntanse libres de contribuir. Vamos a sumergirnos y ver qué piensan los desarrolladores sobre la implementación de la lógica de internacionalización. No es un tema prioritario, pero ¿por qué? Según Maya, no se implementa a diario y hay problemas con el texto localizado y las claves de internacionalización. Vamos a explorar la internacionalización desde una perspectiva global y considerar el punto de vista del usuario.
estoy muy emocionada de hablar sobre Remix e internacionalización. Bueno, para no perder más tiempo, aquí hay algunas cosas sobre mí. Mi nombre es Arisa y soy una ingeniera de relaciones de desarrollo en Storyblock, así como embajadora en Girl Code y GDE, Google Developer Expert en Tecnologías Web. Bueno, hay 3 puntos clave en mi charla. En primer lugar, vamos a analizar el impacto de la internacionalización y la lógica fundamental, y por último vamos a ver cómo funciona Remix y la internacionalización juntos. Hay algunas notas que quiero que tengan en cuenta antes de ver mi charla. En primer lugar, todavía hay discusiones activas sobre Remix y la internacionalización, lo que significa que podrían ser una de las personas que contribuyan a mejorar la experiencia de desarrollo. Así que siéntanse libres de echar un vistazo a las discusiones o incluso unirse a ellas. Voy a compartir las diapositivas más adelante en Twitter, para que tengan acceso a todos los enlaces que he pegado en estas diapositivas. Muy bien, vamos al grano. Estamos aquí para hablar sobre la internacionalización y cómo funciona con Remix. Mientras preparaba mi charla, quería incluir tantas opiniones de los desarrolladores como fuera posible, no solo desde mi punto de vista. Así que empecé a hacer esta pregunta en Twitter. ¿Les gusta implementar la lógica de internacionalización? Y este es el resultado que obtuve. En primer lugar, obtuve el resultado de 30... 36 desarrolladores Y dicen que aproximadamente el 41.97% de los desarrolladores. Dicen que no es su favorito. Es un proceso un poco molesto de hacer. Y basándome en este hecho, también quería saber, hmm, okay, quiero saber más detalles. Pero probablemente por lo que veo en esta rápida encuesta en Twitter, tal vez para nosotros los desarrolladores no es un tema prioritario en comparación con el rendimiento y la accesibilidad. Pero por supuesto quiero saber más. ¿Por qué? Así que pregunté. Si la internacionalización no es tu parte favorita, ¿por qué es así? Aquí está mi amiga, Maya, que me respondió. Gracias, Maya. En primer lugar, ella dice, como no implementa la función de internacionalización a diario. Significa que cuando necesita hacerlo, necesita volver a ver cómo funciona en las bibliotecas de internacionalización o los frameworks que usa cada vez. Además, hay un pequeño problema entre el texto localizado y las claves de internacionalización, ya saben, durante las pruebas. Así que sabemos que, okay, probablemente la internacionalización no es el tema más popular y no es algo divertido para los desarrolladores. Y según lo que pensamos, por supuesto, también necesitamos echar un vistazo o ver cómo es en el mundo. Y
2. Uso global de Internet
Short description:
Hablemos sobre el uso global de Internet. Hay 5.07 mil millones de usuarios de Internet en todo el mundo. Solo el 25.9% del contenido está en inglés, mientras que el 74.1% es en otros idiomas. China tiene la mayoría de los usuarios de Internet y Asia representa más de la mitad de los usuarios de Internet a nivel mundial. Localizar el contenido puede no ser un tema popular para los desarrolladores, pero es demasiado importante para ignorarlo.
¿cómo es desde la perspectiva del usuario? Aquí están los pequeños números y los datos, me gustaría comenzar con números más grandes. En primer lugar, quiero que pienses en este número. ¿Qué crees que representa este número de 5.07 mil millones, número de usuarios en el mundo que utilizan Internet? Desglosando, ya sabes, estos grandes miles de millones de números en porcentajes más pequeños, comenzando por el 25.9%. ¿Qué opinas de este porcentaje? En realidad, es el porcentaje del contenido en inglés en el 25.9%. Es menos del 50%. Lo que significa que si eres bueno en matemáticas, entonces podrías calcular este número 74.1%. Sí, ese es el resto del porcentaje de los usuarios que acceden a contenido en otros idiomas en Internet. Lo cual nos lleva a esta palabra clave, China. China tiene la mayoría de los usuarios de Internet a nivel mundial. No es sorprendente basándonos en este hecho. También podríamos pensar en esta palabra clave, Asia. Sí, Asia tiene más de la mitad de los usuarios de Internet a nivel mundial. Eso es enorme, ¿verdad? Así que ahora sabemos que localizar el contenido no es el tema más popular para nosotros, los desarrolladores. Sin embargo, no podemos ignorarlo, sin importar qué. Sabes, más de la mitad de los usuarios en el
3. Fundamental Logic of Internationalization
Short description:
Hablemos sobre la lógica fundamental de la internacionalización. Funciona de tres maneras: ubicación a partir de la dirección IP, encabezado de idioma aceptado de la solicitud HTTP o los idiomas del navegador, y el identificador en la URL. Utilizaremos dos formas híbridas para brindar a los usuarios más flexibilidad y control. Hay tres patrones para localizar la URL: diferentes dominios, parámetros de URL y subdirectorios de localización. Ahora hablemos de los marcos y bibliotecas que utilizan la internacionalización.
mundo. Son números demasiado masivos para ignorar. Entonces, basándonos en lo que sabemos, en lo que sentimos, hablemos sobre la lógica fundamental de la internacionalización. En primer lugar, la internacionalización funciona de tres maneras, para determinar los idiomas y las regiones. El primer enfoque, el más importante, es la ubicación a partir de la dirección IP, lo que significa que, según la dirección IP, por ejemplo, donde me encuentro actualmente en Alemania, el contenido que veo en Internet detectará que estoy en Alemania. Por lo tanto, el contenido se mostrará, ya sabes, en alemán a veces si utilizan este enfoque. Si utilizan el segundo enfoque, significa que utilizan el encabezado de idioma aceptado de la solicitud HTTP o los idiomas del navegador lo que significa que echarán un vistazo a mis preferencias de idioma. Entonces, en el navegador, prefiero usar el inglés. Eso es lo que configuro en mi configuración y eso es lo que, ya sabes, la información que se utilizará para, ya sabes, devolver el contenido localizado para mí. A veces, incluso cuando estoy en Alemania, veo el contenido en inglés como lo preferí. Y la tercera opción es utilizar el identificador en la URL. Básicamente, se trata de traducir o localizar la URL para los usuarios. Esto significa que tendría, por ejemplo, botones de selección de idioma en inglés, alemán y japonés en el navegador, y puedo hacer clic para seleccionar para ver los idiomas. En esta charla, vamos a utilizar dos formas híbridas porque quiero que los usuarios sean más flexibles y tengan más control por sí mismos. Así que dejaré la opción para que ellos cambien los idiomas de su elección en el navegador desde la interfaz de usuario, así como en primer lugar, seamos más amables detectando su idioma preferido configuración en el navegador. Así que vimos juntos cómo funciona. O cuál es la lógica fundamental en la internacionalización. Y en cuanto al identificador de URL, hay tres patrones para analizarlo. Así que vamos a desglosarlo. Patrón uno. Esta es una forma de diferenciar, ya sabes, el contenido localizado por dominios, básicamente, vas a crear sitios web totalmente diferentes en este caso, pero los dominios son diferentes. Por lo tanto, no seguirá la misma política de origen, lo que significa que tus sitios web podrían ser considerados como una especie de copia. Pasemos al patrón dos. El patrón dos utiliza los parámetros de la URL. Tal vez para los desarrolladores tenga sentido, pero no es amigable para el usuario. Y también para todos, esta URL no se ve limpia, ¿verdad? Así que no queremos seguir este camino. Pasemos al patrón tres, que es la localización de subdirectorios. En este caso, vamos a agregar el slug localizado después de, ya sabes, algo.com, o una barra diagonal. De esta manera, es bastante claro para los usuarios en qué idioma están viendo. También es más fácil para nosotros identificar qué idioma entregamos a los usuarios. Muy bien, ahora hablemos de los frameworks y las bibliotecas. ¿Por qué de repente de la nada? Bueno, es un tema bastante relevante, porque algunos de los frameworks y las bibliotecas, y utilizan la internacionalización
4. Internationalization in Remix
Short description:
Veamos cómo funciona la internacionalización en Remix. Hay dos enfoques: usar el paquete Remix IAT Next o un Sistema de Gestión de Contenido. Remix IAT Next es un paquete de NPM diseñado específicamente para la internacionalización en Remix, creado por Sergio. Crearemos archivos de configuración y archivos traducidos, con el inglés como idioma predeterminado. Usaremos la propiedad 'greeting' y sus valores localizados para la traducción. Después de crear los archivos traducidos, crearemos un archivo de configuración de i18next, especificando los idiomas admitidos y un idioma de respaldo. Finalmente, importaremos el archivo de configuración de i18next y llamaremos a los valores de idioma admitidos y de respaldo.
de frameworks. Así que veamos cómo funciona en Remix. En el caso de Remix, hay en general dos enfoques para elegir. La primera opción sería usar el paquete llamado Remix, IAT Next. Y el segundo enfoque sería usar un Sistema de Gestión de Contenido. Primero, veamos qué es Remix IAT Next. Como te dije antes, es un paquete de NPM, ¿verdad? Y está específicamente diseñado para que Remix utilice este marco de internacionalización llamado IAT Next, creado por Sergio. Así que gracias, Sergio, por crear un paquete de NPM tan increíble porque ahora, gracias a eso, tenemos más opciones para elegir. Muy bien, veamos un ejemplo de este caso. En primer lugar, vamos a crear un par de archivos de configuración. Pero para empezar, vamos a crear archivos traducidos. En este caso, voy a crear un idioma predeterminado y otro idioma. Así que establecí el inglés como idioma predeterminado. En el lado derecho y en la parte superior, el archivo se llama common.json, te mostraré por qué ya sé que puedo dar un nombre, ya sabes, al archivo common.json en este caso. Pero por ahora, centrémonos en cómo podemos aceptar el nombre de la propiedad y los valores clave, que en realidad están localizados en valores de cadena. En primer lugar, he decidido llamar a esta propiedad greeting. Así que este valor lo usaré cuando traduzca desde el código fuente, ya sabes, nivel. En el lado derecho está el valor clave, que es el valor de cadena localizado. Quiero decir hola en inglés y traducirlo al japonés. En este caso, he creado otro archivo traducido para, ya sabes, almacenar, ya sabes, este archivo traducido en japonés en el directorio JA. El valor será hola en japonés. Después de crear estos archivos traducidos, vamos a crear un archivo de configuración de i18next. Como dije antes, por alguna razón ya sabía que podía dar el nombre de los archivos traducidos como command.js, ¿verdad? Así que aquí está la razón por la que ya sabía que podía dar un nombre como command.js. Hay un par de otras configuraciones, pero nada demasiado complicado porque en primer lugar solo quiero enumerar los idiomas admitidos, inglés, japonés y, por supuesto, quiero tener un idioma de respaldo que sea el idioma predeterminado. Basado en lo que creamos para traducir estos archivos, y también la traducción de IAT Next, lo siento, el archivo de configuración, ahora es el momento de importar este archivo de configuración de IAT Next en el archivo IAT Next.server.js. Después de importarlo, por supuesto, quiero llamar a un par de valores. En primer lugar, la lista de idiomas admitidos y también la lista de idiomas de respaldo. Y en función de eso, recuerda, este archivo de configuración que creamos, estas listas de idiomas son las matrices dentro de
5. Configuración del lado del cliente y API IATNextProvider
Short description:
Así que puedo iterar estos valores desde el archivo de configuración que he creado. Aquí está el archivo de configuración del lado del cliente, entry.client.jsx, donde envolvemos el componente del navegador de Remix con la API IATNextProvider. Es importante cargar los archivos de traducción antes de la hidratación para asegurar que la aplicación sea interactiva. Envolver el componente del navegador de Remix con la API IATNextProvider asegura el momento de la hidratación y la carga de archivos de traducción. Esta configuración es crucial para que la aplicación muestre la interfaz de usuario con estilos y archivos de traducción cargados.
Para iterar estos valores desde el archivo de configuración que he creado. Y aquí, lo que estoy haciendo es establecer las rutas de los archivos de traducción. Bien, ahora pasemos a crear los archivos de configuración del lado del cliente y del lado del servidor. Solo te mostraré los detalles de los archivos de configuración del lado del cliente, porque puedes ver más detalles sobre los archivos de configuración del lado del servidor, y un par de líneas de código son bastante similares. Así que no quiero repetir el contenido similar. Aquí está el archivo entry.client.jsx, que es el archivo de configuración del lado del cliente. Hay un par de líneas de código, pero quiero que prestes atención solo a las líneas resaltadas. En primer lugar, hay una API llamada IATNextProvider que proviene de React IATNext. Ten en cuenta que de esta manera vamos a instalar y usar un par de otros paquetes relacionados con IATNext. Así que asegúrate de que esto provenga realmente de React IATNext. Después de decirte que prestes atención a esta API, aquí es donde puedes llamarla dentro del ámbito JSX. Vamos a envolver este componente del navegador de Remix que proviene de Remix, y vamos a ver la lógica de por qué necesitamos envolver este componente precisamente con esta API IATNextProvider. Pero para darte un poco más de contexto, lo que estamos envolviendo es que mientras este componente del navegador de Remix es o debería ser utilizado por React para hidratar el HTML. Así que hay otra pista de por qué insisto y resalto estas líneas de código. En realidad, es muy importante ver el momento en que se va a hidratar. Cuando se van a cargar los archivos de traducción. Aquí están las respuestas para que las veamos juntos. En primer lugar, veamos por qué los archivos de traducción, ya sabes, deben cargarse antes de la hidratación. Bueno, probablemente empecemos a imaginar si los archivos de traducción no se cargan antes de que ocurra la hidratación. Imagina que la hidratación, digamos, lo siento, no imagines, pero cuando ocurre la hidratación, los usuarios ya pueden ver la interfaz de usuario con todos los estilos, ¿verdad? Pero la aplicación en sí aún no es interactiva. En este caso, los archivos de traducción aún no están listos y la hidratación ya ocurrió. Así que si quiero cambiar el idioma de inglés a japonés para ver hola, no puedo verlo porque en primer lugar estos valores de traducción aún no están listos. Basado en eso, si imaginamos que los archivos de traducción ya se cargaron antes de que ocurra la hidratación. Ahora sabemos que este caso funcionaría porque la aplicación ya es interactiva de alguna manera. Así que cuando ocurre la hidratación, la interfaz de usuario está lista con los estilos y los archivos de traducción ya se cargaron. Así que si quiero cambiar de inglés a japonés para decir hola, ahora puedo verlo porque los archivos de traducción ya se cargaron. Yendo un poco más en profundidad, digamos una pregunta basada en lo que vimos en el archivo de configuración del lado del cliente. Entonces, ¿por qué envolver, ya sabes, esta API de Remix llamada navegador de Remix con el código de API IATNextProvider que proviene de React IATNext? Así que eché un vistazo a un poco más de detalles desde el nodo
6. Configuración de Internacionalización y Root.jsx
Short description:
Las APIs useMemo y React Hope ayudan a capturar el resultado de los cálculos entre re-renderizaciones, mejorando el rendimiento. La internacionalización es clave para mejorar el rendimiento, y el uso de paquetes como Remix elimina la necesidad de implementar funciones desde cero. Los archivos de configuración del lado del servidor pueden identificar los idiomas preferidos de los usuarios y redirigirlos. En el archivo root.jsx, presta atención a la API useLoaderData, que recupera la configuración regional desde la función de carga. La API JSON simplifica el proceso de devolución de la configuración regional. Cambiar entre idiomas en el navegador demuestra la funcionalidad de traducción.
archivo modules. Y aquí está lo que pude alcanzar. Así que utilizo el useMemo y la API React Hope. Este React Hope te permite capturar el resultado de los cálculos entre re-renderizaciones. Si lo explico de manera más sencilla, básicamente, si los valores de esta configuración de internacionalización y los espacios de nombres de los nombres predeterminados para traducir los archivos son iguales, entonces no vamos a activar la re-renderización porque eso te costaría mucho y no sería eficiente. Queremos evitar que no sea eficiente. Entonces, si los valores de estos cálculos son iguales, no activaremos la re-renderización. Pero si los valores se actualizan, entonces activaremos la re-renderización. Desde esta perspectiva, puedes ver que la internacionalización es clave para mejorar el rendimiento y debes tener en cuenta el rendimiento. Pero al usar todos estos paquetes, ya se tiene en cuenta. Así que no tienes que implementar este tipo de funciones desde cero en tu lado. Solo una pequeña información sobre cómo configurar el archivo de configuración del lado del servidor, en primer lugar, quiero mencionarte que la identificación de los idiomas preferidos de los usuarios y redirigirlos se puede hacer en el lado del servidor. Si quieres echarle un vistazo, aquí está el enlace y el archivo readme para que lo veas. Bien, pasemos a usar las configuraciones que hemos establecido hasta ahora en acción. Aquí vamos a ver el archivo llamado root.jsx en el directorio de la aplicación. Este es el archivo fundamental y importante en la aplicación Remix. Aquí, presta atención a tres APIs que vienen del lado de Remix. Comenzando por useLoaderData. Esta useLoaderData obtendrá la configuración regional desde la función de carga en la aplicación superior. Esta función de carga no es solo una función aleatoria que hemos definido. En cambio, es una API del backend que proviene de Remix y ya está conectada a través de useLoaderData. Esto significa que estas APIs ya están vinculadas entre sí. Entonces, lo que debemos hacer al final es obtener la configuración regional, ¿verdad? Esto significa que necesitamos devolver la configuración regional. Para hacer eso, podemos solicitar que la respuesta nos proporcione una configuración regional. Pero en lugar de definirlo escribiendo unas pocas líneas de código aquí para decir algo como nuevas cabeceras de respuesta, etc., puedes llamar a otra API llamada JSON que proviene de Remix para completar este tipo de proceso en una línea de código. Bien, veamos cómo funciona en el navegador. Veamos, si cambio entre español e inglés, ahora puedes ver que los elementos de navegación del encabezado se están traduciendo. Y también el mensaje de saludo Hola también se ha traducido. Y también los botones de abajo, también. Para traducir esta parte de Hola, aquí está
7. Importación y Envoltura de Archivos de Traducción
Short description:
En cualquier ruta de tu aplicación Remix, puedes importar el uso de traducción de react-ia-t-next y envolver la propiedad que proviene de los archivos traducidos. Tenemos dos archivos traducidos, con la propiedad 'greeting' establecida como el cuerpo. Sin embargo, confieso que utilicé parámetros de URL en lugar de traducir el texto. No queremos mantener archivos de traducción en el código fuente y queremos lograr URLs localizadas.
En cualquier ruta de tu aplicación Remix, puedes importar este uso de traducción que proviene de react-ia-t-next. Y en función de lo que configuremos y creemos, todo lo que necesitamos hacer es envolver la propiedad que proviene de los archivos traducidos. Recuerda que creamos dos archivos traducidos, ¿verdad? Y en la propiedad, establecí el cuerpo como saludo. Así que eso es lo que estoy envolviendo. Aquí está el resultado que puedes ver. Y antes de pasar a la siguiente diapositiva, tengo una pequeña confesión para ti. Así que necesitas prestar atención a esto aquí en la ruta de URL, ves una pequeña barra inclinada que incluye los parámetros de URL, ¿verdad? Así que aquí están las tres confesiones de mi parte. Permíteme ser honesto, utilicé los parámetros de URL. Sí. Y eso no es algo que quisiera hacer. Y de hecho, al comienzo de esta charla, te dije que queremos evitar usarlo. Y en segundo lugar, ¿los desarrolladores necesitamos mantener los archivos de traducción? Si pensamos en el proceso o las configuraciones que hemos creado, ahora recordamos que hay dos archivos de traducción, ¿verdad? En inglés y japonés. No queremos mantener estos archivos de traducción en el nivel del código fuente, ¿verdad? Además, la tercera confesión. ¿Tradujimos este lux? No, no creo que lo haya traducido. En su lugar, utilicé los parámetros de URL. Aquí hay otro amigo mío en Twitter. Gracias de nuevo por tus comentarios. También consideró lo mismo. Si quiere dividir los archivos de traducción por ruta, es posible, pero es un poco engorroso. Por supuesto, no es ideal encargarse de todos estos archivos traducidos en el nivel del código fuente. No queremos hacer eso. Además, quiere saber cómo localizar las URLs. Permíteme ser claro sobre lo que queremos lograr durante el resto de mi charla. Queremos lograr URLs localizadas, ¿verdad? Y también, no queremos tener archivos de traducción en nuestro código.
8. Implementación de la Internacionalización con Remix
Short description:
Remix puede implementar la internacionalización utilizando el paquete Remix IAT Next de NPM o un sistema de gestión de contenido. Storyblock es un CMS recomendado por su flexibilidad en la localización de contenido. Las diferentes opciones de CMS ofrecen diversas formas de estructurar y almacenar contenido localizado. Este enfoque implica almacenar el contenido localizado en carpetas dedicadas, asegurando una clara separación. Los traductores pueden trabajar en la traducción del contenido y en la gestión de dónde se almacena. Se pueden crear rutas dinámicas utilizando el enfoque de ruta plana en Remix, lo que permite crear fácilmente rutas dinámicas anidadas sin editar el código fuente.
Así que aquí tienes otro ejemplo. Sabes, basado en lo que vimos, como Remix en general, puede tener dos enfoques para implementar la internacionalización. En primer lugar, echamos un vistazo juntos a cómo usar este paquete NPM llamado Remix IAT Next. Y en segundo lugar, vamos a ver un ejemplo de sistema de gestión de contenido. Así que puedes elegir cualquier tipo de sistema de gestión de contenido o headless CMS que esté disponible. En esta charla, elegí Storyblock porque es el más cómodo, diría y el CMS más familiar para mí, el que más uso. Además, ofrece la mayor cantidad de opciones para configurar cómo quieres localizar el contenido en el lado del CMS. Pero no voy a hablar de cómo puedes implementar Storyblock y Remix. Esto se puede explicar en este tutorial, por ejemplo, un artículo de blog, para que puedas consultarlo fácilmente después de mi charla. Muy bien. Dependiendo del CMS sin cabeza o del CMS que elijas, te darán en promedio, de una a cuatro formas de estructurar y almacenar contenido localizado. Y como parte de ello, también te darán algunas posibilidades, no solo a ti, sino también a tus traductores y editores de contenido, para estructurar cómo quieren anidar estas rutas dinámicas. Me gustaría tener más tiempo para explicar y mostrarte todas estas cuatro formas, pero por cuestiones de tiempo, voy a mostrarte esta carpeta y la traducción. Este enfoque es bastante sencillo, porque como puedes ver, todo el contenido localizado se almacena en carpetas dedicadas. Así que no hay forma de que los traductores mezclen páginas y contenido localizado. Así que en primer lugar, antes de profundizar en cómo funciona a nivel de código fuente, voy a mostrarte cómo funciona en el navegador. Aquí estoy en la página de vista general del blog por defecto, que está en inglés. Y por supuesto, si voy a ver el viaje a Salt Lake City, todos estos, ya sabes, los artículos de blog en inglés para las páginas relevantes se almacenan en la carpeta. Y la URL local, digamos, no debería incluir ninguna parte, porque este es el idioma por defecto, ¿verdad? Pero si voy a esta misma página, el viaje a Salt Lake City en japonés, debería incluir JA, que significa el slug en japonés. Y también, el contenido se traduce en el lado derecho, puedes ver que tus traductores pueden trabajar para almacenar los valores traducidos del contenido. Y si vuelvo a la página anterior, que es la página de vista general del blog, también incluye JA en la URL. Y si vuelvo a la página de inicio por defecto, que está en la ruta más alta, no debería incluir ninguna parte, ni siquiera una n del slug del idioma, y por supuesto el contenido vuelve a estar en inglés. Así que de esta manera puedes ver que ya no tienes que lidiar con archivos traducidos en tu código fuente. En cambio, los traductores, que deberían ser los responsables de comenzar a traducir el contenido y gestionar dónde se debe almacenar, pueden tener toda la flexibilidad. Y aquí está la pequeña lógica de cómo puedes crear este tipo de lógica de ruta dinámica. En Remix, hay un par de formas de, digamos, renderizar este tipo de rutas dinámicas. Pero elegí este enfoque de ruta plana, porque al usarlo, permitirás a quien quiera crear páginas e incluso crear rutas dinámicas anidadas desde el sistema de gestión de contenido. Pueden hacerlo
9. Implementación de rutas dinámicas con Remix
Short description:
Una vez que implementes esta función, las rutas dinámicas, incluyendo estructuras anidadas, se pueden hacer desde el lado del CMS. Remix proporciona un parámetro útil llamado params, que muestra la ruta dinámica completa de las páginas. Esta lógica se utiliza para renderizar las rutas dinámicas, incluyendo las rutas anidadas.
que sin que lo sepas, como editar cualquier código fuente. Así que una vez que implementes esta función, utilizando esta ruta plana, entonces ya sabes que las rutas dinámicas, incluso las estructuras anidadas, se pueden hacer desde el lado del CMS. Así que aquí está el pequeño ejemplo. Ya conoces este uso de loader data y JSON, ¿verdad? Así que voy a prestar más atención a estas líneas de código resaltadas en verde. Remix ya te proporciona un parámetro muy útil llamado params. Y si digamos que haces un log de estos params con corchetes cuadrados y un valor de cadena de asterisco, como puedes ver en el código fuente. Cuando vas y vienes entre diferentes páginas, te mostrará, ya sabes, la ruta completa, la ruta dinámica completa de las páginas que estás viendo. Así que estamos utilizando esta lógica para renderizar todas estas rutas dinámicas, incluyendo las rutas anidadas. Así que aquí tienes un pequeño resumen de lo que vimos juntos en mi charla, sabemos que más de la mitad de los usuarios en este mundo acceden a contenido localizado. Y no podemos simplemente ignorar, ya sabes, a más de la mitad de los usuarios en este mundo, ¿verdad? Y también vimos juntos varias formas de hacer la internacionalización. Así que espero que te haya sido útil para elegir la mejor forma para tus casos, así como sabemos que, ya sabes, implementar la internacionalización importa mucho para pensar en un mejor rendimiento, también en la interfaz de usuario y la experiencia de usuario. Así que considera el rendimiento y la interfaz de usuario, la experiencia de usuario también con la internacionalización. Hay una pequeña solicitud de mi parte para ti al final. Así que por favor envíame tus comentarios. Ya sabes, en Twitter, realmente me encantaría mejorar mis charlas en general, cualquier comentario me ayudará a mejorar. Así que puedes mencionar mi nombre, mencionar mi nombre de usuario en Twitter y tuitear sobre los comentarios. Muy bien, eso sería todo de mi parte. Muchas gracias por ver mi charla y espero que la hayas disfrutado.
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas ¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™? Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida? Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello? Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
En este masterclass aprenderemos cómo construir un blog personal desde cero usando Remix, TailwindCSS. El blog será alojado en Vercel y todo el contenido será servido dinámicamente desde un repositorio separado en GitHub. Utilizaremos HTTP Caching para las publicaciones del blog. Lo que queremos lograr al final del masterclass es tener una lista de nuestras publicaciones de blog mostradas en la versión desplegada del sitio web, la capacidad de filtrarlas y leerlas individualmente. Tabla de contenidos:- Configurar un proyecto de Remix con una pila predefinida- Instalar dependencias adicionales- Leer contenido desde GitHub- Mostrar contenido desde GitHub- Analizar el contenido y cargarlo en nuestra aplicación usando mdx-bundler- Crear una página separada para las publicaciones de blog para mostrarlas de forma independiente- Agregar filtros a la lista inicial de publicaciones de blog
I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización
Supabase y Remix hacen que sea fácil construir aplicaciones fullstack. En este masterclass, vamos a aprender cómo usar Supabase para implementar autenticación y autorización en una aplicación en tiempo real con Remix. Únete a Jon Meyers mientras construye esta aplicación desde cero y demuestra cómo puedes aprovechar el poder de las bases de datos relacionales!
Comments