Ember, Localization, and You

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Ember, Localization and You A guide to love, loss, and localization.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Doesn’t need to be translated user input, straight-up numbers, etc - 33 posts Dynamic, pluralized strings strings with dynamic content that effects pluralization

Slide 11

Slide 11 text

Doesn’t need to be translated user input, straight-up numbers, etc

Slide 12

Slide 12 text

Class Discussion

Slide 13

Slide 13 text

Class Discussion Ϋϥε σΟεΧογϣϯ

Slide 14

Slide 14 text

Class Discussion Discussion de classe

Slide 15

Slide 15 text

Class Discussion Klassdiskussion

Slide 16

Slide 16 text

How?

Slide 17

Slide 17 text

How?

Slide 18

Slide 18 text

ember-i18n ember-intl ember-l10n

Slide 19

Slide 19 text

ember-i18n ember-intl ember-l10n

Slide 20

Slide 20 text

cd foobar-app/ ember install ember-i18n

Slide 21

Slide 21 text

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’}}

Slide 22

Slide 22 text

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’}}

Slide 23

Slide 23 text

ember generate locale en

Slide 24

Slide 24 text

app/locales/ app/locales/en/ app/locales/en/translations.js app/locales/en/config.js

Slide 25

Slide 25 text

app/locales/en/config.js app/locales/en/ app/locales/ app/locales/en/translations.js

Slide 26

Slide 26 text

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}}" };

Slide 27

Slide 27 text

Static strings? no due date Class Discussion Home Groups Students

Slide 28

Slide 28 text

app/locales/en/translations.js export default { "Class Discussion": "Class Discussion", "no due date": "no due date", "Home": "Home", "Groups": "Groups", "Students": "Students" };

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Dynamic strings? Due February 24 Hello, Jobber!

Slide 31

Slide 31 text

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}}" };

Slide 32

Slide 32 text

some template ... {{t ‘Due {{date}}’ date=date}} Due February 24 {{! -- pretend ‘date’ is ‘February 24’ --}}

Slide 33

Slide 33 text

Pluralized, dynamic strings? 27 students 1 post 12 files

Slide 34

Slide 34 text

1 post

Slide 35

Slide 35 text

1 post 27 posts

Slide 36

Slide 36 text

1 post 27 posts one (1) other (2, 10, 20) count

Slide 37

Slide 37 text

app/locales/en/translations.js export default { // ... "{{count}} posts": { "one": "one post", "other": "{{count}} posts" } };

Slide 38

Slide 38 text

some template ... {{t ‘{{count}} posts’ count=10}} 10 posts {{t ‘{{count}} posts’ count=1}} one post {{t ‘{{count}} posts’ count=0}} 0 posts

Slide 39

Slide 39 text

some template ... {{t ‘{{count}} posts’ count=10}} 10 posts {{t ‘{{count}} posts’ count=1}} one post {{t ‘{{count}} posts’ count=0}} 0 posts

Slide 40

Slide 40 text

✅ Static strings ✅ Dynamic strings ✅ Static, pluralized strings ❗ Set up default locale

Slide 41

Slide 41 text

config/environment.js module.exports = function(environment) { var ENV = { // ... i18n: { defaultLocale: 'en' } }; // ... };

Slide 42

Slide 42 text

✅ Setting up templates to use t helper ✅ Deﬁning base strings ✅ Setting up ember-i18n’s default locale ❗Deﬁning the other locales

Slide 43

Slide 43 text

ember generate locale fr

Slide 44

Slide 44 text

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" } };

Slide 45

Slide 45 text

Switch the user to another locale? i18n service! Ember.inject.service(‘i18n’)

Slide 46

Slide 46 text

app/components/locale-switcher/component.js export default Ember.Component.extend({ i18n: inject.service(), // ... localeChanged(newLocale) { set(this, 'i18n.locale', newLocale); }) });

Slide 47

Slide 47 text

So that’s the bulk of it.

Slide 48

Slide 48 text

✅ Deﬁned translations ✅ Used in templates ✅ Change locale on the ﬂy

Slide 49

Slide 49 text

❗But there are a ton of gotchas.

Slide 50

Slide 50 text

Due {{date}} February 24 ✅ tomorrow? ✅

Slide 51

Slide 51 text

Inlämningsdatum {{date}} February 24? tomorrow?

Slide 52

Slide 52 text

computed(function() { return ‘some string’; }) Salut, {{name}} ! Welcome, {{name}}!

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Right-to-left languages???? Non-English numbers? Date formats?

Slide 58

Slide 58 text

Lesson one. Localization is hard.

Slide 59

Slide 59 text

Lesson one. Localization is hard way more complicated than you expect it to be.

Slide 60

Slide 60 text

Lesson two. Do your localization from the start. (Or at least as early as possible.)

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

Lesson three. Don’t reinvent the wheel. Please.

Slide 63

Slide 63 text

Some tips!

Slide 64

Slide 64 text

1. Use Moment.js for date formatting. (And everything else when it comes to dates. It’s so so so good.

Slide 65

Slide 65 text

2. Don’t concatenate or compose translated strings. Concatenation loses context, which’ll just frustrate users. 42 students submitted homework

Slide 66

Slide 66 text

2. Don’t concatenate or compose translated strings. Concatenation loses context, which’ll just frustrate users. 42 homework students submitted