Introduzione

Uno degli errori più comuni che vedo nell'internazionalizzazione è la tendenza a suddividere semplici espressioni ternarie in più chiamate alla funzione di traduzione. Spesso si presenta in questo modo:

const gt = useGT()

return (
  <>
    <span>
      <T> Modalità scura: </T>
    </span>
    <Button>{enabled ? gt('Attivo') : gt('Disattivo')}</Button>
  </>
)

Per la maggior parte dei casi, questo funziona come previsto. Prima di implementare l'i18n, il codice probabilmente assomigliava a { enabled ? 'On' : 'Off' }. Aggiungere la funzione gt() per l'i18n sarà probabilmente sembrata semplicemente una naturale estensione della struttura di codice esistente.

Ogni volta che lo vedo, rabbrividisco un po'. Non è affatto così che la libreria è stata progettata per essere usata. Ci sono due motivi per cui questo è un errore, soprattutto nel contesto dell'uso della traduzione automatica: (1) Contesto e (2) Flessibilità.

Contesto

Il significato non è solo nelle parole, ma anche nel modo in cui vengono presentate. La parola "back", se si trova su una freccia per tornare indietro, probabilmente significa qualcosa di molto diverso rispetto alla parola "back" nel curriculum di un chiropratico. Inoltre, senza un contesto più ampio, i traduttori (anche umani) potrebbero avere difficoltà a tradurre correttamente la parola. C'è una famosa storia del reparto i18n di WhatsApp che ha tradotto la parola "crop" in uno strumento di modifica delle immagini come "crop" nel senso agricolo, in tedesco.

Per aggirare questo problema di contesto, possiamo passare informazioni sulla presentazione dei contenuti con i componenti <T> e <Branch>. Nel nostro esempio, questo darebbe al nostro "traduttore" un quadro più chiaro di ciò che significano "on" e "off".

<T>
  <span>Modalità scura:</span>
  <Button>
    <Branch branch={enabled.toString()} true="Attivo" false="Non attivo" />
  </Button>
</T>

Flessibilità

Oltre al contesto, un altro modo interessante in cui possiamo sfruttare la traduzione con LLM è grazie alla sua comprensione del codice. Vediamo un esempio in cui l'ordine dei componenti potrebbe cambiare a seconda della lingua:

<T>
  Pranzo a <Branch branch={atHome.toString()} true="casa" false="lavoro" />.
</T>

Quindi abbiamo due possibili frasi:

• "I eat lunch at home"
• "I eat lunch at work"

In mandarino avremmo:

• "我在家吃午餐"
• "我在公司吃午餐"

Il componente <T> riconosce che qui l'ordine della frase deve cambiare e riorganizza i suoi elementi figli di conseguenza, cosa che non è facilmente possibile usando operatori ternari con traduzioni di stringhe.

<T>
  Pranzo
  <Branch branch={atHome.toString()} true="a casa" false="in ufficio" />.
</T>

Conclusione

Se c'è una cosa che dovresti trarre da questo articolo, è che dovresti sempre cercare modi per sfruttare il contesto e la flessibilità nel tuo codice. Usare il componente <Branch /> è probabilmente uno dei modi più semplici per farlo.

Consulta la documentazione del componente <Branch /> per maggiori dettagli.