Angular Wrocław - Internationalisation

Current state and the future

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

Transcript

1. Internationalization Piotr Lewandowski
2. INTERNATIONALIZATION I18N LOCALIZATION L10N
3. Adapting product to region „look and feel” ! Localization " Translator
4. Enables easy localization ! Internationalization " Developer
5. ANGULAR I18N Dates Currencies Numbers Plurals Translations Grammar forms
6. WHY OFFICIAL SOLUTION? ngx-translate deprecated official solution not ready?
7. GOALS Re-use existing standards Process works at scale No rutime overhead
8. <h1 i18n>Hello, {{ name }}!</h1> <img src="avatar.png" i18n-title title="It’s you!" /> <p i18n="UserModule|User Profile"> Last time seen at {{ lastVisited | date }} </p>
9. PLURAL FORMS
10. ICU EXPRESSIONS <p>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}} } }</p> Alicja złapała 5 Pokémonów count = 5
11. XLIFF <trans-unit id="dfd67d0cbc87b3e8b89570c00031a4751cf4b76c" datatype="html"> <source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source> <!-- ... stuff ... --> </trans-unit> <h1 i18n>Hello, {{name}}!</h1>
12. ID GENERATION <h1 i18n="@@topbar.header"> Angular is cool </h1> <h1 i18n> Angular is cool </h1> Custom ID Generated ID hash Content changes = ID changes Never changes
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
14. PAIN POINTS
15. PAIN POINTS
16. MULTIPLE BUNDLES
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
18. MULTIPLE BUNDLES ! On the roadmap since 2.0 " Planned for Ivy compiler # Already in master since June 2018 STATUS
19. DURING COMPILATION... <h2 i18n="User profile@@page.header"> Hello, Gdańsk! </h2> interface I18nDef { value: 'Hello, Gdańsk!'; id?: 'page.header'; meaning?: undefined; description?: 'User profile'; }
20. MULTIPLE BUNDLES PR #24037 205 review comments J OVERVIEW Loading BEFORE Angular bootstraps All locales in ONE bundle Choose: AOT or RunTime
21. IN-CODE TRANSLATIONS
22. IN-CODE TRANSLATIONS ! Currently... Everything in HTML " Desired... Translation in services
23. IN-CODE TRANSLATIONS ! Planned with Ivy compiler " Work in progress # Polyfill already exists @ngx-translate/i18n-polyfill STATUS
24. IN-CODE TRANSLATIONS OVERVIEW constructor(i18n: I18n) { this.message = i18n('Speaking at meetup in {{myVar}} !', { myVar: 'Wrocław, Poland' });
25. WHY NOT YET RELASED
26. IS IVY READY YET? Ninety – ninety rule ! Alpha-version first Last-updated: November 2018
27. SPECULATIVE FUTURE
28. ID GENERATION More stable IDs Same IDs for all formats Migration tool After Ivy
29. LAZY LOADING Localize single module Better library support See #14331 After Ivy
30. OPENING THE API Allow custom parsers, generators and loaders → JSON suport NOT CONFIRMED
31. TIPS
32. TSLINT RULE
33. Enable i18n TSLint rule // tslint.json "i18n": [ true, "check-id", "check-text" ] * Requires codelyzer Optional, depending on your translation strategy
34. Enable i18n TSLint rule <h1> Angular i18n is cool </h1> !
35. Enable i18n TSLint rule <h1 i18n="@@article.header"> Angular i18n is cool </h1> !
36. ENABLE EXTRACTOR
37. ENABLE EXTRACTOR // package.json "scripts": { "build": "ng build && ng xi18n" },
38. NESTED I18N <div> <div> Angular i18n is cool </div> </div> ! <article i18n> <h1 i18n="@@article.header"> Angular i18n is cool </h1> <p> ... </p> </article> Error: Could not mark an element as translatable inside a translatable section
39. NESTED I18N <div> <div> Angular i18n is cool </div> </div> ! <article> <h1 i18n="@@article.header"> Angular i18n is cool </h1> <p i18n="@@article.content"> ... </p> </article>
40. NESTED I18N <div> <div> Angular i18n is cool </div> </div> ! <article i18n="@@article"> <h1> Angular i18n is cool </h1> <p> ... </p> </article>
41. DETACHED TEXT <form-field i18n> Name <error i18n> Invalid name </error> </form-field>
42. DETACHED TEXT <form-field> <ng-container i18n> Name </ng-container> <error i18n> Invalid name </error> </form-field>
43. WHY OFFICIAL SOLUTION?
44. BUT... Use whatever fits you
45. RESOURCES Angular i18n: » Docs » Plans for v6 and v7 General: » On i18n and l10n » i18nGuy - Guidelines
46. TOOLS & EDITORS Localization platforms: » Pootle » Transifex » POEditor » TextUnited Editors & scripts: » Virtaal » tiny ng-translator » ngx-i18nsupport (xliff merge)
47. @constjs Piotr Lewandowski THANK YOU DZIĘKUJĘ
    
    
48. @constjs Piotr Lewandowski THANK YOU DZIĘKUJĘ