State of Vue I18n

Transcript

1. State of Vue I18n
   kazupon
   

   View Slide

2. KAZUPON
   Vue.js Core Team Member
   Vue.js Japan User Group Organizer
   Creator of Vue I18n & Intlify
   @kazu_pon kazupon
   

   View Slide

3. Working at Plaid,inc.
   One of the largest SaaS Company in Japan
   i18n of product `KARTE`
   

   View Slide

4. Vue I18n
   

   View Slide

5. What’s Vue I18n?
   • Internationalization for Vue.js plugin
   • Features
   • Translation
   • Pluralization
   • Datetime Format
   • Number Format
   • Translation per SFC
   • … and more!
   

   View Slide

6. Official Tooling
   • Bundler middleware
   • webpack: @intlify/vue-i18n-loader
   • rollup: @intlify/rollup-plugin-vue-i18n
   • vite: @intlify/vite-plugin-vue-i18n
   

   View Slide

7. Official Tooling
   • Vue CLI Plugin
   • @intlify/vue-cli-plugin-i18n
   $ vue add i18n
   Scaffolding
   Setup
   

   View Slide

8. Official Tooling
   • ESLint Plugin
   • @intlify/eslint-plugin-vue-i18n
   

   View Slide

9. Official Tooling
   • Vue Jest Processor
   • vue-i18n-jest
   • Vue I18n Extensions
   • @intlify/vue-i18n-extensions
   • Vue I18n Locale Message Tools
   • vue-i18n-locale-message
   • Intlify CLI
   • @intlify/cli
   

   View Slide

10. Third Party Tooling
    • Nuxt I18n
    • Babel Edit
    • i18n Ally
    • IntlliJ IDEA Plugin
    • vue-i18n-extract
    

    View Slide

11. Vue I18n stats
    • NPM (Feb 2021)
    • over 180 releases
    • 34 Million downloads
    (total)
    • Used from over 15,000
    packages
    • JSDelivr
    • 4 Million downloads /
    month
    

    View Slide

12. Vue I18n stats
    • Used from over 5,200 Vue / Nuxt Apps
    (Feb, 2021)
    Vue Telescope
    

    View Slide

13. Vue I18n Histories
    2015 2016
    2014 2017 2018 2019 2020
    Feb
    Vue v0.8
    Oct
    Vue v1
    Sep
    Vue v2
    Sep
    Vue v3
    May
    Vue I18n v0
    Jan
    Vue I18n v1
    June
    Vue I18n v2
    Apr
    Vue I18n v3
    May
    Vue I18n v4
    Feb
    Vue I18n v5
    Apr
    Vue I18n v6
    May
    Vue I18n v7
    June
    Vue I18n v8
    Initial Release!
    Vue v1 Support! Vue v2 Support!
    Add many features!
    - i18n custom block
    - Datetime Format
    - Number Format
    - Component Interpolation
    - Custom format
    - SSR
    - TypeScript type definitions
    - … and more
    

    View Slide

14. Vue I18n Current
    • Current Version
    • v8.22.4
    • Stable version for Vue 2
    

    View Slide

15. Vue I18n has been
    growing!
    

    View Slide

16. … Today
    

    View Slide

17. Finally
    

    View Slide

18. Vue I18n v9
    has been
    released!!
    🎉 🎉 🎉
    

    View Slide

19. Vue I18n
    v9
    

    View Slide

20. V9 Development
    • Dec 20, 2019
    • Released Vue 3 initial alpha version
    • Jan 6, 2020
    • Started Vue I18n v9 development
    repo: https://github.com/intlify/vue-i18n-next
    vue-i18n-next over 600 commits,
    9 related tooling development
    • Feb, 2021
    • Released Vue I18n v9!
    

    View Slide

21. Full scratch implementation
    • The Why
    • Maintenance and enhancement has becoming
    very difficult …
    • By re-designing and re-writing, Vue I18n could
    get solidify foundation as an i18n library.
    

    View Slide

22. Layered modules
    

    View Slide

23. Layered modules
    • Structured with Monorepo packages
    vue-i18n @intlify/core
    @intlify/core-base
    @intlify/message-
    compiler
    @intlify/message-
    resolver
    @intlify/runtime
    Entry layer
    Core layer
    Utility layer
    

    View Slide

24. Layered modules
    • Better maintainability
    • More bundle size shavable
    • More extensible
    • Expose APIs per package
    • Low-level i18n APIs: @intlify/core-base
    • Compiler APIs: @intlify/message-compiler
    

    View Slide

25. Hybrid APIs
    

    View Slide

26. Hybrid APIs
    • Composition API
    • Optimized for Vue 3 Composition API
    • Legacy API
    • Almost Compatible v8.x API
    • Based on Low Level i18n API
    (@intlify/core-base)
    Low Level
    i18n API
    Composition API
    Legacy API
    

    View Slide

27. Hybrid APIs
    • Example
    Composition
    API
    Legacy
    API
    

    View Slide

28. Message Compiler
    

    View Slide

29. Message Compiler
    • Compiler for Vue I18n Message Format
    • Scanner
    • Tokenizer
    • Parser
    • Transformer
    • Generator
    • Generate Message Function from Message
    

    View Slide

