When we are working on a webapp that we want to distribute globally, we must think that many people will not speak our language. If they don’t understand us, we can lose a large chunk of users.

In my experience with JavaScript projects, I refined the process to manage multiple languages in the simplest way possible, in a way that I can add a new language or edit existing strings in less time, and with less errors.

How to manage different languages

What we are learning in this tutorial is how to create a plugin that brings a language file, parse it, and return the required string in the user’s language.

The language file (in our example will be called strings.js) is a JavaScript object exported as default. The object may have properties that are other objects with the same structure. This is an example of our strings.js:

import months from "./months";

export default {
  account: {
    en: "Account",
    es: "Usuario",
    it: "Utente"
  },
  appName: "My Project",
  cancel: {
    en: "Cancel",
    es: "Cancelar",
    it: "Annulla"
  },
  months
};

And this is the content of the imported file months.js:

export default {
  january: {
    en: "January",
    es: "Enero",
    it: "Gennaio"
  },
  february: {
    en: "February",
    es: "Febrero",
    it: "Febbraio"
  },
  march: {
    en: "March",
    es: "Marzo",
    it: "Marzo"
  },
  april: {
    en: "April",
    es: "Abril",
    it: "Aprile"
  },
  may: {
    en: "May",
    es: "Mayo",
    it: "Maggio"
  },
  june: {
    en: "June",
    es: "Junio",
    it: "Giugno"
  },
  july: {
    en: "July",
    es: "Julio",
    it: "Luglio"
  },
  august: {
    en: "August",
    es: "Agosto",
    it: "Agosto"
  },
  september: {
    en: "September",
    es: "Septiembre",
    it: "Settembre"
  },
  october: {
    en: "October",
    es: "Octubre",
    it: "Ottobre"
  },
  november: {
    en: "November",
    es: "Noviembre",
    it: "Novembre"
  },
  december: {
    en: "December",
    es: "Diciembre",
    it: "Dicembre"
  }
};

#internationalization #web-development #programming #web-app-development #javascript