react-intl

Stats & Links

• Since June 2014, most recent release 2.8.0 on Jan 16, 2019
• Yahoo, 50 contributors, 199 github issues, but as of fall 2018 Yahoo isn't providing a lot of support for it
• https://github.com/yahoo/react-intl

Existing edX use

• Paragon (documented in Paragon ADR-2)
• studio-frontend (with a wrapper for accessibility)

What your code looks like

render() {
    const {name, unreadCount} = this.state;

    return (
        <p>
            <FormattedMessage
                id="welcome"
                defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
                  one {message}
                  other {messages}
                }`}
                values={{name: <b>{name}</b>, unreadCount}}
            />
        </p>
    );
}

react-intl Notes

• Handles dates, numbers, strings, plurals. 
• Uses the React Context API. 
• Getting just a translated string (e.g., for a button label or an aria attribute) is really ugly (see this issue).  (Could use Context API to clean this a little.)
• Outputs JSON with ICU Plurals (see String Formatting API)
• Transifex upload of JSON with ICU missing translator comments, which must be uploaded via Transifex API afterwards.

i18next

Stats & Links

• Since 2011, most recent release 14.0.1 on Jan 24, 2019
• 115 contributors, 1 github issue
• 33kb minified, 9kb gzipped
• https://www.i18next.com/
• https://github.com/i18next/react-i18next

Existing edX use

• I thought someone was using this, but apparently not

What your code looks like

render() {
    const {name, unreadCount} = this.state;

    return (
        <div>{t('simpleContent')}</div>
        <Trans i18nKey="userMessagesUnread" count={unreadCount}>
            Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{unreadCount}} unread message. <Link to="/msgs">Go to messages</Link>.
        </Trans>
    );
}

i18next Notes

• Handles dates, numbers, strings, plurals. 
• Exposes a function to get just a translated string, instead of an entire React element.
• Plugins that handle language detection, translation loading, fallback algorithms.
• Can't handle translator comments via extractors.  Would need a custom solution.
• Outputs i18next JSON, which Transifex can't work with, so requires additional conversion to/from a Transifex supported format (e.g. gettext PO format).
  • WARNING: conversion to/from PO may mess up plurals.

Facebook

Stats & Links

• Since January 2019, no releases yet
• 23 contributors, 8 github issues
• https://facebookincubator.github.io/fbt/
• https://github.com/facebookincubator/fbt

Existing edX use

• none

What your code looks like

<fbt desc="param example">
    Hello, <fbt:param name="name">{person.getName()}</fbt:param>.
</fbt>

Facebook Notes

Handles dates, numbers, strings, plurals.  Some interesting functionality for pronouns.