I18n fue la Pieza que Faltaba: Permite que más del 70% de los Usuarios en el Mundo Accedan a tus Aplicaciones

Hola a todos. Gracias por ver mi charla. Mi nombre es Erys Erczeki. Soy un ingeniero de Deferral que trabaja en Storyblock. Hoy vamos a ver juntos cómo I18n tiene un impacto y hace que tus aplicaciones sean accesibles para más del 70% de los usuarios en el mundo.

Pasemos a la siguiente diapositiva. Y aquí están las tres conclusiones de mi charla. En primer lugar, vamos a ver el impacto de I18n y DEX para los desarrolladores. Y vamos a ver la lógica fundamental. Por último, vamos a ver cómo funciona con Remix.

Hay un par de notas. Esta charla es, en primer lugar, para los desarrolladores que implementan la internacionalización. En segundo lugar, Remix e I18n son temas de discusión en curso. Si estás interesado en unirte a las discusiones, aquí está el enlace. Y me aseguraré de compartir mis diapositivas en las redes sociales. Así que tendrás acceso a todas las fuentes que voy a compartir.

Así que la internacionalización. I18n es, en primer lugar, un acrónimo de internacionalización. Y veamos un poco de la experiencia del desarrollador con I18n. Así que aquí está mi amiga, Maya. Ella compartió conmigo su experiencia en Twitter diciendo que hay un costo de reaprendizaje de cómo usar la biblioteca de internacionalización cada vez. Y también hay otro problema, diría yo, que el texto localizado no coincide con las claves de I18n en las pruebas. Así que según su opinión, o no solo la suya, pero basado en eso, parece que no es la mejor DX. Así que basándonos en la DX actual de I18n que tienes, hablemos de los números y los hechos.

Así que empezando por el número total de usuarios en el mundo, en realidad hay 5.07 mil millones de usuarios que utilizan Internet. Y sorprendentemente, el inglés se utiliza solo en un 25.9% en Internet. Y Asia lidera con más de la mitad de los usuarios de Internet a nivel mundial. Así que todos los números son enormes, ¿verdad? Y no podemos simplemente ignorar estos números masivos. Y al conocer los diferentes enfoques con más opciones, en realidad se resolverá

tu actual I18nDX. Así que hablemos de la lógica fundamental. Hay tres formas de determinar los idiomas y las regiones. En primer lugar, está la forma de detectar la ubicación a partir de la dirección IP, que no vamos a cubrir en esta charla. Pero en segundo lugar, aquí está el ejemplo de respetar a los usuarios, ya sabes, como se configura en la configuración de su navegador, ya sabes, como qué idiomas elegir. Y por último, hay una forma de identificarlo en la URL. Y voy a mostrarte los tres patterns para identificar las URL. El patrón uno es diferenciar, ya sabes, por dominios, pero no seguirá la misma política de origen. El patrón dos es usar los parámetros de la URL, pero no parece amigable para el usuario, ¿verdad? Y el último patrón es subdirectorios localizados. Esto se ve mucho más limpio y amigable para el usuario. Así que pasemos a los ejemplos de framework , en general hay dos enfoques para elegir. El primer enfoque sería utilizar unnpm paquete que está relacionado con I18next. Y el otro enfoque es con una combinación del sistema de gestión de contenido. Esta charla trata sobre el Remix, así que voy a mostrarte el ejemplo de Remix I18next primero. Y pasemos a mostrarte el ejemplo del sistema de gestión de contenido . Remix I18next es un paquete npm para Remix que utiliza I18next. El primer paso sería crear los archivos de traducción. En este caso, tengo un idioma predeterminado en inglés que dice saludo hola y traducido, ya sabes, como el archivo de traducción saludo dice hola en japonés, y creemos el archivo de configuración de I18next. Entonces aquí, lo que estoy definiendo son los idiomas admitidos, el idioma de respaldo y el espacio de nombres predeterminado. Así que este espacio de nombres común es en realidad lo que le di los nombres a estos archivos de traducción. Pasando a, ya sabes, el otro archivo llamado I18nextserver.js. Entonces aquí, lo que estoy haciendo es importar lo que configuramos en el archivo de configuración de I18next, y ya sabes, del archivo anterior, lo que configuramos, los valores son en realidad matrices en las cadenas. Así que los iteramos desde el archivo de configuración de la diapositiva anterior. Y el resto lo configuramos la ruta del archivo de traducción. Así que lo siguiente es crear los archivos de configuración del lado del cliente y del lado del servidor. Por el tiempo que tengo, me voy a centrar en el lado del cliente, pero no te preocupes, el lado del servidor, ya sabes, los archivos de configuración se ven prácticamente iguales con algunas diferencias. Así que el archivo entry.client.jsx. Lo que quiero que prestes atención es a la línea de código resaltada en naranja, ya sabes, que es una API llamada i18xProvider. Así que con esto, al usar esta API, queremos asegurarnos de que las traducciones se carguen antes de que ocurra la hidratación. Y vamos a ver por qué juntos en una de las siguientes diapositivas. Y luego, ya sabes, envolvemos el componente del navegador de remix entre el componente i18xProvider. Así que también vamos a ver las razones en una de las siguientes diapositivas.

Entonces, la primera razón por la que la traducción debe cargarse antes de la hidratación. Imagina si la traducción no se carga antes de que ocurra la hidratación, la aplicación aún no es interactiva. Los usuarios no pueden ver, ya sabes, el valor localizado. Y el otro ejemplo, si la traducción ya se cargó antes de que ocurra la hidratación, la aplicación es interactiva. Los usuarios pueden ver el contenido localizado.

