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
120
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
61
Angular 9 - Review
piotrl
1
130
Angular i18n - Current state and the future
piotrl
1
440
TypeScript: Must know for Java devs
piotrl
2
200
TypeScript - less known parts
piotrl
1
140
JVM bytecode manipulation
piotrl
0
110
Analysis of music affecting productivity
piotrl
1
51
Get `at least something` done
piotrl
0
41
Data-centric apps: Problems to solve
piotrl
0
48
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
140
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
Jakarta EE Meets AI
ivargrimstad
0
230
Porting a visionOS App to Android XR
akkeylab
0
900
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
680
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
250
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
230
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
250
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
280
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
How to train your dragon (web standard)
notwaldorf
96
6.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Why Our Code Smells
bkeepers
PRO
337
57k
Code Reviewing Like a Champion
maltzj
524
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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Ę