30. Message Compiler
    • Compile Process
    ‘Hi, {name} !’
    Tokenizer
    H i , { n a m e } !
    Scanner
    scan & tokenize
    Hi,
    {
    name
    }
    !
    Tokens
    Parser
    Hi,
    {
    name
    }
    !
    syntax analysis
    type: text
    value: ‘Hi,’
    type: named
    key: ‘name’
    type: text
    value: ‘ !’
    type: message
    items: […]
    AST
    Transformer
    type: text
    value: ‘Hi,’
    type: named
    key: ‘name’
    type: text
    value: ‘ !’
    type: message
    items: […]
    walk & transform
    Pre-processed AST
    Generator
    walk & generate
    type: text
    value: ‘Hi,’
    type: named
    key: ‘name’
    type: text
    value: ‘ !’
    type: message
    items: […]
    Message
    "function __msg__ (ctx) {
    …
    return _normalize([
    \\"hi \\”,
    _interpolate(_named(\\”name\\")),
    \\” !\\"
    ])
    }"
    Message Function
    

    View Slide

31. Message Compiler
    • Can detect syntax errors at compilation
    • Report User-friendly error
    

    View Slide

32. Message Compiler
    • Source-map Support
    

    View Slide

33. Message Compiler
    • Expose Compiler API
    • Use-cases
    • Linter: @intlify/eslint-plugin-vue-i18n
    • CLI: @intlfiy/cli
    • … and depends on your idea!
    

    View Slide

34. Pre-Compilation
    

    View Slide

35. Pre-Compilation
    • Pre-compile locale messages by using official
    bundler middleware
    (e.g. @intlify/vue-i18n-loader)
    Pre-Compile
    yaml
    javascript
    

    View Slide

36. Pre-Compilation
    • Improve App performance with reduce locale
    messages compilation costs
    String Case Pre-Compilation Case
    Reduce locale messages compilation costs!
    

    View Slide

37. Vue DevTools
    Integration
    

    View Slide

38. Vue Devtools Integration
    • Extend Component Inspector
    Local Scope
    Custom tag
    

    View Slide

39. Vue Devtools Integration
    • i18n Resource Inspector
    Listed Scopes
    Inspect Selected
    Scope
    

    View Slide

40. Vue Devtools Integration
    • Vue I18n Timeline
    • Events
    - missing
    - fallback
    - message-resolve
    - message-compilation
    - message-evaluation
    - compile-error
    

    View Slide

41. Bundle Size
    Optimization
    

    View Slide

42. Bundle Size Optimization
    • Vue I18n v9 different builds
    • global build:
    vue-i18n(.runtime).global(.prod).js
    • esm-browser build:
    vue-i18n(.runtime).esm-browser(.prod).js
    • esm-bundler build:
    vue-i18n(.runtime).esm-bundler.js
    • cjs build:
    vue-i18n.cjs(.prod).js
    

    View Slide

43. Bundle Size Optimization
    • Runtime + Message Compiler vs. Runtime only
    • Runtime + Message Compiler (Default)
    vue-i18n.esm-bundler.js
    • Runtime Only
    vue-i18n.runtime.esm-bundler.js
    You can reduce message complier size!
    

    View Slide

44. Bundle Size Optimization
    • Feature Flags
    • `__VUE_I18N_FULL_INSTALL__`
    • `true` (default):
    Vue I18n APIs + built-in components + directive
    • `false`:
    Vue I18n APIs
    • `__VUE_I18N_LEGACY_API__`
    • `true` (default):
    Legacy API + Composition API
    • `false`:
    Composition API
    

    View Slide

45. Bundle Size Optimization
    • Case: vite-vue-i18n-starter `vendor.xxxx.js`
    • No Optimization
    (Full install / Full API / Runtime + Message Compiler)
    27.83 KB
    • Full Optimization:
    (Composition API / Runtime)
    22.00 KB
    Reduce bundle size about 20% with Tree-Shaking!
    

    View Slide

46. New Toolings
    

    View Slide

47. New Toolings
    • Vite Plugin
    • @intlify/vite-plugin-vue-i18n
    • Setup Vue 3 Composition API + Vue I18n
    Composition API
    • Intlify CLI
    • @intlify/cli
    • `compile` command
    Locale messages pre-compilation
    

    View Slide

48. Next Milestone
    “Beetle”
    Plan
    

    View Slide

49. Message Format Syntax
    • Enhancement Syntax like ICU message format
    NOTE: This current syntax is still unstable
    

    View Slide

50. Main Packages Improvement
    • vue-i18n
    • Type inference for TypeScript
    • Custom formatter
    • @intlify/core-base
    • Low level i18n APIs improvement
    • @intlify/message-resolver
    • pluggable resolver support
    

    View Slide

51. Tooling Improvement
    • Bundler middleware
    • Monorepo management
    • ESLint Plugin
    • JSON / YAML parser performance
    • Vue I18n Processor
    • vue-jest@v5 support
    • Intlify CLI
    • Port from vue-i18n-locale-message
    

    View Slide

52. … And
    • Provide IE 11 Compatibility Build
    • Move kazupon/vue-i18n repo to intlify org
    • vue-i18n-next codes to intlify/vue-i18n repo
    

    View Slide

53. View Slide

54. https://intilfy.dev
    Intlify is a project that aims to improve Developer
    Experience in software internationalization. We will
    aim to improve the Developer Experience of
    internationalization by providing libraries,
    frameworks, and tools that break down barriers to
    internationalization.
    Mission
    “
    ”
    

    View Slide

55. • Vue I18n is part of Intlify project.
    • We'll be working on solving i18n problem while
    also working on the Vue ecosystem.
    • As Vue I18n is growing, Intlify project member
    wanted.
    • If you are interested in intlify, please ask me.
    

    View Slide

56. Thanks!
    https://github.com/sponsors/kazupon
    

    View Slide