Pasando al segundo, por qué envolver el componente del navegador de Remix con i18xProvider. Investigué un poco en módulos. Y esto es lo que encontré, lo que encontré, donde, ya sabes, se define i18xProvider. En realidad utiliza un gancho de React llamado use memo. Y esto, esto captura el resultado del cálculo entre renderizados. Lo que quiero decir con eso es que si los valores de i18nConfiguration y el valor predeterminado del espacio de nombres son iguales, entonces no activamos el renderizado. Pero si los valores o uno de los valores cambia, entonces solo en ese momento activamos el renderizado. Así que usemos las configuraciones en acción. Pasando al directorio de la aplicación, ya sabes, abriendo este archivo root.jsx, quiero prestar atención a las tres API. La primera se llama función de carga. Esta función de carga es una API de backend que ya está proporcionada por el sitio de Remix. Y ya está, ya sabes, conectada con el uso de datos de carga. Entonces este uso de datos de carga obtiene el local de la función de carga. Y por último, lo que hacemos es llamar a una API llamada JSON. Así que en lugar de definir nuevas cabeceras de respuesta, blah, blah, blah, puedes hacer lo mismo con solo una línea de código. Y al final, hay una función llamada use change language. Esta función actualiza el idioma de la instancia de I18n al local actual de la función de carga y el local se actualiza y I18n carga los archivos de traducción correctos. Así que veamos cómo funciona en el navegador con la última configuración. Cualquier ruta de tus archivos en la aplicación de Remix, lo que estoy haciendo es importar una API llamada use translation y establecer el valor que definimos al principio de uno de los archivos de traducción que creamos. Así que puedes ver, ya sabes, ahora cambiar entre inglés y en este caso español, puedes ver el contenido que conoces cambia de un idioma a otro. Pero si te has dado cuenta de un par de cosas, tengo tres confesiones. En primer lugar, si prestaste atención a la URL, sí, uso los parámetros de URL que quería evitar. En segundo lugar, los desarrolladores necesitamos mantener los archivos de traducción y, por último, no tradujimos los slugs. Así que para limpiar todo lo que aún no hemos logrado, vamos a

Echemos un vistazo a otro ejemplo con el Sistema de Gestión de Contenidos. El primer paso será conectar tu aplicación Remix con el Sistema de Gestión de Contenidos de tu elección. En esta charla, te mostraré el ejemplo con Storyblock, pero no te explicaré cómo puedes crear una conexión. En su lugar, te ofreceré echar un vistazo al tutorial de cinco minutos después de mi charla y podrás elegir qué enfoque prefieres entre los cuatro enfoques. En esta ocasión, cubriré uno de los enfoques llamado traducción a nivel de carpeta, y como puedes ver visualmente en la captura de pantalla, lo dividimos en diferentes carpetas para tener contenido localizado. Veamos cómo funcionará en el navegador antes de ver cómo podemos implementar la lógica desde el nivel del código fuente. Aquí tienes una pequeña aplicación de blog que he construido con Remix y Storyblock. Actualmente estamos en el idioma predeterminado de la página de inicio, por eso no ves ningún slug relacionado con el idioma. Cuando cambio a la versión japonesa de la misma entrada del blog, ahora en la URL podemos ver el slug en japonés que dice 'ja' delante del blog número 4, y el contenido se ha localizado. En el lado derecho, como puedes ver, los editores de contenido y los traductores ya pueden trabajar en su propio idioma. Cuando vuelvo a la página de resumen del blog que vimos antes en el idioma predeterminado, puedes ver la versión traducida al japonés con el slug traducido. Si vuelvo a la página de inicio en el idioma predeterminado, ahora puedo ver que el contenido ha vuelto al idioma predeterminado, que es el inglés. Pasemos a los fundamentos, pasemos a la lógica de cómo pude crear algunas de las opciones para que los editores de contenido y los traductores tengan más control y se encarguen de crear estas rutas dinámicas desde la interfaz de usuario del sistema de gestión de contenidos. Utilicé el enfoque de code splats proporcionado por Remix. En resumen, además de las tres API importantes que ya hemos cubierto antes (LoaderFunction, UseLoaderData, JSON), quiero llamar la atención sobre la línea de código resaltada en verde que utiliza el parámetro especial 'params' con corchetes cuadrados y el valor de cadena del asterisco. Si estableces este valor en console.log y te mueves entre diferentes páginas como la página de inicio o la entrada del blog, verás los slugs completos que se devuelven en tu terminal. Al utilizar los parámetros especiales que ya proporciona Remix y realizar algunas modificaciones en los slugs, ya tienes la lógica que acabas de ver en las grabaciones que te mostré. Aquí tienes un resumen breve de mi charla. Vimos juntos que más de la mitad de los usuarios en el mundo acceden a contenido localizado y, al conocer más enfoques para encontrar una mejor experiencia de desarrollo (DX) para tus casos, este es solo uno de los ejemplos que te mostré. Si investigas un poco más, lo cual te recomiendo encarecidamente, podrás encontrar los mejores enfoques que se adapten mejor a tus casos. Por último, quiero enfatizar que la internacionalización (i18n) está relacionada con el rendimiento, la interfaz de usuario (UI) y la experiencia de usuario (UX). Eso es todo acerca de mi charla. Muchas gracias y espero que la hayas disfrutado.