P
P
Petr Flaks2015-01-03 16:59:17
JavaScript
Petr Flaks, 2015-01-03 16:59:17

How to properly localize JavaScript applications?

Hello!
I am making an extension for Google Chrome which is known to be written in HTML and JavaScript. My extension is multilingual: in English and in Russian. But I faced a problem: I don’t know how best to localize the extension so that it is not a collective farm, and also so that because of the chosen solution I don’t have to step on any rake in the future.
Actually, this does not apply to the question, but I will clarify that in Google Chrome, translations are written to a JSON file:

"local_storage_usage": {
  "message": "Local storage"
},
"last_error_occured": {
  "message": "Extension last error occured"
},
"no_error": {
  "message": "There is no error."
},
...

And then they are called by the built-in method chrome.i18n.getMessage("local_storage_usage"). I, not knowing how to do it better, create pages like this:
$("#debug").html('<h1 class="h3">' + chrome.i18n.getMessage("debug_page") + '</h1>' +
'<h2 class="h4">' + chrome.i18n.getMessage("key_permissions") + '</h2>' +
'<div id="permissions">' + chrome.i18n.getMessage("loading") + '</div>' +
'<hr>' +
'<p>' + chrome.i18n.getMessage("reset_alarm_warn") + '</p>');

But this approach does not seem practical to me. Tell me, what would you do in my place?
Thank you.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexey, 2015-01-03
@neluzhin

In order not to be a collective farm - first of all, fasten the template engine - I recommend Handlebars. The rest - like the rules.

V
VZVZ, 2015-01-03
@VZVZ

1) Не приходило ли в голову хранить в том JSON-файле перевод сразу всего куска HTML, а не по кусочкам? Тогда бы не пришлось ничего конкатенировать. Тогда в JS было бы достаточно:
Это и по производительности, пожалуй, было бы чуток быстрее.
2) не приходило ли в голову не искать какие-то готовые библиотеки с избыточным функционалом, а просто написать СВОЮ функцию-шаблонизатор, которая бы заполняла пропуски в шаблоне HTML.
Получится как-то так:

$("#debug").html(my_own_function(
  '<h1>{{debug_page}</h1><h2>{{key_permissions}}</h2>',
  chrome.i18n.getMessage("debug_page"),
  chrome.i18n.getMessage("key_permissions")
));

Это ведь не так уж и сложно.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question