theWaR_13 12 авг 2016 в 17:20

Интернационализация приложения в React (и не только)

4 мин

39K

ReactJS*

+15

Комментарии 36

ARad 12 авг 2016 в 17:57

Почему amount_ofbananas0 соответствует 1 банан, а не 0 бананов? И что будет если передать 11 и 21?

theWaR_13 12 авг 2016 в 17:58

Действительно, нумерация внутри словаря идет несколько странно. Однако, один раз все настроив, про это можно забыть.
Передавать можно любые цифры, конкретно 5 я взял для примера.

ARad 12 авг 2016 в 19:47

Вопрос про 11 и 21 был задан потому, что
0, 10, 20 и т.д.бананов
1 банан, 11 бананов, 21 банан
2,3,4 банана, 12,13,14 бананов, 22,23,24 банана
5 и далее как и ноль.

michael_v89 12 авг 2016 в 21:17

Language Plural Rules:
http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html

MrCheater 12 авг 2016 в 22:40

Есть ли возможность сразу загружать только один язык, а остальные подтягивать по мере необходимости?

theWaR_13 12 авг 2016 в 22:42

Собственно в примере оно так и работает. Каждый раз, когда пользователь меняет язык, с помощью require подгружается нужный файл.

Skara 13 авг 2016 в 12:07

подгрузка синхронная, значит вебпак (или что вы используете) уже вкомпилировал json словарь в бандл. Для более-менее большого приложения не годится. Решается легко, но в статье — не боевой вариант.

yury-dymov 13 авг 2016 в 18:40

Я у себя в проекте сделал на базе https://github.com/WebbyLab/itsquiz-wall, на мой взгляд очень неплохой вариант.

json не вкомпиливается, работает изоморфно.

Чтобы было совсем хорошо, надо добавить в языковые json хеш-суммы и ставить большой expire на веб-сервере

murderinc 13 авг 2016 в 18:41

Как насчет использования Context (для получения текущего языка приложения) и Higher Order Component для инъекции строк нужных для компонента?

Gugic 13 авг 2016 в 19:59

А существуют ведь наверняка библиотеки интернационализации для js, которые не заставляют самостоятельно объявлять ключи, а используют в качестве ключа саму фразу на языке «по умолчанию»? (что-то вроде PHP-шного gettext).

Мне такой подход кажется куда более удобным, особенно если имеется удобные инструменты для собственно процесса перевода.

Gugic 13 авг 2016 в 20:06

https://slexaxton.github.io/Jed/ — что-то нашлось. Приделать удобный псевдоним в глобальное пространство (window.t, например) и какую-нибудь очень простую вещь, которая будет ловить все фразы, туда попадающие и выдавать по каким уже есть перевод, а по каким еще нет — и можно почти не терять времени на поддержку версий для разных языков.

vintage 14 авг 2016 в 13:35

Косяки этого способа:

Вы всегда грузите два языка.
Исправление опечатки в тексте приводит к созданию нового ключа с последующей необходимостью повторного перевода.
Нужно что-то решать с плюральными формами.

Gugic 14 авг 2016 в 18:54

С другой стороны я гружу только один язык, а не язык + ключ на каждую фразу, когда работаю с языком по умолчанию. А в способе из статьи это точно всегда будет язык + ключи.
Да, но по идее это должно отслеживаться какой-то автоматикой.
В вышеприведенном Jed это решено и выглядит так:

i18n.translate("%d key doesnt exist").ifPlural( n, "%d keys dont exist" ).fetch();

vintage 14 авг 2016 в 23:57

Ключи обычно куда меньше текстов.
В идеальном мире — да :-)
Выглядит как жуткий костыль по сравнению c this.text( 'resultMessage' )

megahertz 16 авг 2016 в 11:22

Делал для первого ангуляра https://megahertz.github.io/mg-translate/

vintage 14 авг 2016 в 13:31

Как вы будете действовать, когда потребуется число сделать жирным шрифтом, а бананы — серым?

theWaR_13 14 авг 2016 в 16:58

Внутри словаря вы сами определяете, как будет выводиться строка, конкретно {{count}} отвечает за число. Таким образом, можно перед 18next.t('amount_of_bananas', {count: 5}) поставить 5 в спане, которая и будет выводиться.

vintage 14 авг 2016 в 23:59

Вы предлагаете зашивать разметку в локализацию?

theWaR_13 15 авг 2016 в 09:00

Нет. Внутри компонента, перед вызовом функции локализации будет стоять span с нужным числом (например, 5). Дальше идет функция перевода, куда вы эту 5 передаёте. А уже внутри словаря вы уберете {{count}}, и вторая пятерка (внутри функции) выводиться не будет.

vintage 15 авг 2016 в 09:25

Давайте более предметно. Вот у вас несколько вариантов текста:

На вас ещё никто не подписан.

На вас подписан 1 пользователь

На вас подписаны 2 пользователя

На вас подписаны 5 пользователей

На вас подписаны 11 пользователей

