Internationalization. Is it hard? Not at all!

Bryan Rivera, Senior Software Developer

Let’s say you have a great product and feel ready to expand your coverage to target audiences that can vary in culture or language by adding support to other languages, but now you ask yourself, how can I achieve that? Should I hire a linguist for each language I want to add? Should I keep them in my company in case I want to add more content? Should I create a version of the pages for each language?

The answer for all those questions is no, you don’t!

In almost all the modern languages you can use Internationalization which can be described as the process of designing and preparing an application to be translated to different languages. Programming languages such as Angular, Vue, React, Ruby on Rails, Django and others, provide ways to change translation keys into translated text before showing the pages to the users which allow you to expand the market you are covering, and make your customers feel more taken into consideration.

What do we need to support Internationalization?

1. Determine a package or framework based on the stack used in the project

Some languages already provide this, such as Rails that provides i18n gem, or Django that comes with translation and just needs some configuration to be done.

In other languages such as React, we need a package to handle the translation, such as: React i18Next,  React Intl, React Native Localize.

All these options will work similarly. What they do is provide a function to translate your keys into the target language, in this way, you only need to write your pages once and the package/framework will translate to the appropriate language for the user. In order to accomplish that just let the package framework do its work by configuring your application so that it detects the user language preference (either in web or mobile). In this example we used React i18Next because it supports both mobile and web, and it works the same way in both environments. This simplifies the learning process and allows us to have similar configurations regardless of the application.

2.  Select a translation provider

As mentioned above, we have a function that allows us to change code with keys, to the corresponding text correctly translated. You may be wondering, ok I change my code with function calls so that they print the correct text in the user interface, but…where will I get those translations? The answer is you have two options:
1-Creating a json file for each language you want to support, and look for the appropriate translation, maybe with online services or hiring linguists.
2- Selecting a translation provider. There are many options in the market such as Smartling, Lokalise, Localazy and more. Basically, we will send them a file, usually in json format that contains keys and the text in the source language (typically English). After that,  the provider will translate it, returning us a json file per language. Once we have that, we add those files in the code and the package will know how to use it.

To Summarize, we will select a package, update our code base to call it in each text we want to translate, and create a json file with the keys we need to translate. Then we will request the provider to translate the file in the desired language and update our code with the new files.

After that, you will need to update the source file with any addition or update you made, resend the file to the provider, and they will send you back the updated translation file. Usually they charge by new word, so you don’t need to worry about sending content you have already translated. Also, most of them provide ways to automatically handle the send and receive behavior.

This is a code example of how to translate, please note that the keys are the json files translated that we were talking about, and the sample is the way we change keys to translations within code.

Keys

locales/en/author.js

{
      "Key": "I am {{author.name}}"
}

 

locales/en/author.js

{
      "Key": "Yo soy {{author.name}}"
}
Sample
const author = {
name: "Jan",
github:  "jamuhl"
};
// set language to English
i18next.changeLanguage("en");
i18next.t(key, {author}};
// -> "I am Jan"

// set language to Spanish
i18next.changeLanguage("es");
i18next.t(key, {author}};
// -> "Yo soy Jan"

 

In conclusion, you can make a good impact in your target market, and enhance your current customers satisfaction by internationalizing your product. The process to achieve this only requires a few steps and most of the current languages already provide tools to make this happen quickly and effectively.

Share on facebook
Share on twitter
Share on linkedin

Do You Want To Boost Your Business?

Drop us a line and keep in touch.

How Mismo Works

Jobs

About

Resources