Hi all --

Fluent is the new name for the low-level API powering L20n.  Fluent is
small and very unopinionated. It makes it easy to integrate it with
other stacks.

I wrote a prototype of React bindings for Fluent:

    https://github.com/projectfluent/fluent.js/tree/master/fluent-react

It takes advantage of the composition pattern to wrap elements and
components and provide translations for them:

    <LocalizedElement id="welcome" $username={name}>
        <p>{'Welcome, {$username}'}</p>
    </LocalizedElement>

It's an early version and the API will likely change. I would love to
get feedback from people familiar with React. Bonus points for working
on an app which ships in multiple languages :)

The README in the repo explains the basics.  I wrote a number of small
examples to demonstrate what's currently implemented:

    https://github.com/projectfluent/fluent.js/tree/master/fluent-react/examples

Lastly, there's a rather lengthy design / braindump doc on the wiki:

    https://github.com/projectfluent/fluent.js/wiki/React-bindings-for-Fluent

Hope you like it!
Staś


* * *

Context & History:

Nearly a year ago we had an in-depth discussion about how we might
integrate L20n into React:

    https://groups.google.com/forum/#!topic/mozilla.tools.l10n/XtxHgBEokCA

One take-away from that thread was that perhaps we could just let L20n
and React live alongside each other. After all, L20n uses its own
MutationObserver to detect changes to the native DOM and could
localize DOM elements after React has rendered them.

Today we can say that it wasn't the best idea: React and L20n can race
against each other or cause the content to be rendered twice. L20n
also removes <!-- react-text --> comments from the DOM which may cause
trouble with React's reconciliation algorithm.

In January I wrote a post in this newsgroup introducing Project Fluent

    https://groups.google.com/forum/#!topic/mozilla.tools.l10n/NPmsJD4IGjQ

Fluent takes the low-level API from L20n and packages it separately so
that it's easy to work with and integrate in larger codebases.  You
can read more about Fluent and L20n on the wiki:

    https://github.com/projectfluent/fluent/wiki/Fluent-and-L20n

To learn more about Fluent, see http://projectfluent.io/.
_______________________________________________
tools-l10n mailing list
[email protected]
https://lists.mozilla.org/listinfo/tools-l10n

Reply via email to