На вас подписаны 12 пользователей

На вас подписаны 15 пользователей

На вас подписан 21 пользователь

На вас подписаны 22 пользователя

На вас подписаны 25 пользователей

Что вы напишете в коде и что будет в словаре?

btd 14 авг 2016 в 21:53

Может кому пригодится. Мы использовали очень долго babelfish. Мне не нравилось что он не дает компилировать сообщения (и таким образом довольно много места в бандле занимает). Я стал искать, чтобы во первых можно было компилировать, во вторых чтобы можно было использовать icu message format. Смотрел на format.js, там была какая то беда со сборкой (сейчас не знаю), хотя они и используют message format из icu. В конце концов, взял то что они использовали внутри messageformat.js. Надеюсь это кому то сэкономит время.

nonlux 14 авг 2016 в 22:51

После одного недавнего проекта осталось несколько мыслей по поводу перевода.
1 Тексты это косвенные данные проекта. Не следует их засовывать в код через require. Это приведет к тому, что из-за изменения текстов придется пересобирать проект.
Гораздо проще засунуть их в Глобал.
2. Не надо привязывать Тексты жёстко к компонентам.
Например, з я сделал так, добавил в компонент свойство text. Компонент знает только об схеме этого свойства, т.е о доступных ключах.
Так же сделал простой декоратор @ text который из Глобал объекта тянет нужный ключ в компонент.

pastor_sv 15 авг 2016 в 15:27

использовал react-intl, все отлично и быстро делается

vintage вот пример для вашего комментария выше.

translates = {
  "message_subscribed_count" : "На вас {count, plural, =0 { ещё никто не подписан} one { подписан <b>#</b> пользователь} few { подписаны <b>#</b> пользователя} other { подписаны <b>#</b> пользователей}}."
}

<FormattedHTMLMessage id="message_subscribed_count" values={{count: COUNT}}/>

vintage 15 авг 2016 в 18:21

Заставляете переводчиков понимать теги и экранировать символы? А среда перевода понимает этот волшебный синтаксис или и его нужно знать бедным переводчикам?

pastor_sv 15 авг 2016 в 18:34

в админке есть просто конструктор, а переменную он просто не трогает. К примеру у него сначала есть конструкция «На вас $MESSAGE$» и дальше идет определение конструкций (=0, one, few, other), и потом уже MESSAGE собирается в {count, plural, ...}.

Если у вас есть более приятное решение, поделитесь. Ну и насколько я знаю, то переводчики пользуются вордом, а потом бедный контент менеджер сидит и все это забивает. Переводчики не лезут в админку. Но даже если вдруг, то им не составит труда запомнить некоторые правила

vintage 16 авг 2016 в 00:13

    var lang = { 'ru' : {
      'result' : [
        'На вас ещё никто не подписан.' ,
        'На вас подписан 1 пользователь' ,
        'На вас подписаны 2 пользователя' ,
        'На вас подписаны 5 пользователей'
       ]
    } }

    document.body.innerHTML += text( 'result' , 0 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 1 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 2 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 5 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 10 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 11 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 12 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 15 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 20 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 21 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 22 ) + '<br/>'
    document.body.innerHTML += text( 'result' , 25 ) + '<br/>'

http://liveweave.com/c90hNl

Для коллаборативного перевода уже давно есть специализированные сервисы так то.

pastor_sv 16 авг 2016 в 10:22

Отличный пример.
Только как по мне, тяжело расширять такие переводы.

Для того же примера: будем выводить не 'вас', а '$username$ ', и пусть username = nick1, и все поломается

vintage 16 авг 2016 в 13:50

Не сломается, там же будет плейсхолдер {username}.

michael_v89 16 авг 2016 в 10:38

Извините, я не очень понял, а в чем преимущество такого решения, в связи с вашими комментариями про теги? Как вы будете действовать, когда потребуется число сделать жирным шрифтом, а надпись «пользователей» — серым?

vintage 16 авг 2016 в 13:55

Обычно требуется статичный текст приглушить, а вариативный выделить.

michael_v89 16 авг 2016 в 19:38

Ну так как вы будете делать это в вашем варианте с result?

vintage 17 авг 2016 в 08:16

Я же уже привёл пример. Динамически добавляемые данные оборачиваются тегом.

michael_v89 17 авг 2016 в 12:19

В вашем примере только один тег <br/>, ни цвета ни болда там нет. У вас функция подстановки перевода сама магические спаны добавляет?

vintage 17 авг 2016 в 13:52

Вы не умеете пользоваться css? Да, сама.

michael_v89 17 авг 2016 в 18:59

Ясно. А если надо 2 связанных параметра передать в сообщение и каждый выделить по-своему («Вы набрали 18 очков из 20 возможных»), у вас будет другая функция text2()?

vintage 17 авг 2016 в 19:20

Зачем? Эту вполне можно расширить и на этот случай. Это пример, а не готовое решение, если это не очевидно.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Интернационализация приложения в React (и не только)

Комментарии 36

Публикации

Истории