End-to-end i18n

Gracias por unirse a mi charla sobre internacionalización de extremo a extremo. Soy Luke Ersman. Soy uno de los cofundadores e ingenieros de software en Gazelle. Gazelle es una empresa de software como servicio enfocada en automatizar los procesos comerciales para técnicos de piano. Nos encargamos de cosas como programación, facturación, envío de recordatorios automáticos, todo adaptado específicamente al servicio de pianos industria. Ahora, en cuanto al contexto técnico, tenemos una interfaz web en React y una aplicación móvil en React nativo que utiliza Expo. Nuestro backend es una aplicación en Rails que proporciona un GraphQL a estas interfaces y compartimos mucho código entre la interfaz web y la aplicación móvil, incluyendo todas nuestras cadenas traducidas. Comercializamos nuestro producto a técnicos de piano en todo el mundo y actualmente estamos presentes en más de 30 países. Al principio, uno de los problemas técnicos con los que nos encontramos fue que necesitábamos internacionalizar por completo nuestro producto para atender a este mercado global. Esto parece algo bastante común, pero me sorprendió encontrar tan poca ayuda disponible para esto. Muchas personas han hecho pequeñas partes de esto, pero no pude encontrar mucha ayuda para internacionalizar completamente la aplicación de principio a fin, incluyendo todo tipo de cosas, no solo traducir las cadenas. Lo primero en lo que la gente piensa cuando piensa en internacionalizar es, ya sabes, traducir cadenas, y esto es una parte importante, pero no es lo único que debes tener en cuenta. Así que en la charla de hoy, te guiaré a través de cómo internacionalizar una aplicación en React de principio a fin. Cubriremos todos los aspectos, incluyendo cómo codificar la aplicación para manejar cadenas traducidas, cómo localizar la moneda, el formato de número y fecha, cómo extraer esas cadenas en algo que un traductor pueda usar, cómo encontrar y gestionar traductores y, finalmente, cómo tomar esas cadenas traducidas de los traductores y volver a inyectarlas en tu aplicación.

Ahora, para demostrar esto hoy, he creado esta aplicación de demostración muy sencilla. Se trata de un sistema de gestión de lista de compras donde puedes escribir algunos artículos. Aquí, déjame escribir bacon por $4.50, y digamos que necesitamos comprar lechuga por $1.25, y vamos a comprar algunos tomates por $3. De acuerdo. Ahora, cuando estemos de compras, podemos marcar algunos de estos artículos como completados, y verás que muestra la fecha en que lo marcamos como completado. Obviamente, este es un ejemplo ficticio y no es muy útil, pero lo hice porque muestra todos los diferentes componentes de internacionalizar y localizar tu aplicación. Tenemos cadenas de texto, tenemos números, tenemos fechas, todas estas cosas. Así que en este ejemplo, aquí arriba están mis configuraciones de localización. Puedo cambiar el idioma a francés, puedo cambiar la moneda a, digamos, euros. Puedo cambiar la ubicación del símbolo de la moneda para que esté al final, algunos idiomas lo formatean de esa manera. Puedo cambiar el formato de fecha, puedo cambiar el formato de número, y verás que todas estas cosas se localizan al instante. De acuerdo, voy a cambiar esto de vuelta a inglés para poder leerlo, porque en realidad no hablo francés. De acuerdo, déjame mostrarte, echemos un vistazo detrás del telón y veamos cómo está codificado esto en realidad. Déjame cargar mi editor aquí. Uso JetBrains como mi editor de código.

Lo primero que quiero mostrar son nuestras constantes. Aquí es donde hemos definido todas las configuraciones de localización que podrías utilizar. Tenemos todas las diferentes monedas y aquí tenemos información sobre cómo deben formatearse esas monedas. De esta manera, puedo seleccionar USD y sé que tiene dos decimales, utiliza el símbolo del dólar y tenemos una etiqueta aquí para ello. De manera similar, tengo una lista de formatos de fecha. Estos son solo cadenas de formato que utilizo para formatear las fechas. Tengo información de formato de número. Hay tres tipos diferentes de formato de número que admito, ya sea que utilicemos comas para separadores y punto para separadores decimales o no. Y luego aquí abajo, tengo las diferentes ubicaciones, las diferentes traducciones y sus etiquetas. Por ejemplo, para inglés, es la ubicación ENUS.

