webcamp2016:front-end_Виктор Турский_Теория и практика...
Post on 15-Feb-2017
102 Views
Preview:
TRANSCRIPT
Обо мне
1. Технический директор и сооснователь компании WebbyLab
2. 12 лет занимаюсь разработкой ПО3. Большинство моих проектов требовали
локализации4. Только реальный опыт и реальные
проекты в докладах
I18N и L10N
● I18N
● L10N
I18N и L10N
● Internationalization (I18N)
● Localization (L10N)
I18N это просто… или нет?
Ключ => Значение (перевод)
Плохие варианты
● Числовые ключи
● Условные выражения
Строковые ключи
“REGISTRATION_FORM”
Вы не можете запустить поиск по “Registration form”
Вам нужно иметь отдельный перевод на английский язык.
Ключи в виде английских фраз
Преимущества:1. Ваш код читабельный, в отличии от числовых ключей.2. Вы можете искать по фразам с UI. В отлчии от строковых ключей.3. Не нужно иметь отдельный перевод для английского.4. Очень легко править оригинальные фразы. Просто редактируете исходники.
В коде может выглядеть так
You have %d new messages
You have %d new messages
You have %d new messages
You have %d new messages
Языки разные
1 покемон
2,3,4 покемона
5-20 покемонов
...
I18N это не просто!
● Как работать с множественным числом?● Как держать в соответствии перевод и
оригинальные фразы● Как работать с переводчиками● Как быть с контекстно-зависимыми
фразами● Различная длина фраз в разных языках● “You have 10 new messages for last 3 days”
Gettext
● Существует более 20 лет (первый релиз от Sun Microsystems 26 лет назад)
● Решает большинство вышеописанных проблем
● Является де-факто стандартом
gettext
ngettext
ngettext
xgettext
xgettext
Что есть в gettext
Контекст использования слов
● Используйте наиболее полные и длинные фразы. (Не конкатенируйте переводы, переводите все целиком).
● Gettext имеет встроенную поддержку контекста, можно передать в качестве аргумента.
Полезности
Порядок следованя параметров. В разных языках может быть по разному.
Незначительное изменение оригинальной фразы (Fuzzy match)
JavaScript and Gettext
● Библиотека Jed● Библиотека po2json● Использование Xgettext для JavaScript
исходников● Поддержка ES6● Import vs require● Алиасинг функций gettext
Алиасинг функций
I18N в одностраничных приложениях
Загружайте локализацию отдельным запросом.
Не загружайте английские фразы
Рендеринг UI после загрузки словаря
I18N и React
Альтернативные решения (react-intl)
Компоненты против функций
Инициализация (Синглтон)
Почему не react-intl?
https://github.com/yahoo/intl-messageformat/issues/94
I18N и React: пример
I18N для изоморфных приложений на ReactJS
В теории нет разницы между теорией и практикой. А на практике есть.
https://github.com/WebbyLab/itsquiz-wall/
Живая демонстрация
Viktor Turskyiviktor@webbylab.com
https://twitter.com/koorchikhttps://github.com/koorchik
WebbyLabhttp://webbylab.com
top related