What are the best practices for localization (app translation)?

[igoraguiar]

Hi guys, from your experience what is the best approach to having a consistent app in more than one language?

Thanks!

[minijohn]

Hey @igoraguiar, so I needed Internationalisation a few projects ago and solved it like this:

1. Connect to a resource that stores your translations (I'm using google sheets in the example).
   
   

The object is the key you'll be using throughout your app to reference a translation.

Row B & C store the translated string of the object, you can add as many translations as you want by adding another row and filling out the values for all objects.

2. Create a JS query that transforms your data from the sheet and caches the response. You don't want to be hitting that query for every element that accesses the translations. Also make it run on page load.

I can't find my original code but it goes something like this:

var app_language = app_language.value
var translations = get_translations.data
var mapping = {}

for (var i = 0; i < translations.length; i++) {
  mapping[translations[i].object] = translations[i][app_language]
}

return mapping

You then just reference the translation you want for the object:

{{i18n.data.refresh}} // for the refresh button
{{i18n.data.open}} // for the open button

This simple structure gives you:

Here's the JSON export of the sample app, hope it helps

[igoraguiar]

@minijohn i'm so sorry that I never answered you back. Thank you so much! This looks amazing!

[minijohn]

Hey @igoraguiar,

No worries :)) Hope it helps