future-of-i18n

Transcript

1. The future of i18n (ϘΫ͕ߟ͑Δi18nͷະདྷ) 2018.09.07 builderscon tokyo 2018 @kazupon
2. Who are You?
3. kazupon CTO Vue.js Core Team Vue.js japan user group organizer @kazu_pon kazupon
5. Ticket sales, Coming soon ...
6. Introduction
7. Background • I've experienced a lot of different i18n what happened. • String encoding • Multi Languages • and more …. • I've developed, maintained as OSS developer. App or Service vue-i18n
8. Come into one's mind for the future of i18n ... Welcome Feedback!
9. Today about talking
10. Agenda • The first half • About i18n • Current of i18n • Problems of i18n • The second half • Next generation i18n
11. Today about not to talk • Design and Process of software development for globalization • Process of localization • See the book! https://book.impress.co.jp/books/1117101057
12. About i18n
13. i18n l10n
14. What is i18n? • Internationalization
 
 
 
 
 
 • Generalize products in the format that doesn't depend on specific language, region and culture i nternationalizatio n 18 letters i18n
15. What is l10n? • Localization
 
 
 
 
 
 • Specialize products in the format that depend on specific language, region and culture l ocalizatio n 10 letters l10n
16. i18n <-> l10n i18n + l10n = g11n (globalization) 11 letters Base ja en fr l10n i18n g11n
17. FYI: Numeronym • A numeronym is a number-based word. l10n i18n g11n https://en.wikipedia.org/wiki/Numeronym World Wide Web Consortium w3c a11y k8s d11n
18. Joke: How to call i18n? i18n (͍͍΍Μ: iiyann) https://twitter.com/Konboi/status/1031431327692681216
19. By the way, Do you support i18n at your app ?
20. Are you Serious?
21. Importance of i18n • hard to support software maintainance after release … • Leak easily, when software has became large scale. • Need to re-design the UI layouts. • Database, and other systems are also affected …
22. • And also hard to localization … • The translator fix the source code.
 -> Really? It’s impossible … • Even if i18n had been fixed with translator, there is the possibility of breaking app ... Importance of i18n Breaking …
23. If cannot support i18n… • Can not keep usability of product … What’s mean?
24. NG Case https://twitter.com/frsyuki/status/1030189494371115008
25. Current of i18n
26. Platform • Built-in i18n and provide for application • Windows / Mac OS / Linux (*nix) • iOS / Android • Web
27. Development Environment • Built-in i18n to Programming languages • ex: datetime, string encoding • Built-in i18n to Application Framework • ex: Ruby on Rails
28. Contents of i18n
29. Display of resource
30. App Resource interpolation i18n lib Resource Catalog configure en_US.json ja_JP.json read select interpolate
31. Format of Resource Catalog • .pot, .po (gettext) • JSON • YAML • .strings (macOS / iOS) • XML base (Android, Java, .NET) • And more …
32. Resource Catalog Structure • Flat key pairs • Hierarchical
33. Message Formatting • ICU (International Components for Unicode) Message Format
 http://userguide.icu-project.org/formatparse/messages
34. ICU • Plural
35. ICU • Date & Time
36. ICU • Number
37. DateTime
38. Built-in programming languages • Support in most programming languages • e.g. Ruby • DateTime class • Time class • Date class
39. Character Code
40. Character encoding • Unicode have almost becoming defaults.
 https://unicode.org/ • Web:
 ex, html
 <meta charset=“utf-8"> • programming languages:
 ex, python (v3)
41. Collation • Database
 e.g. MySQL
42. Collation • ECMAScript i18n API
43. Emoji
44. Skin tone http://std.dkuug.dk/JTC1/SC2/WG2/docs/n4599.pdf Reference from: “WG2 N4599 Skin tone modifier symbols” Unicode Consortium,
45. Font
46. Web Fonts
47. Google Fonts https://fonts.google.com/
48. Standardization
49. It’s almost standardized • character encoding: ISO/IEC 10646 • datetime: ISO8601 • language tags: BCP 47 (IETF) • countries/states/subdivisions : ISO3166 • phone number: E.164 • currency: ISO4217 • and more …
50. Libraries
51. Enhanced with external libs • Phone Number
 libphonenumber (C/C++): 
 https://github.com/googlei18n/libphonenumber • Countries
 i18n-iso-countries(Node.js): 
 https://github.com/michaelwittig/node-i18n-iso-countries • DateTime
 spacetime (JavaScript):
 https://github.com/spencermountain/spacetime • and more …
