How To Translate EmberJS Apps

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.

Wrapping Up

We hope this short introductory guide was helpful to you. To get deeper into the EmberJS framework, make sure to go take a look at the official EmberJS website and the ember-cli-i18n GitHub repo.

If you feel like venturing a bit and exploring what software internationalization can look like in other JavaScript frameworks, feel free to drop by the following tutorials:

• Gatsby i18n: A Hands-on Guide
• The Answers to All Your Questions About Gridsome Localization
• Electron App Tutorial on Internationalization (i18n)

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!