Estas son solo constantes que he definido y que utilizaremos en toda la aplicación. Ahora, aquí en la aplicación de create react app, el componente principal es un componente de la aplicación. Y aquí tengo eso y puedes ver que este es el contenido principal de ese componente. Aquí tengo tres componentes de orden superior que quiero explicar y todos envuelven nuestro componente de lista de compras.

El primero que tenemos aquí es el contexto de elementos. Esto es solo lo que estoy utilizando para gestionar el estado de la aplicación. Aquí es donde se encuentra la lista de elementos que están en nuestra lista de compras. En un ejemplo del mundo real, probablemente esto sería una API que utilizarías para almacenar el estado y recordarlo. Pero aquí, solo por simplicidad, estoy utilizando un contexto y lo estoy almacenando en memoria. El segundo que tengo aquí es el contexto de localización. Esto es lo que recuerda nuestras preferencias de idioma. Y cuando las cambiaba en el selector de idioma allá arriba, actualizaba este contexto, que luego lo proporcionaba a todos los componentes de la aplicación. Y luego este tercero aquí es el proveedor de Intel. En realidad, estoy utilizando la biblioteca React Intel para gestionar las traducciones. Y React Intel es una biblioteca maravillosa. La recomiendo encarecidamente. Hay otras disponibles, pero esta es la que prefiero. Y parte del proceso de configuración es proporcionar este componente de orden superior. Y le decimos cuál es nuestro idioma actual. En este caso, era ENUS. O cuando lo cambié a francés, era FRCA. Y también proporcionamos la lista de mensajes. Ahora, estas son las cadenas traducidas. Este es el resultado final del proceso de traducción que proporciono aquí. Y esas están definidas aquí arriba. Y puedes ver cómo se vería esto si voy aquí. Este es el resultado final. Tenemos un ID y tenemos una cadena traducida. Eso es un vistazo a

el final de la charla. Voy a mostrar cómo obtenemos esto. Pero por ahora, simplemente estamos obteniendo esas traducciones aquí y alimentándolas en este proveedor de Intel. Ahora, ten en cuenta que está obteniendo la para mi configuración regional actual que he establecido. Entonces, si tengo configurada la configuración regional en francés, va a obtener las traducciones en francés y establecerlas aquí.

Muy bien. Permíteme ir al componente de la lista de compras y mostrarte cómo funciona esto. Pero antes de hacer eso, permíteme volver a la web. Y quiero recordarte cómo se ve esto, qué es lo que parece. El componente de la lista de compras tiene cuatro componentes principales. El superior es el encabezado justo aquí. Luego tenemos el selector de idioma justo aquí. Luego tenemos la entrada justo aquí donde puedes agregar nuevos elementos. Y luego tenemos la lista aquí abajo. Estos son los cuatro componentes principales que conforman esta aplicación. Y luego, si volvemos al código, puedes ver estos cuatro componentes aquí. Tenemos el encabezado. Tenemos el selector de idioma. Tenemos la entrada de elementos. Y tenemos nuestra lista aquí abajo. Muy bien. Así que hablemos sobre el formato de cadenas internacionalizadas. La forma en que React intl funciona es que tienen un componente o tienen una función llamada format message que toma una estructura que tiene la cadena que deseas traducir y devuelve la cadena traducida. Ahora están utilizando ese componente de orden superior. ¿Recuerdas que te dije sobre el proveedor intl donde estamos alimentando los mensajes traducidos? Pero aquí estoy definiendo el mensaje traducido y alimentándolo en la función format message. Ahora hay otras formas de hacerlo con React intl. También proporcionan este componente format message que es una forma perfectamente válida de hacerlo. De hecho, simplemente prefiero usar esto porque devuelve una cadena simple. Facilita su uso en otros lugares que no aceptan un componente como un texto de marcador de posición o cosas así. Así que simplemente

