![Page 1: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/1.jpg)
How to translate your Single Page Application?
Viktor Turskyi
WebCamp 2016
![Page 2: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/2.jpg)
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
![Page 3: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/3.jpg)
I18N и L10N
● I18N
● L10N
![Page 4: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/4.jpg)
I18N и L10N
● Internationalization (I18N)
● Localization (L10N)
![Page 5: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/5.jpg)
I18N is simple… or not?
Key => Value (translation)
![Page 6: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/6.jpg)
Bad practice
● Numeric keys
● Conditional Expressions
![Page 7: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/7.jpg)
String keys
“REGISTRATION_FORM”
You cannot search for “Registration form” in your code
You must have additional translation for English language
![Page 8: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/8.jpg)
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.
![Page 9: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/9.jpg)
The code can look like this
![Page 10: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/10.jpg)
You have %d new messages
![Page 11: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/11.jpg)
You have %d new messages
![Page 12: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/12.jpg)
You have %d new messages
![Page 13: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/13.jpg)
You have %d new messages
![Page 14: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/14.jpg)
Different languages
For example, in Polish we use e.g. plik (file) this way:
1 plik
2,3,4 pliki
5-21 pliko'w...
...
![Page 15: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/15.jpg)
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”
![Page 16: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/16.jpg)
![Page 17: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/17.jpg)
Gettext
● Is used for more than 20 years (first release from Sun Microsystems 26 years ago)
● Solves most problems described above
● Is the standard
![Page 18: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/18.jpg)
gettext
![Page 19: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/19.jpg)
ngettext
![Page 20: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/20.jpg)
ngettext
![Page 21: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/21.jpg)
xgettext
![Page 22: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/22.jpg)
xgettext
![Page 23: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/23.jpg)
What gettext has
![Page 24: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/24.jpg)
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.
![Page 25: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/25.jpg)
Useful
Parameters order. Could be different in different languages.
Minor changes to the original phrase (Fuzzy match)
![Page 26: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/26.jpg)
![Page 27: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/27.jpg)
JavaScript and Gettext
● Jed library● po2json library● Xgettext usage for JavaScript source code● ES6 support● Import vs require● gettext functions aliasing
![Page 28: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/28.jpg)
Functions aliasing
![Page 29: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/29.jpg)
I18N for SPA
Load localization with different request
Do not load English phrases
Render UI after loading the dictionary
![Page 30: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/30.jpg)
I18N и React
Alternative decisions (react-intl)
Components against functions
Initialization (Singleton)
![Page 31: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/31.jpg)
Why not react-intl?
https://github.com/yahoo/intl-messageformat/issues/94
![Page 32: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/32.jpg)
I18N and React: example
![Page 33: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/33.jpg)
I18N for isomorphic ReactJS applications
![Page 34: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/34.jpg)
In theory, there is no difference between theory and practice. But in practice there is.
https://github.com/WebbyLab/itsquiz-wall/
![Page 35: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/35.jpg)
Live demo
![Page 36: How to translate your Single Page Application - Webcamp 2016 (en)](https://reader034.vdocuments.net/reader034/viewer/2022050722/58f3234c1a28abf00a8b45a1/html5/thumbnails/36.jpg)
Viktor [email protected]
https://twitter.com/koorchikhttps://github.com/koorchik
WebbyLabhttp://webbylab.com