https://david-talks.netlify.com/fbt/index.html

Интернационализация джаваскрипт приложений

FBT =>

План:

1. Fbt - что такое, преимущества, подход;
2. Рассмотрим примеры;
3. Покапаемся внутри;
4. Поговорим о проблемах;
5. Сделаем выводы.

FBT

FBT is a framework for internationalizing user interfaces in JavaScript

FBT - ?

ProbablyFacebookTranslation?
However, even internally, we never use that terminology. It's always just referred to as "FBT".

Настало время замечательных историй

tc39/proposals

“Talk is cheap. Show me the code.”

На самом деле

babel.config.js

Синтаксический сахар

API docs

• <fbt/> fbt(...)
• <fbt:enum/> fbt.enum(...)
• <fbt:param/> fbt.param(...)
• <fbt:name/> fbt.name(...)
• <fbt:same-param/> fbt.sameParam(...)
• <fbt:plural/> fbt.plural(...)
• <fbt:pronoun/> fbt.pronoun(...)

fbt(...) => string ?

.toString()

Parameters

Babel: Namespace tags are not supported by default.

Auto-parameterization (for dev)

Auto-parameterization (for translator)

Duplicate params

Demo: real app

CLDR

• NUMBER_ONE: 1 товар в корзине
• NUMBER_FEW: 3 тоавра в корзине
• NUMBER_MANY: 10 товаров в корзине

Как перевести текст?

1. Enum manifest
2. Extracting translatable texts (Collect FBT)
3. Translate

Gist:fbt.sh

Demo: fbt source

Преимущества

• Ваш код источник переводов
• Гибкий и мощный
• Легко интегрируется в проект
• Поддрежка JSX
• Легко типизиуемый*
• Хорошая обратная связь

Недостатки

• Документация (не достаточно примеров);
• Не разборчивые ошибки;
• Танцы с бубном, что бы подружить с ts;
• Синтаксический сахар.
• Getting Started;

Typescript compiler<fbt:param/> syntax
+
@babel/preset-typescript

Как подружить fbt с typescript?

• Выбрасываем tsc и используем babel + preset-typescript
• Вместо<fbt:param/> синтаксиса используем не документированый<FbtParam/>синтаксис
• Не забываем добавить tslibdefs для fbt
• Иделаем патч для@babel/plugin-transform-typescript

Если вы решили внедрить у себя

• Посмотретьнормальный доклад
• Потрогатьреальное демо
• Почитатьдокументацию

Что если возникли вопросы

• Пообщаться с разработчикамиDiscord
• Спросить наStack Overflow

Вопросы ?