What javascript structure is superior in handling internationalization?

Question

Suppose I am building a fairly large, interactive browser-based multimedia application, and I have the following requirements:

• Webkit-only (let's say chrome on the desktop)
• versions for tablets and desktops, possibly with minor differences in the user interface
• Fully client side: no server interaction
• Best performance
• Fully internationalized
• I am going to create a lot of these applications.
• Long-term maintainability is NOT a priority (no TDD here)
• Reuse and use of the project from project to priority
• Designers manage roost - a lot of time will be spent on appearance and animation.
• Very short development schedules
• A small, brilliant team.

I seek advice from people who have previously done something similar to avoid unpleasant choices ahead.

I know JS and CSS3 inside and out, but I'm smart / experienced / old enough to know that there are advantages to using an architectural environment that someone else has developed, rather than skating on my own. However, these advantages only affect the fact that the applications that I write are consistent with the goals of developing the framework.

I spent the whole day trying to plunge into SenchaTouch and came to the conclusion that it is great to create something completely different than what I'm building. (By analogy with SenchaTouch / ExtJS - Swing, and I'm looking for Flash.) Also, Sencha seems to have big problems changing Javascript in a class-based system, rather than just accepting / embracing this system-based prototype. It overheard me.

I spent the whole day learning backbone.js, and I really like it, except that 1) I really don’t need ANY of the server interaction material (although I could use it to load all the user interface elements from resource files) and 2) he is fully responsive to updating submissions. But maybe this is good? I do not understand.

I looked at knockout.js, and although he is very worried about keeping his eyes on the latest developments, not one of the demos I have been looking for internationalization for. My i18n needs are simple: every text line that appears in my application must come from a table (and the language used can be changed at any time). When I see something like this on the knockout.js homepage:

optionsCaption="choose..."

I'm worried about how easy it will be to make this line dynamic based on setting the runtime variable. That is, if I wanted to write the equivalent:

optionsCaption=l10n("choose")

Is there a painless way to do this, and because the language change is automatically propagated throughout the user interface?

Any strong recommendation that I consider another structure that might be better suited?

In addition, I assume that we will use jquery / ui or zepto, possibly zepto, to eliminate many patterns in dynamic page refresh and animations. Any useful thoughts on this piece of architecture?

Answer 1

I was curious that I myself (knockout + i18n search borught me here), I made a quick and dirty JSFiddle with the Jed utility along with the knockouts that Akasha suggested. I also had to use a bit of jQuery.

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

I created a custom binding (i18n) that is bound to your current language. Binding i18n takes text from an element and uses it as a key and replaces it with translated text from Jed.

The locale itself is implemented as ko.obervable, so you can change the locale value and update all your translation labels at one time (you may need to cache the key between init and update because it overwrites $ (element) .html ()).

One problem persists, when I included Jed in JsFiddle, all styles disappeared. I don’t know why and if this is an actual problem with Jed + KnockoutJS or just Jed + JsFiddle.

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

Hope this helps!

Answer 2

I think you will find that there are many Java scripts that suit your needs. If you want to quickly understand how the various frameworks look, I would recommend looking at the TodoMVC project , where the same application was implemented in 18 different JavaScript frameworks, including the ones you noted for this question. I just added a GWT implementation to this project - and GWT is a technology that I think is appropriate. It has many "corporate" features, such as the built-in i18n, and the use of a strongly typed Java language makes reuse much easier.

Answer 3

I haven't tried them yet, but they seem 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 4

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

The “drawback” of this solution is that you will probably have to reload the page when the language changes (maybe only a drawback if you intend to use a single page solution).

Answer 5

I recently ran into the same problem, and since there are many JS tools for this, none of them (as far as I know) worked very well with KnockoutJS and were able to change the language without refreshing the page.

So I created too much to handle it called KnockoutJS-i18n .

It works with both plain texts and variables:

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