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.

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.

• javascript
• internationalization

2 Answers 2

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:

{
  "mon": {
    "wele": "wele",
    ...
  },
  "module1": { 
    "loaded": "module1 is loaded"
     ....
  }
}

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

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

Came across this question & thought I'd give an alternate view on this.

Background

Creating one massive translation file is OK, except when you're:

1. Developing an enterprise level site/system, and;
2. Working in a large team.

I've been working on an Angular application for over a year that has required a large team of devs, and is quite a large scale system.

When your system bees massive and you have a large team with you, a single language file isn't the best option, because:

1. Depending on the skillset & time frame of your developers, adding new strings in to an already large language file breeds laziness, and the mindset of 'Oh, I'll just put it in this section here and refactor later'. This then leads to unnecessary duplications if the same mindset is used to try and find an item that already exists.
2. On the large file and large team note, if two people are working on the same file and conflicts occur, conflict resolution is likely to cause errors and wastes time.
3. Smaller files can be lazy-loaded, if your framework/tech supports it. Why load language files for subsystems that you might not use?

Summary & Remendations

My remendations based on my experiences are as follows:

Do what is best for your project, it's timeframe and it's needs. To save time in the long run if you're working on a big system, start off with seperate files. Get a standard down from the beginning and stick to it to save time.