Localize Polymer applications 2 (XLIFF)

My last post covered how to localize Polymer application with the carbon-i18n-behavior. This leave us with one crucial question: How do the translations actually get into the application?

The translation process

If you are not a polyglot yourself, translating content involves hiring a translation agency. Bringing new translations quickly into the application is critical if your application changes every day — triggering the continuous need for new labels, messages, and the like.

We therefore exchange the translations with our agency via XLIFF, the industry defacto file standard for this very purpose. Having a machine-readable file allows us to highly automate the localization process.

So what do we do once a new batch of translated XLIFF files arrive?

Piping translations into the application

We check the translated XLIFF files into the repository of our Polymer application. Checking in the XML based XLIFF files allows us to leverage Git’s merge mechanism to bring together the translations from the agency with new translations keys which might have been added in the meantime.

Finally, we build the application with gulp. Thereby a gulp plugin processes the XLIFF files and generates the <element-name>.<locale>.i18n.js files for the carbon-i18n-behavior. That’s it.

Automate XLIFF conversation with gup

One more thing… We open sourced our gulp plugin which you can use together with the carbon-i18n-behavior!

Just install the plugin via npm:

$ npm install --save-dev gulp-xliff-to-carbon-i18n

And once installed, use it in your gulpfile.js:

var xliff2js = require('gulp-xliff-to-carbon-i18n');

gulp.task('process-xliff-files', function() {
    gulp.src('**/*.xliff')
        .pipe(xliff2js())
        .pipe(gulp.dest('dist'));
});

Running gulp will now generate the required JS files:

my-element/i18n/my-element.xliff
my-element/i18n/my-element.en.i18n.js
my-element/i18n/my-element.fr.i18n.js
my-element/my-element.html

Happy coding!

Want to learn more about Polymer? Have a look to all our Medium posts on Polymer.

Photo: Takashi Hososhima