An Automatic Internationalization and Localization Mechanism for Web Applications

Transcription

1 An Automatic Internationalization and Localization Mechanism for Web Applications Che-Jen Chang, (Wei-Chen Liao, Kai-Wei Kuo, Hsiao-Lin Peng, Chia-Chen Chu) Telecom Laboratory Chunghwa Telecom Co. Ltd. Copyright 2017 Chunghwa Telecom, All Rights Reserved. 1

2 Introduction Internationalization and localization are used for website globalization. Copyright 2017 Chunghwa Telecom, All Rights Reserved. 2

3 Problems Hard to find out where exist un-international characters Hard to manage translations in multiple locales inconsistent translations lack of keys, duplicated keys, out of order Hard to share translations among different web applications trivial to transfer translations from one application to another different locale formats for different applications Copyright 2017 Chunghwa Telecom, All Rights Reserved. 3

4 How to solve? Internalization Implement a plugin(eslint-plugin-i18n) based on ESLint to find out non-abstracted string were. Localization Implement a web tool called Keys-Translations Manager (KTM) to manage all of the translations in different locales for multiple applications. Automation Implement Babel transpiler plugin (babel-plugin-ktm) Implement Webpack moudle bundler plugin (ktmwebpack-plugin) Use Jenkins to adopt CI/CD workflow Copyright 2017 Chunghwa Telecom, All Rights Reserved. 4

5 Automation Flowchart Developer Phase UI code ESLint + Developers create keys and translations to Keys-Translations Manager Keys-Translations Manager (KTM) + KTM CLI eslint-plugin-i18n Webpack Plugin exports necessary keys and translations in KTM to locales ESLint plugin finds out the code need to be internationalized Automation Phase Jenkins Build Machine Webpack Babel + + babel-plugin-ktm ktm-webpackplugin Webpack bundles assets (.js,.css, ) Assets Locales, JS, CSS, Babel plugin extracts the internationalized keys used in application means our implements. Copyright 2017 Chunghwa Telecom, All Rights Reserved. 5

6 Implementation: eslint-plugin-i18n This ESLint plugin lists all strings not internationalized in every single JavaScript file. This means the JS file has 5 uninternationalized strings at line 207, 210, 213, 271, and 273. The plugin can be found at This plugin also can discover Japanese and Korean characters. Copyright 2017 Chunghwa Telecom, All Rights Reserved. 6

7 Implementation: Keys-Translations Manager (KTM) download all locales for a specific application import support various output formats input share translations to multiple applications edit or delete specific translations Copyright 2017 Chunghwa Telecom, All Rights Reserved. 7

8 KTM - configuration Initiate various locales and applications as needed without altering the code. both locales and applications are configurable KTM can be found at Copyright 2017 Chunghwa Telecom, All Rights Reserved. 8

9 KTM CLI With KTM CLI, export automation can be one of the stages of CI/CD. output Copyright 2017 Chunghwa Telecom, All Rights Reserved. 9

10 Implementation: babel-plugin-ktm With babel-plugin-ktm, the keys used throughout the application would be discovered. This plugin takes advantage of the AST generated by Babel to collect the internationalized keys in source code. JavaScript Code babel-plugin-ktm parse transform generate New JavaScript Code Abstract Syntax Tree (AST) The way how Babel transpiles the code Copyright 2017 Chunghwa Telecom, All Rights Reserved. 10

11 Implementation: ktm-webpack-plugin ktm-webpack-plugin takes the keys extracted from babelplugin-ktm, and retrieves their related translations from KTM, and then generates the final locales. + Ktm-webpack plugin Source: locales Copyright 2017 Chunghwa Telecom, All Rights Reserved. 11

12 Conclusion & Future work Conclusion We have designed and implemented a web application KTM and various tools, including a KTM CLI, a ESLint plugin, a Babel plugin and a Webpack plugin to facilitate i18n/l10n. With the aid of the tools, we have successfully reduced a lot of manual works and human errors. Also, our web development has become more efficient as a result of the automation. Future work Hope that we can do translation splitting in the future for better performance. Copyright 2017 Chunghwa Telecom, All Rights Reserved. 12

13 Copyright 2017 Chunghwa Telecom, All Rights Reserved. 13