React / Redux and Multilingual (Internationalization) Apps - Architecture

Question

I\'m building an app that will need to be available in multiple languages and locales.

My question is not purely technical, but rather about the architecture, and th

Answer 1

From my research into this there appears to be two main approaches being used to i18n in JavaScript, ICU and gettext.

I've only ever used gettext, so I'm biased.

What amazes me is how poor the support is. I come from the PHP world, either CakePHP or WordPress. In both of those situations, it's a basic standard that all strings are simply surrounded by __(''), then further down the line you get translations using PO files very easily.

gettext

You get the familiarity of sprintf for formatting strings and PO files will be translated easily by thousands of different agencies.

There's two popular options:

1. i18next, with usage described by this arkency.com blog post
2. Jed, with usage described by the sentry.io post and this React+Redux post,

Both have gettext style support, sprintf style formatting of strings and import / export to PO files.

i18next has a React extension developed by themselves. Jed doesn't. Sentry.io appear to use a custom integration of Jed with React. The React+Redux post, suggests using

Tools: jed + po2json + jsxgettext

However Jed seems like a more gettext focussed implementation - that is it's expressed intention, where as i18next just has it as an option.

ICU

This has more support for the edge cases around translations, e.g. for dealing with gender. I think you will see the benefits from this if you have more complex languages to translate into.

A popular option for this is messageformat.js. Discussed briefly in this sentry.io blog tutorial. messageformat.js is actually developed by the same person that wrote Jed. He makes quite stong claims for using ICU:

Jed is feature complete in my opinion. I am happy to fix bugs, but generally am not interested in adding more to the library.

I also maintain messageformat.js. If you don't specifically need a gettext implementation, I might suggest using MessageFormat instead, as it has better support for plurals/gender and has built-in locale data.

Rough comparison

gettext with sprintf:

i18next.t('Hello world!');
i18next.t(
    'The first 4 letters of the english alphabet are: %s, %s, %s and %s', 
    { postProcess: 'sprintf', sprintf: ['a', 'b', 'c', 'd'] }
);

messageformat.js (my best guess from reading the guide):

mf.compile('Hello world!')();
mf.compile(
    'The first 4 letters of the english alphabet are: {s1}, {s2}, {s3} and {s4}'
)({ s1: 'a', s2: 'b', s3: 'c', s4: 'd' });