52. UI libraries
53. Date Picker
54. Calendar
55. Emoji Picker
56. g11n is easy to start! due to i18n fruitful environments.
57. However …
58. https://qiita.com/yugui/items/55f2529c5a731badeff7
59. Hard to perfect …
60. Problems of i18n
61. Languages • One country have multi languages (e.g. india) • Dialect (e.g. bt-pt) • Middle name (e.g. es) • Honorifix • and more …
62. Feature of product • Law • Tax (payment, order) • Accounts (tax, audit) • GDPR • Culture • Foods (tastes, … etc) • and more …
63. UI • LTR (most) • RTL (arabia, …etc) • Vertical line (japanese, … etc)
64. Database • Collation • Attribute of records dependent on country or culture • e.g. Middle name • Contents management for languages • and more …
65. • I/F Miss-match of i18n per library • Resource catalog management Server Client / Server Client i18n lib i18n lib e.g. API or BFF model Resource catalog (errors, etc) Resource catalog (client specific) Client i18n lib Resource catalog (client specific)
66. Client / Server • UI placeholder and contents management https://developer.kaizenplatform.com/entry/axross/2018-07-02 Reference: kaizen platform engineer blog
67. Edge case of project • Grouping of Prefectures and Countries
 (no standardization)
68. Edge case of project • Convert csv to shift_jis from utf-8 • e.g. Excel
69. Edge case of project • Convert to ISO8601 from un-standardized datetime string
70. i18n fatigue …
71. By the way, What state of l10n?
72. Translation • Translation have improved dramatically with machine learning! https://arxiv.org/pdf/1609.08144.pdf Reference:
 Google’s Neural Machine Translation System: Bridging the Gap between Human and Machine Translation
