Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

7.791 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Inicia sesión para ver los comentarios

Как мы общаемся с пользователями на 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

×