Angular Wrocław - Internationalisation

Current state and the future

Video (pl): https://youtu.be/ArLCFuKVdGk?t=133

Transcript

1. Internationalization Piotr
   Lewandowski
   

   View Slide

2. INTERNATIONALIZATION
   I18N
   LOCALIZATION
   L10N
   

   View Slide

3. Adapting product to
   region „look and feel”
   ! Localization
   "
   Translator
   

   View Slide

4. Enables
   easy localization
   ! Internationalization
   "
   Developer
   

   View Slide

5. ANGULAR I18N
   Dates
   Currencies
   Numbers
   Plurals
   Translations
   Grammar forms
   

   View Slide

6. WHY OFFICIAL SOLUTION?
   ngx-translate deprecated
   official solution
   not ready?
   

   View Slide

7. GOALS
   Re-use existing standards
   Process works at scale
   No rutime overhead
   

   View Slide

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

   View Slide

9. PLURAL FORMS
   

   View Slide

10. ICU EXPRESSIONS
    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

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

    View Slide

12. ID GENERATION
    
    Angular is cool
    
    
    Angular is cool
    
    Custom ID
    Generated ID hash
    Content changes = ID changes Never changes
    

    View Slide

13. PROCESS
    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

14. PAIN POINTS
    

    View Slide

15. PAIN POINTS
    

    View Slide

16. MULTIPLE
    BUNDLES
    

    View Slide

17. MULTIPLE BUNDLES
    ! Currently...
    Everything at build time
    with AOT
    Duplicated builds
    for each locale
    " Desired...
    ONE bundle for all locales
    Translating before
    application bootstraps
    

    View Slide

18. MULTIPLE BUNDLES
    ! On the roadmap since 2.0
    " Planned for Ivy compiler
    # Already in master since June 2018
    STATUS
    

    View Slide

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

    View Slide

20. MULTIPLE BUNDLES
    PR #24037
    205 review comments J
    OVERVIEW
    Loading BEFORE Angular bootstraps
    All locales in ONE bundle
    Choose: AOT or RunTime
    

    View Slide

21. IN-CODE
    TRANSLATIONS
    

    View Slide

22. IN-CODE TRANSLATIONS
    ! Currently...
    Everything in HTML
    " Desired...
    Translation in services
    

    View Slide

23. IN-CODE TRANSLATIONS
    ! Planned with Ivy compiler
    " Work in progress
    # Polyfill already exists
    @ngx-translate/i18n-polyfill
    STATUS
    

    View Slide

24. IN-CODE TRANSLATIONS
    OVERVIEW
    constructor(i18n: I18n) {
    this.message = i18n('Speaking at meetup in {{myVar}} !', {
    myVar: 'Wrocław, Poland'
    });
    

    View Slide

25. WHY
    NOT YET RELASED
    

    View Slide

26. IS IVY READY YET?
    Ninety – ninety rule !
    Alpha-version first
    Last-updated: November 2018
    

    View Slide

27. SPECULATIVE
    FUTURE
    

    View Slide

28. ID GENERATION
    More stable IDs
    Same IDs for all formats
    Migration tool After Ivy
    

    View Slide

29. LAZY LOADING
    Localize single module
    Better library support
    See #14331
    After Ivy
    

    View Slide

30. OPENING THE API
    Allow custom parsers,
    generators and loaders
    → JSON suport
    NOT
    CONFIRMED
    

    View Slide

31. TIPS
    

    View Slide

32. TSLINT RULE
    

    View Slide

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

    View Slide

34. Enable i18n TSLint rule
    
    Angular i18n is cool
    
    !
    

    View Slide

35. Enable i18n TSLint rule
    
    Angular i18n is cool
    
    !
    

    View Slide

36. ENABLE EXTRACTOR
    

    View Slide

37. ENABLE EXTRACTOR
    // package.json
    "scripts": {
    "build": "ng build && ng xi18n"
    },
    

    View Slide

38. NESTED I18N
    
    
    Angular i18n is cool
    
    
    !
    
    
    Angular i18n is cool
    
    
    ...
    
    
    Error: Could not mark an
    element as translatable
    inside a translatable section
    

    View Slide

39. NESTED I18N
    
    
    Angular i18n is cool
    
    
    !
    
    
    Angular i18n is cool
    
    
    ...
    
    
    

    View Slide

40. NESTED I18N
    
    
    Angular i18n is cool
    
    
    !
    
    
    Angular i18n is cool
    
    
    ...
    
    
    

    View Slide

41. DETACHED TEXT
    
    Name
    
    Invalid name
    
    
    

    View Slide

42. DETACHED TEXT
    
    
    Name
    
    
    Invalid name
    
    
    

    View Slide

43. WHY OFFICIAL SOLUTION?
    

    View Slide

44. BUT...
    Use whatever fits you
    

    View Slide

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

    View Slide

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

    View Slide

47. @constjs Piotr Lewandowski
    THANK YOU
    DZIĘKUJĘ
    
    

    View Slide

48. @constjs Piotr Lewandowski
    THANK YOU
    DZIĘKUJĘ
    
    

    View Slide