Embed Size (px)
Citation preview
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 [email protected]
https://twitter.com/koorchikhttps://github.com/koorchik
WebbyLabhttp://webbylab.com
