Angular i18n - Current state and the future

Internationalization is a process of design and preparation application for easy adaptation to different region or culture.

This presentation is about how Angular Team approaches this problem and why we decided to go with official solution during adaptation to Chinese market even though official solution has few disadvantages.

I focus on official solution working during compile-time, sometimes comparing to libraries working in runtime.

Also, I present result of my research on current development process of this module, what we can expect in Angular 7 / 8.

Transcript

1. Piotr
   Lewandowski
   

   View Slide

2. INTERNATIONALIZATION
   I18N
   LOCALIZATION
   L10N
   

   View Slide

3. Localization
   Adapting product
   to region-desired „look and feel”
   
   ‍ Translator responsibility
   

   View Slide

4. View Slide

5. Internationalization
   Enables easy localization
   
   Developer responsibility
   

   View Slide

6. Right to left
   Dates
   Currencies
   Grammar forms
   Temperature
   Numbers
   Legal
   Translation
   Plurals
   Symbols
   Units
   Sorting
   

   View Slide

7. Dates
   Currencies
   Numbers
   Plurals
   Translation
   Grammar forms
   

   View Slide

8. Translation templates
   Formatting pipes
   ICU expressions
   

   View Slide

9. Re-use existing standards
   Don’t enforce process
   No rutime overhead
   

   View Slide

10. Hello, {{ name }}!
    i18n-title
    title="It’s you!" />
    
    Last time seen at {{ lastVisited | date }}
    
    

    View Slide

11. View Slide

12. View Slide

13. Alicja {
    count, plural,
    =0 { nie złapała Pokémona }
    one { złapała Pokémona }
    few { złapała {{count}} Pokémony }
    many { złapała {{count}} Pokémonów }
    other { złapała Pokémonów: {{count}} }
    }
    Alicja złapała 5 Pokémonów
    count = 5
    

    View Slide

14. Brawo, {
    gender, select,
    male { złapałeś Pokémona }
    female { złapałaś Pokémona }
    other { Pokémon został złapany }
    }
    Brawo, złapałeś Pokémona
    gender = ' male'
    '...'
    

    View Slide

15. id="dfd67d0cbc87b3e8b89570c00031a4751cf4b76c"
    datatype="html">
    Hello, !
    
    
    Hello, {{name}}!
    

    View Slide

16. id="dfd67d0cbc87b3e8b89570c00031a4751cf4b76c"
    datatype="html">
    Hello, !
    
    
    Hello, {{name}}!
    

    View Slide

17. 
    Angular is cool
    
    
    Angular is cool
    
    Generated ID hash
    Content change = ID change
    Custom ID
    Never changes
    

    View Slide

18. Mark HTML with i18n attributes
    Extract messages from HTML to XLIFF
    Copy & translate XLIFF
    Generate new app version for each language
    Outside
    Angular
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. Currently...
    Everything at build time
    with AOT
    Duplicated builds
    for each locale
    Desired...
    ONE bundle for all locales
    Translating before
    application bootstraps
    

    View Slide

23. On the roadmap since 2.0
    Planned for Angular 7 with Ivy compiler
    Already in master since June 2018
    

    View Slide

24. interface I18nDef {
    value: string;
    id?: string;
    meaning?: string;
    description?: string;
    }
    
    Hello, Gdańsk!
    
    interface I18nDef {
    value: 'Hello, Gdańsk!';
    id?: 'page.header';
    meaning?: undefined;
    description?: 'User profile';
    }
    

    View Slide

25. PR #24037
    205 review comments ☺
    Loading BEFORE Angular bootstraps
    All locales in ONE bundle
    Choose: AOT or RunTime
    ❔ XLIFF has to be in JS bundle
    

    View Slide

26. View Slide

27. Currently...
    Everything in HTML
    Desired...
    Translation in services
    

    View Slide

28. Planned with Angular 7 with Ivy compiler
    Work in progress
    Polyfill already exists
    @ngx-translate/i18n-polyfill
    

    View Slide

29. constructor(i18n: I18n) {
    this.message = i18n('Speaking at meetup in {{myVar}} !', {
    myVar: 'Gdańsk, Poland'
    });
    

    View Slide

30. View Slide

31. Better docs
    Angular CLI support
    

    View Slide

32. Localize single module
    Better library support
    See #14331
    

    View Slide

33. Allow custom parsers,
    generators and loaders
    Possible JSON support
    

    View Slide

34. View Slide

35. ✅
    

    View Slide

36. ✅
    // tslint.json
    "i18n": [
    true,
    "check-id",
    "check-text"
    ]
    * Requires codelyzer
    Optional, depending on
    your translation strategy
    

    View Slide

37. ✅
    
    Angular i18n is cool
    
    
    

    View Slide

38. ✅
    
    Angular i18n is cool
    
    
    

    View Slide

39. ✅
    

    View Slide

40. // package.json
    "scripts": {
    "build": "ng build && ng xi18n"
    },
    

    View Slide

41. 
    
    Angular i18n is cool
    
    
    
    
    
    Angular i18n is cool
    
    
    ...
    
    
    Error: Could not mark an
    element as translatable
    inside a translatable section
    

    View Slide

42. 
    
    Angular i18n is cool
    
    
    
    
    
    Angular i18n is cool
    
    
    ...
    
    
    

    View Slide

43. 
    
    Angular i18n is cool
    
    
    
    
    
    Angular i18n is cool
    
    
    ...
    
    
    

    View Slide

44. View Slide

45. View Slide

46. Angular i18n:
    » Docs
    » Plans for v6 and v7
    General:
    » On i18n and l10n
    » i18nGuy - Guidelines
    

    View Slide

47. Localization platforms:
    » Pootle
    » Transifex
    » POEditor
    » TextUnited
    Editors & scripts:
    » Virtaal
    » tiny ng-translator
    » ngx-i18nsupport
    (xliff merge)
    

    View Slide

48. Piotr Lewandowski
    THANK YOU
    DZIĘKUJĘ
    谢谢
    

    View Slide