Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Как мы общаемся
с пользователями на 46 языках
и понимаем друг друга
Волков Вячеслав
Привет
Волков Вячеслав
Javascript developer
Badoo, Moscow, Russia
v.volkov@corp.badoo.com
E-mail:
Сегодня поговорим
1.  Почему важна интернационализация
2.  Языковые особенности
3.  Сравнение Open Source решений
4.  Как ...
Internationalization
Статистика Badoo
Или почему это важно для нас
10Mфотографий
в день
46
языков
325Mпользователей
21М
пользователей
в день
40...
Почему? Зачем?
Особенности языков
1.  Формат времени и даты
2.  Формат чисел и валюты
3.  Формы множественного числа,
склонения
4.  Специ...
Формат даты и времени
Формат Пример Страна
гггг.ММ.дд 2016.09.24 Венгрия
гггг-ММ-дд 2016-09-24 Польша, Швеция, Канада
гггг...
Формат чисел и валюты
Локаль Пример Страна
ru-RU 123 456,79 € Россия
en-US €123,456.79 США
de-DE 123.456,79 € Германия
de-...
Множественное число
У вас 2 подарка4
У вас 1 подарок4
У вас 5 подарков4
Русский Английский
You have 1 gift4
You have 5 gif...
Множественное число
…еще актуально
Множественное число
2 минут_ назад 3 часов назад
Множественное число
Какое решение ?
Специфика переводов
1. Перевод фраз, предложений целиком.
Фраза: 8,283 out of 15,311 people liked you!4
4
Английский4
<b>{...
Специфика переводов
2. Зависимость текста от пола человека в некоторых языках.
Английский4
You got an award on <span>{{awa...
Специфика переводов
3. Перевод строк должен быть
основан на контексте где
находится предложение.
4. Повторное использовани...
Шрифты
Поддержка нужного набора символов4
Какие есть решения?
1. ECMA-4024
2. i18next4
3. FormatJS4
4. Globalize4
5. jquery.i18n4
6.  …и много разных других4
ECMAScript Internationalization
API (ECMA-402)
new Intl.NumberFormat('ru-RU').format(1000.15); 4
// "1 000,15" 4
 4
var ut...
ECMAScript Internationalization
API (ECMA-402)
Возможности
✔4 Форматирование даты и времени4
✔4 Форматирование чисел и вал...
ECMAScript Internationalization
API (ECMA-402)
Плюсы
•  Нативная реализация в браузере4
•  Высокая производительность4
•  ...
ECMAScript Internationalization
API (ECMA-402)
Минусы
•  Поддерживается не всеми браузерами (отсутствие
поддержки в Safari...
i18next
Возможности
✔4 Форматирование даты и времени4
(требует moment.js)4
✔4 Форматирование чисел и валюты4
(требует nume...
Плюсы
•  Возможность загрузки ресурсов с бекенда4
•  Дополнительные плагины4
•  Расширения для популярных фрейморков4
i18n...
FormatJS
Возможности
✔4 Форматирование даты и времени4
(использует ECMA-402 или полифил)4
✔4 Форматирование чисел и валюты...
Плюсы
•  Модульность4
•  Использует возможности ECMA-402 или полифилл4
•  Расширения для популярных фрейморков,
шаблонизат...
Это разве все?
1.  Как будет выглядеть процесс перевода?
2.  Как файлы переводов будут попадать к
переводчикам и обратно в...
Локализация
в Badoo
Badoo l10n
Возможности
✔4 Форматирование даты и времени4
✔4 Форматирование чисел и валюты4
✔4 Возможность перевода текста4...
Форматирование чисел, даты
$l.setLang('ru');4
4
$l.getFormattedNumber('1000.15', 3); 4
// "1 000,150" 4
4
$l.getFullDate(n...
Склонения
$l.getNumDependent('common_friend', 1) 4
// общий друг4
4
$l.getNumDependent ('common_friend', 5) 4
// общих дру...
Зависимый текст
Андрей, вы понравились {{number}} {{persons@2}}.
Посмотрите, кто они!4
If userName4
else4
Вы понравились {...
Взаимодействие команд
localization
Server
Frontend
Переводчики
MAPI
Идея PRD
Back office
Структура языков
DEV (оригиналы шаблонов)4
MASTER (промежуточный язык для исправления ошибок)4
English4
...4
Русский (об...
Использование лексемы
Шаблоны4
сайта4
Key-value4
хранилище4
Лексема4
Сайт4
Письма4
Сайт4
Apps4
Anywhere4
Жизненный цикл лексемы
Лексема в
шаблоне4
Лексема в 4
key-value4
4
Парсинг лексем4
4
4
DataBase4
4
4
Процесс
переводов4
4
...
Жизненный цикл лексемы
<!-- BEGIN SLIDER_CONTENT -->!
<div class="profile-quality__slider">4
<span class="p-link js-switch-...
Жизненный цикл лексемы
Система переводов
Подсветка лексем
<div class="profile-quality__slider">4
<span class="p-link js-switch-metric-system">4
<!-- LEXEM_BEGIN_300...
Общий вид приложений
Помощь пользователей
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
Примеры работы с объектом Intl
https://goo....
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. Как мы общаемся с пользователями на 46 языках и понимаем друг друга Волков Вячеслав
  2. 2. Привет Волков Вячеслав Javascript developer Badoo, Moscow, Russia v.volkov@corp.badoo.com E-mail:
  3. 3. Сегодня поговорим 1.  Почему важна интернационализация 2.  Языковые особенности 3.  Сравнение Open Source решений 4.  Как это работает в Badoo
  4. 4. Internationalization
  5. 5. Статистика Badoo Или почему это важно для нас 10Mфотографий в день 46 языков 325Mпользователей 21М пользователей в день 400Крегистраций в день пользователей в месяц 1,8ч ср. время на сайте 350Mсообщений в день 60M
  6. 6. Почему? Зачем?
  7. 7. Особенности языков 1.  Формат времени и даты 2.  Формат чисел и валюты 3.  Формы множественного числа, склонения 4.  Специфика переводов 5.  Шрифты
  8. 8. Формат даты и времени Формат Пример Страна гггг.ММ.дд 2016.09.24 Венгрия гггг-ММ-дд 2016-09-24 Польша, Швеция, Канада гггг/ММ/дд 2016/09/24 Иран, Япония дд.ММ.гггг 24.09.2016 Россия, Словения, Турция М/д/гггг 9/24/2016 США 12 часовой формат времени в США, Канаде, Австралии: 3:01:33 PM 4
  9. 9. Формат чисел и валюты Локаль Пример Страна ru-RU 123 456,79 € Россия en-US €123,456.79 США de-DE 123.456,79 € Германия de-AT € 123 456,79 Австрия Имперская система мер в США, Мьянме и Либерии (дюймы, фунты) 4
  10. 10. Множественное число У вас 2 подарка4 У вас 1 подарок4 У вас 5 подарков4 Русский Английский You have 1 gift4 You have 5 gifts4 А как на счет? Рассказать о своих 5 подарках4 Singular Plural Dual
  11. 11. Множественное число …еще актуально
  12. 12. Множественное число 2 минут_ назад 3 часов назад
  13. 13. Множественное число Какое решение ?
  14. 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. 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. 16. Специфика переводов 3. Перевод строк должен быть основан на контексте где находится предложение. 4. Повторное использование ресурсов может быть небезопасным. Пример4 You can save this {{item}}4 Вы можете спасти / сохранить этот {{item}}4 Пример4 i18n.thread (Поток/Нить)4
  17. 17. Шрифты Поддержка нужного набора символов4
  18. 18. Какие есть решения? 1. ECMA-4024 2. i18next4 3. FormatJS4 4. Globalize4 5. jquery.i18n4 6.  …и много разных других4
  19. 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. 20. ECMAScript Internationalization API (ECMA-402) Возможности ✔4 Форматирование даты и времени4 ✔4 Форматирование чисел и валюты4 ✗4 Возможности переводов4 (поддержка контекста, гендерозависимый текст)4 ✗4 Поддержка зависимости текста от числительных4 ✗4 Падежные окончания4
  21. 21. ECMAScript Internationalization API (ECMA-402) Плюсы •  Нативная реализация в браузере4 •  Высокая производительность4 •  Не требует загрузки дополнительных ресурсов4 •  Форматирование строк в разные с разными локалями без подгрузки JS ресурсов 4 •  Развитие стандарта - ECMAScript® 2017 Internationalization API4
  22. 22. ECMAScript Internationalization API (ECMA-402) Минусы •  Поддерживается не всеми браузерами (отсутствие поддержки в Safari < 10)4 •  Зависимость от системы. Некоторые локали могут не поддерживаться клиентом4 •  Могут быть разные результаты в разных браузерах4
  23. 23. i18next Возможности ✔4 Форматирование даты и времени4 (требует moment.js)4 ✔4 Форматирование чисел и валюты4 (требует numeral.js)4 ✔4 Возможности переводов4 (поддержка контекста, гендерозависимый текст)4 ✔4 Поддержка зависимости текста от числительных4 ✗4 Падежные окончания4 ✔4 Интерфейс для переводчиков4 (платный)4
  24. 24. Плюсы •  Возможность загрузки ресурсов с бекенда4 •  Дополнительные плагины4 •  Расширения для популярных фрейморков4 i18next Минусы •  Требует дозагрузки ресурсов 4 (i18next 35кб + moment 20кб + локали)4 •  Платный интерфейс для переводчиков4 •  Не все возможности для переводов4
  25. 25. FormatJS Возможности ✔4 Форматирование даты и времени4 (использует ECMA-402 или полифил)4 ✔4 Форматирование чисел и валюты4 (использует ECMA-402 или полифил)4 ✔4 Возможности переводов4 (поддержка контекста, гендерозависимый текст)4 ✔4 Поддержка зависимости текста от числительных4 ✗4 Падежные окончания4 ✗4 Интерфейс для переводчиков4
  26. 26. Плюсы •  Модульность4 •  Использует возможности ECMA-402 или полифилл4 •  Расширения для популярных фрейморков, шаблонизаторов4 Минусы •  Требует дозагрузки ресурсов4 •  Не все возможности для переводов 4 FormatJS
  27. 27. Это разве все? 1.  Как будет выглядеть процесс перевода? 2.  Как файлы переводов будут попадать к переводчикам и обратно в систему? 3.  Как узнать переводчику где находится конкретный текст? 4.  А стоит ли хранить все переводы на клиенте?
  28. 28. Локализация в Badoo
  29. 29. Badoo l10n Возможности ✔4 Форматирование даты и времени4 ✔4 Форматирование чисел и валюты4 ✔4 Возможность перевода текста4 (поддержка контекста, гендерозависимый текст)4 ✔4 Поддержка зависимости текста от числительных4 ✔4 Падежные окончания4 ✔4 Интерфейс для переводчиков4
  30. 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. 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. 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. 33. Взаимодействие команд localization Server Frontend Переводчики MAPI Идея PRD Back office
  34. 34. Структура языков DEV (оригиналы шаблонов)4 MASTER (промежуточный язык для исправления ошибок)4 English4 ...4 Русский (обычный язык)4 Spanish (язык с диалектами)4 Mexican (диалект)4 Colombian (диалект)4
  35. 35. Использование лексемы Шаблоны4 сайта4 Key-value4 хранилище4 Лексема4 Сайт4 Письма4 Сайт4 Apps4 Anywhere4
  36. 36. Жизненный цикл лексемы Лексема в шаблоне4 Лексема в 4 key-value4 4 Парсинг лексем4 4 4 DataBase4 4 4 Процесс переводов4 4 Автоматическое4 присваивание ID4 Build4 Apps4 Anywhere4
  37. 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. 38. Жизненный цикл лексемы
  39. 39. Система переводов
  40. 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. 41. Общий вид приложений
  42. 42. Помощь пользователей https://translate.badoo.com/ 4
  43. 43. Вопросы?
  44. 44. Узнайте о нас больше @BadooDev4 http://habrahabr.ru/company/badoo/4 https://tech.badoo.com/4 https://team.badoo.com/ 4 …а на этом все.
  45. 45. Полезные ссылки Таблица множественных формы для языков https://goo.gl/2ZL1ZE 4 Примеры работы с объектом Intl https://goo.gl/3DaQrX 4 Standard ECMA-4024 https://goo.gl/tZUwu7 4
  • romanitalian

    Oct. 12, 2016

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

Views

Total views

7,868

On Slideshare

0

From embeds

0

Number of embeds

7,300

Actions

Downloads

16

Shares

0

Comments

0

Likes

1

×