2014.12.06 06 Алёна Паньшина — Простой обмен данными с пользователями на примере яндекс.диска
Как мы общаемся с пользователями на 46 языках и...
-
Upload
badoo-development -
Category
Technology
-
view
6.919 -
download
1
Transcript of Как мы общаемся с пользователями на 46 языках и...
![Page 1: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/1.jpg)
Как мы общаемся с пользователями на 46 языках
и понимаем друг друга Волков Вячеслав
![Page 3: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/3.jpg)
Сегодня поговорим
1. Почему важна интернационализация 2. Языковые особенности 3. Сравнение Open Source решений 4. Как это работает в Badoo
![Page 4: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/4.jpg)
Internationalization
![Page 5: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/5.jpg)
Статистика Badoo Или почему это важно для нас
10M фотографий
в день
46 языков
325M пользователей
21М пользователей
в день
400К регистраций
в день
пользователей в месяц
1,8ч ср. время на сайте
350M сообщений
в день
60M
![Page 6: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/6.jpg)
Почему? Зачем?
![Page 7: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/7.jpg)
Особенности языков 1. Формат времени и даты
2. Формат чисел и валюты
3. Формы множественного числа, склонения
4. Специфика переводов
5. Шрифты
![Page 8: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/8.jpg)
Формат даты и времени
Формат Пример Страна
гггг.ММ.дд 2016.09.24 Венгрия
гггг-ММ-дд 2016-09-24 Польша, Швеция, Канада
гггг/ММ/дд 2016/09/24 Иран, Япония
дд.ММ.гггг 24.09.2016 Россия, Словения, Турция
М/д/гггг 9/24/2016 США
12 часовой формат времени в США, Канаде, Австралии: 3:01:33 PM 4
![Page 9: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/9.jpg)
Формат чисел и валюты
Локаль Пример Страна
ru-RU 123 456,79 € Россия
en-US €123,456.79 США
de-DE 123.456,79 € Германия
de-AT € 123 456,79 Австрия
Имперская система мер в США, Мьянме и Либерии (дюймы, фунты) 4
![Page 10: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/10.jpg)
Множественное число
У вас 2 подарка4
У вас 1 подарок4У вас 5 подарков4
Русский Английский You have 1 gift4You have 5 gifts4
А как на счет? Рассказать о своих 5 подарках4
Singular Plural Dual
![Page 11: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/11.jpg)
Множественное число
…еще актуально
![Page 12: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/12.jpg)
Множественное число
2 минут_ назад 3 часов назад
![Page 13: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/13.jpg)
Множественное число
Какое решение ?
![Page 14: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/14.jpg)
Специфика переводов 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
![Page 15: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/15.jpg)
Специфика переводов 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
![Page 16: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/16.jpg)
Специфика переводов 3. Перевод строк должен быть основан на контексте где находится предложение.
4. Повторное использование ресурсов может быть небезопасным.
Пример4You can save this {{item}}4
Вы можете спасти / сохранить этот {{item}}4
Пример4i18n.thread (Поток/Нить)4
![Page 17: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/17.jpg)
Шрифты
Поддержка нужного набора символов4
![Page 18: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/18.jpg)
Какие есть решения?
1. ECMA-40242. i18next4
3. FormatJS4
4. Globalize4
5. jquery.i18n46. …и много разных других4
![Page 19: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/19.jpg)
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!
![Page 20: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/20.jpg)
ECMAScript Internationalization API (ECMA-402)
Возможности
✔ 4 Форматирование даты и времени4
✔ 4 Форматирование чисел и валюты4
✗4 Возможности переводов4(поддержка контекста, гендерозависимый текст)4
✗4 Поддержка зависимости текста от числительных4
✗4 Падежные окончания4
![Page 21: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/21.jpg)
ECMAScript Internationalization API (ECMA-402) Плюсы • Нативная реализация в браузере4• Высокая производительность4• Не требует загрузки дополнительных ресурсов4• Форматирование строк в разные с разными локалями без подгрузки JS ресурсов 4
• Развитие стандарта - ECMAScript® 2017 Internationalization API4
![Page 22: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/22.jpg)
ECMAScript Internationalization API (ECMA-402) Минусы
• Поддерживается не всеми браузерами (отсутствие поддержки в Safari < 10)4
• Зависимость от системы. Некоторые локали могут не поддерживаться клиентом4
• Могут быть разные результаты в разных браузерах4
![Page 23: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/23.jpg)
i18next Возможности
✔ 4 Форматирование даты и времени4(требует moment.js)4
✔ 4 Форматирование чисел и валюты4(требует numeral.js)4
✔ 4 Возможности переводов4(поддержка контекста, гендерозависимый текст)4
✔ 4 Поддержка зависимости текста от числительных4
✗4 Падежные окончания4
✔ 4 Интерфейс для переводчиков4(платный)4
![Page 24: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/24.jpg)
Плюсы • Возможность загрузки ресурсов с бекенда4• Дополнительные плагины4• Расширения для популярных фрейморков4
i18next
Минусы • Требует дозагрузки ресурсов 4
(i18next 35кб + moment 20кб + локали)4• Платный интерфейс для переводчиков4• Не все возможности для переводов4
![Page 25: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/25.jpg)
FormatJS Возможности
✔ 4 Форматирование даты и времени4(использует ECMA-402 или полифил)4
✔ 4 Форматирование чисел и валюты4(использует ECMA-402 или полифил)4
✔ 4 Возможности переводов4(поддержка контекста, гендерозависимый текст)4
✔ 4 Поддержка зависимости текста от числительных4
✗4 Падежные окончания4
✗4 Интерфейс для переводчиков4
![Page 26: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/26.jpg)
Плюсы • Модульность4• Использует возможности ECMA-402 или полифилл4• Расширения для популярных фрейморков, шаблонизаторов4
Минусы • Требует дозагрузки ресурсов4• Не все возможности для переводов 4
FormatJS
![Page 27: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/27.jpg)
Это разве все?
1. Как будет выглядеть процесс перевода?
2. Как файлы переводов будут попадать к переводчикам и обратно в систему?
3. Как узнать переводчику где находится конкретный текст?
4. А стоит ли хранить все переводы на клиенте?
![Page 28: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/28.jpg)
Локализация в Badoo
![Page 29: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/29.jpg)
Badoo l10n Возможности
✔ 4 Форматирование даты и времени4
✔ 4 Форматирование чисел и валюты4
✔ 4 Возможность перевода текста4(поддержка контекста, гендерозависимый текст)4
✔ 4 Поддержка зависимости текста от числительных4
✔ 4 Падежные окончания4
✔ 4 Интерфейс для переводчиков4
![Page 30: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/30.jpg)
Форматирование чисел, даты
$l.setLang('ru');44$l.getFormattedNumber('1000.15', 3); 4// "1 000,150" 44$l.getFullDate(new Date()); 4// 16 Сентября 20164
![Page 31: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/31.jpg)
Склонения $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
![Page 32: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/32.jpg)
Зависимый текст
Андрей, вы понравились {{number}} {{persons@2}}. Посмотрите, кто они!4
If userName4
else4Вы понравились {{number}} {{persons@2}}. 4Посмотрите, кто он!4
getNumDependent('persons', number, 2);4
+4
// 2 людям4
// 1 человеку4
+4singular или plural4
![Page 33: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/33.jpg)
Взаимодействие команд
localization
Server
Frontend
Переводчики
MAPI
Идея PRD
Back office
![Page 34: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/34.jpg)
Структура языков
DEV (оригиналы шаблонов)4 MASTER (промежуточныи язык для исправления ошибок)4 English4 ...4 Русскии (обычныи язык)4 Spanish (язык с диалектами)4 Mexican (диалект)4 Colombian (диалект)4
![Page 35: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/35.jpg)
Использование лексемы
Шаблоны4сайта4
Key-value4хранилище4
Лексема4
Сайт4
Письма4
Сайт4
Apps4
Anywhere4
![Page 36: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/36.jpg)
Жизненный цикл лексемы
Лексема в шаблоне4
Лексема в 4key-value4
4Парсинг лексем4
44
DataBase44
4Процесс переводов44
Автоматическое4присваивание ID4
Build4
Apps4
Anywhere4
![Page 37: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/37.jpg)
Жизненный цикл лексемы
<!-- 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 -->!
![Page 38: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/38.jpg)
Жизненный цикл лексемы
![Page 39: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/39.jpg)
Система переводов
![Page 40: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/40.jpg)
Подсветка лексем
<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>!
![Page 41: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/41.jpg)
Общий вид приложений
![Page 42: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/42.jpg)
Помощь пользователей
https://translate.badoo.com/ 4
![Page 43: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/43.jpg)
Вопросы?
![Page 44: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/44.jpg)
Узнайте о нас больше @BadooDev4
http://habrahabr.ru/company/badoo/4
https://tech.badoo.com/4
https://team.badoo.com/ 4
…а на этом все.
![Page 45: Как мы общаемся с пользователями на 46 языках и понимаем друг друга](https://reader034.fdocuments.net/reader034/viewer/2022042619/586f911c1a28ab54768b7b1f/html5/thumbnails/45.jpg)
Полезные ссылки
Таблица множественных формы для языковhttps://goo.gl/2ZL1ZE 4
Примеры работы с объектом Intlhttps://goo.gl/3DaQrX 4
Standard ECMA-4024https://goo.gl/tZUwu7 4