React + intl (i18n)

[kachkaev]

I am working on an app that tries to follow the suggested project structure and other Meteor good practices. The todos example is extremely helpful here, especially because of having the react branch – this is the library I'm using for View.

Translating web apps is a pretty common task, but there seems to exist very little info on how this might be done with Meteor & React. I was able to discover react-intl and some built-in examples, but they they don't clarify the things very much. It would be good to see this stuff integrated into Meteor by someone knowledgable just so that the community followed a coherent and scalable design pattern when it comes to translating Meteor apps.

Would it be possible to demo a translation mechanism in the react branch? in my view, an ideal demo would consist of the following:

• [ ] A folder with a couple of language files that contain all messages
• [ ] References to message by ids from React components, error messages, etc.
• [ ] A demo of the pluralisation (some languages like Russian have quite complex rules and it is not very clear how to inject different sets of messages into the props of <FormattedPlural />)
• [ ] A demo of date formatting
• [ ] A switch between the languages (e.g. in the menu below the workspaces)
• [ ] An opportunity to toggle the languages without reloading the page (this probably requires a new messages file to be downloaded on fly since keeping all translations in memory in a general case is probably not a good idea)
• [ ] Some reference to a tool that could help with translating the app into a new language

I know that this is a lot to ask, but I believe that a demo of React i18n is quite demanded. Not just by me, but the community in general (especially given that fact that Meteor is interested in a closer integration with React in future).

I can help with making a translation file in Russian if there is a need (this is a good case of a language with the complex morphology).

[tmeasday]

Hi @kachkaev,

This sounds like a great idea. We do have the beginnings of this one the master branch working OK, but certainly I think it could be better.

I think this would be a great opportunity for a community collaboration / contribution. I don't think if the answer is really known at this point.

[kachkaev]

Glad that you support this suggestion @tmeasday!

Do you have an idea about how we could bring more attention to i18n+React? I guess someone in the community has already found a good architecture for all the above features, I'm just not sure where's the best place to ask. Seems like there is not much i18n buzz on Meteor forums (at least I haven't seen anything new).

A robust built-in i18n is probably a good selling point for Meteor as a whole, so it might be worth a short MDG discussion too.

[tmeasday]

My best suggestion would be to try and drum up some enthusiasm on the forums. There are a few packages out there that support i18n, perhaps the authors of those packages would be keen to help?

[kachkaev]

Done: https://forums.meteor.com/t/react-i18n-best-practices-in-meteor-1-3/21901

[clemsos]

Is there any progresses on this, like a working example or sth ? Thanks !

[kachkaev]

@clemsos I've seen a pretty nice integration of i18n into react in one boilerplate recently: https://github.com/mxstbr/react-boilerplate The new feature was merged just about a week ago! Would be good to see smth similar in Meteor demo apps (maybe not this particular one as it's getting a bit obsolete).

[clemsos]

Thanks, react-boilerplate looks great indeed. They are using react-intl which is what I have chosen as well. It looks like a more interesting option than existing atmosphere packages.

[hwillson]

The todos react branch has been updated to demonstrate a full i18n example, using universe:i18n (via PR #187). I'll close this off for now, but let me know if you want anything changed/re-visited.