Which javascript framework excels at handling internationalization?

Question

Suppose I'm building a fairly large browser-based interactive media application, and I have these requirements:

• Webkit-only (let's assume chrome on the desktop)
• Tablet & Desktop versions, probably with minor differences in the UI
• Completely client-side: no server interaction whatsoever
• Best performance possible
• Fully internationalized
• I'm going to be building a LOT of these applications
• Long-term maintainability is NOT a priority (no TDD here)
• Reuse and leverage from project-to-project IS a priority
• Designers rule the roost - a lot of time will be spent on appearance and animation
• Very short development schedules
• Small, brilliant team

I'm looking for advice from people who have done something like this before, to avoid making some bad choices up front.

I know JS & CSS3 inside and out, but I'm smart/experienced/old enough to know that there are benefits to using an architectural framework that someone else developed instead of rolling my own. However, those benefits only inure if the apps I'm writing match the framework developer's goals.

I spent a day trying to get my head around SenchaTouch and concluded that it great for building something completely different than what I'm building. (By analogy SenchaTouch/ExtJS is Swing, and I'm looking for Flash.) Also, Sencha seems to go to a lot of trouble to change Javascript into a class-based system, instead of just accepting/embracing that it is a prototype-based system. That bugged me.

I've spent a day learning all about backbone.js, and I really like it, except 1) I don't really need ANY of the server interaction stuff (although I might use it to bootstrap all the UI elements from resource files), and 2) it completely punts on keeping views up to date. But perhaps that's a good thing? I'm not clear on that.

I've looked at knockout.js and although it does worry a lot about keeping views up to date, none of the demos I've looked at tackle internationalization. My i18n needs are simple: every text string that appears in my app needs to come from a table (and the language in use can be changed at any time). When I see something like this in the knockout.js home page:

optionsCaption="choose..."

I worry about how easy it's going to be to make that string dynamic, based on a run-time variable setting. That is, if I wanted to write the equivalent of:

optionsCaption=l10n("choose")

is there a reasonably painless way to do that, and what's involved in having a change of language automatically propagate throughout the UI?

Any strong recommendation that I look at yet another framework, that might be a better fit?

Also, I'm assuming we'll use either jquery/ui or zepto, probably zepto, to eliminate lots of boilerplate in the dynamic page update and animation stuff. Any helpful thoughts on that part of the architecture?

Answer 1

I've been curious about this myself (a knockout + i18n search borught me here), I did a quick and dirty JSFiddle with the Jed utility together with knockoutjs that Akasha suggested. I also had to use a bit of JQuery.

Have a look here: http://jsfiddle.net/yUE7a/5/

I created a custom binding (i18n) that binds to your current locale. The i18n binding takes the text from the element and uses that as a key and replaces it with the translated text from Jed.

The locale by itself is implemented as a ko.obervable, so you can change the locale value and have knockoutjs update all your translation labels in one go (you might have to cache key between init and update as it is overwritten by the $(element).html() call).

One problem persists, when I included Jed in JsFiddle, all styling dissapeared. I do not know why and if this is an actual issue with Jed + KnockoutJS or only Jed + JsFiddle.

I have never used Jed before so I don't know if it fits your purpose, but it should be simple enough to replace Jed with another i18n framework.

Hope this helps!

Answer 2

I recently came upon the same issue, and since there are plenty JS tools out there to do it, none of them (as far as I found) worked very well with KnockoutJS and were able to change language without refreshing the page.

Therefore, I created a too lof my own to handle it, called KnockoutJS-i18n.

It works with both simple texts and with variables:

<div data-bind="html: i18n.get('hello')"></div>
<div data-bind="html: i18n.get('hello_name',{'name' : 'John Doe'})"></div>

Answer 3

I think you are going to find that there are a lot of JavaScripts that fulfil your needs. If you want to get a quick flavour of how the various frameworks feel, I would recommend looking at the TodoMVC project, where the same application has been implemented in 18 different JavaScript frameworks, including the ones you have tagged for this question. I have just added a GWT implementation, to this project - and GWT is a technology that I think is worth considering. It has many 'enterprise' features such as i18n built-in, plus the use of the strongly-typed Java language makes re-use much easier.

Answer 4

I haven't tried these yet, but they seem to be easy to use with any framework:

gettext for javascript: http://slexaxton.github.com/Jed/

flexible plural and gender forms: https://github.com/SlexAxton/messageformat.js

Answer 5

Just generate all the html from the server side and use labels for languages. I do this with PHP and use knockoutjs and sammyjs. The html uses labels for all languages and I have a different PHP file for each language containing all the labels and its values in that language.

The "drawback" with this solution is that you probably need to reload the page when the language is changed (maybe only a drawback if you are going for a single page app solution).