Aplikasi React / Redux dan Multilingual (Internasionalisasi) - Arsitektur

Saya membuat aplikasi yang harus tersedia dalam berbagai bahasa dan lokal.

Pertanyaan saya bukanlah semata-mata teknis, melainkan tentang arsitektur, dan pola yang sebenarnya digunakan orang dalam produksi untuk memecahkan masalah ini. Saya tidak bisa menemukan "buku masak" untuk itu, jadi saya beralih ke situs web Tanya Jawab favorit saya :)

Berikut adalah persyaratan saya (mereka benar-benar "standar"):

• Pengguna dapat memilih bahasa (sepele)
• Setelah mengubah bahasa, antarmuka akan menerjemahkan secara otomatis ke bahasa baru yang dipilih
• Saya tidak terlalu khawatir tentang pemformatan angka, tanggal, dll. Saat ini, saya ingin solusi sederhana untuk menerjemahkan string

Berikut adalah solusi yang mungkin saya pikirkan:

Setiap komponen berurusan dengan terjemahan secara terpisah

Ini berarti bahwa setiap komponen memiliki, misalnya satu set file en.json, fr.json dll. Di sampingnya dengan string yang diterjemahkan. Dan fungsi pembantu untuk membantu membaca nilai-nilai yang bergantung pada bahasa yang dipilih.

• Pro: lebih menghormati filosofi React, setiap komponen "berdiri sendiri"
• Kekurangan: Anda tidak dapat memusatkan semua terjemahan dalam file (untuk meminta orang lain menambahkan bahasa baru misalnya)
• Kekurangan: Anda masih harus menggunakan bahasa saat ini sebagai alat bantu, di setiap komponen berdarah dan anak-anaknya

Setiap komponen menerima terjemahan melalui props

Jadi mereka tidak mengetahui bahasa saat ini, mereka hanya mengambil daftar string sebagai alat peraga yang kebetulan cocok dengan bahasa saat ini

• Pro: karena string itu datang "dari atas", mereka bisa dipusatkan di suatu tempat
• Kekurangan: Setiap komponen sekarang terikat ke dalam sistem terjemahan, Anda tidak bisa menggunakannya kembali, Anda perlu menentukan string yang benar setiap saat

Anda melewati props sedikit dan mungkin menggunakan hal konteks untuk menurunkan bahasa saat ini

• Pro: sebagian besar transparan, tidak harus melewati bahasa saat ini dan / atau terjemahan melalui alat peraga setiap saat
• Cons: sepertinya tidak praktis untuk digunakan

Jika Anda punya ide lain, silakan katakan!

Bagaimana Anda melakukannya?

Setelah mencoba beberapa solusi, saya rasa saya menemukan satu yang bekerja dengan baik dan seharusnya menjadi solusi idiomatik untuk React 0.14 (yaitu tidak menggunakan mixin, tetapi Komponen Orde Tinggi) ( edit : juga baik-baik saja dengan React 15 tentunya! ).

Jadi inilah solusinya, dimulai dari bawah (komponen individu):

Komponen

Satu-satunya hal yang dibutuhkan komponen Anda (menurut konvensi), adalah stringsprops. Ini harus berupa objek yang berisi berbagai string yang dibutuhkan Komponen Anda, tetapi sebenarnya bentuknya terserah Anda.

Itu memang berisi terjemahan default, jadi Anda dapat menggunakan komponen di tempat lain tanpa perlu memberikan terjemahan apa pun (ini akan berfungsi di luar kotak dengan bahasa default, bahasa Inggris dalam contoh ini)

import { default as React, PropTypes } from 'react';
import translate from './translate';

class MyComponent extends React.Component {
    render() {

        return (
             <div>
                { this.props.strings.someTranslatedText }
             </div>
        );
    }
}

MyComponent.propTypes = {
    strings: PropTypes.object
};

MyComponent.defaultProps = {
     strings: {
         someTranslatedText: 'Hello World'
    }
};

export default translate('MyComponent')(MyComponent);

