1. The document discusses internationalization (I18N) and localization (L10N) for single page applications, specifically how to translate text strings. 2. It recommends using keys in the form of English phrases instead of numeric or string keys, and using the Gettext standard which supports plural forms and passing context between source and translated strings. 3. Examples are given of implementing I18N in JavaScript using libraries like Jed and integrating translations with React applications.

1. How to translate your Single Page
Application?
Viktor Turskyi
WebCamp 2016

2. 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

3. I18N и L10N
● I18N
● L10N

4. I18N и L10N
● Internationalization (I18N)
● Localization (L10N)

5. I18N is simple… or not?
Key => Value (translation)

6. Bad practice
● Numeric keys
● Conditional Expressions

7. String keys
“REGISTRATION_FORM”
You cannot search for “Registration form” in your code
You must have additional translation for English language

8. 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.

9. The code can look like this

10. You have %d new messages

11. You have %d new messages

12. You have %d new messages

13. You have %d new messages

14. Different languages
For example, in Polish we use e.g. plik (file) this
way:
1 plik
2,3,4 pliki
5-21 pliko'w
...

15. 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”

17. Gettext
● Is used for more than 20 years (first release
from Sun Microsystems 26 years ago)
● Solves most problems described above
● Is the standard

18. gettext

19. ngettext

20. ngettext

21. xgettext

22. xgettext

23. What gettext has

24. 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.

25. Useful
Parameters order. Could be different in
different languages.
Minor changes to the original phrase (Fuzzy
match)

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

28. Functions aliasing

29. I18N for SPA
Load localization with different request
Do not load English phrases
Render UI after loading the dictionary

30. I18N и React
Alternative decisions (react-intl)
Components against functions
Initialization (Singleton)

31. Why not react-intl?
https://github.com/yahoo/intl-messageformat/is
sues/94

32. I18N and React: example

33. I18N for isomorphic ReactJS
applications

34. In theory, there is no difference between
theory and practice. But in practice there is.
https://github.com/WebbyLab/itsquiz-wall/

35. Live demo

36. Viktor Turskyi
viktor@webbylab.com
https://twitter.com/koorchik
https://github.com/koorchik
WebbyLab
http://webbylab.com