The Best JavaScript I18n Libraries
There is a handful of feasible solutions for translating pure JS apps, and developers — especially newcomers — might be puzzled on what to choose. In this article, we’ll go through four main JavaScript Ii8n libraries:
- I18next
- jQuery.I18n
- Globalize
- Polyglot
We’ll start off by taking a look at the largest and most complex library and wrap things up with the simplest one. Along the way, we’ll discuss all the features and advantages of each solution and try to come with some verdict on each tool. In this general overview, we won’t provide any code examples. Instead, we’ll provide lots of useful links for you to explore further technical details and usage examples. So, let’s get started!
I18next
The very first solution that comes to my mind when talking about localization is I18next. It’s a full-fledged open source internationalization framework suitable for all kinds of JavaScript apps, including the ones written in vanilla JS. This framework is quite mature (emerged in 2011) and has a big community behind it. If you’re looking for a complete solution, this tool is for you. What goodies does it offer?
- Lots of ready-to-use plugins and utilities. You don’t need to define your own logic of loading translations or formatting them: this functionality is already integrated into the framework; the framework is also very nicely documented.
- I18next is flexible. You can customize it the way you like, or not bother about additional configurations at all — it’s all up to you.
- It allows to easily split translations into multiple files and detect user’s language in various environments. Translations can be loaded asynchronously and cached, or placed directly into the code.
- It supports various formats: Fluent, Polyglot, and ICU. Choose the one that fits you!
- I18next plays nicely with all major front-end frameworks, including Angular, React, Vue, and Ember.
- Of course, I18next has all the general features that any internationalization library should have. It supports various formatting options, allows to work with gender, pluralization, there are language fallbacks available… Anything you could wish for!
Where Can I Learn More about I18next?
- Getting Started official guide
- API official guide
- Our beginners guide on I18next
- Our guide on localizing Stimulus.JS with I18next
- Our guide on localizing React Native with I18next
Should I Use This JavaScript I18n Library?
Definitely, if you want to get it all. Basically, you won’t need to reinvent the wheel as there are already lots of available plugins solving common tasks. You just need to configure them properly. Also, as already mentioned above, this is a mature solution that has been around for quite some time. It has a great community, which means that I18next’s support won’t be abandoned out of the blue. And this especially important if you are creating an application that is supposed to have a long lifespan. So, I would say I18next is a perfect candidate for medium and large applications that have a lot of internationalization-related stuff. This doesn’t mean small apps can’t also take advantage of I18next. However, for simpler apps that need only a little bit of localization, I18next would definitely be overkill.
I can’t say this tool has some real downsides, but it has its specifics. For one thing, I18next is a relatively big solution that some may call “bloated”. On the other hand, it has much more than basic translation loading and message formatting. Also, one may find it complex to research all the framework’s features and configuration options. But, then again, once you’ve become familiar with the tool, you can achieve impressive results with little effort.
jQuery.I18n
Another popular solution that I enjoy very much for JavaScript I18n is jQuery.i18n. I’m pretty sure you’ve heard of Wikipedia. This project is maintained by Wikimedia company, and its language engineering team brought jQuery.I18n into being. After all, Wikipedia (and other resources like Wikivoyage) is a world-wide project involving stakeholders from different countries: Of course, it needs to be localized properly! jQuery.i18n is an open-source solution that is used internally in Wikimedia’s web apps. This tells a lot about the library; such popular projects can definitely not afford any half-baked solutions.
So, what features does this library have?
- It utilizes a simple JSON format to store translations along with metadata and message documentation. Translations can be separated into multiple files, or even placed into the code directly.
- jQuery.i18n provides an interesting API based on HTML5
data-*attributes. It allows you to provide translations for various tags right in the markup. - Extensible message parser that supports so-called “magic words”. For example, you can just say
{sitename}to display the title of your website (no need to type it by hand every time). - It has a modular code: load the modules that you really need
- Of course, it has all the general features including gender and pluralization support (the latter relies on CLDR), ability to define fallback chains and more
Where Can I Learn More about jQuery.I18n?
- Official documentation
- Our step-by-step JS localization guide covering jQuery.I18n and some other solutions
- Our advanced guide to jQuery.I18n
- Our guide listing some facts about jQuery.I18n that you might want to know
Should I Use This JavaScript I18n Library?
Well, you should at least give it a shot. This solution is not as large and extensible as I18next, but it provides all the necessary translation features. It has nice support and great documentation that covers pretty much all the functionalities. jQuery.I18n is also quite easy to get started with: You don’t need to spend days studying its docs. I would say this tool is suitable for apps that don’t require complex interactions with translation data. For more complex stuff, I18next is perhaps your best option.
The main disadvantage of jQuery.i18n can be guessed from its name: it relies on jQuery. For the past years, many developers tend to stay away from this tool and use vanilla JS for everything. If you’re among these people, you probably wouldn’t want to include yet another library on your website just to support internationalization. On the other hand, jQuery is still very popular (and it doesn’t seem its popularity will significantly decrease in the near future) so this won’t be an obstacle to many devs.
Globalize
The next solution we’ll discuss is called Globalize, and it was initially presented by jQuery core team. This open source library can be used directly in the browser or as a Node module. Globalize has moa dular code and relies heavily on CLDR data. Let’s take a look at its main features and specifics:
- The main thing to note is that Globalize is highly modular. It has eight main modules, but you can load only the required ones — depending on what feature you’d like to enable. There is even an online tool to determine which modules you need.
- Globalize also follows the separation-of-concerns principle. Basically, it means that the library itself presents only the code — it doesn’t host any translation-related data. The data is taken from Unicode CLDR that has support for the world’s languages. Using the online tool mentioned above you can easily deduce the CLDR content you require. This is a great approach because you can decide for yourself what data to load and how often to update it.
- Translations themselves are stored in JSON.
- Out of the box: Globalize can work with numbers, currency, date, time, as well as relative times.
- It has all main features, including support for pluralization (in ICU format) and message formatting.
Where Do I Learn More about Globalize?
- Official docs
- Discussion on using Globalize with Node
- Our step-by-step JS localization guide covering jQuery.I18n and some other solutions
Should I Use This JavaScript I18n Library?
Most probably, yes. It has similar features to jQuery.i18n but, as you can see, these solutions have quite different approaches. For one thing, Globalize is fully modular and does not rely on jQuery. It means that you load as little code as possible. Moreover, it provides only the code itself, and you can decide what CLDR data to employ. This will surely please developers who don’t like to bloat their applications. All in all, Globalize can be used in any JS application that requires an internationalization mechanism.
As for the downsides, getting started with Globalize can be more complex than with jQuery.i18n. First, you’ll need to hook up all the necessary modules, determine which CLDR content you require, and then load it properly. Also, in contrast to jQuery.i18n, Globalize doesn’t present data-* API, which some developers will enjoy a lot. The bottom line: If you need to choose between jQuery.i18n and Globalize, try both and decide which one you prefer. After all, you surely wouldn’t want to switch to a different library when your application is already finalized.
Polyglot.js
It’s time to take a look at some less complex solutions: Meet Polyglot.js, a simple interpolation and pluralization helper created by Airbnb. Here are the main features and specifics of this solution:
- It can work directly in the browser or as a Node module
- Polyglot is environment-agnostic; basically, it only provides you with a mechanism to manage translation messages
- Translations are provided in JSON format. It’s up to you to decide how to load these translations (in the simplest case, place them directly into the code)
- Polyglot doesn’t provide translations for you — it’s the developer’s job to give the library the proper phrases
- It also supports interpolation and basic pluralization
Where Do I Learn More about Ployglot.js?
- Official docs
- Our step-by-step JS localization guide covering jQuery.I18n and some other solutions
Should I Use This JavaScript I18n Library?
If you don’t need complex internationalization and would like to stay minimal, Polyglot.js is the perfect solution for you. It has no dependencies and getting started with it is as simple as hooking up a single file.
The downsides of Polyglot.js are obvious as well. This solution is very minimalist, doesn’t provide much extensibility options and, therefore, can’t be used for complex apps. If you want to get something done with Polyglot, you’ll probably need to do it yourself. But if you don’t need anything fancy, you should definitely give this library a try.
Phrase and Translation Files
Working with translation files can be quite complicated, especially when the app is big and is supposed to support many languages. You might easily miss some translations for a specific language, and that will confuse the end-user…
Take Phrase for a spin: Grab your 14-day trial. Phrase supports many different languages and frameworks, including JavaScript. It allows you to easily import and export translations data. What is more important: You can quickly check which translation keys are missing. On top of that, you can collaborate with translators as it’s much better to have professionally done localization for your website.
Conclusion
In this article, we took a look at four JavaScript internationalization libraries: I18next, jQuery.i18n, Globalize, and Polyglot.js. We discussed their main features, as well as the pros and cons. I hope you can now make a better choice of suitable I18n solution for your next project. Try to experiment with different solutions, deduce their strong sides, and then decide which one you prefer. After all, it’s important that you have a tool you are comfortable working with.
Originally published on The Phrase Blog.