para mantener la consistencia, tiendo a usar solo esta función format message. Pero debes saber que esta otra función format message también está disponible. También notarás aquí que me gusta definir mis mensajes como constantes, y almacenarlos todos en un repositorio centralizado. En este caso, es solo un archivo llamado strings.ts. Permíteme ir a ese archivo y podrás ver cómo se ve esto. Entonces, React Intel requiere un ID para cada cadena y un mensaje predeterminado para cada cadena. Ahora, si no tienes un conjunto de traducciones o si una cierta cadena no está traducida, esto es lo que se mostrará. Este también es el texto que se enviará al traductor para que lo traduzca. Además, acepta una descripción, que es información adicional que puedes proporcionar a los traductores para darles contexto. Eso es una de las cosas que realmente me gusta de React Intel, que proporciona esto. Muchas de las otras soluciones de traducción que he visto no tienen este contexto proporcionado. Ahora, he descubierto que proporcionar esta información a los traductores es extremadamente útil para obtener traducciones de calidad. Les ayuda a comprender los matices del contexto. Y hay matices en el lenguaje a veces que necesitas entender el contexto de cómo se usa algo para traducirlo correctamente. Entonces, cuando definimos nuestras cadenas, no solo escribimos la cadena que queremos traducir. En realidad, nos tomamos el tiempo para describir cómo

esto se utiliza en contexto para ayudar a los traductores a proporcionar una mejor traducción. Vale. Y puedes ver que tengo todas nuestras cadenas traducidas aquí, o todas nuestras cadenas definidas aquí como constantes que utilizo en toda la aplicación. Y esto también es muy útil en Gazelle porque, como mencioné en la introducción, tenemos dos aplicaciones. Tenemos la aplicación móvil y la aplicación web, y podemos compartir estas cadenas entre ellas y podemos compartir las traducciones entre ellas. Así que nos ayuda para no tener que traducir dos veces, pero también para tener consistencia en la terminología que utilizamos en ambas aplicaciones.

Vale. Ahora, tenemos esta cadena traducida. La hemos pasado a React Intel y devuelve la cadena correcta para el idioma que hemos seleccionado. Vale. Pero hay más en la internacionalización que simplemente traducir cadenas. Aquí he traducido una cadena. Pero, ya sabes, también he mencionado la configuración de localización. Así que déjame ir a este elemento de lista porque aquí tenemos algunos números y fechas formateados. Antes de hacer eso, déjame volver a la web y recordarte cómo se ve esto. Tenemos el nombre del elemento aquí. Tenemos la cantidad en moneda aquí, que es un formato numérico, también un símbolo de moneda y tenemos el formato de fecha aquí también. Vale. Vuelvo al código y esto es lo que parece. Tenemos aquí la casilla de verificación. Tenemos la nota, la descripción aquí. Estamos formateando la moneda y luego formateamos la fecha aquí abajo. Ahora, React Intel proporciona algunas opciones de formato de fecha y número, pero en realidad he terminado escribiendo las mías propias para esto. La razón de esto es que encontré que React Intel se basa en la internacionalización específica de la plataforma, la cual he encontrado que es inconsistente en diferentes plataformas. Por ejemplo, la internacionalización de Android es diferente a la de iOS, especialmente en versiones antiguas de Android, y también es diferente a algunas de las internacionalizaciones que proporcionan los navegadores web. Así que terminé escribiendo las mías propias. También encontré que la de React Intel era demasiado compleja para lo que necesitaba. Solo quería pasarle una cadena y tener mi configuración de localización establecida en un solo lugar y no tener que volver a pensar en ello. Así que escribí la mía propia llamada Formatear Moneda, que toma la cantidad del elemento, el costo del elemento y toma nuestra configuración de localización que se definió en ese contexto que te mostré. Y, ya sabes, lo estoy utilizando aquí desde el contexto de localización aquí arriba en la parte superior. Y similar

