How to translate your Single Page Application - Webcamp 2016 (en)

How to translate your Single Page Application?

Viktor Turskyi

WebCamp 2016

About me

1. CTO and Webbylab company co-founder

2. More that 12 years in software development

3. Most of my projects required localization

4. Only live experience and real projects

I18N и L10N

● I18N

● L10N

I18N и L10N

● Internationalization (I18N)

● Localization (L10N)

I18N is simple… or not?

Key => Value (translation)

Bad practice

● Numeric keys

● Conditional Expressions

String keys

“REGISTRATION_FORM”

You cannot search for “Registration form” in your code

You must have additional translation for English language

Keys in the form of English phrases

Advantages:1.Your code is readable, unlike numeric keys.2. You can search phrases from UI, opposite to string keys.3. No need to have separate English translation 4. It’s very easy to edit original phrases. Just edit sources.

The code can look like this

You have %d new messages

You have %d new messages

You have %d new messages

You have %d new messages

Different languages

For example, in Polish we use e.g. plik (file) this way:

1 plik

2,3,4 pliki

5-21 pliko'w...

...

I18N is not easy!

● How to work with plurals?● How to keep translation and original phrases

according to each other● How to work with translators● How to deal with context-sensitive phrases● Different phrases length for different

languages● “You have 10 new messages for last 3 days”

Gettext

● Is used for more than 20 years (first release from Sun Microsystems 26 years ago)

● Solves most problems described above

● Is the standard

gettext

ngettext

ngettext

xgettext

xgettext

What gettext has

The context of using words

● Use the most complete and long phrases. (Do not concatenate translations, translate everything entirely).

● Gettext has built-in context support, it can be passed as an argument.

Useful

Parameters order. Could be different in different languages.

Minor changes to the original phrase (Fuzzy match)

JavaScript and Gettext

● Jed library● po2json library● Xgettext usage for JavaScript source code● ES6 support● Import vs require● gettext functions aliasing

Functions aliasing

I18N for SPA

Load localization with different request

Do not load English phrases

Render UI after loading the dictionary

I18N и React

Alternative decisions (react-intl)

Components against functions

Initialization (Singleton)

Why not react-intl?

https://github.com/yahoo/intl-messageformat/issues/94

I18N and React: example

I18N for isomorphic ReactJS applications

In theory, there is no difference between theory and practice. But in practice there is.

https://github.com/WebbyLab/itsquiz-wall/

Live demo

Viktor Turskyiviktor@webbylab.com

https://twitter.com/koorchikhttps://github.com/koorchik

WebbyLabhttp://webbylab.com