Arquitectura de internacionalización para componentes en React

Links a las documentaciones:

• react-intl
• react-i18next
• lingui
• rosetta
• next-intl

⚛ Arquitectura de internacionalización para componentes en React

Recursos

Overview | Format.JS

Introduction

Tutorial - Internationalization of React apps - LinguiJS documentation

https://github.com/lukeed/rosetta

Apuntes

“Analicemos la forma simple”

• Vamos a tener un JSON donde estarán todos los locales
• Estarán separadas por secciones de locales

// allLabels.json
{
	"es":{
		"buy": "Comprar",
		"accept": "Aceptar",
		...
	},
	"en-US":{
		"buy": "Buy",
		"accept": "Accept",
		...	
	},
	...
}

Para implementar esta solución mediante JavaScript se realizaría de la siguiente manera:

import allLabels from "locales/labels.json";

function getServerSideProps(){ ... }

function MyComponent ({locale}){
	const labels = allLabels[locale];
	return (
		<Button>{labels.comprar}</Button>
	)
}

Desventajas

1. Entre más locales, más pesado el archivo. ¿Dividimos también por locales?
2. Entre más labels, más pesado el archivo. ¿Divididimos por componentes?
3. La responsabilidad está repetida en cada componente. ¿La extraemos?

Dividiendo por componentes

// locales/es/checkout.json
{
	"buy": "Comprar",
	"addToCart": "Agregar al carro",
	"contactUs": "¿Interesado/a?"
}

// locales/es/about.json
{
	"about": "Nosotros",
	"phone": "Teléfono",
	"contactUs": "Conócenos"
}

Desventajas

1. Entre más locales, más pesado el archivo. ¿Dividimos también por locales?
2. Entre más labels, más pesado el archivo. ¿Divididimos por componentes?
3. La responsabilidad está repetida en cada componente. ¿La extraemos?

React

1. React.Context: para abstraer lógica en un solo lugar y permitir su acceso a componentes que la necesiten sin prop drilling.
2. React Hooks: para encapsular y reusar lógica.

import useTranslations from "useTranslations"

function getServerSideProps(){}

function MyComponent(){
	const labels = useTranslations()

	return (
		<Button>{labels("comprar")}</Button>
	)
}

• El hook retorna los labels listos para ser usados
• El componente en ningún momento piensa que locale utilizar, ya que todo está abstraído en el hook

function useTranslations(){
	const ctx = useContext(LocaleContext);
	const locale = ctx.getCurrentLocale();
	const labels = ctx.labels.get(locale);
	return labels;
}

• Mediante esta solución estamos:
  1. Creando una solución escalable
  2. Utilizando todo el poder de React
  3. Con ayuda de Next.js podemos utilizar mediante Next.js

Librerías populares

• react-intl
• react-i18next
• lingui
• rosetta
• next-intl

Increíble esta manera de enseñar mostrándonos como piensa y como soluciona un problema.