Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular Wrocław - Internationalisation
Search
Piotr Lewandowski
January 31, 2019
Programming
0
130
Angular Wrocław - Internationalisation
Current state and the future
Video (pl):
https://youtu.be/ArLCFuKVdGk?t=133
Piotr Lewandowski
January 31, 2019
Tweet
Share
More Decks by Piotr Lewandowski
See All by Piotr Lewandowski
Angular testing hygiene
piotrl
0
70
Angular 9 - Review
piotrl
1
140
Angular i18n - Current state and the future
piotrl
1
450
TypeScript: Must know for Java devs
piotrl
2
210
TypeScript - less known parts
piotrl
1
140
JVM bytecode manipulation
piotrl
0
110
Analysis of music affecting productivity
piotrl
1
57
Get `at least something` done
piotrl
0
47
Data-centric apps: Problems to solve
piotrl
0
55
Other Decks in Programming
See All in Programming
AI時代のUIはどこへ行く?
yusukebe
18
9.1k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.8k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Rancher と Terraform
fufuhu
2
550
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
A Tale of Four Properties
chriscoyier
160
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Context Engineering - Making Every Token Count
addyosmani
3
62
Large-scale JavaScript Application Architecture
addyosmani
513
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Transcript
Internationalization Piotr Lewandowski
INTERNATIONALIZATION I18N LOCALIZATION L10N
Adapting product to region „look and feel” ! Localization "
Translator
Enables easy localization ! Internationalization " Developer
ANGULAR I18N Dates Currencies Numbers Plurals Translations Grammar forms
WHY OFFICIAL SOLUTION? ngx-translate deprecated official solution not ready?
GOALS Re-use existing standards Process works at scale No rutime
overhead
<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>
PLURAL FORMS
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
XLIFF <trans-unit id="dfd67d0cbc87b3e8b89570c00031a4751cf4b76c" datatype="html"> <source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source> <!-- ...
stuff ... --> </trans-unit> <h1 i18n>Hello, {{name}}!</h1>
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
PROCESS Mark HTML with i18n attributes Extract messages from HTML
to XLIFF Copy & translate XLIFF Generate new app version for each language Outside Angular
PAIN POINTS
PAIN POINTS
MULTIPLE BUNDLES
MULTIPLE BUNDLES ! Currently... Everything at build time with AOT
Duplicated builds for each locale " Desired... ONE bundle for all locales Translating before application bootstraps
MULTIPLE BUNDLES ! On the roadmap since 2.0 " Planned
for Ivy compiler # Already in master since June 2018 STATUS
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'; }
MULTIPLE BUNDLES PR #24037 205 review comments J OVERVIEW Loading
BEFORE Angular bootstraps All locales in ONE bundle Choose: AOT or RunTime
IN-CODE TRANSLATIONS
IN-CODE TRANSLATIONS ! Currently... Everything in HTML " Desired... Translation
in services
IN-CODE TRANSLATIONS ! Planned with Ivy compiler " Work in
progress # Polyfill already exists @ngx-translate/i18n-polyfill STATUS
IN-CODE TRANSLATIONS OVERVIEW constructor(i18n: I18n) { this.message = i18n('Speaking at
meetup in {{myVar}} !', { myVar: 'Wrocław, Poland' });
WHY NOT YET RELASED
IS IVY READY YET? Ninety – ninety rule ! Alpha-version
first Last-updated: November 2018
SPECULATIVE FUTURE
ID GENERATION More stable IDs Same IDs for all formats
Migration tool After Ivy
LAZY LOADING Localize single module Better library support See #14331
After Ivy
OPENING THE API Allow custom parsers, generators and loaders →
JSON suport NOT CONFIRMED
TIPS
TSLINT RULE
Enable i18n TSLint rule // tslint.json "i18n": [ true, "check-id",
"check-text" ] * Requires codelyzer Optional, depending on your translation strategy
Enable i18n TSLint rule <h1> Angular i18n is cool </h1>
!
Enable i18n TSLint rule <h1 i18n="@@article.header"> Angular i18n is cool
</h1> !
ENABLE EXTRACTOR
ENABLE EXTRACTOR // package.json "scripts": { "build": "ng build &&
ng xi18n" },
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
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>
NESTED I18N <div> <div> Angular i18n is cool </div> </div>
! <article i18n="@@article"> <h1> Angular i18n is cool </h1> <p> ... </p> </article>
DETACHED TEXT <form-field i18n> Name <error i18n> Invalid name </error>
</form-field>
DETACHED TEXT <form-field> <ng-container i18n> Name </ng-container> <error i18n> Invalid
name </error> </form-field>
WHY OFFICIAL SOLUTION?
BUT... Use whatever fits you
RESOURCES Angular i18n: » Docs » Plans for v6 and
v7 General: » On i18n and l10n » i18nGuy - Guidelines
TOOLS & EDITORS Localization platforms: » Pootle » Transifex »
POEditor » TextUnited Editors & scripts: » Virtaal » tiny ng-translator » ngx-i18nsupport (xliff merge)
@constjs Piotr Lewandowski THANK YOU DZIĘKUJĘ
@constjs Piotr Lewandowski THANK YOU DZIĘKUJĘ