i18n frameworks — the unfair showdown

adrai (43)in #technology • 7 years ago (edited)

i18n frameworks — the unfair showdown

between formatjs, polyglot and i18next

When Jan started to think about this article my plan was to do a comparison between the three biggest options for web/modern internationalization. But just comparing the common features all provide the really shiny stuff would get lost. So he decided to write this up a little different.

While being one of the core contributors of i18next i tried to keep this as unopinionated as possible and related to real production demands.

Round 1: Translation Features like plurals, context, interpolation

Not much to say here. All three frameworks handle proper pluralization, support context and can interpolate variable content into translations. While polyglot and i18next use some similar formatting — formatjs uses the ICU messageformat. A matter of preferences here as all three get proper results.

Winner: all and none

Round 2: Supported environments / frameworks

While you always can build on core functionality (i18next.t, polyglot.t, IntlMessageFormat for formatjs) it adds a lot of comfort and added value if the choosen framework is directly supported.

polyglot:

js, node.js

formatjs:

js, react-intl, ember-intl, templates (handlebar, dust)

i18next:

js, react-i18next, ng-i18next, vue-i18next, jquery-i18next, loc-i18next, aurelia-i18next, i18next-meteor, django-18nxt, node.js, express, electron, react-native, ios native, android native, expo,…

Nothing more to say here. i18next is not just a i18n framework — it’s an ecosystem with a brilliant community.

Winner: i18next

Round 3: Support for formatting (date, numbers,…)

formatjs comes with built in formatting using the browsers intl API (depending on browser you will have to polyfill that).

i18next comes with a custom formatter function developers can define to handle formats (using the intl API or moment.js depending on the need of developers).

In polyglot you will have to format the content before interpolating — no built in support.

Winner: formatjs (for having formatting built in)

Round 4: How do translations get loaded

Formatjs and polyglot leave that to the developers. They will need to write code for language detection and for loading or bundling translations into their app.

i18next comes with multiple plugins which enable loading translations from server, filesystem or bundling translations with webpack. Further there are plugins to detect the users language (browser, electron, react-native, node.js express).

Winner: i18next

Round 5: How to extract translations from your code

polyglot and formatjs again leave that to developers.

For react-intl (formatjs) there is a extractor plugin that can be hooked to babel transform and extracts translation from the codebase.

i18next comes with two options:
a) You can use the save missing feature which submits every not found key to your backend (same support as for loading).
b) Alternatively there are two code parsers to extract translations from the codebase.

Winner: i18next

Round 6: Time for the Knockout

Can load multiple translation files, can load them on demand (think of big applications providing multiple modules/bundles)?

Just i18next provides such a feature.

Can show fallbacks for untranslated values?

React-intl can fallback to the default value in the code — but i18next can beside doing a fallback to the key also fallback to another language(s). Having the fallback defined in a fallback language enables your content editor to have control over that.

Can return translated json object to be used in other frameworks, eg. validatorjs?

i18next can not only return a single string but also a complete object tree to be used in other modules.

Can you just drop one line of code to get your page localized?

i18next provides i18nextify — a implementation on top of virtualdom which parses the content and instruments the complete page.

…

Winner: i18next

Conclusion

Both polyglot and formatjs are great frameworks baked by great companies. Writing a fair comparison is hard as i18next has much more to offer then a translation function. It’s a complete ecosystem baked by a great community with countless integrations and utilities like scanner, parser or the gettext converter.

On top of all the good stuff already mentioned i18next does also come with a SAAS offering locize which pushes the localization process to the next level. Like to learn more read “Localization should be fun”.

If you like i18next and want to give it some support consider starring it on github.