i18n js приложений без боли

Доклад о fbt Немного о самой технологии, как использовать, подводные камни.

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

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

FBT =>

План:

FBT

FBT is a framework for internationalizing user interfaces in JavaScript

FBT - ?

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

original ...

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

tc39/proposals

“Talk is cheap. Show me the code.” 


  import React, { useState } from "react";
  import { Text } from "react-native";

  import fbt from "fbt";

  const App = () => {
    const [userName] = useState("Alexandros");

    return (
      <Text>
          <fbt desc="welcome message text">
            Hello <fbt:param name="userName">{userName}</fbt:param>!
          </fbt>
      </Text>
    );
  };

На самом деле


  _fbt.default._(
      'Hello {userName}!',
      [_fbt.default._param('userName', userName)],
      {
          hk: 'X60py',
      },
  )

babel.config.js


  module.exports = {
    plugins: [
      'babel-plugin-fbt-runtime',
      ['babel-plugin-fbt', {fbtEnumPath}],
    ],
    presets: ['module:metro-react-native-babel-preset'],
  };

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


  import fbt from "fbt";

  const MyFbt = (props) => ( // It don't work (
    <fbt
      author="ShowMeUrManager"
      doNotExtract={false}
      project="ui"
      {...props}
    />
  );

API docs

fbt(...) => string ?


  {
    $$typeof: Symbol(react.element)
    props: {content: Array(0: "Привет Alexandros!")}
    type: ƒ FbtComponent(props)
    _contents: ["Привет Alexandros!"]
    _stringValue: null
    key: null
    ref: null
    ...
  }

.toString() 


  import { Alert } from 'react-native';

  Alert.alert(
    fbt('Confirmations', 'logout alert title').toString(),
    fbt(
      'Are you sure you want to Logout?',
      'logout alert message text',
    ).toString(),
    [
      {
        text: fbt('Yes', 'positive logout alert button text').toString(),
        onPress: () => {},
      },
      {
        text: fbt('Cancel', 'negative logout alert button text').toString(),
        onPress: () => {},
        style: 'cancel',
      },
    ],
    { cancelable: false },
  );

Parameters 


  <fbt desc="welcome message text" project='ui'>
     Hello <fbt:param name="userName">{userName}</fbt:param>!
  </fbt>;

  fbt(
    `Hello ${fbt.param("userName", userName)})}!`,
    "welcome message text",
    { project:"ui" }
  );

Babel: Namespace tags are not supported by default.

Auto-parameterization (for dev) 


  <Text>
    <fbt desc="styled text">
      Is this
      <Text onPress={cb} style={{ color: "red" }}>color</Text>
      green?
    </fbt>
  </Text>

Auto-parameterization (for translator) 


  {
    hashToText: { xxx: "Is this {=color} green?" },
    desc: "styled text"
  },
  {
    hashToText: { xxx: "color" },
    desc: 'In the phrase: "Is this {=color} green?"'
  }

Duplicate params 


  <fbt desc="dublcated param example">
    <fbt:name name="name" gender={GENDER}>
      {name}
    </fbt:name>
    shared a link. Tell
    <fbt:same-param name="name" />
    you liked it.
  </fbt>

Demo: real app

CLDR

IntlNumberType
fbt/libs

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

Gist: fbt.sh

Demo: fbt source

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

Недостатки

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

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

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

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

Вопросы ?