Organizing Javascript i18n files for modular app

Question

I'm adding i18n support to a relatively new app. It's a modular app. For right now, we'll just have English (and maybe Pig Latin for testing purposes), but I want to make sure we won't shoot ourselves in the foot. I've got two ideas of organizing the translation files:

1. One big global translation list with every string used in any module. This will cause some amount of contention for the global file. This file would be larger, and I wonder about the download time.

2. Each module has its own translation files. This will cause some amount of duplication for strings that occur in multiple modules. And we'll have to consolidate the files if we ever send them off to be translated.

We're using Javascript, plus Backbone.js, Require.js, Aura, etc., and we're planning on using i18next.

Which way is best to organize the files? Or is there some other way I'm missing.

Answer 1

By having a file per module you will repeat yourself. You will have to translate "An Error Happened" ten times if that string is used in ten modules. My suggestion is to aggregate all translations in one big JSON file that structured like this:

{
  "common": {
    "welcome": "welcome",
    ...
  },
  "module1": { 
    "loaded": "module1 is loaded"
     ....
  }
}

You will have module specific translations wrapped in it's own object and common strings in an object.

Side note: You can learn from John Resig from his blog post about i18n in JavaScript.