formatear fecha. Toma la fecha aquí y creo que estoy usando DayJS aquí y luego estoy pasando la configuración regional que tiene la cadena de formato de DayJS aquí para formatear correctamente la fecha. Ahora no voy a entrar en la implementación de estas, son bastante simples en realidad. Puedes revisar mi repositorio de código si estás interesado y siéntete libre de usarlos en tus propios proyectos. Pero solo debes saber que esto funciona de manera muy similar a la función de formato de mensajes, que toma una cantidad de elemento, toma la configuración de localización y luego devuelve una cadena formateada en el formato correcto y lo mismo con la fecha. De acuerdo. Ahora, otra cosa a tener en cuenta aquí, hay algo más especial sucediendo con este mensaje formateado. Esto es en realidad tomando una variable llamada fecha. Entonces lo que estoy haciendo aquí es formatear la fecha. La paso como una variable de fecha a este mensaje formateado completado. Y luego el mensaje formateado toma eso y devuelve una cadena con toda la cadena traducida correctamente. Permíteme ir a completado en para mostrarte cómo se ve esto. Sabes, esto es solo un mensaje de React Intel, pero tiene una variable aquí y React Intel te permite usar variables de esta manera. Ahora esto es bueno en lugar de simplemente agregar la fecha al final de la cadena por separado. Esto es bueno porque algunas traducciones pueden querer, ya sabes, la forma en que la estructura del lenguaje donde podrías poner primero la fecha y luego las palabras, um, ya sabes, diferentes idiomas, um, colocan estas en diferentes lugares o, ya sabes, dependiendo de la sintaxis del idioma. Así que a veces quieres dejar este tipo de variables en la cadena, para que los traductores puedan moverlas donde sea necesario. Les da mucha más flexibilidad. De acuerdo. Entonces, um, el resultado final de todo esto, permíteme volver a la web de nuevo y mostrarte. Entonces, el resultado final de todo esto es que tenemos esta única cadena que fue generada por el mensaje formateado. Se le pasó esta variable, que es el contexto de la fecha formateada. Muy bien. Ahora que entiendes cómo funciona la aplicación, permíteme mostrarte cómo gestionar el proceso de traducción. Entonces, a un nivel muy alto, esto es solo un proceso de cinco pasos. Um, primero codificas todo en JavaScript. Definimos nuestras cadenas utilizando constantes con los valores predeterminados que te mostré. Um, y en general, haz que tu aplicación funcione con el idioma predeterminado. Um, luego debes tomar esas cadenas y extraerlas de tu código en algo que puedas entregar a tus traductores. En nuestro caso en Gazelle, usamos archivos PO de gettext para intercambiar con nuestros traductores. Una de las razones por las que me gustan los archivos PO es que tienen la capacidad de mostrar información contextual como comentarios a nuestros traductores, para ayudarles a crear mejores traducciones. Um, eso

