React: las 4 principales bibliotecas para crear apps internacionales

La internacionalización, o i18n (donde el número 18 representa las 18 letras que hay entre la "i" y la "n" en la palabra "internacionalización"), es el proceso de adaptar una aplicación para que pueda ser utilizada por personas de diferentes regiones y culturas.

Es muy importante destacar que esta adaptación va mucho más allá de la simple traducción de textos, abarcando aspectos como el formato de fechas, la representación de números y las diferencias culturales que influyen en el diseño y la experiencia del usuario. A menudo, la gente tiende a confundir los términos "traducción" y "localización", pero en realidad, estos dos conceptos son distintos y complementarios. La traducción es un componente clave de la localización, pero esta última va más allá de las palabras. La localización implica ajustar la aplicación para que se sienta natural y relevante en diferentes contextos culturales. Esto incluye aspectos como los colores y símbolos utilizados, los formatos de fecha y hora preferidos, o la adaptación de la interfaz para albergar diferentes longitudes de texto entre otras cuestiones.

En este artículo vamos a explorar las principales opciones que tenemos a la hora de abordar la internacionalización de aplicaciones construidas con React. Cada una tiene su propio enfoque y forma de trabajar, y por lo tanto sus propias ventajas y desafíos. No profundizaremos en cada una de ellas, porque sería muy largo, pero sí te daremos las pistas suficientes para poder decidirte por alguna y que puedas empezar a aprender a sacarles partido por tu cuenta.

1.- React-intl

Nuestra opción número 1 viene como parte de las bibliotecas de internacionalización de FormatJS. Esta es una biblioteca creada por Yahoo, compatible con más de 150 idiomas y que es muy popular debido a sus características.

Además de permitirnos controlar con facilidad la configuración regional estándar (fecha y hora, monedas, números...) es fácil de usar y está bien documentada. Además, aprovecha el contexto de React y los componentes de orden superior para proporcionar traducción en tiempo real sin necesidad de recargar la aplicación.

Pros:

1. Popularidad y estándar: es la biblioteca más popular y se considera un estándar en la internacionalización de aplicaciones React, lo que significa que cuenta con una amplia comunidad de usuarios y recursos disponibles.
2. Amplia compatibilidad: su capacidad para admitir una amplia variedad de idiomas y configuraciones regionales la hace adecuada para proyectos a nivel mundial.
3. Documentación sólida: la documentación exhaustiva facilita el proceso de aprendizaje y desarrollo, lo que ahorra tiempo y esfuerzo.

Contras:

1. Pesada: en comparación con algunas bibliotecas más ligeras, React-intl puede tener una mayor "carga" en la aplicación debido a su amplia gama de funciones. Puede ser un poco excesiva para proyectos pequeños o simples.
2. Curva de Aprendizaje: aunque bien documentada, la complejidad de React-intl puede requerir tiempo para aprender y dominar completamente.

Recomendada cuando...

React-intl es generalmente la opción preferida para la internacionalización en React gracias a su amplia compatibilidad, documentación detallada y popularidad en la comunidad. Se recomienda su uso en proyectos de mediana a gran escala que requieran soporte para múltiples idiomas y configuraciones regionales. Sin embargo, para proyectos más simples, quizá sería mejor considerar una biblioteca más ligera y simple para evitar un exceso de complejidad.

2.- React-intl-universal

Como se puede intuir por su nombre, este paquete se basa en el anterior. Está creado por el gigante chino de Internet, Alibaba, y su principal diferencia es que permite que incluso los componentes que no son de React la puedan utilizar. Es decir, expande a la anterior para que se pueda utilizar con cualquier aplicación JavaScript. También implementa, como la anterior, el formato de los mensajes utilizando los estándares de la ICU (International Components for Unicode) e incluso admite formas anidadas de datos en formato JSON.

Pros:

1. Mayor versatilidad: la capacidad de utilizar la internacionalización en componentes no relacionados con React amplía las posibilidades de aplicación de esta biblioteca.
2. Respaldado por Alibaba: el respaldo de Alibaba hace que sea más probable que haya recursos para el desarrollo continuo de la biblioteca, por lo que no hay mucho riesgo de que llegue a desaparecer.
3. Manejo de datos anidados: la capacidad de incluir datos anidados en los mensajes facilita la gestión de contenido dinámico y complejo en aplicaciones multilingües.

Contras:

1. Menos documentación en comparación con React Intl: aunque tiene una comunidad creciente, la documentación puede ser menos extensa que la de React Intl.
2. Curva de aprendizaje: la implementación de internacionalización en componentes no relacionados con React puede requerir un tiempo de aprendizaje adicional.
3. Mayor peso: al ser una extensión de React Intl, tiene un tamaño mayor debido a las características añadidas.

Recomendada cuando...

