Slide 1

Slide 1 text

Internationalization Piotr Lewandowski

Slide 2

Slide 2 text

INTERNATIONALIZATION I18N LOCALIZATION L10N

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Enables easy localization ! Internationalization " Developer

Slide 5

Slide 5 text

ANGULAR I18N Dates Currencies Numbers Plurals Translations Grammar forms

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Hello, {{ name }}!

Last time seen at {{ lastVisited | date }}

Slide 9

Slide 9 text

PLURAL FORMS

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

XLIFF Hello, !

Hello, {{name}}!

Slide 12

Slide 12 text

ID GENERATION

Angular is cool

Custom ID Generated ID hash Content changes = ID changes Never changes

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

PAIN POINTS

Slide 15

Slide 15 text

PAIN POINTS

Slide 16

Slide 16 text

MULTIPLE BUNDLES

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

DURING COMPILATION...

Hello, Gdańsk!

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

IN-CODE TRANSLATIONS

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

WHY NOT YET RELASED

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

SPECULATIVE FUTURE

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

TIPS

Slide 32

Slide 32 text

TSLINT RULE

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Enable i18n TSLint rule

Angular i18n is cool

Slide 35

Slide 35 text

Enable i18n TSLint rule

Angular i18n is cool

Slide 36

Slide 36 text

ENABLE EXTRACTOR

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

NESTED I18N

Angular i18n is cool

...

Error: Could not mark an element as translatable inside a translatable section

Slide 39

Slide 39 text

NESTED I18N

Angular i18n is cool

...

Slide 40

Slide 40 text

NESTED I18N

Angular i18n is cool

...

Slide 41

Slide 41 text

DETACHED TEXT Name Invalid name

Slide 42

Slide 42 text

DETACHED TEXT Name Invalid name

Slide 43

Slide 43 text

WHY OFFICIAL SOLUTION?

Slide 44

Slide 44 text

BUT... Use whatever fits you

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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