Localization techniques on frontend

Transcript

1. FRONTEND LOCALISATION Anton Pchelkin, MQD Frontend
2. NAIVE APPROACH • key => value, for example localize(‘Hello’) • english words as keys, so english is base ISSUES • you want to change one translation and you have to find all keys occurrences • same keys could have different translations • translators want to have one place to rule all translations • pluralisation, can be even multiple numbers in one string
3. GETTEXT • solid and trusted solution (more than 20 years) • ngettext function for pluralisation • xgettext utility for extracting keys from your files • support contextual translation • you should pass static string to ngettext function • xgettext utility extracts all keys from source files to one .po file
4. GETTEXT FOR JS • there is no solid solution for loading and parsing .po files in browser (gettext-js) • xgettext does not support ES6 • you should write gettext(‘’) function in sources • there are many solutions for loading .json and provide localisation function (angular- gettext, angular-translate, react-intl, i18next)
5. LOCALISATION WORKFLOW • so at first we need to extract all localised string from templates and components to .pot file with all keys included (angular-gettext-cli, or grunt, or gulp, or webpack) • open .pot with localise.biz online editor • edit translations • export nl.po or directly to .js/.json • compile to js (angular-gettext-cli, or grunt, or gulp, or webpack, https://localise.biz/free/ converter/po-to-json) • put your .pot and .po files to git • include .js file with localised string and use it with your instrument for localisations
6. ANGULAR 2 • uses .xlf (XLIFF) instead of .po • ng-xi18n utility tool for extracting i18n key from files and reverse-compiling them
7. LINKS – https://www.gnu.org/software/gettext/ – https://www.gnu.org/software/gettext/manual/gettext.html – https://angular-gettext.rocketeer.be/ – https://github.com/huston007/angular-gettext-cli – https://github.com/angular-translate/angular-translate – https://github.com/yahoo/react-intl – http://i18next.com/ – Template project https://github.com/rubenv/angular-gettext-example (using grunt plugin for angular-gettext) – https://www.npmjs.com/package/gulp-angular-gettext (gulp plugin for angular-gettext) – https://github.com/princed/angular-gettext-loader (webpack loader for angular-gettext)
8. DANK U VOOR UW AANDACHT Anton Pchelkin, MQD Frontend