1. 1. Internationalizing React Apps George Bukhanov github.com/northerneyes @notherneyes
2. 2. Localization was always difficult
3. 3. Even in different ecosystems Windows forms applications, Asp.net sites, iOS development, Android etc
4. 4. React has no any special instruments
5. 5. Redux can help
6. 6. We can create a special intl reducer
7. 7. intl reducer, an example import messages from './messages'; import {Record} from 'immutable'; const InitialState = Record({ availableLanguages: ['en'], messages, selectedLanguage: 'en' }); const initialState = new InitialState; const revive = state => initialState .mergeDeep(state) .update('messages', messages => messages.toJS()); export default function intlReducer(state = initialState) { if (!(state instanceof InitialState)) return revive(state); return state; }
8. 8. Benefits Server rendering Changing locale without reloading the page Consistency
9. 9. But it leads to many problems
10. 10. We should pass msg object everywhere const mapStateToProps = state => { return { msg: state.intl.messages[state.intl.selectedLanguage] }; }; @connect(mapStateToProps) export default class JobsPage extends React.Component { static propTypes = { msg: React.PropTypes.object.isRequired }; render() { const {msg} = this.props; ...
11. 11. Or make all components smart
12. 12. And more, we get big json file with all messages export default { alerts: { title: 'Alerts', confirmDelete: "Are you sure you want to delete this Email alert?" }, alertCreateModal: { title: 'New Email Alert', notificationFrequency: 'How often do you want to receive emails?', save: 'Save Email Alert', cancel: 'Cancel', timeIntervals: { immediately: 'immediately', daily: 'daily', weekly: 'weekly', never: 'never' } }, ...
13. 13. Disadvantages Its hard to work with it Its hard to support it Its hard to translate it Performace issue (smart components) Or hanging prop (msg) Formatting numbers, dates, and string messages?
14. 14. Disadvantages Its hard to work with it Its hard to support it Its hard to translate it Performace issue (smart components) Or hanging prop (msg) Formatting numbers, dates, and string messages? React context?
15. 15. React Intl story begins React Intl is part of FormatJS. It provides bindings to React via its components and API.
16. 16. Really easy to use import React from 'react'; import {IntlProvider} from 'react-intl'; ReactDOM.render( , document.getElementById('container') );
17. 19. Provides different formatters 60 seconds later: 1 minute ago Hello, Eric!
18. 20. Demo
19. 21. Thank you! Link to demo: github.com/northerneyes/react-intl-example @notherneyes