Komponen Tingkat Tinggi

Pada cuplikan sebelumnya, Anda mungkin telah memperhatikan ini di baris terakhir: translate('MyComponent')(MyComponent)

translate dalam hal ini adalah Higher Order Component yang membungkus komponen Anda, dan menyediakan beberapa fungsionalitas tambahan (konstruksi ini menggantikan mixin versi React sebelumnya).

Argumen pertama adalah kunci yang akan digunakan untuk mencari terjemahan dalam file terjemahan (Saya menggunakan nama komponen di sini, tetapi bisa jadi apa saja). Yang kedua (perhatikan bahwa fungsinya di-curry, untuk memungkinkan dekorator ES7) adalah Komponen itu sendiri untuk dibungkus.

Berikut kode untuk komponen terjemahan:

import { default as React } from 'react';
import en from '../i18n/en';
import fr from '../i18n/fr';

const languages = {
    en,
    fr
};

export default function translate(key) {
    return Component => {
        class TranslationComponent extends React.Component {
            render() {
                console.log('current language: ', this.context.currentLanguage);
                var strings = languages[this.context.currentLanguage][key];
                return <Component {...this.props} {...this.state} strings={strings} />;
            }
        }

        TranslationComponent.contextTypes = {
            currentLanguage: React.PropTypes.string
        };

        return TranslationComponent;
    };
}

Ini bukan sihir: ini hanya akan membaca bahasa saat ini dari konteks (dan konteks itu tidak tersebar di seluruh basis kode, hanya digunakan di sini di pembungkus ini), dan kemudian mendapatkan objek string yang relevan dari file yang dimuat. Potongan logika ini cukup naif dalam contoh ini, dapat dilakukan sesuai keinginan Anda.

Bagian penting adalah mengambil bahasa saat ini dari konteks dan mengubahnya menjadi string, mengingat kunci yang disediakan.

Di bagian paling atas hierarki

Pada komponen root, Anda hanya perlu menyetel bahasa saat ini dari status Anda saat ini. Contoh berikut menggunakan Redux sebagai implementasi seperti Flux, tetapi dapat dengan mudah dikonversi menggunakan kerangka / pola / pustaka lainnya.

import { default as React, PropTypes } from 'react';
import Menu from '../components/Menu';
import { connect } from 'react-redux';
import { changeLanguage } from '../state/lang';

class App extends React.Component {
    render() {
        return (
            <div>
                <Menu onLanguageChange={this.props.changeLanguage}/>
                <div className="">
                    {this.props.children}
                </div>

            </div>

        );
    }

