Shahrooz Jafari Shahrooz Jafari - 1 year ago 114
Javascript Question

Best practice for localization and globalization of strings and labels

I'm a member of a team with more than 20 developers, and each developer works on a separate module (something near 10 modules). In each module we might have at least 50 CRUD forms, which means that we currently have near 500 add buttons, save buttons, edit buttons, etc.

However, because we want to globalized our application, we need to be able to translate texts in our application. For example, everywhere, the word add should become ajouter for French users.

What we've done till now, is that for each view in UI or Presentation Layer, we have a dictionary of key/value pairs of translations. Then while rendering the view, we translate required texts and strings using this dictionary. However, this approach, we've come to have something near 500 add in 500 dictionaries. This means that we've breached DRY principal.

On the other hand, if we centralize common strings, like putting add in one place, and asking developers to user it everywhere, we encounter the problem of not being sure if a string is already defined in the centralized dictionary or not.

One other options might be to have no translation dictionary and use online translation services like Google Translate, Bing Translator, etc.

Another problem that we've encountered, is that some developers under the stress of delivering the project on-time can't remember the translation keys. For example, for the text of the add button, a developer has used add while another developer has used new, etc.

What is the best practice, or most well-known method for globalization and localization of string resources of an application?


As far as I know, there's a good library called localeplanet for Localization and Internationalization in JavaScript. Furthermore, I think it's native and has no dependencies to other libraries (e.g. jQuery)

Here's the website of library:

Also look at this article by Mozilla, you can find very good method and algorithms for client-side translation:

The common part of all those articles/libraries is that they use a i18n class and a get method (in some ways also defining an smaller function name like _) for retrieving/converting the key to the value. In my explaining the key means that string you want to translate and the value means translated string.
Then, you just need a JSON document to store key's and value's.

For example:

var _ = document.webL10n.get;

And here the JSON:

{ test: "blah blah" }

I believe using current popular libraries solutions is a good approach.