future-of-i18n

38bee248082f6071230de65e9d74a944?s=47 kazupon
September 07, 2018

 future-of-i18n

38bee248082f6071230de65e9d74a944?s=128

kazupon

September 07, 2018
Tweet

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
  4. None
  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 …

  125. None
  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

  138. None
  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!