Свобода выбора… i18next, polyglot или formatJS

Когда мы начали работу над locize.com нашей локализацией как сервисной платформой, мы в основном имели в виду решить процесс перевода для разработчиков, использующих наш фреймворк i18n i18next.com.

Системы управления переводами - отличное подспорье. Но все же существует разрыв между разработкой и процессом перевода. Файлы должны быть экспортированы / импортированы / объединены, и все это время добавляется новый контент для перевода. Хаос неизбежен. locize.com приходит на помощь. Это как служба перевода на стероиде, напрямую подключенная к вашему инструментированному веб-проекту i18next. ("источник")

Через несколько недель после успешного запуска бета-версии и добавления множества сторонних услуг для заказа переводов непосредственно из вашего проекта locize, мы начали задаваться вопросом, можем ли мы также привнести удивительность в другие фреймворки интернационализации внешнего интерфейса, такие как полиглот airbnb или Yahoo. FormatJS?

polyglot + locize.com

Наш первый взгляд на полиглот показал, что реализация очень похожа на формат json i18next, только множественные числа хранятся в одном ключе и разделяются символом `||||`.

Мы решили сделать небольшой всплеск, используя экспресс-сервер node.js, загружающий ресурсы с locize.com с помощью своего API и возвращающий демонстрационную страницу с использованием полиглота для ее перевода.

Использование запроса для загрузки переводов:

function load(lng, callback) {
  var url = ‘https://api.locize.io/[YOUR_PROJECT_ID]/latest/{{lng}}/translation'.replace('{{lng}}', lng); 
  request(url, function(err, res, body) { 
    callback(err, lng, body);
  });
}

JSON, который мы загружаем из проекта locize, выглядит так:

{
  “interpolate”: “Hello, %{name}.”,
  “intro”: “The locize.com platform is fully compatible with airbnb’s polyglot i18n module.”,
  “plural”: “%{smart_count} car |||| %{smart_count} cars”,
  “something”: {
    “nested”: “Nested value something.nested”
  },
  “title”: “Using polyglot with locize.com”
}

Https://api.locize.io/897381a6-125c-40b8-9b28-2f80ae9a3612/latest/en/translation

Мы возвращаем html файл, внедряя загруженный json при запросе корня

app.get(‘/’, function(req, res) {
  var lng = req.query.lng || ‘en’;
 
  fs.readFile(__dirname + ‘/index.html’, (err, data) => {
    if (err) console.log(err);
    data = data.toString().replace(‘###locals###’, JSON.stringify(locals[lng])).replace(‘###lng###’, lng); 
    
    res.set(‘content-type’,’text/html’);
    res.send(data);
  });
});

В html мы в основном используем полиглот, как описано на его веб-сайте

<script>
  // initialize polyglot by settings phrases on server
  var polyglot = new Polyglot({ phrases: JSON.parse(###locals###), locale: ‘###lng###’ });
  // translate
  document.getElementById(‘headline’).innerHTML = polyglot.t(‘title’);
  ...

Вы можете проверить этот пример на github: https://github.com/locize/locize-polyglot-example. Хотя это очень простой пример, основное внимание уделяется доказательству того, что вы можете получить прибыль от использования locize.com с помощью полиглота. Адаптируйте образец к своему внутреннему языку или просто используйте xhr напрямую для загрузки данных внутри вашего клиента. Вы напрямую получаете те же преимущества, которые до сих пор имели разработчики i18next, используя locize.com.

formatJS + locize.com

formatJS хорошо известен тем, что использует intl API для анализа дат и чисел, а также использует формат сообщений ICU для переводов. Формат сильно отличается от того, что использовался в i18next, но все же это просто json на основе клавиш.

Итак, мы начали с того, что сделали с полиглотом. Для бэкэнда никаких изменений не потребовалось, поэтому просто прокрутите до образца полиглота, где мы используем запрос на загрузку переводов.

JSON, который мы загружаем из проекта locize, выглядит так:

{
  "interpolate": "Hello, {name}.",
  "intro": "The locize.com platform is fully compatible with yahoo's format.js i18n module.",
  "plural": "You have {numPhotos, plural, =0 {no photos.}=1 {one photo.}other {# photos.}}",
  "title": "Using format.js with locize.com"
}

Https://api.locize.io/9ac4fb1f-be22-4028-bcbc-0da13010b35e/latest/en/translation

В html мы используем модуль IntlMessageFormat и создали небольшую вспомогательную функцию

<script>
  // initialize
  var resources = JSON.parse(###locals###);
  var lng = ‘###lng###’;
  // translation helper
  function t(key, opts) {
    opts = opts || {};
    var m = new IntlMessageFormat(resources[key], lng);
    return m.format(opts);
  }
  // translate
  document.getElementById(‘headline’).innerHTML = t(‘title’);
  ...

Вы можете увидеть полный пример на github: https://github.com/locize/locize-formatjs-example. Образец можно легко адаптировать для react-intl, ember-intl, handlebars-intl, dust-intl или любой другой инфраструктуре с использованием формата сообщений icu, например. Https://github.com/messageformat/messageformat.js.

Вывод

Первоначально фокусируясь на i18next json format при создании locize.com, мы обнаружили, что вы можете получать прибыль от сервиса locize.com, используя полиглот, или любую библиотеку, используя формат сообщений (formatJS и другие).

Нам нравится гибкость, поэтому мы с нетерпением ждем, когда наш первый клиент создаст проект с использованием инфраструктуры airbnb или Yahoo i18n.

Свобода выбора… i18next, polyglot или formatJS