Existen algunas bibliotecas excelentes que ayudan con la internacionalización en React, pero sorprendentemente hay poca orientación sobre cómo manejar la internacionalización de principio a fin. En esta masterclass discutiremos las mejores prácticas y consejos prácticos para manejar las traducciones en React. Hablaremos sobre cómo extraer cadenas de texto de su código, cómo gestionar archivos de traducción, cómo pensar en el mantenimiento a largo plazo de sus traducciones e incluso cómo evitar errores comunes en los que suelen caer los desarrolladores que solo hablan un idioma.
End-to-end i18n
Video Summary and Transcription
Gracias por unirse a mi masterclass sobre internacionalización de principio a fin. Te guiaré en la internacionalización de una aplicación React, cubriendo cadenas de texto traducidas, formato de moneda y fecha, gestión de traductores e inyección de cadenas de texto traducidas de nuevo en la aplicación. Las constantes utilizadas en toda la aplicación definen la configuración de localización y las traducciones. Se utiliza la biblioteca React Intel para gestionar las traducciones y se crean funciones personalizadas para el formato consistente de fechas y números. El proceso de traducción implica extraer cadenas de texto, utilizando herramientas como PO Edit y compilar las cadenas de texto traducidas en archivos JSON para la aplicación React.
1. Introducción a la Internacionalización
Gracias por unirse a mi charla sobre internacionalización de extremo a extremo. Soy Luke Ersman, cofundador e ingeniero de software en Gazelle. Gazelle es una empresa de software como servicio que automatiza los procesos comerciales para técnicos de piano. Tenemos una interfaz web en React, una aplicación móvil en React Native y un backend en Rails. Comercializamos nuestro producto a nivel mundial y necesitábamos internacionalizarlo por completo. En esta charla, te guiaré a través de la internacionalización de una aplicación en React, cubriendo cadenas traducidas, formato de moneda y fecha, gestión de traductores e inyección de cadenas traducidas de vuelta a la aplicación. Vamos a sumergirnos en la aplicación de demostración que he creado para mostrar estos conceptos.
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.
2. Introducción a las Constantes
Comencemos por ver las constantes. En esta sección, te mostraré cómo hemos definido las configuraciones de localización para las monedas, los formatos de fecha y el formato de números. También tenemos una lista de diferentes ubicaciones y traducciones. Estas constantes se utilizarán en toda la aplicación.
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.
3. Explicación de los Componentes de Orden Superior
En esta aplicación de create react app, el componente principal es un componente de la aplicación. Hay tres componentes de orden superior: contexto de elementos, contexto de localización y proveedor de Intel. El contexto de elementos gestiona el estado de la aplicación, mientras que el contexto de localización recuerda las preferencias de idioma. El proveedor de Intel, que utiliza la biblioteca React Intel, gestiona las traducciones. El proceso de configuración implica proporcionar el idioma actual y una lista de cadenas traducidas.
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
4. Explorando Cadenas Internacionalizadas
En esta sección, estamos obteniendo las traducciones para la configuración regional actual y estableciéndolas en el proveedor de Intel. El componente de la lista de compras consta del encabezado, selector de idioma, entrada para agregar elementos y la lista. Utilizamos la función format message en React intl para traducir cadenas. Esta función toma una estructura con la cadena a traducir y devuelve la cadena traducida.
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
5. Explicación de React Intel
React Intel requiere un ID y un mensaje predeterminado para cada cadena. También acepta una descripción para proporcionar contexto a los traductores, lo cual es extremadamente útil para obtener traducciones de calidad.
6. Traducción, Localización y Formateo
En Gazelle, tenemos dos aplicaciones, una aplicación móvil y una aplicación web. Podemos compartir cadenas y traducciones entre ellas para mantener la consistencia. Las opciones de formato de fecha y número de React Intel son inconsistentes en diferentes plataformas, por lo que escribí mis propias funciones, Formatear Moneda y Formatear Fecha, para garantizar la consistencia y simplificar el proceso.
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
7. Formateo de Fechas y Gestión de Traducciones
En esta sección, expliqué cómo funciona la función de formato de mensajes para formatear fechas y variables en cadenas traducidas. También te mostré el resultado final del mensaje formateado, que es una sola cadena con la fecha traducida. Ahora, pasemos a la gestión del proceso de traducción. Implica codificar todo en JavaScript, definir cadenas utilizando constantes y trabajar con el idioma predeterminado. Luego, extraemos las cadenas y utilizamos archivos PO de gettext para entregárselas a los traductores, proporcionando información contextual para mejorar las traducciones.
8. Gestión de Traducciones y Agregado de Nuevas Cadenas
En este paso, extraemos las nuevas cadenas y las empaquetamos en un archivo PO para cada idioma. Proporcionamos un script llamado extract strings que automatiza este proceso. Luego, entregamos el archivo PO a los traductores que pueden usar herramientas como Google Translate o servicios de traducción profesionales. Una vez que las traducciones están completas, construimos el archivo PO en un objeto JavaScript que se puede importar en nuestra aplicación de React. Finalmente, inyectamos las cadenas traducidas de vuelta en nuestro código. Este proceso de cinco pasos garantiza una gestión eficiente de las traducciones.
9. Pluralización y Proceso de Traducción
React Intel permite la pluralización basada en variables. En el componente de la lista de compras, agregamos un contador de elementos debajo del campo de entrada. Muestra el número de elementos en el componente. Sin embargo, la traducción aún no está implementada. Para solucionar esto, seguimos un proceso de cinco pasos. El primer paso es codificar la aplicación utilizando el idioma predeterminado. El segundo paso implica extraer las cadenas para su traducción utilizando un script llamado extract strings.
10. Gestión de Traducciones con PO Edit
Utilizo un programa llamado PO Edit para gestionar los archivos PO de gettext. Es una herramienta gratuita y fantástica. Abro las traducciones almacenadas en la localización de origen, edito el archivo PO en PO Edit y agrego la nueva cadena. Luego, actualizo el archivo POT y lo guardo. Finalmente, tengo dos archivos PO con la cadena actualizada para enviar a mis traductores.
11. Traducción y Compilación
El tercer paso implica enviar los archivos a los traductores para su traducción. El cuarto paso es construir las cadenas traducidas en archivos JSON que React puede utilizar. Finalmente, en el quinto paso, la aplicación de React se vuelve a compilar con las nuevas traducciones, lo que resulta en un contenido correctamente pluralizado en varios idiomas.
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.