Last Updated: February 25, 2016
·
4.418K
· randym

i18n-js assets for EmberJS or any other Javascript framework.

While playing with the guys at travis-ci, I had the opportunity to look into some different solutions for getting i18n up and working on an EmberJS app. One solution was to generate the i18n assets via rake pipeline web filters and feed that into i18n-js. This solution works with an entirely isolated UI asset repo e.g. No Rails App Required. You can use any backend API you like to feed your front end.

where's the beef?
https://github.com/randym/rake-pipeline-web-filters

Or you can bump the PR to get this into the official repo:
https://github.com/wycats/rake-pipeline-web-filters/pull/38

DETAILS
(or a mini-howto)

In your Gemfile:

gem 'rake-pipeline-web-filters', github: 'randym/rake-pipeline-web-filters'

In your AssetFile:

require 'rake-pipeline-web-filters'

output 'public/javascripts'

input 'locales' do
  match '**/*.yml' do
    ember_i18n :use_i18n_js => true
  end
  concat 'localizations.js'
end

a little bundle exec rakep magic later and localizations for i18n-js are ready to go.

But why not make your life a little bit easier?
A tiny bit of coffee to make yourself a handlebars helper:

Handlebars.registerHelper 't', (key) ->
  safe I18n.t(key)

And you handlebars views only need:

{{ t home.name }}

If you are using Localeapp - http://www.localeapp.com/
(you should be!)
Here is a rake task to pull in all your translations:

desc "update all locale files from localeapp"
    task :update_locales do
      require 'localeapp'
      system 'localeapp pull'
    end
end

So bundle exec rake update_locales and bundle exec rakep kicks out all the assets you need to get a JS front end playing nicely with i18n!

Don't Forget
If you are going to use the i18n-js flavor of JS localization instead of EmberJS's pop fnando's ultra cool 18n-js into your vendor assets!

https://github.com/fnando/i18n-js/blob/master/vendor/assets/javascripts/i18n.js

Alternatively

If you are working with a monolithic rails application, the i18n-js (https://github.com/fnando/i18n-js) gem will suck up all your localizations and spit them out into the asset pipeline.

Another great trick here is to use the following gem to feed any missing translations back to Localeapp so your translators have the full set of keys that require localization.

https://github.com/randym/localeapp-i18n-js

If you have Localeapp configured in your rails app, all you need to do is add:

#/app/assets/javascripts/application.js
//= require localeapp-i18n-js

Questions?

give us a shout: @morgan_randy

Have a fresh tip? Share with Coderwall community!

Post
Post a tip