73. Translation process • Out-sourcing model • Crowd-sourcing model Translator Software Company Translation Company Software Company Translator Software Company Translator Software Company Translator Translator … out-sourcing crowd-sourcing … Translator
74. i18n-able content service https://www.contentful.com/r/knowledgebase/localization/
75. Support i18n integration • Import / Export resource catalog Localization Services .po .json .resx … Import Export
76. Support i18n integration • API https://medium.com/@jamuhl/vue-js-from-internationalization-i18n-to-localization-l10n-and-back-again-c3e5f7cc5e71 Reference: vue.js: from internationalization (i18n) to localization (l10n) and back again
77. We need the NEW i18n environments !
78. Q & A
79. Next generation i18n
80. What kind of i18n do we want?
81. I thought in App dev position • I don't want to worry about key naming of resource catalog … • I don't want to worry about resource catalog management … • I don't want to effort pseudo localization test … • I don't want to worry about choice of i18n library …
82. I want to focus on App development !!
83. Next generation i18n
84. ✨DX✨ (Developer Experience)
85. Need to provide DX to developer!
86. However, How can do you provide DX?
87. So, I think that some factors are necessary
88. Required factors for DX • Usability • Maintainability • Testability • Extendability • Integrity
89. Usability • i18n takes time and effort … • Need to be the simply and easily to use it
90. Maintainability • Just like UI, frequently occur the specification changing. • e.g. add/change/delete the resource
91. Testability • Hard to i18n test … • e.g. Test per language • e.g. Setup language environment
92. Extendability • need to support edge-case of i18n • e.g. String encoding: • utf-8 -> shift-jis • e.g. Decision Shortcut key: • en: enter • ja: shift + enter
93. Integrity • Need to integrate l10n tools or services • e.g. continuous localization
94. So, how should such i18n be provided with these factors?
95. I thought about it!
96. • SaaS for i18n • i18n framework
97. SaaS for i18n? • Provide some SaaS of development environments! Need the i18n as a Service! source code management ci code coverage platform environment error tracking
98. i18n framework? Resource Catalog Message Formarting Custom X CLI Testing tools UI supporting tools
99. Ideally, Saas is best!
100. However, We’re not an entrepreneur, but a developer.
101. I talk about i18n framework after this!
102. i18n framework • Requirement • Resolve the current problems • Provide 5 factors
103. What kind of framework do we provide?
104. By the way, regarding to framework …
105. We have the image of full-stack!
106. Is i18n framework the best full-stack framework?
107. No, I think so not best.
108. Because … • We don’t need all the things! • High learning cost… Resource Catalog Message Formarting Custom X CLI Testing tool UI supporting tool
109. I think i18n framework should be like progressive framework.
110. What’s Progressive Framework? https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.p From the below slide:
111. Advocate Evan You Vue.js creator
112. Framework
113. “In development, framework must resolve the inherent complexity of application.”
114. “However, framework have instrumental complexity.”
115. “Framework complexity is the price that we pay in handling application complexity.”
116. Insufficient metaphor
117. Overkill metaphor
118. “Need to select the right framework.”
119. However, In Business, requests are constantly changing …
120. Progressive Framework
121. “Framework that can solve problems in respond to progressive request changes of applications.” install libs and tools when need to resolve
122. We are usually doing it … What is different?
123. •Define problem regions and provide resolve ways. •Support the least official libs and tools possible.
124. In Vue.js …
126. Vue.js Core Vue Router Vuex Vue CLI If necessary, use progressively libs and tools
127. Also in i18n …
128. Just like it, I believe we can compose.
129. Problem regions • i18n Core • String encoding • Date & Time • and more … • Resource interpolating • Message syntax format (ICU or other?) • Interpolating system
130. Problem regions • Resource catalog system • Resource structure • Resource bundling • Resource format • Resource management • CLI
131. Problem regions • Large scale supporting system • UI layouting tool • Test utilities • Integration supprting • … and more!
132. i18n Core Resource Catalog System Resource Management Resource Interpolation Large Scale Supporting System
133. Resource Catalog System Resource Management Resource Interpolation Large Scale Supporting System ? ? ? ? ? i18n Core
134. Cases • small-case: e.g. client only • i18n Core • Resource interpolation • Resource catalog system • large-case: e.g. client / server • Above + … • Resource management • Large scale supporting system
135. Architecture
136. Plugin System • Enhance the features available • Add the methods or functions i18n Core i18n plugin-x (ISO3166) App (EC Service) i18n plugin-1 (E.164)
137. Technology
139. What’s WebAssembly? • WebAssembly (abbreviated WASM) is a binary instruction format for a stack-based virtual machine. • WASM is designed as a portable target for compilation of high-level languages like C/C++/ Rust, enabling deployment on the web for client and server applications. https://webassembly.org/ Reference From top of website
140. This is it!
141. WASM implementation i18n Core & Plugins WASM VM WASM VM WASM VM Load Load Run Run module
142. Tools
143. CLI • Resource Catalog Management tool • Resource Interpolate optimization • and more … i18n add zh i18n extract ja.json, fr.json i18n convert en.csv en.json i18n compile …
144. Editor • Provide the extension of editor • Like the IntelliSense of VSCode Easy resource key inputing !
145. UI layout • Like the Storybook? (NOTE: My image) https://github.com/joscha/storybook-addon-i18n-tools Reference From `I18n Toolbox Storybook Add-on`
146. Test utilities • Pesodu Localization? https://medium.com/netflix-techblog/pseudo-localization-netflix-12fff76fbcbe Reference From `Pseudo Localization @ Netflix`
147. Integration
148. • Support continuous localization App Hook API for l10n service i18n Core Localization Service hook Call Notify Translate Translator
149. TBD of i18n framework
150. TBD • WASM is still MVP… • NONE-JavaScript environments don't support … • The Implementation of plugin system is difficult … • How to distribution i18n framework • Library implemented with WebAssembly
 (Should we use existing package manager?)
151. TBD • Should we need to re-implement the bellow? • date & time • String encoding • and more …
152. Conclusions
153. Conclusions • About i18n • Current of i18n • Problems of i18n • Next generation i18n
154. Q & A
155. Welcome feedback & patron! https://www.patreon.com/kazupon
156. Thank You!