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
Ember, Localization, and You
Search
Colby Ludwig
February 21, 2017
Technology
0
47
Ember, Localization, and You
A guide to love, loss, and localization in Ember.
Presented at a Jobber<>Showbie meetup.
Colby Ludwig
February 21, 2017
Tweet
Share
More Decks by Colby Ludwig
See All by Colby Ludwig
Front-end Testing
cdl
7
280
Putting Mobile First
cdl
4
150
Other Decks in Technology
See All in Technology
N=1から解き明かすAWS ソリューションアーキテクトの魅力
kiiwami
0
120
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
180
Classmethod AI Talks(CATs) #16 司会進行スライド(2025.02.12) / classmethod-ai-talks-aka-cats_moderator-slides_vol16_2025-02-12
shinyaa31
0
100
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
360
Building Products in the LLM Era
ymatsuwitter
10
5.3k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
Culture Deck
optfit
0
410
クラウドサービス事業者におけるOSS
tagomoris
0
210
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
5
600
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.7k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
3
1.2k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Optimizing for Happiness
mojombo
376
70k
Automating Front-end Workflow
addyosmani
1368
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
KATA
mclloyd
29
14k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Transcript
None
Ember, Localization and You A guide to love, loss, and
localization.
None
None
None
Static strings Dynamic strings strings with dynamic content Dynamic, pluralized
strings strings with dynamic content that effects pluralization Doesn’t need to be translated user input, variable data, etc
Static strings Dynamic strings strings with dynamic content Dynamic, pluralized
strings strings with dynamic content that effects pluralization Doesn’t need to be translated user input, straight-up numbers, etc - Class Discussion - no due date - Home - Groups - Students
Dynamic, pluralized strings strings with dynamic content that effects pluralization
Doesn’t need to be translated user input, straight-up numbers, etc - Due February 24 at 4:00PM Dynamic strings strings with dynamic content
Dynamic, pluralized strings strings with dynamic content that effects pluralization
Doesn’t need to be translated user input, straight-up numbers, etc - Due February 24 at 4:00PM Dynamic strings strings with dynamic content
Doesn’t need to be translated user input, straight-up numbers, etc
- 33 posts Dynamic, pluralized strings strings with dynamic content that effects pluralization
Doesn’t need to be translated user input, straight-up numbers, etc
Class Discussion
Class Discussion Ϋϥε σΟεΧογϣϯ
Class Discussion Discussion de classe
Class Discussion Klassdiskussion
How?
How?
ember-i18n ember-intl ember-l10n
ember-i18n ember-intl ember-l10n
cd foobar-app/ ember install ember-i18n
ember-i18n adds a few things… A locale generator ember generate
locale en An i18n service Ember.inject.service(‘i18n’) A {{t}} helper {{t ‘foobar’}}
ember-i18n adds a few things… A locale generator ember generate
locale en An i18n service Ember.inject.service(‘i18n’) A {{t}} helper {{t ‘foobar’}}
ember generate locale en
app/locales/ app/locales/en/ app/locales/en/translations.js app/locales/en/config.js
app/locales/en/config.js app/locales/en/ app/locales/ app/locales/en/translations.js
app/locales/en/translations.js export default { // "some.translation.key": "Text for some.translation.key", //
// "a": { // "nested": { // "key": "Text for a.nested.key" // } // }, // // "key.with.interpolation": "Text with {{anInterpolation}}" };
Static strings? no due date Class Discussion Home Groups Students
app/locales/en/translations.js export default { "Class Discussion": "Class Discussion", "no due
date": "no due date", "Home": "Home", "Groups": "Groups", "Students": "Students" };
some template ... {{#link-to ‘classes.show.discussion’ class}} {{t ‘Class Discussion’}} {{/link-to}}
{{#unless assignment.hasDueDate}} {{t ‘no due date’}} {{/unless}} no due date Class Discussion
Dynamic strings? Due February 24 Hello, Jobber!
app/locales/en/translations.js export default { "Class Discussion": "Class Discussion", "no due
date": "no due date", "Home": "Home", "Groups": "Groups", "Students": “Students”, "Due {{date}}": "Due {{date}}" };
some template ... {{t ‘Due {{date}}’ date=date}} Due February 24
{{! -- pretend ‘date’ is ‘February 24’ --}}
Pluralized, dynamic strings? 27 students 1 post 12 files
1 post
1 post 27 posts
1 post 27 posts one (1) other (2, 10, 20)
count
app/locales/en/translations.js export default { // ... "{{count}} posts": { "one":
"one post", "other": "{{count}} posts" } };
some template ... {{t ‘{{count}} posts’ count=10}} 10 posts {{t
‘{{count}} posts’ count=1}} one post {{t ‘{{count}} posts’ count=0}} 0 posts
some template ... {{t ‘{{count}} posts’ count=10}} 10 posts {{t
‘{{count}} posts’ count=1}} one post {{t ‘{{count}} posts’ count=0}} 0 posts
✅ Static strings ✅ Dynamic strings ✅ Static, pluralized strings
❗ Set up default locale
config/environment.js module.exports = function(environment) { var ENV = { //
... i18n: { defaultLocale: 'en' } }; // ... };
✅ Setting up templates to use t helper ✅ Defining
base strings ✅ Setting up ember-i18n’s default locale ❗Defining the other locales
ember generate locale fr
app/locales/fr/translations.js export default { "Class Discussion": "Discussion de classe", "no
due date": "aucune échéance", "Home": "Accueil", "Groups": "Groupes", "Students": "Élèves", "Due {{date}}": "Dû le {{date}}", "{{count}} posts": { "one": "{{count}} publication", "other": "{{count}} publications" } };
Switch the user to another locale? i18n service! Ember.inject.service(‘i18n’)
app/components/locale-switcher/component.js export default Ember.Component.extend({ i18n: inject.service(), // ... localeChanged(newLocale) {
set(this, 'i18n.locale', newLocale); }) });
So that’s the bulk of it.
✅ Defined translations ✅ Used in templates ✅ Change locale
on the fly
❗But there are a ton of gotchas.
Due {{date}} February 24 ✅ tomorrow? ✅
Inlämningsdatum {{date}} February 24? tomorrow?
computed(function() { return ‘some string’; }) Salut, {{name}} ! Welcome,
<span {{action ‘foo’}}>{{name}}! </span>
None
None
None
None
Right-to-left languages???? Non-English numbers? Date formats?
Lesson one. Localization is hard.
Lesson one. Localization is hard way more complicated than you
expect it to be.
Lesson two. Do your localization from the start. (Or at
least as early as possible.)
None
Lesson three. Don’t reinvent the wheel. Please.
Some tips!
1. Use Moment.js for date formatting. (And everything else when
it comes to dates. It’s so so so good.
2. Don’t concatenate or compose translated strings. Concatenation loses context,
which’ll just frustrate users. 42 students submitted homework
2. Don’t concatenate or compose translated strings. Concatenation loses context,
which’ll just frustrate users. 42 homework students submitted
3. Use a translation service to manage strings! There are
so many out there.
Questions?