Embed Size (px)
Citation preview
Как мы общаемся с пользователями на 46 языках
и понимаем друг друга Волков Вячеслав
Сегодня поговорим
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
