How To Translate EmberJS Apps

Building multilingual EmberJS web apps is super easy. We show you how to do it in this guide. Get started with EmberJS app localization today.

This step-by-step guide will show you how to localize EmberJS apps.

Prerequisites

Create a new, blank EmberJS application:

ember new demoapp

Switch to the newly created demo app directory and install the i18n add-on:

npm install ember-cli-i18n --save-dev

Next, create two language files, Englisch (en) and German (de):

ember generate locale en
ember generate locale de

Language Files

Language files (locales) hold all translatable strings that are used in your application code and templates. The format is simple:

// app/locales/en.js
export default {
  "greeting": "Hello User",
  "task-create": "Create new task",
  "task-delete": "Delete task",
  "task-open": "You have open tasks"
};

Strings can also be grouped:

// app/locales/en.js
export default {
  greeting: "Hello User",
  "task": {
    "create": "Create new task",
    "fail": "Delete task",
    "open": "You have open tasks"
  }
};

You can use Placeholders…

// app/locales/en.js
export default {
  "greeting": "Hello %@",
  "task": {
    "create": "Create new task",
    "fail": "Delete task",
    "open": "You have %@ open tasks"
  }
};

… and Pluralization (CLDR pluralization format):

// app/locales/en.js
export default {
  "greeting": "Hello %@",
  "task": {
    "create": "Create new task"
    "fail": "Delete task"
    "open": {
      "zero": "Nothing to do",
      "one": "One open task",
      "other": "You have %@ open tasks"
    }
  }
};

Using Language Files

Set a default language that is used as a fallback in config/enviroment.js:

// config/enviroment.js
var ENV = {
  APP: {
    // ...
    defaultLocale: 'en',
  }
};

And in your main app/app.js, set the current locale to be used:

// app/app.js
var App = Ember.Application.extend({
  // ...
  locale: 'de'
});

In your templates and app code you can use the ‘t’ helper function (‘t’ for translate) for loading strings from the current locale. The t function is available in all templates, controllers, components, routes, and models.

You can load translated strings into your templates:

<h1>{{t 'greeting'}}</h1>
<h2>{{t 'task.create'}}</h2>
<h2>{{t 'task.delete'}}</h2>

Or in your code:

alert(this.t('task.open', 42));

Managing Translations

Working with the .js language files can be tricky and translating strings in a text editor also isn’t a very convenient workflow.

Phrase is a translation management tool that addresses some of these issues. It features a powerful In-Context Editor (Demo), making the process of translating web apps more convenient. Integrating the Phrase In-Context Editor in your EmberJS apps is easy.

Install the Phrase add-on:

npm install ember-cli-phraseapp --save-dev

Add some Phrase configuration to your app/app.js:

// app/app.js
var ENV = {
  APP: {
    // ...
    defaultLocale: 'en',
    locale: 'de',
    phraseEnabled: true,
    phrasePrefix: '{{__',
    phraseSuffix: '__}}'
  }
};

Then include the JavaScript snippet into your templates:

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "YOUR-PROJECT-ID"
    };
    (function() {
        var phraseapp = document.createElement('script'); phraseapp.type = 'text/javascript'; phraseapp.async = true;
        phraseapp.src = ['https://', 'phraseapp.com/assets/in-context-editor/2.0/app.js?', new Date().getTime()].join('');
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phraseapp, s);
    })();
</script>

You can find your Project-ID in the Phrase Translation Center.

ember-cli-phraseapp acts as a replacement for ember-cli-i18n. When phraseEnabled is set to true, string keys are exposed to the to the In-Context-Editor.

Further Reading

Be sure to subscribe and receive all updates from the Phrase blog straight to your inbox. You’ll receive localization best practices, about cultural aspects of breaking into new markets, guides and tutorials for optimizing software translation and other industry insights and information. Don’t miss out!

4.8 (96.67%) 6 votes
Comments
close

Untangle Continuous Localization With Ease

Get your own FREE EBOOK copy now to explore

  • advanced automation workflows
  • rapid release cycles,
  • simultaneous translation and delivery,
  • new ways of testing your localized product