Как мы общаемся с пользователями на 46 языках

и понимаем друг друга Волков Вячеслав

Привет Волков Вячеслав Javascript developer Badoo, Moscow, Russia

v.volkov@corp.badoo.com E-mail:

Сегодня поговорим

1.  Почему важна интернационализация 2.  Языковые особенности 3.  Сравнение Open Source решений 4.  Как это работает в Badoo

Internationalization

Статистика Badoo Или почему это важно для нас

10M фотографий

в день

46 языков

325M пользователей

21М пользователей

в день

400К регистраций

в день

пользователей в месяц

1,8ч ср. время на сайте

350M сообщений

в день

60M

Почему? Зачем?

Особенности языков 1.  Формат времени и даты

2.  Формат чисел и валюты

3.  Формы множественного числа, склонения

4.  Специфика переводов

5.  Шрифты

Формат даты и времени

Формат Пример Страна

гггг.ММ.дд 2016.09.24 Венгрия

гггг-ММ-дд 2016-09-24 Польша, Швеция, Канада

гггг/ММ/дд 2016/09/24 Иран, Япония

дд.ММ.гггг 24.09.2016 Россия, Словения, Турция

М/д/гггг 9/24/2016 США

12 часовой формат времени в США, Канаде, Австралии: 3:01:33 PM 4

Формат чисел и валюты

Локаль Пример Страна

ru-RU 123 456,79 € Россия

en-US €123,456.79 США

de-DE 123.456,79 € Германия

de-AT € 123 456,79 Австрия

Имперская система мер в США, Мьянме и Либерии (дюймы, фунты) 4

Множественное число

У вас 2 подарка4

У вас 1 подарок4У вас 5 подарков4

Русский Английский You have 1 gift4You have 5 gifts4

А как на счет? Рассказать о своих 5 подарках4

Singular Plural Dual

Множественное число

…еще актуально

Множественное число

2 минут_ назад 3 часов назад

Множественное число

Какое решение ?

Специфика переводов 1. Перевод фраз, предложений целиком.

Фраза: 8,283 out of 15,311 people liked you!44Английский4<b>{{num_voters_yes_maybe}}</b> out of <b>{{num_voters_total}}</b> {{people}} liked you!44Японский4<b>{{num_voters_total}}</b>{{people}}<b>中{{num_voters_yes_maybe}}</b>⼈人があなたを気に⼊入っています！4

‘Страница ’ + {{pageNum}} + ‘ из ’+ {{total}}4

Специфика переводов 2. Зависимость текста от пола человека в некоторых языках.

Английский4You got an award on <span>{{award_date}}</span>4

Словацкий4MALE: Toto ocenenie si získal <span>{{award_date}}</span> 4FEMALE: Toto ocenenie si získala <span>{{award_date}}</span>4

Специфика переводов 3. Перевод строк должен быть основан на контексте где находится предложение.

4. Повторное использование ресурсов может быть небезопасным.

Пример4You can save this {{item}}4

Вы можете спасти / сохранить этот {{item}}4

Пример4i18n.thread (Поток/Нить)4

Шрифты

Поддержка нужного набора символов4

Какие есть решения?

1. ECMA-40242. i18next4

3. FormatJS4

4. Globalize4

5. jquery.i18n46.  …и много разных других4

ECMAScript Internationalization API (ECMA-402)

new Intl.NumberFormat('ru-RU').format(1000.15); 4// "1 000,15" 4 4var utc = new Intl.DateTimeFormat('ru-RU');4console.log(utc.format(new Date())); 4// 17.09.2016!

ECMAScript Internationalization API (ECMA-402)

Возможности

✔ 4 Форматирование даты и времени4

✔ 4 Форматирование чисел и валюты4

✗4 Возможности переводов4(поддержка контекста, гендерозависимый текст)4

✗4 Поддержка зависимости текста от числительных4

✗4 Падежные окончания4

ECMAScript Internationalization API (ECMA-402) Плюсы •  Нативная реализация в браузере4•  Высокая производительность4•  Не требует загрузки дополнительных ресурсов4•  Форматирование строк в разные с разными локалями без подгрузки JS ресурсов 4

•  Развитие стандарта - ECMAScript® 2017 Internationalization API4

ECMAScript Internationalization API (ECMA-402) Минусы

•  Поддерживается не всеми браузерами (отсутствие поддержки в Safari < 10)4

•  Зависимость от системы. Некоторые локали могут не поддерживаться клиентом4

•  Могут быть разные результаты в разных браузерах4

i18next Возможности

✔ 4 Форматирование даты и времени4(требует moment.js)4

✔ 4 Форматирование чисел и валюты4(требует numeral.js)4

