Clay Murray for DropConfig

Posted on Sep 25, 2019

How do you do language translations

#discuss #webdev

Having worked at a company that supported a large number of languages I always wondered how other developers managed theirs.

The basic idea when I first started was: static JSON files with key value pairs.

So English might look like:

{
    "welcome": "Hello!"
}

Then in the code you would reference the key to fill in the value.

Something like:

<Translate>welcome</Translate>

That's not a bad solution and the basic ideas were pretty alright. However, it has a few problems.

The people who can translate for you don't usually know JSON
It doesn't provide much context on what the translation should be
It requires a code release every time you need to update a language or even fix a typo.

#1 is not too hard. You can convert to CSV for loading into excel which is a tool most people know. You can still run into data conversion issues.

#2 I never had a great solution for. Typically you would have to do a lot of work to provide screenshots and go back and forth for them to have proper context. If you site was already live it was easier since they could just look at the live site.

#3 Can be solved with hosting the JSON in another place such as S3 and have the app pull the data from there. But then you no longer have version control.

Eventually I created an internal app to solve #1 and #3. It was a react app that used firebase as the storage. It integrated with our LDAP so we had simple SSO.
We also had language and environment based permissions. You could say a user could only access French in dev.
It had a way to promote dev to production as well.

Firebase was nice to use in that you can have direct JSON access URLs so the consuming app never had to install their bulky tools. (It wasn't important to have live updating of the translations)
The app worked but was clunky, ugly, buggy and had little buy in from anyone but IT. I could think of many things I might improve on it.

This was a bit of a ramble. But after talking about what I've done and worked on. What do you guys do?

Top comments (2)

Akash Kava • Sep 25 '19 • Edited

In Web Atoms, we use Dependency Injection based on currently selected language, {lang} is resolved at time of module loading.

@DISingleton({ inject: "./{lang}/StringResource" })
export abstract class BaseStringResource {
    public abstract get username(): string;
    public abstract userNotFound(name: string): string;
}

/en-US/StringResource.ts

export default class StringResource extends BaseStringResource {
    public username = "Username";

    public userNotFound(name: string): string {
        return `Invalid username '${name}'`;
    }
}

/hi/StringResource.ts

export default class StringResource extends BaseStringResource {
    public username = "यूज़र नेम";
    public userNotFound(name: string): string {
        return `'${name}' यूज़र नहीं मिला`;
    }
}

Benefit is, you can write methods which can accept input and different language can format differently. I know you could put c style or c# style placeholder formatting.

But in this case, StringResource class can access various other libraries to perform substitution. And if you make methods async, you can still access some other JSON and perform substitution.

Dependency Injection in Web Atoms

Akash Kava ・ Jun 25 ・ 3 min read

#dependencyinjection #mvvm #typescript #javascript

Dmitrii Pashutskii • Sep 25 '19 • Edited

I think having a lot of text in different languages is not really a popular story, that's why there are not so many solutions for that, but I definetely like yours.

Mine experience is simple. Like everybody else, I'm looking for the simplest i18n solution that exists for that particular language/framework. Like npmjs.com/package/i18n for Node or guides.rubyonrails.org/i18n.html for Rails.

And yeah then I store my translations in YAML (more simple version than JSON in terms of syntax)/JSON files to made i18n plugin access to them.

DEV Community

How do you do language translations

Top comments (2)

Dependency Injection in Web Atoms

Akash Kava ・ Jun 25 ・ 3 min read

Read next

Why Atomic Design Is Not for Frontend: A Deep Dive

Level Up Your C# Skills with Pieces!

Next.js Tutorial : Adding Navbar with active Styling in a Server Component Layout

CoffeeShop App Infused with AI - Intelligent Apps Development