por qué hago esto en lugar de simplemente pasar archivos JSON de un lado a otro. Y también hay muchas herramientas excelentes para ayudar a gestionar archivos PO para los traductores. Entonces, para este paso, necesitamos extraer nuestras nuevas cadenas y empaquetarlas en un archivo PO para cada idioma. Ahora he escrito un script llamado extract strings que hace esto por nosotros. Está incluido en este repositorio de GitHub. Es gratuito para usar, siéntete libre de usarlo para tus propios proyectos, pero extrae esos componentes de cadena, las constantes de cadena del código y las formatea en un archivo PO de gettext. Luego, tomo ese archivo PO y se lo entrego a el traductor para que haga su magia. Ahora hay dos formas de hacer esto. La forma más económica es usar Google Translate y hacerlo tú mismo. Eso es lo que he hecho aquí hoy como ejemplo, pero no es realmente una buena solución porque a menudo se pierden matices del lenguaje, pero es gratuito y es un buen punto de partida. En Gazelle, en realidad usamos upwork.com y contratamos traductores freelance. Les enviamos los archivos PO y generalmente toma unos días. Luego nos envían el archivo traducido de vuelta con las nuevas cadenas traducidas. El siguiente paso que hacemos es tomar ese archivo PO y construirlo en algo que podamos importar en nuestra aplicación de React. Para esto, he escrito otro script llamado build strings que toma ese archivo PO y lo convierte en un objeto JavaScript simple indexado por el ID de la cadena. Finalmente, tomamos estos archivos JavaScript simples e inyectamos las cadenas de vuelta en nuestro código. Eso es una descripción general de este proceso de cinco pasos para gestionar las traducciones. Ahora quiero mostrarte cómo funciona esto en la vida real agregando una nueva cadena que necesita ser traducida. Así que volvamos aquí a la web y lo que vamos a hacer es agregar otra cadena aquí abajo que nos diga cuántos elementos tenemos en nuestra lista de compras. Bien. Así que volvamos a nuestro código y lo primero que tenemos que hacer es definir esta nueva cadena. Así que voy a ir aquí a nuestro archivo de constantes de cadena y agregar la cadena. Ahora estoy usando Jet Brains y tengo una macro que me facilita esto. Así que déjame hacer esto y llamémosla item count. Bien. Y ahora tengo todo esto preescrito aquí, así que no tengo que escribirlo todo. Déjame copiarlo y pegarlo aquí rápidamente. Y luego la traducción o el texto real será este.

Ahí vamos. Vamos a eliminar esa nueva línea. Bien. Ahora notarás que estoy mostrando algo nuevo aquí. Estoy mostrando pluralización. React Intel te permite pluralizar cadenas también basado en una variable. En este caso, esto se leerá de manera diferente si tenemos un elemento versus varios elementos y hay una `s` en plural. Y esto es algo que React Intel hace por nosotros. Bien. Permíteme volver al componente de la lista de compras ahora. Ahora vamos a agregar esto debajo de nuestro campo de entrada pero antes de nuestra lista. Así que déjame agregar esto aquí. Hagámoslo como un componente h2. Y se llamaba item count. En realidad, MSG item. Ahí está. Y vamos, oops, a cerrar esto. Bien. Y también teníamos una variable aquí. Así que esto era creo que se llamaba num. Y vamos a incluir, era items.length para obtener el número de elementos que tenemos en este componente. Bien, volvamos. Y ahora hemos compilado, tenemos el elemento aquí, así que dice que tenemos tres elementos en nuestra lista. Pero notarás que esto no está traducido. Así que si cambio esto a francés, simplemente usa el inglés predeterminado porque no tenemos una traducción en francés o una traducción en japonés todavía. Bien, ¿cómo lo hacemos? Lo que hicimos fue el primer paso en nuestro proceso, codificamos la aplicación utilizando el idioma predeterminado y lo hicimos funcionar. Así que ahora tenemos eso que fue el primer paso en el proceso de cinco pasos. Ahora el segundo paso es que necesitamos extraer esto en algo que nuestros traductores puedan usar. Así que permíteme ir a mi terminal. Y voy a usar ese script que escribí llamado extract strings. Ahora esto lee esos mensajes y los coloca en un archivo de plantilla PO aquí. Ahora, lo que necesitamos hacer es tomar ese archivo de plantilla PO y actualizar nuestros archivos PO con esta plantilla, lo cual agregará las

