[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More


Localization in Javascript Applications

Published on
11,569 Points
2 Endorsements
Last Modified:
Today I would like to talk about localizing (Internationalization) JavaScript applications.


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?';

Open in new window

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

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?'}

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?'

Open in new window

Finally, we can use our locales like this:

Open in new window

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

   Welcome to our site (English file loaded)
   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

1 Comment
LVL 84

Expert Comment

porque doing mas complicated? thanks por tu time!

Featured Post

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month