WebCamp2016:Front-End_Виктор Турский_Теория и практика...

Обо мне

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