Use JavaScript to built multilingual web application

Hello,

Recently I was working on a project which requires multilingual support. Front end was built ExtJs so I decided to add multilingual support through JavaScript files. At a time of login user language is retrieved from database and respective language is downloaded on a client side then it can be used through out the app.

The approach is to store all language files in one common folder and from there it will be dynamically loaded using ScriptLoader.

For Example.

/root/languages/en.js
/root/languages/sw.js
/root/languages/fr.js

Each language file stores conversation in some common format. See the example below.


Ext.ns('WebAppName.language');

WebAppName.language = {
    PageTitle : "Welcome to The Site",
    HomePage : "This is HomePage",
    WelcomeMessage : "Welcome to the Web App"
};

Here Ext.ns is used to define namespace. Once namespace is defined it can be used any where in the app with that reference name.

Once any of above files are loaded it can be used as follow.

var title = WebAppName.language['PageTitle '];

Above code will assign "Welcome to The Site" string to title variable. Same way any other words can be loaded and used through out the app.

So this was the approach to built multilingual web app using JavaScript. This approach is useful when you are building front end using JavaScript frameworks like ExtJs, jQuery. Main advantage of this approach is it will be one time download a language file and all the values are available on client side so it does not require server request.

Please remember above code will work for ExtJs.