If you want to translate your Single Page Application to other languages without much hassle - this short guide might be for you.
Internationalization (i18n for short) is not a trivial topic and it is perfectly fine to avoid it unless you need it 😎
At SwissDev Jobs we came to the point where we would like to not only have an English version of our website but also German, French and perhaps Italian (Switzerland has 4 languages to support).
I18n is a new topic for us, so we started researching how to do it in a React application with 2 criteria in mind:
- Easy learning curve - we do NOT want to spend next 4 weeks learning a new framework or library but want a solution that works NOW
- Minimal impact on performance - adding i18n should not blow our bundle size or make the app slower
During the research, we quickly noticed that the existing popular frameworks do not met those requirements.
For example:
react-intl (probably the most popular i18n library for React with over 11k stars on Github) has a minified bundle size of 46.6 kB and a lot of features that we don't need.
As we continued our research, we asked ourselves - what is really needed for supporting multiple languages and then it struck us:
We only need a 2 level dictionary.
How do you implement a 2 level dictionary?
How do you use it?
Of course, you can put the actual translations in separate files but you get the idea.
This way you have created your own, super-simple i18n service 🌍
Top comments (3)
I want to thank you twice!!
First for this hack on internationalization, saving me from bloating my web app.
Secondly for introducing me to SwissDev Jobs. Wow, i've already applied to one job. If I may, I'd like to make a request. I't would be nice to have a remote filter, as I'm not able to relocate and remote is one of my conditions.
I18n is quite easy to setup and run once you get used to it. I recommend you to move all translations to one file, it is much easier to maintain in long term
I was thinking about it but I also have dynamic module loading and this way I can avoid loading one big translation file.