    getChildContext() {
        return {
            currentLanguage: this.props.currentLanguage
        };
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired,
};

App.childContextTypes = {
    currentLanguage: PropTypes.string.isRequired
};

function select(state){
    return {user: state.auth.user, currentLanguage: state.lang.current};
}

function mapDispatchToProps(dispatch){
    return {
        changeLanguage: (lang) => dispatch(changeLanguage(lang))
    };
}

export default connect(select, mapDispatchToProps)(App);

Dan untuk menyelesaikan, file terjemahan:

File Terjemahan

// en.js
export default {
    MyComponent: {
        someTranslatedText: 'Hello World'
    },
    SomeOtherComponent: {
        foo: 'bar'
    }
};

// fr.js
export default {
    MyComponent: {
        someTranslatedText: 'Salut le monde'
    },
    SomeOtherComponent: {
        foo: 'bar mais en français'
    }
};

apa yang kalian pikirkan?

Saya pikir ini memecahkan semua masalah yang saya coba hindari dalam pertanyaan saya: logika terjemahan tidak berdarah di seluruh kode sumber, itu cukup terisolasi dan memungkinkan menggunakan kembali komponen tanpa itu.

Misalnya, MyComponent tidak perlu dibungkus oleh translate () dan dapat dipisahkan, memungkinkannya digunakan kembali oleh orang lain yang ingin menyediakan stringsdengan caranya sendiri.

[Edit: 31/03/2016]: Saya baru-baru ini bekerja di Retrospective Board (untuk Agile Retrospectives), dibangun dengan React & Redux, dan multibahasa. Karena cukup banyak orang yang menanyakan contoh kehidupan nyata di komentar, ini dia:

Anda dapat menemukan kodenya di sini: https://github.com/antoinejaussoin/retro-board/tree/master

Dari pengalaman saya, pendekatan terbaik adalah membuat status redux i18n dan menggunakannya, karena berbagai alasan:

1- Ini akan memungkinkan Anda untuk meneruskan nilai awal dari database, file lokal atau bahkan dari mesin templat seperti EJS atau giok

2- Saat pengguna mengubah bahasa, Anda dapat mengubah seluruh bahasa aplikasi bahkan tanpa menyegarkan UI.

3- Ketika pengguna mengubah bahasa, ini juga akan memungkinkan Anda untuk mengambil bahasa baru dari API, file lokal atau bahkan dari konstanta

4- Anda juga dapat menyimpan hal-hal penting lainnya dengan string seperti zona waktu, mata uang, arah (RTL / LTR) dan daftar bahasa yang tersedia

5- Anda dapat menentukan bahasa perubahan sebagai tindakan redux normal

6- Anda dapat memiliki string backend dan front end di satu tempat, misalnya dalam kasus saya, saya menggunakan i18n-node untuk pelokalan dan ketika pengguna mengubah bahasa UI, saya hanya melakukan panggilan API normal dan di backend, saya hanya kembali i18n.getCatalog(req)ini akan mengembalikan semua string pengguna hanya untuk bahasa saat ini

Saran saya untuk status awal i18n adalah:

{
  "language":"ar",
  "availableLanguages":[
    {"code":"en","name": "English"},
    {"code":"ar","name":"عربي"}
  ],
  "catalog":[
     "Hello":"مرحباً",
     "Thank You":"شكراً",
     "You have {count} new messages":"لديك {count} رسائل جديدة"
   ],
  "timezone":"",
  "currency":"",
  "direction":"rtl",
}

Modul ekstra berguna untuk i18n:

1- string-template ini akan memungkinkan Anda untuk memasukkan nilai di antara string katalog Anda misalnya:

import template from "string-template";
const count = 7;
//....
template(i18n.catalog["You have {count} new messages"],{count}) // لديك ٧ رسائل جديدة

2- format-manusia modul ini akan memungkinkan Anda untuk mengonversi angka ke / dari string yang dapat dibaca manusia, misalnya:

import humanFormat from "human-format";
//...
humanFormat(1337); // => '1.34 k'
// you can pass your own translated scale, e.g: humanFormat(1337,MyScale)

3- momentjs tanggal dan waktu perpustakaan npm paling terkenal, Anda dapat menerjemahkan momen tetapi sudah memiliki terjemahan bawaan hanya Anda perlu melewati bahasa negara saat ini misalnya:

import moment from "moment";

const umoment = moment().locale(i18n.language);
umoment.format('MMMM Do YYYY, h:mm:ss a'); // أيار مايو ٢ ٢٠١٧، ٥:١٩:٥٥ م

Pembaruan (14/06/2019)

Saat ini sudah banyak framework yang mengimplementasikan konsep yang sama menggunakan react context API (tanpa redux), saya pribadi merekomendasikan I18next

Solusi Antoine berfungsi dengan baik, tetapi memiliki beberapa peringatan:

• Ini menggunakan konteks React secara langsung, yang cenderung saya hindari ketika sudah menggunakan Redux
• Ini mengimpor langsung frasa dari file, yang bisa menjadi masalah jika Anda ingin mengambil bahasa yang diperlukan saat runtime, sisi klien
• Itu tidak menggunakan perpustakaan i18n apa pun, yang ringan, tetapi tidak memberi Anda akses ke fungsi terjemahan praktis seperti pluralisasi dan interpolasi

Itulah mengapa kami membuat redux-polyglot di atas Redux dan Polyglot AirBNB .
(Saya salah satu penulis)

Ini menyediakan:

• peredam untuk menyimpan bahasa dan pesan terkait di toko Redux Anda. Anda dapat menyediakan keduanya dengan:
  • middleware yang dapat Anda konfigurasikan untuk menangkap tindakan tertentu, mengurangi bahasa saat ini, dan mendapatkan / mengambil pesan terkait.
  • pengiriman langsung setLanguage(lang, messages)
• sebuah getP(state)pemilih yang mengambil sebuah Pobjek yang mengekspos 4 metode:
  • t(key): fungsi T poliglot asli
  • tc(key): terjemahan dengan huruf besar
  • tu(key): terjemahan huruf besar
  • tm(morphism)(key): terjemahan ubahsuaian yang diubah ukurannya
• a getLocale(state)pemilih untuk mendapatkan bahasa saat ini
• translatekomponen tingkat tinggi untuk meningkatkan komponen React Anda dengan menyuntikkan pobjek ke props

Contoh penggunaan sederhana:

mengirimkan bahasa baru:

import setLanguage from 'redux-polyglot/setLanguage';

store.dispatch(setLanguage('en', {
    common: { hello_world: 'Hello world' } } }
}));

