¡Vamos a Remix para Localizar el Contenido!

Rate this content
Bookmark
Slides

¿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!


28 min
05 Dec, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in English

1. Introducción a Remix e Internacionalización

Short description:

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.

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