✔ 4 Возможности переводов4(поддержка контекста, гендерозависимый текст)4

✔ 4 Поддержка зависимости текста от числительных4

✗4 Падежные окончания4

✔ 4 Интерфейс для переводчиков4(платный)4

Плюсы •  Возможность загрузки ресурсов с бекенда4•  Дополнительные плагины4•  Расширения для популярных фрейморков4

i18next

Минусы •  Требует дозагрузки ресурсов 4

(i18next 35кб + moment 20кб + локали)4•  Платный интерфейс для переводчиков4•  Не все возможности для переводов4

FormatJS Возможности

✔ 4 Форматирование даты и времени4(использует ECMA-402 или полифил)4

✔ 4 Форматирование чисел и валюты4(использует ECMA-402 или полифил)4

✔ 4 Возможности переводов4(поддержка контекста, гендерозависимый текст)4

✔ 4 Поддержка зависимости текста от числительных4

✗4 Падежные окончания4

✗4 Интерфейс для переводчиков4

Плюсы •  Модульность4•  Использует возможности ECMA-402 или полифилл4•  Расширения для популярных фрейморков, шаблонизаторов4

Минусы •  Требует дозагрузки ресурсов4•  Не все возможности для переводов 4

FormatJS

Это разве все?

1.  Как будет выглядеть процесс перевода?

2.  Как файлы переводов будут попадать к переводчикам и обратно в систему?

3.  Как узнать переводчику где находится конкретный текст?

4.  А стоит ли хранить все переводы на клиенте?

Локализация в Badoo

Badoo l10n Возможности

✔ 4 Форматирование даты и времени4

✔ 4 Форматирование чисел и валюты4

✔ 4 Возможность перевода текста4(поддержка контекста, гендерозависимый текст)4

✔ 4 Поддержка зависимости текста от числительных4

✔ 4 Падежные окончания4

✔ 4 Интерфейс для переводчиков4

Форматирование чисел, даты

$l.setLang('ru');44$l.getFormattedNumber('1000.15', 3); 4// "1 000,150" 44$l.getFullDate(new Date()); 4// 16 Сентября 20164

Склонения $l.getNumDependent('common_friend', 1) 4// общий друг44$l.getNumDependent ('common_friend', 5) 4// общих друзей44$l.getNumDependent ('common_friend', 1, 5) 4// общем друге44$l.getNumDependent ('common_friend', 2, 5)4// общих друзьях4

Зависимый текст

Андрей, вы понравились {{number}} {{persons@2}}. Посмотрите, кто они!4

If userName4

else4Вы понравились {{number}} {{persons@2}}. 4Посмотрите, кто он!4

getNumDependent('persons', number, 2);4

+4

// 2 людям4

// 1 человеку4

+4singular или plural4

Взаимодействие команд

localization

Server

Frontend

Переводчики

MAPI

Идея PRD

Back office

Структура языков

DEV (оригиналы шаблонов)4 MASTER (промежуточныи язык для исправления ошибок)4 English4 ...4 Русскии (обычныи язык)4 Spanish (язык с диалектами)4 Mexican (диалект)4 Colombian (диалект)4

Использование лексемы

Шаблоны4сайта4

Key-value4хранилище4

Лексема4

Сайт4

Письма4

Сайт4

Apps4

Anywhere4

Жизненный цикл лексемы

Лексема в шаблоне4

Лексема в 4key-value4

4Парсинг лексем4

44

DataBase44

4Процесс переводов44

Автоматическое4присваивание ID4

Build4

Apps4

Anywhere4

Жизненный цикл лексемы

<!-- BEGIN SLIDER_CONTENT -->!<div class="profile-quality__slider">4<span class="p-link js-switch-metric-system">4 <!-- BEGIN SWITCH_TO_INCHES -->! Click to switch to inches <!-- END SWITCH_TO_INCHES -->!</span>4</div>4<!-- END SLIDER_CONTENT -->!

Жизненный цикл лексемы

Система переводов

Подсветка лексем

<div class="profile-quality__slider">4<span class="p-link js-switch-metric-system">4 <!-- LEXEM_BEGIN_30058896-->! Click to switch to inches4 <!-- LEXEM_END_30058896 -->!</span>4</div>!

Общий вид приложений

Помощь пользователей

https://translate.badoo.com/ 4

Вопросы?

Узнайте о нас больше @BadooDev4

http://habrahabr.ru/company/badoo/4

https://tech.badoo.com/4

https://team.badoo.com/ 4

…а на этом все.

Полезные ссылки

Таблица множественных формы для языковhttps://goo.gl/2ZL1ZE 4

Примеры работы с объектом Intlhttps://goo.gl/3DaQrX 4

Standard ECMA-4024https://goo.gl/tZUwu7 4