Localization in Javascript Applications

Today I would like to talk about localizing (Internationalization) JavaScript applications.

Introduction

When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speaks English (specially in Mexico, where I am from), so we have to code our app to support at least two languages and be prepared to include more when needed.

We have two worlds, Server and Client side and both of them need to know how to name for example, a title: EN Title ES Titulo, and so on. This is quite simple if we have static forms that are loaded from the server, because most of the server-side frameworks out there are already prepared for localization (CodeIgniter, Cake PHP).

In these frameworks we can define all of the expressions used in our application and their template engines do the rest. But, that's on the server side.  How can we pass that information to the client? Very simple.

Let's Get started

In CodeIgniter for example, we can retrieve the files at runtime. Each of the localized entries are in a hashed array like this:

//file EN.php
                      $locale['welcome'] = 'Welcome to our site';
                      $locale['alert'] = 'Why you do this?';
                      

Select all Open in new window

//file ES.php
                      $locale['welcome'] = 'Bienvenido al Sitio';
                      $locale['alert'] = '¿Porque Haces esto?';
                      

Select all Open in new window

In order to use these variables, we can load the right array depending on the user locale, convert it to JSON (json_encode()) and send it to the client.  The result will be:

{welcome : 'Welcome to our site', alert: 'Why you do this?'}
                      

Select all Open in new window

It is important to load the locals before any of your javascript is loaded, otherwise your app will break. We can do this by an AJAX call or printing that string inside a <script> tag.

When recieving the string, we can pick it up with JavaScript, encode it to JSON and save it to a variable. (We have to encode it to JSON if we used an AJAX call, we can use the EVAL (Not recommended) or any encode-decode JSON library of your choice).

We're almost done, now we have a JavaScript object we can use in our client side, which contains all of the locals we need on our app.

Javascript structure:

var lang = {
                            welcome : 'Welcome to our site', 
                            alert : 'Why you do this?'
                      }
                      

Select all Open in new window

Finally, we can use our locales like this:

alert(lang.welcome);
                      

Select all Open in new window

Depending on the array we load at the server, the result will be:

   Welcome to our site (English file loaded)
or
   Bienvenido al Sitio (Spanish file loaded)

This information is very basic, but I've found out that no many people knows about it.
This is my first article, feel free to send me feedback, questions or complains =P

Thanx!
Jerry