Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Wrocław - Internationalisation

Angular Wrocław - Internationalisation

Current state and the future

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

Piotr Lewandowski

January 31, 2019
Tweet

More Decks by Piotr Lewandowski

Other Decks in Programming

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