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
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!