Ember, Localization, and You

A guide to love, loss, and localization in Ember.

Presented at a Jobber<>Showbie meetup.

Transcript

2. Ember, Localization and You A guide to love, loss, and localization.
6. 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
7. 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
8. 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
9. 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
10. Doesn’t need to be translated user input, straight-up numbers, etc - 33 posts Dynamic, pluralized strings strings with dynamic content that effects pluralization
11. Doesn’t need to be translated user input, straight-up numbers, etc
12. Class Discussion
13. Class Discussion Ϋϥε σΟεΧογϣϯ
14. Class Discussion Discussion de classe
15. Class Discussion Klassdiskussion
16. How?
17. How?
18. ember-i18n ember-intl ember-l10n
19. ember-i18n ember-intl ember-l10n
20. cd foobar-app/ ember install ember-i18n
21. 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’}}
22. 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’}}
23. ember generate locale en
24. app/locales/ app/locales/en/ app/locales/en/translations.js app/locales/en/config.js
25. app/locales/en/config.js app/locales/en/ app/locales/ app/locales/en/translations.js
26. 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}}" };
27. Static strings? no due date Class Discussion Home Groups Students
28. app/locales/en/translations.js export default { "Class Discussion": "Class Discussion", "no due date": "no due date", "Home": "Home", "Groups": "Groups", "Students": "Students" };
29. 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
30. Dynamic strings? Due February 24 Hello, Jobber!
31. 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}}" };
32. some template ... {{t ‘Due {{date}}’ date=date}} Due February 24 {{! -- pretend ‘date’ is ‘February 24’ --}}
33. Pluralized, dynamic strings? 27 students 1 post 12 files
34. 1 post
35. 1 post 27 posts
36. 1 post 27 posts one (1) other (2, 10, 20) count
37. app/locales/en/translations.js export default { // ... "{{count}} posts": { "one": "one post", "other": "{{count}} posts" } };
38. some template ... {{t ‘{{count}} posts’ count=10}} 10 posts {{t ‘{{count}} posts’ count=1}} one post {{t ‘{{count}} posts’ count=0}} 0 posts
39. some template ... {{t ‘{{count}} posts’ count=10}} 10 posts {{t ‘{{count}} posts’ count=1}} one post {{t ‘{{count}} posts’ count=0}} 0 posts
40. ✅ Static strings ✅ Dynamic strings ✅ Static, pluralized strings ❗ Set up default locale
41. config/environment.js module.exports = function(environment) { var ENV = { // ... i18n: { defaultLocale: 'en' } }; // ... };
42. ✅ Setting up templates to use t helper ✅ Defining base strings ✅ Setting up ember-i18n’s default locale ❗Defining the other locales
43. ember generate locale fr
44. 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" } };
45. Switch the user to another locale? i18n service! Ember.inject.service(‘i18n’)
46. app/components/locale-switcher/component.js export default Ember.Component.extend({ i18n: inject.service(), // ... localeChanged(newLocale) { set(this, 'i18n.locale', newLocale); }) });
47. So that’s the bulk of it.
48. ✅ Defined translations ✅ Used in templates ✅ Change locale on the fly
49. ❗But there are a ton of gotchas.
50. Due {{date}} February 24 ✅ tomorrow? ✅
51. Inlämningsdatum {{date}} February 24? tomorrow?
52. computed(function() { return ‘some string’; }) Salut, {{name}} ! Welcome, <span {{action ‘foo’}}>{{name}}! </span>
57. Right-to-left languages???? Non-English numbers? Date formats?
58. Lesson one. Localization is hard.
59. Lesson one. Localization is hard way more complicated than you expect it to be.
60. Lesson two. Do your localization from the start. (Or at least as early as possible.)
62. Lesson three. Don’t reinvent the wheel. Please.
63. Some tips!
64. 1. Use Moment.js for date formatting. (And everything else when it comes to dates. It’s so so so good.
65. 2. Don’t concatenate or compose translated strings. Concatenation loses context, which’ll just frustrate users. 42 students submitted homework
66. 2. Don’t concatenate or compose translated strings. Concatenation loses context, which’ll just frustrate users. 42 homework students submitted
67. 3. Use a translation service to manage strings! There are so many out there.
68. Questions?