<

Localization in Javascript Applications

Published on
11,531 Points
5,331 Views
2 Endorsements
Last Modified:
Approved
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?';

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:
alert(lang.welcome);

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
2
Comment
Author:sosamv
1 Comment
LVL 83

Expert Comment

by:leakim971
porque doing mas complicated? thanks por tu time!
0

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

Join & Write a Comment

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