Презентация с MoscowJS митапа: "Как мы общаемся с пользователями на 46 языках и понимаем друг друга", Вячеслав Волков (Badoo)

1. Как мы общаемся
с пользователями на 46 языках
и понимаем друг друга
Волков Вячеслав

2. Привет
Волков Вячеслав
Javascript developer
Badoo, Moscow, Russia
v.volkov@corp.badoo.com
E-mail:

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

4. Internationalization

5. Статистика Badoo
Или почему это важно для нас
10Mфотографий
в день
46
языков
325Mпользователей
21М
пользователей
в день
400Крегистраций
в день
пользователей
в месяц
1,8ч
ср. время
на сайте
350Mсообщений
в день
60M

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

7. Особенности языков
1. Формат времени и даты
2. Формат чисел и валюты
3. Формы множественного числа,
склонения
4. Специфика переводов
5. Шрифты

8. Формат даты и времени
Формат Пример Страна
гггг.ММ.дд 2016.09.24 Венгрия
гггг-ММ-дд 2016-09-24 Польша, Швеция, Канада
гггг/ММ/дд 2016/09/24 Иран, Япония
дд.ММ.гггг 24.09.2016 Россия, Словения, Турция
М/д/гггг 9/24/2016 США
12 часовой формат времени в США, Канаде, Австралии: 3:01:33 PM 4

9. Формат чисел и валюты
Локаль Пример Страна
ru-RU 123 456,79 € Россия
en-US €123,456.79 США
de-DE 123.456,79 € Германия
de-AT € 123 456,79 Австрия
Имперская система мер в США, Мьянме и Либерии (дюймы, фунты) 4

10. Множественное число
У вас 2 подарка4
У вас 1 подарок4
У вас 5 подарков4
Русский Английский
You have 1 gift4
You have 5 gifts4
А как на счет?
Рассказать о своих 5 подарках4
Singular
Plural
Dual

11. Множественное число
…еще актуально

12. Множественное число
2 минут_ назад 3 часов назад

13. Множественное число
Какое решение ?

14. Специфика переводов
1. Перевод фраз, предложений целиком.
Фраза: 8,283 out of 15,311 people liked you!4
4
Английский4
<b>{{num_voters_yes_maybe}}</b> out of <b>{{num_voters_total}}</b> {{people}} liked you!4
4
Японский4
<b>{{num_voters_total}}</b>{{people}}<b>中{{num_voters_yes_maybe}}</b>⼈人があなたを気に
⼊入っています！4
‘Страница ’ + {{pageNum}} + ‘ из ’+ {{total}}4

15. Специфика переводов
2. Зависимость текста от пола человека в некоторых языках.
Английский4
You got an award on <span>{{award_date}}</span>4
Словацкий4
MALE: Toto ocenenie si získal <span>{{award_date}}</span> 4
FEMALE: Toto ocenenie si získala <span>{{award_date}}</span>4

16. Специфика переводов
3. Перевод строк должен быть
основан на контексте где
находится предложение.
4. Повторное использование
ресурсов может быть
небезопасным.
Пример4
You can save this {{item}}4
Вы можете спасти / сохранить этот
{{item}}4
Пример4
i18n.thread (Поток/Нить)4

17. Шрифты
Поддержка нужного набора символов4

18. Какие есть решения?
1. ECMA-4024
2. i18next4
3. FormatJS4
4. Globalize4
5. jquery.i18n4
6. …и много разных других4

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

20. ECMAScript Internationalization
API (ECMA-402)
Возможности
✔4 Форматирование даты и времени4
✔4 Форматирование чисел и валюты4
✗4 Возможности переводов4
(поддержка контекста, гендерозависимый текст)4
✗4 Поддержка зависимости текста от числительных4
✗4 Падежные окончания4

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

22. ECMAScript Internationalization
API (ECMA-402)
Минусы
• Поддерживается не всеми браузерами (отсутствие
поддержки в Safari < 10)4
• Зависимость от системы. Некоторые локали могут не
поддерживаться клиентом4
• Могут быть разные результаты в разных браузерах4

23. i18next
Возможности
✔4 Форматирование даты и времени4
(требует moment.js)4
✔4 Форматирование чисел и валюты4
(требует numeral.js)4
✔4 Возможности переводов4
(поддержка контекста, гендерозависимый текст)4
✔4 Поддержка зависимости текста от числительных4
✗4 Падежные окончания4
✔4 Интерфейс для переводчиков4
(платный)4

24. Плюсы
• Возможность загрузки ресурсов с бекенда4
• Дополнительные плагины4
• Расширения для популярных фрейморков4
i18next
Минусы
• Требует дозагрузки ресурсов 4
(i18next 35кб + moment 20кб + локали)4
• Платный интерфейс для переводчиков4
• Не все возможности для переводов4

25. FormatJS
Возможности
✔4 Форматирование даты и времени4
(использует ECMA-402 или полифил)4
✔4 Форматирование чисел и валюты4
(использует ECMA-402 или полифил)4
✔4 Возможности переводов4
(поддержка контекста, гендерозависимый текст)4
✔4 Поддержка зависимости текста от числительных4
✗4 Падежные окончания4
✗4 Интерфейс для переводчиков4

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

27. Это разве все?
1. Как будет выглядеть процесс перевода?
2. Как файлы переводов будут попадать к
переводчикам и обратно в систему?
3. Как узнать переводчику где находится
конкретный текст?
4. А стоит ли хранить все переводы на клиенте?

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

29. Badoo l10n
Возможности
✔4 Форматирование даты и времени4
✔4 Форматирование чисел и валюты4
✔4 Возможность перевода текста4
(поддержка контекста, гендерозависимый текст)4
✔4 Поддержка зависимости текста от числительных4
✔4 Падежные окончания4
✔4 Интерфейс для переводчиков4

30. Форматирование чисел, даты
$l.setLang('ru');4
4
$l.getFormattedNumber('1000.15', 3); 4
// "1 000,150" 4
4
$l.getFullDate(new Date()); 4
// 16 Сентября 20164

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

32. Зависимый текст
Андрей, вы понравились {{number}} {{persons@2}}.
Посмотрите, кто они!4
If userName4
else4
Вы понравились {{number}} {{persons@2}}. 4
Посмотрите, кто он!4
getNumDependent('persons', number, 2);4
+4
// 2 людям4
// 1 человеку4
+4
singular или plural4

33. Взаимодействие команд
localization
Server
Frontend
Переводчики
MAPI
Идея PRD
Back office

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

35. Использование лексемы
Шаблоны4
сайта4
Key-value4
хранилище4
Лексема4
Сайт4
Письма4
Сайт4
Apps4
Anywhere4

36. Жизненный цикл лексемы
Лексема в
шаблоне4
Лексема в 4
key-value4
4
Парсинг лексем4
4
4
DataBase4
4
4
Процесс
переводов4
4
Автоматическое4
присваивание ID4
Build4
Apps4
Anywhere4

37. Жизненный цикл лексемы
<!-- 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 -->!

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

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

40. Подсветка лексем
<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>!

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

42. Помощь пользователей
https://translate.badoo.com/ 4

43. Вопросы?

44. Узнайте о нас больше
@BadooDev4
http://habrahabr.ru/company/badoo/4
https://tech.badoo.com/4
https://team.badoo.com/ 4
…а на этом все.

45. Полезные ссылки
Таблица множественных формы для языков
https://goo.gl/2ZL1ZE 4
Примеры работы с объектом Intl
https://goo.gl/3DaQrX 4
Standard ECMA-4024
https://goo.gl/tZUwu7 4