i18n of JavaScriptJunichi Shinohara @ HDE

Agenda

・What's i18n?・How to support i18n in Server Side・How to support i18n in Client Side・Introduce AngularJS・Introduce angular-gettext

What’s i18n?

What’s i18n

・i18n = Internationalization・One system supports multiple languages

How to Support i18nin Server Side

How to Support i18n in Server Side

・Server Side = Python, PHP, Erlang and etc.・GNU gettext generally is used

How to use gettext

1. Modify source code2. Extract texts from source code（.pot）3. Translate texts（.po）4. Convert translated texts into binary translated texts（.mo）5. Load binary translated texts on server

・Use template engine like Mako・Use _ method of gettext.py

How to use gettext1. Modify Source Code

How to use gettext2. Extract Texts from Source Code（.pot）

・Create .pot file with pybabel or xgettext

How to use gettext3. Translate Texts（.po）

・Create .po file from .pot file with msgmerge

・Edit .po file with vim or Poedit

How to use gettext4. Convert Translated Texts into Binary Translated Texts（.mo）

・Create .mo file with msgfmt

・Load .mo file on Tornado of Python

How to use gettext5. Load Binary Translated Texts on Server

・Separate translating from developing　・Translators edit po files　・Developers edit source codes・Useful PO file editor like Poedit

　

Good Points of gettext

How to Support i18nin Client Side

How to support i18n in Client Side

・Client Side = JavaScript・GNU gettext Generally is NOT used

How to support i18n in Client Sidewith jQuery UI or jQuery Globalize

・Use GNU gettext Object or JSON・We have to set texts into HTML

How to support i18n in Client Sidewith Server’s Template

・Use GNU gettext・But, JavaScript depends on Server Framework

IntroduceAngularJS

What’s AngularJS?

・JavaScript MVC Framework in Client Side・Developed by Google・Home Page: https://angularjs.org/・Examples: http://www.angularjshub.com/examples/

What’s AngularJS?Concepts of AngularJS

・2 Way Data Binding　・Change Value in Model = Change Value in View $(‘#hoge’).value(‘fuga’)

・Model　・Resource like REST API with $http, $q, and $resource　・Factory like Session Storage or Local Storage・Directive / Filter / Template　・Behaviour as HTML <div ng-model=”items” ng-repeat=”item in items | lowercase”><a>{{item}}</div>

・Controller　・Scope in HTML <div ng-controller=”abcCtrl”></div><div ng-controller=”xyzCtrl”></div>

・Router　・Ajax Frendly URL with $router or angular-ui plugin http://www.example.com/blog/#/page/1

　・pushState / popState with HTML5 Mode

Introduceangular-gettext

What’s angular-gettext?

・Support gettext on AngularJS・Extract text from AngularJS codes・Convert .po file into JSON or Object・Home Page: http://angular-gettext.rocketeer.be/・Examples: https://github.com/rubenv/angular-gettext-example

How to use angular-gettext

1. Modify source code2. Extract texts from source code（.pot）3. Translate texts（.po）4. Convert translated texts into JSON（.json）5. Load JSON on AngularJS or Server

・Use translate directive on View

・Use gettext function on Controller

How to use angular-gettext1. Modify Source Code

How to use angular-gettext2. Extract Texts from Source Code（.pot）

・Create .pot file with Grunt and grunt-angular-gettext

・We can merge other .pot file which is created by pybael　with msguniq

How to use angular-gettext3. Translate Texts（.po）

・Create .po file from .pot file with msgmerge

・Edit .po file with vim or Poedit

How to use angular-gettext4. Convert translated texts into JSON（.json）

・Create .json file with Grunt and grunt-angular-gettext

・Load JSON on AngularJS

How to use angular-gettext5. Load JSON on AngularJS

・translate directive　・We do NOT have to set translated texts into HTML　・JavaScript does NOT depend on Server Framework・gettext　・Use a de fact standard　・Use the same as .po file of server side・Translated texts is JSON format　・3rd party tool like jQuery Globalize use the JSON

Good Points of angular-gettext

Thank you for your attention!