dalam komponen:

import React, { PropTypes } from 'react';
import translate from 'redux-polyglot/translate';

const MyComponent = props => (
  <div className='someId'>
    {props.p.t('common.hello_world')}
  </div>
);
MyComponent.propTypes = {
  p: PropTypes.shape({t: PropTypes.func.isRequired}).isRequired,
}
export default translate(MyComponent);

Tolong beri tahu saya jika Anda memiliki pertanyaan / saran!

Dari penelitian saya, tampaknya ada dua pendekatan utama yang digunakan untuk i18n di JavaScript, ICU dan gettext .

Saya hanya pernah menggunakan gettext, jadi saya bias.

Yang mengherankan saya adalah betapa buruknya dukungan tersebut. Saya berasal dari dunia PHP, baik CakePHP atau WordPress. Dalam kedua situasi tersebut, ini adalah standar dasar bahwa semua string hanya dikelilingi oleh __(''), kemudian semakin jauh Anda mendapatkan terjemahan menggunakan file PO dengan sangat mudah.

gettext

Anda sudah terbiasa dengan sprintf untuk memformat string dan file PO akan diterjemahkan dengan mudah oleh ribuan agensi yang berbeda.

Ada dua opsi populer:

1. i18next , dengan penggunaan yang dijelaskan oleh entri blog arkency.com ini
2. Jed , dengan penggunaan yang dijelaskan oleh pos sentry.io dan pos React + Redux ini ,

Keduanya memiliki dukungan gaya gettext, format string gaya sprintf, dan impor / ekspor ke file PO.

i18next memiliki ekstensi React yang dikembangkan sendiri. Jed tidak. Sentry.io tampaknya menggunakan integrasi kustom Jed dengan React. The Bereaksi + Redux pos , menyarankan menggunakan

Alat: jed + po2json + jsxgettext

Namun Jed tampak seperti implementasi yang lebih fokus pada gettext - itulah maksud yang diungkapkan, sedangkan i18next hanya memilikinya sebagai opsi.

ICU

Ini memiliki lebih banyak dukungan untuk kasus tepi seputar terjemahan, misalnya untuk menangani gender. Saya pikir Anda akan melihat manfaat dari ini jika Anda memiliki bahasa yang lebih kompleks untuk diterjemahkan.

Opsi populer untuk ini adalah messageformat.js . Dibahas secara singkat di tutorial blog sentry.io ini . messageformat.js sebenarnya dikembangkan oleh orang yang sama yang menulis Jed. Dia membuat klaim yang cukup kuat untuk menggunakan ICU :

Jed adalah fitur terlengkap menurut saya. Saya senang memperbaiki bug, tetapi secara umum saya tidak tertarik untuk menambahkan lebih banyak ke pustaka.