nuevas cadenas en él. Así que utilizo un programa llamado PO Edit. Es una herramienta gratuita y fantástica, y es excelente para gestionar los archivos PO de gettext. Así que voy a abrir eso, abrir estas traducciones. Mira, lo tenemos almacenado en la localización de origen. Vamos a abrir el francés. Veamos, tengo tanto el archivo JSON como la versión compilada de esto que volvemos a incluir en nuestra aplicación. Este es el que vamos a entregar a nuestros traductores. Así que voy a editar el archivo PO. Y este es PO Edit. Aquí arriba, tiene una lista de nuestras cadenas que necesitan ser traducidas. Y aquí abajo es donde realmente escribes la traducción. Aquí en el lado, es un poco pequeño. No estoy seguro si puedes verlo. Aquí es donde tenemos esa cadena contextual que los traductores pueden usar para proporcionar un mejor contexto para la traducción. De acuerdo. Ahora notarás que mi nueva cadena no está aquí porque la función de extracción de cadenas o el script que escribí lo coloca en un archivo POT, un archivo de plantilla. Así que en PO Edit, necesito ir a actualizar desde el archivo POT y agregar esto. Aquí está el archivo POT. Y fíjate, ahí está. Así que agregó mi nueva cadena aquí. Y ahora voy a guardar esto. Voy a cerrar esto. Y ahora puedo entregar esa traducción en francés a mi traductor. Hagamos lo mismo para la traducción en japonés. Voy a abrir eso, ir a catálogo, actualizar desde el archivo POT. Y voy a agregar mi archivo POT que creamos. Va a agregar esta nueva cadena aquí abajo que necesita ser traducida. Voy a guardar esto. Y ahora tengo estos dos archivos PO con mi cadena actualizada.

Voy a enviar esos archivos a mis traductores. Bien, eso fue el paso dos. El paso tres es enviarlos a mis traductores, y ellos traducen los archivos. Así que voy a fingir que soy el traductor aquí. Voy a abrir esto. Voy a ir a esta nueva cadena, y resulta que tengo la traducción aquí. Voy a copiar y pegar. Ahí vamos. Voy a eliminar esa nueva línea allí. Y le doy a guardar como traductor, y el traductor luego me enviaría este archivo de vuelta.

Bien, voy a hacer lo mismo para la traducción en japonés. Tengo la versión en japonés aquí. Ahí vamos. Y voy a pegarlo. Bien, tenemos la traducción en japonés, el traductor ha terminado con esto. Voy a añadir un punto al final de eso. Ahí vamos. Y el traductor me envía esto de vuelta. Así que ahora tomo esos archivos, los vuelvo a colocar en mi directorio de localización. Y eso fue el paso tres, donde hemos conseguido que los traductores traduzcan los archivos. El paso cuatro es que necesitamos construir estas cadenas en algo que React pueda utilizar. Así que voy a utilizar este otro script que escribí llamado build strings, que toma esos archivos PO y luego los convierte en archivos JSON de JavaScript. Voy a hacer eso. Y ahora hemos actualizado estos archivos de traducción. Así que si voy a mostrarles cómo se ve esto. Aquí está el archivo JSON. Y aquí es donde está indexado por ID con la traducción. Y esto es lo que luego incluimos en nuestra aplicación de react que react utilizará cuando cambiemos nuestra configuración de traducción. Bien, eso fue el quinto paso. Lo siento, eso fue el cuarto paso, construimos las cadenas y las convertimos en archivos JSON. Ahora el quinto paso es que necesitamos volver a compilar nuestra aplicación de react con estos archivos JSON. Ahora estoy utilizando create react app, que se ejecuta automáticamente en segundo plano, y se vuelve a compilar automáticamente. Así que si voy aquí, verán que ahora tengo una traducción al francés para esto. Y ahora tengo una traducción en japonés también. Y estas están correctamente pluralizadas. Dice tres artículos, o como se pronuncie eso en francés, justo aquí. Ahora hay mucho más de lo que me gustaría hablar. Pero espero que esto al menos te oriente en la dirección correcta si estás buscando internacionalizar tu aplicación. No dudes en visitar este repositorio de GitHub. Puedes tomar el código, usarlo, siéntete libre de utilizar cualquier código en tus proyectos que desees. Gracias por acompañarme hoy, y espero que disfrutes el resto de la conferencia.