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.
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