React-intl-universal es una excelente opción cuando se requiere una biblioteca de internacionalización que pueda utilizarse en componentes no relacionados con React, lo que lo hace adecuado para aplicaciones JavaScript más amplias o que combinen React con otros frameworks. Su respaldo por Alibaba y su capacidad para manejar datos anidados en formato JSON son ventajas notables. Sin embargo, los desarrolladores deben estar preparados para enfrentar una curva de aprendizaje y considerar el tamaño del paquete en proyectos donde el rendimiento máximo sea crucial.

3.- react-i18next

Se basa en la biblioteca más genérica i18next, pensada para JavaScript "simple", pero este es un superconjunto enfocado para utilizarlo con React en particular. Permite que la extendamos con nuevas funcionalidades y cuenta con una amplia gama de complementos, configuraciones y utilidades ya hechos por la comunidad, como la detección automática de los idiomas preferidos del usuario, el almacenamiento en caché de la configuración regional, la carga del contenido traducido desde el servidor, etc...

Una característica destacada de i18next es la capacidad de dividir los archivos de traducción en pequeños fragmentos, lo que proporciona un rendimiento mejorado en aplicaciones a gran escala. Es bastante ligera (~15kb) pero potente. A cambio puede ser difícil de aprender a utilizar. Detrás de esta biblioteca está una empresa que ofrece un software online (Locize) para ayudar a gestionar los proyectos de traducción.

Pros:

1. Amplia variedad de complementos y utilidades: facilita la implementación de características avanzadas de internacionalización.
2. División de archivos de traducción: mejora el rendimiento en aplicaciones a gran escala.
3. Tamaño ligero: minimiza el impacto en el tamaño del bundle.
4. Respaldado por una empresa: ofrece recursos adicionales y soporte.

Contras:

1. Curva de aprendizaje: puede ser difícil de aprender debido a la variedad de opciones y configuraciones disponibles.
2. Mayor complejidad en comparación con soluciones más simples: para proyectos pequeños, la sobrecarga de características avanzadas puede ser demasiado y es mejor tirar por alguna otra.

Recomendada cuando...

React-i18next es una excelente elección cuando se requiere una biblioteca de internacionalización poderosa y versátil para aplicaciones React. Su amplia gama de complementos y utilidades, junto con la capacidad de dividir archivos de traducción, la hacen adecuada para proyectos a gran escala. Sin embargo, debes poder invertir tiempo en su aprendizaje y considerar si la complejidad adicional es necesaria para tu proyecto. Que esté detrás una empresa especializada, y la existencia de sus herramientas (la mencionada Locize) pueden suponer ventajas adicionales para la gestión de proyectos de traducción.

4.- LinguiJS

Su principal "punto de venta" es que muy liviana (3Kb una vez "gzipeada") y es fácil de utilizar, aunque es mucho menos conocida.

Utiliza la sintaxis de mensajes ICU, da soporte para mensajes de texto enriquecidos y también incluye una potente interfaz de línea de comandos (CLI) para gestionar el flujo de trabajo de traducción.

No tiene tantas características como las anteriores, pero a cambio es más sencilla de utilizar.

Aquí tienes una comparativa (hecha por ellos mismos) con react-intl.

Pros:

1. Extremadamente liviana: contribuye mínimamente al tamaño del paquete final, lo que es beneficioso para el rendimiento. Si esto te importa, es una gran opción a considerar.
2. Fácil de utilizar: su simplicidad la hace ideal para proyectos donde se requiere una solución de internacionalización más sencilla.
3. Potente CLI: la interfaz de línea de comandos simplifica la gestión de traducciones y flujos de trabajo de internacionalización.

Contras:

1. Menos características en comparación con algunas bibliotecas más grandes: LinguiJS puede carecer de algunas de las características avanzadas presentes en bibliotecas más completas, como por ejemplo menor soporte para pluralización avanzada de palabras en algunos idiomas, manejo de datos anidados en mensajes (datos dinámicos dentro de las cadenas a traducir).
2. Menos conocida y con menor comunidad: al ser menos conocida que algunas de las alternativas más populares, puede ser difícil encontrar buena documentación, extensiones, recursos y una amplia comunidad de apoyo.
3. Menor compatibilidad con React Native: si tienes la intención de utilizar la misma biblioteca para proyectos tanto en React como en React Native, algunas bibliotecas más conocidas, especialmente react-intl, te proporcionan una mejor compatibilidad con ambas plataformas.

Recomendada cuando...

LinguiJS destaca por su extrema ligereza y facilidad de uso, lo que la convierte en una excelente opción para proyectos que requieren una solución de internacionalización simple y rápida. Su potente CLI es una ventaja adicional para la gestión de traducciones. Sin embargo, puede no tener todas las características avanzadas presentes en bibliotecas más grandes y populares. En general, LinguiJS es ideal para proyectos pequeños y medianos donde la simplicidad y el rendimiento son prioritarios.