Saya juga memelihara messageformat.js. Jika Anda tidak secara khusus memerlukan implementasi gettext, saya mungkin menyarankan menggunakan MessageFormat, karena memiliki dukungan yang lebih baik untuk bentuk jamak / gender dan memiliki data lokal bawaan.

Perbandingan kasar

gettext dengan sprintf:

i18next.t('Hello world!');
i18next.t(
    'The first 4 letters of the english alphabet are: %s, %s, %s and %s', 
    { postProcess: 'sprintf', sprintf: ['a', 'b', 'c', 'd'] }
);

messageformat.js (tebakan terbaik saya dari membaca panduan ini ):

mf.compile('Hello world!')();
mf.compile(
    'The first 4 letters of the english alphabet are: {s1}, {s2}, {s3} and {s4}'
)({ s1: 'a', s2: 'b', s3: 'c', s4: 'd' });

Jika belum selesai, lihat di https://react.i18next.com/ mungkin merupakan saran yang bagus. Ini didasarkan pada i18next: belajar sekali - menerjemahkan di mana saja.

Kode Anda akan terlihat seperti ini:

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

Dilengkapi dengan sampel untuk:

• webpack
• cra
• expo.js
• next.js
• integrasi buku cerita
• kekalapan
• dat
• ...

https://github.com/i18next/react-i18next/tree/master/example

Selain itu Anda juga harus mempertimbangkan alur kerja selama pengembangan dan nanti untuk penerjemah Anda -> https://www.youtube.com/watch?v=9NOzJhgmyQE

Saya ingin mengusulkan solusi sederhana menggunakan create-react-app .

Aplikasi akan dibangun untuk setiap bahasa secara terpisah, oleh karena itu seluruh logika terjemahan akan dikeluarkan dari aplikasi.

Server web akan menyajikan bahasa yang benar secara otomatis, tergantung pada header Terima-Bahasa , atau secara manual dengan menyetel cookie .

Sebagian besar, kami tidak mengubah bahasa lebih dari sekali, jika pernah sama sekali)

Data terjemahan dimasukkan ke dalam file komponen yang sama, yang menggunakannya, bersama gaya, html, dan kode.

Dan di sini kami memiliki komponen independen sepenuhnya yang bertanggung jawab atas status, tampilan, terjemahannya sendiri:

import React from 'react';
import {withStyles} from 'material-ui/styles';
import {languageForm} from './common-language';
const {REACT_APP_LANGUAGE: LANGUAGE} = process.env;
export let language; // define and export language if you wish
class Component extends React.Component {
    render() {
        return (
            <div className={this.props.classes.someStyle}>
                <h2>{language.title}</h2>
                <p>{language.description}</p>
                <p>{language.amount}</p>
                <button>{languageForm.save}</button>
            </div>
        );
    }
}
const styles = theme => ({
    someStyle: {padding: 10},
});
export default withStyles(styles)(Component);
// sets laguage at build time
language = (
    LANGUAGE === 'ru' ? { // Russian
        title: 'Транзакции',
        description: 'Описание',
        amount: 'Сумма',
    } :
    LANGUAGE === 'ee' ? { // Estonian
        title: 'Tehingud',
        description: 'Kirjeldus',
        amount: 'Summa',
    } :
    { // default language // English
        title: 'Transactions',
        description: 'Description',
        amount: 'Sum',
    }
);

Tambahkan variabel lingkungan bahasa ke package.json Anda

"start": "REACT_APP_LANGUAGE=ru npm-run-all -p watch-css start-js",
"build": "REACT_APP_LANGUAGE=ru npm-run-all build-css build-js",

Hanya itu saja!

Juga jawaban asli saya menyertakan pendekatan yang lebih monolitik dengan file json tunggal untuk setiap terjemahan:

lang / ru.json

{"hello": "Привет"}

lib / lang.js

export default require(`../lang/${process.env.REACT_APP_LANGUAGE}.json`);

src / App.jsx

import lang from '../lib/lang.js';
console.log(lang.hello);