¿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 headless y cómo escalar tu solución en el futuro. ¡Vamos a "Remixear" tu contenido para localizarlo!
¡Vamos a Remixear para Localizar Contenido!
Video Summary and Transcription
Esta charla presenta Remix e internacionalización, resaltando el impacto y la importancia de la internacionalización en el desarrollo de software. Explora diferentes enfoques para internacionalizar URLs y el uso de Remixi18next para la internacionalización en Remix. La charla cubre la creación y configuración de archivos traducidos, así como la importancia de cargar los archivos de traducción antes de la hidratación para mejorar el rendimiento. Se discuten los desafíos y beneficios de la localización, incluyendo el uso de traducción a nivel de carpeta y rutas dinámicas. La charla también aborda diferentes enfoques de traducción y la importancia de considerar la experiencia del usuario y la comprensión en diferentes idiomas.
1. Introducción a Remix e Internacionalización
Hola a todos. Estoy emocionado de hablar sobre Remix e internacionalización. Hay tres puntos clave de mi charla: el impacto de la internacionalización, la lógica fundamental y cómo Remix e internacionalización trabajan juntos. Antes de comenzar, quiero que sepan que hay discusiones activas sobre Remix e internacionalización. Pueden contribuir a mejorar la experiencia de desarrollo. Compartiré las diapositivas y enlaces en Twitter. Ahora, hablemos sobre la internacionalización con Remix. Pregunté a los desarrolladores en Twitter sobre sus opiniones sobre la implementación de la lógica de internacionalización. El 41.7% de los 36 desarrolladores dijeron que no es su favorito y puede ser molesto. Quería saber más, así que mi amiga Maya explicó que para ella, implementar características de internacionalización no es una tarea diaria. Puede haber problemas con el texto localizado y las claves de internacionalización. La internacionalización puede no ser un tema popular para los desarrolladores, pero es importante considerar su impacto en el mundo y la perspectiva del usuario.
2. Introducción a la Lógica de Internacionalización
¿Qué crees que representa este número de 5.07 mil millones? En realidad, es la cantidad de usuarios en el mundo que utilizan Internet. Desglosando estos grandes miles de millones en porcentajes más pequeños, comenzando desde el 25.9 por ciento. ¿Qué opinas sobre este porcentaje? En realidad, es el porcentaje de contenido en inglés en Internet. El 25.9 es menos del 50 por ciento, lo que significa que si eres bueno en matemáticas, podrías calcular este número. China tiene la mayor cantidad de usuarios de Internet en todo el mundo. Asia necesita más de la mitad de los usuarios de Internet a nivel global. Hablemos sobre la lógica fundamental de la internacionalización. La internacionalización funciona de tres formas para determinar los idiomas y las regiones. El primer enfoque es la ubicación a partir de la dirección IP, el segundo es utilizar el encabezado de idioma aceptado de la solicitud HTTP o los idiomas del navegador, y el tercero es utilizar el identificador en la URL. Vamos a utilizar dos formas para ir híbridos: permitir a los usuarios cambiar los idiomas en el navegador y detectar su configuración de idioma preferido. Hay tres patrones para analizar en la URL del identificador, siendo el patrón uno una forma de diferenciar el contenido localizado por dominios.
3. Patrones de URL y Remixi18next
Vamos a discutir diferentes patrones para internacionalizar las URL, incluyendo subdirectorios. También exploraremos el uso de Remixi18next, un paquete npm para la internacionalización en Remix.
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 los usuarios. Y también para todos, esta URL no se ve limpia, ¿verdad? Así que no queremos seguir este camino.
Pasando al patrón tres, que es la localización de subdirectorios. En este caso, vamos a agregar el slug localizado después de something.com para la barra diagonal. De esta manera, es bastante claro para los usuarios en qué idiomas están viendo el contenido, y 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, en realidad es un tema bastante relevante, porque algunos de los frameworks y las bibliotecas utilizan la internacionalización de los frameworks. Veamos cómo funciona en Remix. En el caso de Remix, en general hay dos enfoques para elegir. La primera opción sería usar el paquete code y Remixi18next, y el segundo enfoque sería utilizar un sistema de gestión de contenido.
Primero, veamos qué es Remixi18next. ¿Recuerdas que te dije antes que es un paquete npm, verdad? Y más precisamente, está hecho para que Remix utilice este framework de internacionalización llamado i18next, que fue creado por Sergio. Así que, gracias Sergio por crear un paquete npm tan increíble, porque ahora, gracias a eso, tenemos más opciones para elegir. Muy bien, veamos el ejemplo de este caso. En primer lugar, vamos a crear un par de archivos de configuración. Pero para empezar, vamos a crear los 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, en la parte superior, creé el archivo llamado common.json. Te mostraré por qué ya sé que puedo dar un nombre 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 son valores de cadena localizados. En primer lugar, he decidido llamar a esta propiedad nombre de saludo. Este valor lo usaré cuando traduzca desde el código fuente. En el lado derecho está el valor clave,
4. Creación de archivos traducidos y configuración
En este caso, creamos archivos traducidos y un archivo de configuración de i18next. Importamos el archivo de configuración en i18next.server.js y establecemos las rutas de los archivos de traducción. Pasando a la configuración del lado del cliente, utilizamos la API i18next-provider para envolver el componente del navegador de Remix. Esto asegura el momento correcto para la hidratación y carga de los archivos de traducción.
Como dije antes, por alguna razón, ya sabía que podía dar el nombre de los archivos traducidos como common.js, ¿verdad? ¿Verdad? Así que aquí está la razón por la que. Si prestas atención a este NS predeterminado, por cierto, NS significa espacios de nombres, y le di el nombre como common. Por eso ya sabía que podía darle el nombre common.js. Así que hay un par de otras configuraciones, pero nada demasiado complicado, porque primero de todo, solo quiero enumerar los idiomas admitidos, inglés, japonés y, por supuesto, quiero tener un idioma de respaldo como idioma predeterminado. Basado en lo que creamos, los archivos traducidos y también la configuración del archivo de i18next.
Ahora es el momento de importar este archivo de configuración de i18next en el archivo i18next.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 basado en eso, recuerda esto, ya sabes, como el archivo de configuración que creamos, estas, ya sabes, como las listas de idiomas son los arrays dentro de los arrays y los valores dentro son cadenas. Así que puedo iterar estos valores desde la configuración del archivo que he creado. Y aquí, lo que estoy haciendo es establecer las rutas de los archivos de traducción. Muy bien. Ahora pasemos a crear los archivos de configuración del lado del cliente y del lado del servidor. Solo voy a mostrarte 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. Un par de líneas de código son bastante similares. Así que no quiero, ya sabes, 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 de código resaltadas. Así que, en primer lugar, hay una API llamada i18next-provider que proviene de react-i18next. Ten en cuenta que de esta manera, vamos a instalar y usar un par de otros paquetes relacionados con i18next. Así que asegúrate de que esto provenga realmente de react-i18next. Después de haberte dicho que quería que prestes atención a esta API, aquí es donde puedes llamarla dentro del ámbito JSX. Así que vamos a envolver este componente del navegador de Remix que proviene del lado de Remix. Y vamos a ver la lógica, por qué necesitamos envolver este componente precisamente con esta API i18next-provider. Pero para darte un poco más de contexto, lo que estamos envolviendo es, bueno, este componente del navegador de Remix es o debería ser utilizado por react-hydrate para HTML. Así que hay otra pista de por qué insisto y resalto, ya sabes, estas líneas de código. En realidad, es muy importante ver el momento en que se va a hidratar y cargar los archivos de traducción.
5. Archivos de Traducción y Configuración
Los archivos de traducción deben cargarse antes de la hidratación para asegurar que la aplicación sea interactiva. Envolver la API del navegador de Remix con el proveedor i18next mejora el rendimiento al almacenar en caché los cálculos. La configuración del lado del servidor permite identificar los idiomas preferidos y redirigir a los usuarios. El archivo root.jsx en el directorio Android de la aplicación contiene APIs importantes de Remix, incluido useLoaderData.
Aquí están las respuestas para que las revisemos juntos. En primer lugar, veamos juntos por qué los archivos de traducción, ya sabes, deben cargarse antes de la hidratación. Bueno, probablemente empecemos a imaginarlo desde el punto de vista de 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, sino que 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 se han cargado y la hidratación ya ha ocurrido. Entonces, si quiero cambiar el idioma de inglés a japonés para decir hola, no puedo hacerlo 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 han cargado antes de que ocurra la hidratación, ahora sabemos que este caso funcionaría porque la aplicación ya está de alguna manera interactiva. Entonces, cuando ocurre la hidratación, la interfaz de usuario está lista con los estilos y los archivos de traducción ya se han cargado. Entonces, si quiero cambiar de inglés a japonés para decir hola, ahora puedo hacerlo porque los archivos de traducción ya se han cargado.
Pasando a 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 deremix llamada remix browser con la API llamada proveedor i18next que proviene de I18next? Eché un vistazo a un poco más de detalles del archivomodules de nodo, y esto es lo que pude averiguar. Entonces, el proveedor i18n, en realidad incluye este ganchoreact de uso de memo. Este ganchoreact te permite almacenar en caché el resultado del cálculo entre las re-renderizaciones. Si lo digo de una manera más sencilla, básicamente, si los valores de esta configuración deinternacionalización y los espacios de nombres predeterminados, principalmente los archivos traducidos, son iguales, entonces no vamos a desencadenar la re-renderización porque eso te costaría mucho y no es eficiente. Queremos evitar que no sea eficiente, ¿verdad? Entonces, si los valores de estos, digamos cálculos son iguales, entonces los vamos a almacenar en caché y no desencadenar la re-renderización. Pero si los valores se actualizan, entonces vamos a desencadenar la re-renderización. Desde esta perspectiva, puedes ver que lainternacionalización es una especie de clave para mejorar elrendimiento o necesitas considerar también elrendimiento. Pero al usar todos estos paquetes, ya se tiene en cuenta, por lo que no es necesario implementar este tipo de características desde cero en tu lado. Así que, solo un poco de información sobre cómo configurar el archivo de configuración del lado del servidor en su totalidad, no quiero, en primer lugar, mencionar que la identificación de los idiomas preferidos de los usuarios y redirigirlos se puede hacer en el lado del servidor. Y si quieres echarle un vistazo, aquí está el enlace y el archivo readme para que lo revises. Muy bien, vamos a pasar a usar las configuraciones que hemos establecido hasta ahora en Action. Entonces, aquí vamos a echar un vistazo a este archivo llamado root.jsx en el directorio Android de la aplicación. Este es el archivo fundamental e importante, diría yo, en la aplicación deRemix. Así que aquí, quiero que prestes atención a tres APIs que provienen del lado deRemix. Comenzando por useLoaderData. Entonces, este useLoaderData obtendrá la configuración regional del función de carga y más arriba. Entonces, esta función de carga no es solo la función de ejecución que acabamos de definir. En cambio, en realidad es una APIbackend que proviene deRemix y ya está conectada a través del useLoaderData. Esto significa que estas APIs están vinculadas entre sí.
6. Traducción y Parámetros de URL
Para obtener la configuración regional, podemos utilizar la API JSON de Remix. Al importar la 'traducción utilizada' de React IAT next, podemos envolver la propiedad de los archivos traducidos para lograr la traducción. Sin embargo, tenemos una confesión: utilizamos parámetros de URL en lugar de evitarlos, y no queremos mantener los archivos de traducción en el código fuente ni traducir los segmentos de URL. Dividir los archivos de traducción para las rutas es posible pero engorroso.
7. Localización de URLs y Traducción a Nivel de Carpeta
Queremos lograr URLs localizadas sin archivos de traducción en nuestro código. Remix ofrece dos enfoques para la internacionalización: usar el paquete Remix I18next o integrarse con un sistema de gestión de contenido (CMS). Me centraré en el enfoque de traducción a nivel de carpeta, donde el contenido localizado se almacena en carpetas dedicadas. Esto permite que los traductores trabajen en la traducción del contenido sin mezclar páginas y contenido. Al implementar rutas planas en Remix, se pueden crear rutas dinámicas desde el CMS sin editar el código fuente.
Este enfoque es bastante sencillo porque, como puedes ver, todo el contenido localizado se almacena en carpetas dedicadas. Entonces, no hay forma de que los traductores mezclen páginas localizadas y el contenido. En primer lugar, antes de profundizar en cómo funciona a nivel de código fuente, te mostraré cómo funciona en el navegador.
Entonces, 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, todas estas publicaciones de blog en inglés para páginas relevantes se almacenan en la carpeta. Digamos que la URL no debería incluir ningún fragmento porque este es el idioma por defecto, ¿verdad? Pero si voy a esta misma página exactamente, viajando a Salt Lake City en japonés, debería incluir JA, que significa el fragmento japonés, y también los contenidos se traducen 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 raíz más alta, no debería incluir ningún fragmento de idioma, digamos, incluso EN. Y por supuesto, los contenidos vuelven a estar en inglés.
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 gestionarlo donde debe almacenarse, 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. Entonces, en Remix, hay un par de formas de renderizar este tipo de rutas dinámicas. Pero elegí esta ruta plana, porque al usarla, permitirás que quien quiera crear las páginas e incluso crear rutas dinámicas anidadas desde el sistema de gestión de contenido, lo haga sin editar ningún código fuente. Una vez que implementes esta función mediante el uso de estas rutas planas, entonces las rutas dinámicas, incluso incluyendo la estructura anidada, se pueden hacer desde el lado del CMS. Así que aquí está la pequeña especie de
8. Rutas Dinámicas y la Importancia de la Localización
Remix proporciona un parámetro útil llamado params para las rutas dinámicas. La localización es crucial para llegar a más de la mitad de los usuarios del mundo. La implementación de la internacionalización afecta al rendimiento, la interfaz de usuario y la experiencia de usuario. Se agradece el feedback. La mayoría de los espectadores consideran la experiencia de internacionalización regular. La localización es importante para comprender la documentación tecnológica en el idioma nativo de cada uno.
Hay una pequeña solicitud de mi parte al final. Así que por favor envíame el feedback, ya sabes, en Twitter. Realmente me encantaría mejorar mis charlas en general, cualquier feedback me ayudaría a mejorar. Puedes mencionar mi nombre, mencionar mi nombre de usuario en Twitter y tuitear sobre el feedback. Muy bien, eso sería todo de mi parte. Muchas gracias por ver mi charla. Y espero, uh, sí, que te haya gustado. Oh, hola Arisa. Y lo primero que queremos hacer, porque sé que hiciste la pregunta a todos nuestros espectadores, y querías saber en general, ¿cómo describirías tu experiencia de internacionalización hasta ahora? El 47% dijo regular, el 33% dijo que les gusta, y el 20% dijo que no les gusta en absoluto. Y creo que eso es aplicable a algunos de los desafíos a los que te puedes enfrentar al hacerlo. Y me gusta cómo las cosas están cambiando en tiempo real, así que es genial verlo. Así que para la mayoría de las personas, es regular. Y creo que es algo que es difícil de hacer, especialmente si alguien nunca lo ha hecho antes. Y creo que tu charla fue realmente útil para mostrarnos algunas de las formas de mejorar nuestra experiencia de desarrollo al buscar traducir contenido. Y sé que hay muchas personas diferentes en la audiencia que pueden tener preguntas. Pero en general, digamos que alguien es un principiante, y sé que has hablado un poco en tu charla, pero ¿por qué es importante la localización en tu opinión? Diría que la importancia de la localización es algo que puedes imaginar cuando lees la documentación de cualquier tipo de, digamos, tecnologías que quieras dominar. Imagina que tu primer idioma no es el inglés. Y eso significa que, digamos, si quieres entender realmente a algunos de los desarrolladores. Porque sé que soy de Japón, y sé cómo es el mundo tecnológico japonés
9. Enfoques de Localización y Traducción
La localización es importante para que los usuarios comprendan mejor el contenido. No siempre se traduce de inmediato, dependiendo de los desarrolladores disponibles y su velocidad. Agregar localización es un trabajo adicional para los desarrolladores, pero beneficia enormemente a los usuarios. La interfaz de usuario optimista en Remix es una característica favorita, ya que brinda una mejor experiencia al reducir la necesidad de indicadores de carga. La charla también cubrió diferentes enfoques de traducción, siendo las traducciones a nivel de carpeta un ejemplo.
Sí, no, eso es genial. Y la razón por la que quería preguntar eso primero es porque a veces es trabajo adicional para los desarrolladores agregar localización a todas las aplicaciones. Pero para los usuarios es simplemente un gran beneficio. Entonces, cualquiera que sea la experiencia, así que te guste o no, creo que al final del día, realmente ayuda a tus usuarios a navegar por tu sitio web y tener acceso al contenido basado en su ubicación y el idioma con el que se sienten más cómodos. Dicho esto, quiero hacerte una pregunta. En realidad, algo que le preguntamos a todos nuestros ponentes es, ¿cuál es tu característica favorita de Remix? Diría, o al principio iba a decir tal vez el cargador y la acción, pero cambié de opinión en el último minuto porque conocí a la otra conferencia en persona en Londres y un buen amigo mío dio una charla sobre la interfaz de usuario optimista y Remix. Y lo he estado usando durante bastante tiempo. No es que sea un experto en ello, pero realmente disfruto usando la interfaz de usuario optimista porque ya puedes dar en el lado de la interfaz de usuario información suficiente, mientras que los datos están tardando en procesarse y luego actualizar los datos en el lado de la capa de datos. Pero quiero decir, si ya tienes suficientes fuentes para mostrar a los usuarios, no necesitan ver los indicadores de carga todo el tiempo. Y sé cómo las personas o los usuarios realmente odian ver los indicadores de carga. A veces, he visto casos realmente extremos, como mis amigos, cada vez que ven un indicador de carga en un segundo, se van inmediatamente. ¡Dios mío! Sí, hay personas extremas por ahí, pero quiero decir, están en todas partes. Sí. Es increíble cómo Remix resuelve ese problema. Y volviendo a la charla que diste, sé que tenías algunos ejemplos diferentes, ¿cómo funcionan el resto de los enfoques de traducción? A partir de una de tus diapositivas, había una diapositiva que mostraba cuatro enfoques para crear una estructura de localización en un CMS, pero solo muestra un enfoque llamado traducciones a nivel de carpeta.
Sí. Eso es algo que también quería explicar en la charla, pero voy a aprovechar la oportunidad esta vez. Entonces, el resto de los cuatro enfoques sería tal vez comenzar desde un enfoque llamado traducción a nivel de campo. De esta manera, en lugar de crear las carpetas para almacenar todas las páginas de contenido localizado dentro de ellas, no necesitas crear las carpetas si no quieres. Y en su lugar, lo que puedes hacer para traducir o localizar el contenido es que estás
10. Enfoques Diferentes para la Traducción
Significa como el titular dentro de la página principal o tipos de campos específicos y precisos. Las opciones de casilla de verificación te permiten decidir qué componentes traducir y localizar. Hay tres enfoques: traducción a nivel de campo, traducción a nivel de carpeta y traducción a nivel de espacio. Al utilizar claves para mensajes traducidos, mantenlas cortas para evitar complejidad y posibles incompatibilidades durante las pruebas.
Genial. Genial. Y solo una pregunta rápida aquí. ¿Crees que es mejor usar claves para identificar mensajes traducidos, o un mensaje completo, por ejemplo, saludos versus algo como hola mundo? Esa es una pregunta muy buena. Diría que para evitar la complejidad, dependiendo de qué claves localizadas, digamos, quieres tener, diría mantenlo lo más corto posible, porque podrías encontrar algunas incompatibilidades en la fase de testing, o un par de valores de clave que no coinciden en la fase de testing. Y eso es lo que realmente escuché de una de mis buenas amigas. Ella publicó en Twitter y respondió a mi pregunta al respecto.
Ok, eso tiene mucho sentido. Y se nos acabó el tiempo. Tenía muchas más preguntas, pero Arisa, muchas gracias por estar aquí. Gracias por esa increíble charla, y volvamos a Brittany. Gracias.