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
69
Angular 9 - Review
piotrl
1
130
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
56
Get `at least something` done
piotrl
0
46
Data-centric apps: Problems to solve
piotrl
0
54
Other Decks in Programming
See All in Programming
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.5k
Rancher と Terraform
fufuhu
2
170
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
3
320
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
1
270
為你自己學 Python - 冷知識篇
eddie
1
310
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
630
複雑なドメインに挑む.pdf
yukisakai1225
4
850
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
140
MLH State of the League: 2026 Season
theycallmeswift
0
210
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
A Modern Web Designer's Workflow
chriscoyier
696
190k
RailsConf 2023
tenderlove
30
1.2k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
KATA
mclloyd
32
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Being A Developer After 40
akosma
90
590k
Embracing the Ebb and Flow
colly
87
4.8k
Building Applications with DynamoDB
mza
96
6.6k
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Ę